Put more info on homepage, add about, move theme data to themes page,…

… lots of styles
siakaramalegos · Sep 17, 2024 · 4c8a17f · 4c8a17f
1 parent daaca58
commit 4c8a17f
Show file tree

Hide file tree

Showing 17 changed files with 469 additions and 202 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -15,7 +15,7 @@ module.exports = function(eleventyConfig) {
 
   eleventyConfig.setDataDeepMerge(true);
   eleventyConfig.addPassthroughCopy("src/img");
-  // eleventyConfig.addPassthroughCopy("src/fonts");
+  eleventyConfig.addPassthroughCopy("src/fonts");
   // eleventyConfig.addPassthroughCopy("src/javascript");
   // eleventyConfig.addPassthroughCopy("src/robots.txt");
   // eleventyConfig.addPassthroughCopy("_redirects");

diff --git a/src/_11ty/shortcodes.js b/src/_11ty/shortcodes.js
@@ -1,3 +1,77 @@
+const CLOUDNAME = "siacodes"
+const FOLDER = "v1726601364/themevitals/"
+const BASE_URL = `https://res.cloudinary.com/${CLOUDNAME}/image/upload/`;
+const FALLBACK_WIDTHS = [ 600, 928, 1856 ];
+const FALLBACK_WIDTH = 680;
+
+// Social share image configuration
+const SHARE_IMAGE_FILE = "twitter_tmpl.jpg"
+// If font not in the root of your Cloudinary media library, need to prepend with `foldername:`
+const TITLE_FONT = "RecursiveSansExtraBold.woff2"
+const TITLE_FONT_SIZE = "60"
+const TITLE_BOTTOM_OFFSET = 306
+const TAGLINE_FONT = "RecursiveSansRegular.woff2"
+const TAGLINE_FONT_SIZE = "36"
+const TAGLINE_TOP_OFFSET = 356
+const TAGLINE_LINE_HEIGHT = "10"
+const TEXT_AREA_WIDTH = "705"
+const TEXT_LEFT_OFFSET = 455
+const TEXT_COLOR = "221f2c"
+
+function getSrcset(file, widths) {
+  const widthSet = widths ? widths : FALLBACK_WIDTHS
+  return widthSet.map(width => {
+    return `${getSrc(file, width)} ${width}w`;
+  }).join(", ")
+}
+
+function getSrc(file, width) {
+  return `${BASE_URL}q_auto,f_auto,w_${width ? width : FALLBACK_WIDTH}/${FOLDER}${file}`
+}
+
+function fullSizeCrop(file, aspectRatio) {
+  return `${BASE_URL}q_auto,ar_${aspectRatio},c_crop/${FOLDER}${file}`
+}
+
+// https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-
+function cloudinarySafeText(text) {
+  return encodeURIComponent(text).replace(/(%2C)/g, '%252C').replace(/(%2F)/g, '%252F')
+}
+
+function socialImageUrl(title, description) {
+  const width = "1280"
+  const height = "640"
+  const imageConfig = [
+    `w_${width}`,
+    `h_${height}`,
+    "q_auto:best",
+    "c_fill",
+    "f_jpg",
+  ].join(",")
+
+  const titleConfig = [
+    `w_${TEXT_AREA_WIDTH}`,
+    'c_fit',
+    `co_rgb:${TEXT_COLOR}`,
+    'g_south_west',
+    `x_${TEXT_LEFT_OFFSET}`,
+    `y_${TITLE_BOTTOM_OFFSET}`,
+    `l_text:${TITLE_FONT}_${TITLE_FONT_SIZE}:${cloudinarySafeText(title)}`,
+  ].join(",")
+
+  const taglineConfig = [
+    `w_${TEXT_AREA_WIDTH}`,
+    'c_fit',
+    `co_rgb:${TEXT_COLOR}`,
+    'g_north_west',
+    `x_${TEXT_LEFT_OFFSET}`,
+    `y_${TAGLINE_TOP_OFFSET}`,
+    `l_text:${TAGLINE_FONT}_${TAGLINE_FONT_SIZE}_line_spacing_${TAGLINE_LINE_HEIGHT}:${cloudinarySafeText(description)}`,
+  ].join(',');
+
+  return `${BASE_URL}${imageConfig}/${titleConfig}/${taglineConfig}/${FOLDER}${SHARE_IMAGE_FILE}`
+}
+
 module.exports = {
   copyright: () => {
     const establishedYear = 2024
@@ -9,4 +83,8 @@ module.exports = {
       return `${currentYear}`
     }
   },
+  srcset: (file, widths) => getSrcset(file, widths),
+  src: (file, width) => getSrc(file, width),
+  // socialImage: (title, description) => socialImageUrl(title, description),
+  defaultSizes: () => "(min-width: 980px) 928px, calc(95.15vw + 15px)",
 }
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Shopify Theme Vitals</title>
-  <meta name="description" content="Explore real-world Core Web Vitals performance data for popular Shopify themes.">
+  {% set renderTitle = title or "Shopify Theme Vitals" %}
+  {% set renderDescription = description or "Explore real-world Core Web Vitals performance data for popular Shopify themes." %}
+  <title>{{ renderTitle }}</title>
+  <meta name="description" content="{{ renderDescription }}">
   {% set css %}
     {% include "style.css" %}
   {% endset %}
@@ -27,6 +29,7 @@
 
     gtag('config', 'G-2B1ZGCEKGL');
   </script>
+  <link rel="preload" href="/fonts/titillium-web-v17-latin-700.woff2" as="font" type="font/woff2" crossorigin importance="high">
 </head>
 <body>
   <header class="content">
@@ -36,10 +39,11 @@
         <li><a aria-current="{% if page.url == '/themes/' %}page{% else %}false{% endif %}" href="/themes">All themes</a></li>
         <li><a aria-current="{% if page.url == '/about/' %}page{% else %}false{% endif %}" href="/about">About</a></li>
         <li><a aria-current="{% if page.url == '/faq/' %}page{% else %}false{% endif %}" href="/faq">FAQ</a></li>
+        <li><a aria-current="{% if page.url == '/support/' %}page{% else %}false{% endif %}" href="/support">Support</a></li>
       </ul>
     </nav>
   </header>
-  <main class="flow">
+  <main>
     {{ content | safe }}
   </main>
   <footer class="banner">

diff --git a/src/_includes/cta.njk b/src/_includes/cta.njk
@@ -0,0 +1,6 @@
+<section class="content">
+  <div class="cta max-ch flow">
+    <p>Struggling to achieve good on all your Core Web Vitals?</p>
+    <a href="https://sia.codes/contact/" class="button">Get assistance</a>
+  </div>
+</section>
diff --git a/src/_includes/style.css b/src/_includes/style.css
@@ -13,6 +13,7 @@
   --light-red-munsell: #f7dbe2;
   --charcoal: #194238;
   --charcoal-rgb-text: 25, 66, 56;
+  --med-grey: #687d78;
   --light-grey: #e8eced;
   --white: #fff;
   --blue: #076881;
@@ -25,7 +26,7 @@
   --jonquil: hsla(49, 100%, 50%, 1);
   --persimmon: hsla(18, 86%, 54%, 1);
 
-  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
+  --font-display: 'Titillium Web', 'Adjusted Arial Fallback', Arial, Helvetica, sans-serif;
   --font-body: Arial, Helvetica, sans-serif;
 
   --size-100: 0.5rem;
@@ -40,6 +41,32 @@
   --size-1000: 2.986rem;
 }
 
+/* titillium-web-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* titillium-web-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+@font-face {
+  font-family: 'Adjusted Arial Fallback';
+  src: local(Arial);
+  size-adjust: 95%;
+  ascent-override: normal;
+  descent-override: normal;
+  line-gap-override: 55%;
+}
+
 /* Reset */
 *,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{width:100%;height:auto;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
 
@@ -68,15 +95,17 @@ body {
   margin: 0 auto;
   padding: 16px;
 }
-
 h1, h2, h3, h4, h5, h6 {
   color: var(--blue);
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.3;
 }
 h1 {font-size: clamp(var(--size-900), 5vw, 4rem)}
-h2 {font-size: var(--size-700);}
+h2 {
+  font-size: var(--size-700);
+  text-transform: uppercase;
+}
 h3 {
   color: var(--charcoal);
   font-size: var(--size-600);
@@ -86,20 +115,27 @@ p.lead {font-size: var(--size-500);}
 small {font-size: var(--size-300);}
 .flow > * + * { margin-top: var(--flow-space, 1em);}
 .text-right {text-align: right;}
+.text-center {text-align: center;}
+.max-ch {max-width: 67ch;}
+.content-center {margin: 0 auto;}
 
 a.button {
   background-color: var(--blue);
   border: none;
   box-shadow: 0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12);
   color: var(--white);
   cursor: pointer;
+  display: inline-block;
+  font-family: var(--font-display);
+  font-size: var(--size-400);
+  font-weight: 700;
+  font-style: normal;
   margin-bottom: var(--size-600);
   padding: 8px 16px;
   text-decoration: none;
 }
 a {
   border-block-end: 2px solid var(--med-sea-green);
-  /* border-block-end: 2px solid var(--med-lt-blue); */
   color: var(--blue);
   text-decoration: none;
 }
@@ -118,6 +154,28 @@ a {
   padding: 2px 4px;
   text-transform: uppercase;
 }
+section {
+  padding-top: 32px;
+  padding-bottom: 32px;
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+main > section:first-of-type {
+  margin-top: 0;
+}
+.image-with-text {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 32px;
+}
+.image-with-text.align-top {
+  align-items: flex-start;
+}
+.image-with-text img {
+  width: 300px;
+  height: auto;
+}
 .banner-light {
   background-color: var(--light-grey);
   padding: 32px 0;
@@ -127,12 +185,32 @@ a {
   color: var(--white);
   padding: 32px 0;
 }
-.banner h1 {
+.banner h1, .banner h2, .banner h3 {
   color: var(--white);
 }
 .banner a {
   color: var(--light-sea-green);
 }
+.banner-inset {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  padding: 32px;
+}
+.cta {
+  border: 1px solid var(--med-lt-blue);
+  border-left: none;
+  border-right: none;
+  margin: 0 auto;
+  padding: 32px 0;
+  text-align: center;
+}
+.cta p {
+  font-size: var(--size-700);
+  font-style: italic;
+}
+.cta .button {
+  margin-bottom: 0;
+}
 .icon-text {
   display: flex;
   align-items: center;
@@ -193,11 +271,21 @@ details div > * + * { margin-top: var(--flow-space, 1em);}
   display: flex;
   flex-direction: column;
 }
+
+.how-grid {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 32px;
+  margin: 32px 0;
+}
+
+/* Themes table */
 table {
   table-layout: fixed;
   border-collapse: collapse;
   border-style: hidden;
   box-shadow: 0 0 0 .1rem rgba(var(--charcoal-rgb-text), .2);
+  margin-top: 32px;
 }
 thead:first-of-type tr {
   position: sticky;
@@ -273,7 +361,8 @@ button.client-switch {
   box-shadow: 0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12);
   color: var(--charcoal);
   cursor: pointer;
-  margin-bottom: var(--size-600);
+  font-family: var(--font-display);
+  font-weight: 700;
   padding: 4px 8px;
 }
 button.client-switch[aria-checked="true"] {

diff --git a/src/about.njk b/src/about.njk
@@ -1,9 +1,18 @@
 ---
 layout: base.njk
+title: About | Theme Vitals
+description: Learn about the mission of Theme Vitals, the data that powers it, and the developer who created it.
 ---
 
-<div class="content flow">
-  <h1>About</h1>
+<section class="banner">
+  <div class="content flow">
+    <h1>About</h1>
+    <p class="lead">Learn about the creator and why this site was built.</p>
+  </div>
+</section>
+
+<section class="content flow">
+  <h2>Mission</h2>
   <p>This site was built to better inform Shopify merchants and theme developers about theme performance. The goals are:</p>
   <ul>
     <li>Provide <strong>theme developers</strong> with aggregated shop data so that they can understand how their theme is currently performing and which metrics need the most work.</li>
@@ -26,4 +35,4 @@ layout: base.njk
 
   <h2>Privacy</h2>
   <p>This site uses Google Analytics, which uses cookies and similar technologies to collect and analyze information about the use of the website (e.g., page views) and report on activities and trends. This service may also collect information regarding the use of other websites, apps, and online services. You can learn about Google's practices by going to <a href="https://policies.google.com/privacy/google-partners">policies.google.com/privacy/google-partners</a>, and opt out of them by downloading the Google Analytics opt-out browser add-on, available at <a href="https://tools.google.com/dlpage/gaoptout">tools.google.com/dlpage/gaoptout</a>. For any questions or issues, please contact Sia Karamalegos on her <a href="https://sia.codes/contact/">contact page</a>.</p>
-</div>
+</section>
diff --git a/src/faq.njk b/src/faq.njk
@@ -1,10 +1,16 @@
 ---
 layout: base.njk
+title: FAQ | Theme Vitals
+description: Frequently asked questions about the Theme Vitals project.
 ---
 
-<div class="content flow">
-  <h1>Frequently Asked Questions</h1>
+<section class="banner">
+  <div class="content flow">
+    <h1>Frequently Asked Questions</h1>
+  </div>
+</section>
 
+<section class="content flow">
   <div class="faq-container">
     <!-- <details>
       <summary></summary>
@@ -51,4 +57,4 @@ layout: base.njk
       </div>
     </details>
   </div>
-</div>
+</section>
diff --git a/src/fonts/titillium-web-v17-latin-700.woff2 b/src/fonts/titillium-web-v17-latin-700.woff2
diff --git a/src/fonts/titillium-web-v17-latin-regular.woff2 b/src/fonts/titillium-web-v17-latin-regular.woff2
diff --git a/src/img/circle-dollar-to-slot-solid.svg b/src/img/circle-dollar-to-slot-solid.svg
diff --git a/src/img/github-brands-solid.svg b/src/img/github-brands-solid.svg
diff --git a/src/img/laptop-code-solid.svg b/src/img/laptop-code-solid.svg
diff --git a/src/img/store-solid.svg b/src/img/store-solid.svg