Update docs OG images

_config.ts

@@ -50,11 +50,7 @@ const site = lume(
       page404: "/404/",
     },
     watcher: {
-      ignore: [
-        "/.git",
-        "/.github",
-        "/.vscode",
-      ],
+      ignore: ["/.git", "/.github", "/.vscode"],
       debounce: 1_000,
     },
   },
@@ -223,39 +219,40 @@ if (Deno.env.get("BUILD_TYPE") == "FULL") {
 
   // Generate Open Graph images
   site.data("openGraphLayout", "/open_graph/default.jsx");
-  site.data("openGraphColor", "#70ffaf");
-  site.use(ogImages({
-    satori: {
-      width: 1200,
-      height: 630,
-      fonts: [
-        {
-          name: "Courier",
-          style: "normal",
-          data: await Deno.readFile(
-            "./static/fonts/courier/CourierPrime-Regular.ttf",
-          ),
-        },
-        {
-          name: "Inter",
-          weight: 400,
-          style: "normal",
-          data: await Deno.readFile(
-            "./static/fonts/inter/Inter-Regular.woff",
-          ),
-        },
-        {
-          name: "Inter",
-          weight: 700,
-          style: "bold",
-          data: await Deno.readFile(
-            "./static/fonts/inter/Inter-SemiBold.woff",
-          ),
-        },
-      ],
-    },
-    cache: false,
-  }));
+  site.use(
+    ogImages({
+      satori: {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: "Courier",
+            style: "normal",
+            data: await Deno.readFile(
+              "./static/fonts/courier/CourierPrime-Regular.ttf",
+            ),
+          },
+          {
+            name: "Inter",
+            weight: 400,
+            style: "normal",
+            data: await Deno.readFile(
+              "./static/fonts/inter/hacked/Inter-Regular-hacked.woff",
+            ),
+          },
+          {
+            name: "Inter",
+            weight: 700,
+            style: "normal",
+            data: await Deno.readFile(
+              "./static/fonts/inter/hacked/Inter-SemiBold-hacked.woff",
+            ),
+          },
+        ],
+      },
+      cache: false,
+    }),
+  );
 }
 
 site.scopedUpdates(

_includes/open_graph/cli-commands.jsx

@@ -17,7 +17,7 @@ export default function ({ title, description, openGraphTitle }) {
         flexDirection: "column",
         justifyContent: "center",
         background:
-          `radial-gradient(circle at 95% 95%, #090909 10%, #292929 70%)`,
+          `radial-gradient(circle 450px at 300px 50%, #273a34, #172723)`,
         fontSize: 28,
         fontWeight: 400,
         padding: "0 90px",
@@ -55,7 +55,8 @@ export default function ({ title, description, openGraphTitle }) {
             fontFamily: "Courier",
             lineHeight: "1.2",
             color: "#ffffff",
-            textShadow: "0 0 8px #70ffafff",
+            textShadow:
+              "0 0 42px #70ffaf, 0 0 36px #70ffaf66, 0 0 28px #70ffaf33, 0 0 16px #70ffaf22, 0 0 8px #70ffaf11",
           }}
         >
           {openGraphTitle}

_includes/open_graph/default.jsx

@@ -23,80 +23,91 @@ export default function ({ title, description, openGraphColor }) {
   const processedTitle = processEarlyAccessText(title);
   const processedDescription = processEarlyAccessText(description);
 
-  const bgColor = openGraphColor || "#70ffaf";
-
   return (
     <div
       style={{
-        height: "100%",
-        width: "100%",
+        width: "1200px",
+        height: "630px",
         display: "flex",
         position: "relative",
         flexDirection: "column",
-        justifyContent: "center",
-        padding: "0 90px",
+        justifyContent: "space-between",
         fontSize: 26,
         fontWeight: 400,
         textWrap: "balance",
-        background:
-          `radial-gradient(circle at 98% 98%, #ffffff 12%, ${bgColor} 70%)`,
         fontFamily: "Inter",
+        backgroundColor: "#fff",
       }}
     >
-      <p
-        style={{
-          fontSize: "18px",
-          lineHeight: "1",
-          marginBottom: "2rem",
-          textTransform: "uppercase",
-        }}
-      >
-        docs.deno.com
-      </p>
       <h1
         style={{
           margin: "0",
-          fontSize: 60,
+          fontSize: 64,
           fontWeight: 800,
           width: "100%",
           lineHeight: "1.1",
-          marginTop: 0,
+          letterSpacing: "-0.025em",
+          position: "relative",
+          backgroundColor: openGraphColor || "#70ffaf",
+          padding: "20px 90px 0",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          height: "420px",
         }}
       >
         {processedTitle}
+        <div
+          style={{
+            display: "block",
+            fontSize: "21px",
+            letterSpacing: "0",
+            marginTop: "20px",
+            borderTop: "2px solid #172723",
+            paddingTop: "12px",
+            width: "7.35em",
+            fontWeight: 500,
+            textWrap: "balance",
+          }}
+        >
+          docs.deno.com
+        </div>
       </h1>
       <div
         style={{
-          width: "400px",
-          height: "1px",
-          margin: "3rem 0",
-          background: "#000",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: "230px",
+          padding: "84px",
+          border: `6px solid ${openGraphColor || "#70ffaf"}`,
         }}
       >
+        <p
+          style={{
+            margin: 0,
+            width: "720px",
+            lineHeight: "1.5",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          {processedDescription}
+        </p>
+
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 401 401"
+          fill-rule="evenodd"
+          style={{
+            width: "80px",
+            height: "80px",
+          }}
+        >
+          <path d="M261.684 245.149c33.861 1.662 69.225-13.535 80.203-43.776 10.978-30.241 6.721-60.148-32.661-78.086-39.381-17.944-57.569-39.272-89.385-52.14-20.787-8.408-43.915-3.418-67.664 9.707-63.963 35.351-121.274 147.038-94.858 250.518a3.185 3.185 0 0 1-1.544 3.615 3.189 3.189 0 0 1-3.877-.64C16.282 295.06-3.759 241.788.593 184.791 8.998 74.728 105.178-7.806 215.241.599 325.296 9.003 407.83 105.182 399.425 215.245c-3.529 46.221-22.535 87.584-51.559 119.399-22.195 22.8-50.473 32.935-74.07 32.516-17.107-.303-33.839-7.112-45.409-17.066-16.516-14.228-23.191-30.485-25.474-48.635-.572-4.507-.236-16.797 2.112-25.309 1.745-6.343 6.185-18.599 12.676-23.957-7.595-3.266-17.361-10.388-20.446-13.805-.753-.838-.652-2.156.026-3.057a2.56 2.56 0 0 1 2.925-.88c6.528 2.239 14.477 4.444 22.86 5.851 11.021 1.844 24.729 4.159 38.618 4.847ZM192.777 85.086c10.789-.846 20.202 8.363 21.825 20.609 2.164 16.314-3.822 33.166-23.511 33.554-16.819.335-21.915-16.625-20.8-26.9 1.107-10.275 9.577-26.25 22.486-27.263Z" />
+        </svg>
       </div>
-      <p
-        style={{
-          marginTop: 0,
-          width: "72%",
-          lineHeight: "1.5",
-        }}
-      >
-        {processedDescription}
-      </p>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 401 401"
-        fill-rule="evenodd"
-        style={{
-          position: "absolute",
-          bottom: "2rem",
-          right: "2rem",
-          width: "80px",
-          height: "80px",
-        }}
-      >
-        <path d="M261.684 245.149c33.861 1.662 69.225-13.535 80.203-43.776 10.978-30.241 6.721-60.148-32.661-78.086-39.381-17.944-57.569-39.272-89.385-52.14-20.787-8.408-43.915-3.418-67.664 9.707-63.963 35.351-121.274 147.038-94.858 250.518a3.185 3.185 0 0 1-1.544 3.615 3.189 3.189 0 0 1-3.877-.64C16.282 295.06-3.759 241.788.593 184.791 8.998 74.728 105.178-7.806 215.241.599 325.296 9.003 407.83 105.182 399.425 215.245c-3.529 46.221-22.535 87.584-51.559 119.399-22.195 22.8-50.473 32.935-74.07 32.516-17.107-.303-33.839-7.112-45.409-17.066-16.516-14.228-23.191-30.485-25.474-48.635-.572-4.507-.236-16.797 2.112-25.309 1.745-6.343 6.185-18.599 12.676-23.957-7.595-3.266-17.361-10.388-20.446-13.805-.753-.838-.652-2.156.026-3.057a2.56 2.56 0 0 1 2.925-.88c6.528 2.239 14.477 4.444 22.86 5.851 11.021 1.844 24.729 4.159 38.618 4.847ZM192.777 85.086c10.789-.846 20.202 8.363 21.825 20.609 2.164 16.314-3.822 33.166-23.511 33.554-16.819.335-21.915-16.625-20.8-26.9 1.107-10.275 9.577-26.25 22.486-27.263Z" />
-      </svg>
     </div>
   );
 }

static/fonts/inter/hacked/README.md

@@ -0,0 +1,17 @@
+The fonts in this folder have been hacked solely for use with Satori, which
+generates our OG images. THEY ARE NOT TO BE USED FOR ANY OTHER PURPOSE.
+
+Specifically: the glyphs have been altered, so that some of the alternate
+character styles and ligatures appear as the default version of the character
+instead. (Example: the uppercase "I" ordinarily does not have the horizontal
+bars on top and bottom; these font files have been edited so that the default
+does.)
+
+On the site, we simply enable the OpenType features to swap out the character,
+via CSS. But with Satori, that's not an option, and so we have to hack apart the
+font.
+
+This could potentially cause instability and/or rendering issues if these fonts
+were used elsewhere—they may or may not be "valid" font files—which is why we
+want to stick with using these files only in Satori, which seems to read them
+just fine.

styleguide/og/color-override.md

@@ -1,7 +1,7 @@
 ---
 title: "Override the color of the OG image"
 description: "Showing how a custom color can be used to override the default color of the OG image"
-openGraphColor: "#6FD1FF"
+openGraphColor: "#b3e0ff"
 ---
 
 There are different variants of the OG image depending on what content is

styleguide/og/title-and-description.md

@@ -1,5 +1,5 @@
 ---
-title: "An example OG image with a title that is long enough to wrap to three lines"
+title: "An example OG image with a title that is long enough to wrap onto three whole lines"
 description: "A description of typical length that will wrap under the title and offer some additional information about this page"
 ---