Generate OG images for each page (#1527)

Co-authored-by: Jo Franchetti <jofranchetti@gmail.com>
Co-authored-by: Josh Collinsworth <joshuajcollinsworth@gmail.com>

Author: 3 people

README.md

@@ -31,6 +31,18 @@ deno task prod
 Which will start a Deno server on [localhost:8000](http://localhost:8000) used
 in production, which handles redirects.
 
+the above commands will defauilt to performing as complete build of the site
+including all of the more expensive operations. You can also perform a lighter
+build by running:
+
+```console
+deno task build:light
+```
+
+This will build the site without generating the Open Graph images and other more
+time-consuming operations which might be desirable to skip during local
+developement work.
+
 ## Developing styles and components
 
 We are increasingly making use of global components to improve consistency and
@@ -39,10 +51,10 @@ components and is generated during the build process.
 
 You can browse to it in the site at `/styleguide/`
 
-To avoid longer build times of rthe sntire site and all of its content while
-developing UI elements and components, a styulguide-only build is avaiable which
+To avoid longer build times of the entire site and all of its content while
+developing UI elements and components, a styleguide-only build is avaiable which
 performs the initial global configureation for the site, but then only generates
-and wacthes for changes in the `/styleguide` folder of the repo.
+and watches for changes in the `/styleguide` folder of the repo.
 
 To work on just the components and UI elements and review them within
 styleguide, run:

_components/OpenGraph.tsx

@@ -0,0 +1,32 @@
+export default function OpenGraph(
+  { title, description, section, url }: {
+    title: string;
+    description: string;
+    section: string;
+    url: string;
+  },
+) {
+  let image;
+  if (section == "api") {
+    image = `/img/og.webp`;
+  } else {
+    image = `${url}index.png`;
+  }
+  return (
+    <>
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+      <meta name="twitter:image:alt" content={description} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@deno_land" />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:image:alt" content={description} />
+      <meta property="og:type" content="article" />
+      <meta property="og:site_name" content="Deno" />
+      <meta property="og:locale" content="en_US" />
+    </>
+  );
+}

_config-styleguide.ts

@@ -1,7 +1,7 @@
 // Further refine the global Lume config for this section of the site
 import site from "./_config.ts";
 
-// Ignore everythig not in the styleguide folder
+// Ignore everything not in the styleguide folder
 site.ignore((path) => {
   return path.match(/^\/styleguide.*$/) === null;
 });

_config.ts

@@ -4,6 +4,7 @@ import lume from "lume/mod.ts";
 import esbuild from "lume/plugins/esbuild.ts";
 import jsx from "lume/plugins/jsx_preact.ts";
 import mdx from "lume/plugins/mdx.ts";
+import ogImages from "lume/plugins/og_images.ts";
 import postcss from "lume/plugins/postcss.ts";
 import redirects from "lume/plugins/redirects.ts";
 import search from "lume/plugins/search.ts";
@@ -17,6 +18,7 @@ import Prism from "./prism.ts";
 import title from "https://deno.land/x/lume_markdown_plugins@v0.7.0/title.ts";
 import toc from "https://deno.land/x/lume_markdown_plugins@v0.7.0/toc.ts";
 import { CSS as GFM_CSS } from "https://jsr.io/@deno/gfm/0.8.2/style.ts";
+import { log } from "lume/core/utils/log.ts";
 import anchor from "npm:markdown-it-anchor@9";
 import { full as emoji } from "npm:markdown-it-emoji@3";
 import admonitionPlugin from "./markdown-it/admonition.ts";
@@ -31,7 +33,6 @@ import redirectsMiddleware, {
   toFileAndInMemory,
 } from "./middleware/redirects.ts";
 import { cliNow } from "./timeUtils.ts";
-import { log } from "lume/core/utils/log.ts";
 
 const site = lume(
   {
@@ -186,6 +187,48 @@ site.ignore(
 // the default layout if no other layout is specified
 site.data("layout", "doc.tsx");
 
+// Do more expensive operations if we're building the full site
+if (Deno.env.get("BUILD_TYPE") == "FULL") {
+  // Use Lume's built in date function to get the last modified date of the file
+  // site.data("date", "Git Last Modified");;
+
+  // 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.scopedUpdates(
   (path) => path == "/overrides.css",
   (path) => /\.(js|ts)$/.test(path),

_includes/doc.tsx

@@ -2,6 +2,10 @@ import renderCommand from "./renderCommand.tsx";
 
 export const layout = "layout.tsx";
 
+export const ogImage = (data: Lume.Data) => {
+  return data.url + "/index.png";
+};
+
 export default function Doc(data: Lume.Data, helpers: Lume.Helpers) {
   let file = data.page.sourcePath;
 

_includes/layout.tsx

@@ -25,37 +25,17 @@ export default function Layout(data: Lume.Data) {
           type="font/woff2"
           crossOrigin="true"
         />
-
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@deno_land" />
         <link rel="me" href="https://fosstodon.org/@deno_land" />
-        <meta name="twitter:title" content={data.title} />
-        <meta property="og:title" content={data.title} />
-
-        <meta property="og:description" content={description} />
-        <meta name="twitter:description" content={description} />
-        <meta name="description" content={description} />
-
-        <meta name="twitter:image" content="/img/og.webp" />
-        <meta
-          name="twitter:image:alt"
-          content="Deno docs: Deno documentation, guides, and reference materials. docs.deno.com"
+        <data.comp.OpenGraph
+          title={data.title}
+          description={description}
+          section={section}
+          url={data.url}
         />
-        <meta property="og:image" content="/img/og.webp" />
-        <meta
-          property="og:image:alt"
-          content="Deno docs: Deno documentation, guides, and reference materials. docs.deno.com"
-        />
-
-        <meta property="og:type" content="article" />
-        <meta property="og:site_name" content="Deno" />
-        <meta property="og:locale" content="en_US" />
-
         <meta
           name="keywords"
           content="Deno, JavaScript, TypeScript, reference, documentation, guide, tutorial, example"
         />
-
         <script
           dangerouslySetInnerHTML={{
             __html: `

_includes/open_graph/cli-commands.jsx

@@ -0,0 +1,92 @@
+/** @jsxImportSource npm:react@18.2.0 */
+
+export default function ({ title, description, openGraphTitle }) {
+  if (!openGraphTitle) {
+    title = "deno help";
+  }
+  if (!description) {
+    description = "Learn more at docs.deno.com";
+  }
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        background:
+          `radial-gradient(circle at 95% 95%, #090909 10%, #292929 70%)`,
+        fontSize: 28,
+        fontWeight: 400,
+        padding: "0 90px",
+        textWrap: "balance",
+        color: "#fff",
+        fontFamily: "Inter",
+      }}
+    >
+      <p
+        style={{
+          fontSize: "18px",
+          lineHeight: "1",
+          marginBottom: "2rem",
+          textTransform: "uppercase",
+        }}
+      >
+        docs.deno.com
+      </p>
+      <h1
+        style={{
+          margin: "0",
+          fontSize: 60,
+          fontWeight: 800,
+          lineHeight: "1.1",
+          marginTop: 0,
+          marginLeft: "-16px",
+          marginBottom: "2rem",
+        }}
+      >
+        <span
+          style={{
+            background: "#000",
+            borderRadius: "10px",
+            padding: "10px 18px 4px 18px",
+            fontFamily: "Courier",
+            lineHeight: "1.2",
+            color: "#ffffff",
+            textShadow: "0 0 8px #70ffafff",
+          }}
+        >
+          {openGraphTitle}
+        </span>
+      </h1>
+      <p
+        style={{
+          marginTop: 0,
+          width: "72%",
+          lineHeight: "1.5",
+        }}
+      >
+        {description}
+      </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
+          fill="#ffffff"
+          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>
+  );
+}

_includes/open_graph/default.jsx

@@ -0,0 +1,87 @@
+/** @jsxImportSource npm:react@18.2.0 */
+
+export default function ({ title, description, openGraphColor }) {
+  if (!title) {
+    title = "Deno documentation";
+  }
+  if (!description) {
+    description = "Learn more at docs.deno.com";
+  }
+
+  const bgColor = openGraphColor || "#70ffaf";
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        position: "relative",
+        flexDirection: "column",
+        justifyContent: "center",
+        padding: "0 90px",
+        fontSize: 26,
+        fontWeight: 400,
+        textWrap: "balance",
+        background:
+          `radial-gradient(circle at 98% 98%, #ffffff 12%, ${bgColor} 70%)`,
+        fontFamily: "Inter",
+      }}
+    >
+      <p
+        style={{
+          fontSize: "18px",
+          lineHeight: "1",
+          marginBottom: "2rem",
+          textTransform: "uppercase",
+        }}
+      >
+        docs.deno.com
+      </p>
+      <h1
+        style={{
+          margin: "0",
+          fontSize: 60,
+          fontWeight: 800,
+          width: "100%",
+          lineHeight: "1.1",
+          marginTop: 0,
+        }}
+      >
+        {title}
+      </h1>
+      <div
+        style={{
+          width: "400px",
+          height: "1px",
+          margin: "3rem 0",
+          background: "#000",
+        }}
+      >
+      </div>
+      <p
+        style={{
+          marginTop: 0,
+          width: "72%",
+          lineHeight: "1.5",
+        }}
+      >
+        {description}
+      </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>
+  );
+}