feat: add automatic Open Graph preview images for docs pages using astro-og-canvas (#637)

Co-authored-by: molloyzak13 <molloyzak13@users.noreply.github.com>
Co-authored-by: Debian <x@zak.linux>
Co-authored-by: Ky Decker <itsevadecker@gmail.com>

Author: 3 people

docs/astro.config.ts

@@ -7,7 +7,7 @@ import starlightThemeFlexoki from "starlight-theme-flexoki";
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.namesake.fyi",
-  adapter: cloudflare(),
+  adapter: cloudflare({ prerenderEnvironment: "node" }),
   session: {
     driver: {
       entrypoint: "unstorage/drivers/null",
@@ -82,6 +82,7 @@ export default defineConfig({
         },
       ],
       customCss: ["./src/styles/theme.css"],
+      routeMiddleware: "./src/routeData.ts",
     }),
   ],
   devToolbar: {

docs/package.json

@@ -18,6 +18,8 @@
     "@mermaid-js/layout-elk": "^0.2.1",
     "astro": "^6.4.5",
     "astro-mermaid": "^2.0.2",
+    "astro-og-canvas": "^0.11.1",
+    "canvaskit-wasm": "^0.41.1",
     "mermaid": "^11.15.0",
     "sharp": "^0.34.5",
     "starlight-theme-flexoki": "^0.2.2",

docs/src/content/docs/getting-started.mdx

@@ -1,5 +1,6 @@
 ---
 title: Getting Started
+description: Want to help contribute to Namesake? Here's how to start.
 ---
 
 import { LinkButton, LinkCard } from '@astrojs/starlight/components';

docs/src/fonts/AtkinsonHyperlegibleSoft-Bold.ttf

@@ -0,0 +1,41 @@
+import { getCollection } from "astro:content";
+import { OGImageRoute } from "astro-og-canvas";
+
+// Implementation based on: https://hideoo.dev/notes/starlight-og-images
+const entries = await getCollection("docs");
+
+const pages = Object.fromEntries(entries.map(({ data, id }) => [id, { data }]));
+
+export const { getStaticPaths, GET } = await OGImageRoute({
+  pages,
+  param: "slug",
+  getImageOptions: (_id, page: (typeof pages)[number]) => {
+    return {
+      title: page.data.title,
+      description: page.data.description,
+      bgGradient: [[225, 225, 225]],
+      padding: 90,
+      logo: {
+        path: "./src/pages/og/_images/logo.svg",
+      },
+      fonts: [
+        "./src/fonts/AtkinsonHyperlegibleSoft-Regular.ttf",
+        "./src/fonts/AtkinsonHyperlegibleSoft-Bold.ttf",
+      ],
+      font: {
+        title: {
+          color: [17, 17, 17],
+          size: 70,
+          weight: "Bold",
+          families: ["Atkinson Hyperlegible Soft", "Helvetica", "sans-serif"],
+        },
+        description: {
+          color: [17, 17, 17],
+          size: 40,
+          weight: "Normal",
+          families: ["Atkinson Hyperlegible Soft", "Helvetica", "sans-serif"],
+        },
+      },
+    };
+  },
+});

docs/src/fonts/AtkinsonHyperlegibleSoft-Regular.ttf

@@ -0,0 +1,19 @@
+import { defineRouteMiddleware } from "@astrojs/starlight/route-data";
+
+export const onRequest = defineRouteMiddleware((context) => {
+  const ogImageUrl = new URL(
+    `/og/${context.locals.starlightRoute.id || "index"}.png`,
+    context.site,
+  );
+
+  const { head } = context.locals.starlightRoute;
+
+  head.push({
+    tag: "meta",
+    attrs: { property: "og:image", content: ogImageUrl.href },
+  });
+  head.push({
+    tag: "meta",
+    attrs: { name: "twitter:image", content: ogImageUrl.href },
+  });
+});