feat: Dynamic og image #1344

astro.config.mjs

@@ -92,38 +92,13 @@ export default defineConfig({
         rss: `${site}/rss`,
       },
       components: {
+        Head: 'src/components/overrides/Head.astro',
         Header: './src/components/overrides/Header.astro',
         Footer: 'src/components/overrides/Footer.astro',
         ThemeSelect: 'src/components/overrides/ThemeSelect.astro',
         PageFrame: 'src/components/overrides/PageFrame.astro',
       },
-      head: [
-        {
-          tag: 'meta',
-          attrs: { property: 'og:image', content: site + '/og.png?v=1' },
-        },
-        {
-          tag: 'meta',
-          attrs: { property: 'twitter:image', content: site + '/og.png?v=1' },
-        },
-        {
-          tag: 'script',
-          attrs: {
-            src: '/navigate.js',
-          },
-        },
-        {
-          tag: 'link',
-          attrs: {
-            rel: 'manifest',
-            href: '/manifest.json',
-          },
-        },
-        {
-          tag: 'meta',
-          attrs: { name: 'theme-color', content: '#181818' },
-        },
-      ],
+      // head: moved to Head.astro override
       editLink: {
         baseUrl:
           process.env.NODE_ENV === 'development'

package.json

@@ -21,6 +21,8 @@
     "preview": "astro preview"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.16",
+    "@fontsource/noto-sans-sc": "^5.0.17",
     "@astrojs/markdown-remark": "^5.0.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/starlight": "^0.24.0",
@@ -29,6 +31,8 @@
     "astro": "^4.4.4",
     "astro-d2": "^0.3.0",
     "astro-feelback": "^0.3.4",
+    "astro-og-canvas": "^0.4.2",
+    "canvaskit-wasm": "^0.39.1",
     "astrojs-service-worker": "^2.0.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",

src/components/overrides/Head.astro

@@ -0,0 +1,46 @@
+---
+/** TODO: Check how to override the current metatag 'content' instead
+ * so that the settings on @file astro.config can be utilized along
+ * without conflicts.
+ *
+ * Tested with these (from Starlight source @file head.astro) but couldn't get around getting the
+ * default head into a format to pass into the @function createHead
+ * (virtual needs /// <reference path="../node_modules/@astrojs/starlight/virtual.d.ts"/> on @file env.ts)
+ *
+ * ---
+ * import { createHead } from 'node_modules/@astrojs/starlight/utils/head';
+ * import config from 'virtual:starlight/user-config';
+ * const head = createHead(headDefaults, config.head, data.head);
+ * ---
+ * {head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
+ *
+ */
+
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/Head.astro';
+
+import { getOgImageUrl } from 'src/utils/getOgImageUrl';
+
+const { isFallback } = Astro.props;
+const ogImageUrl = getOgImageUrl(Astro.url.pathname, !!isFallback);
+const imageSrc = ogImageUrl ?? 'og.png';
+
+let canonicalImageSrc = new URL(imageSrc, Astro.site);
+
+// Override URL for development environment
+const isDev = import.meta.env.DEV;
+if (isDev) {
+  canonicalImageSrc = new URL(imageSrc, Astro.url);
+}
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<!-- og-images -->
+<meta property="og:image" content={canonicalImageSrc} />
+<meta name="twitter:image" content={canonicalImageSrc} />
+
+<!-- other -->
+<script is:inline src="/navigate.js"></script>
+<link rel="manifest" href="/manifest.json" />
+<meta name="theme-color" content="#181818" />

src/pages/0/0.ts

@@ -0,0 +1,9 @@
+import { allPages } from '../../utils/content';
+
+// https://github.com/withastro/docs/blob/main/src/pages/0/0.ts
+// https://www.github.com/withastro/docs/pull/4266/commits/030073f32d6dfe586c6e1da8d48d6b5485541ba2
+
+export function GET() {
+  allPages[0];
+  return new Response('');
+}

src/pages/open-graph/[...docs].ts

@@ -0,0 +1,110 @@
+import type { CollectionEntry } from 'astro:content';
+import { OGImageRoute } from 'astro-og-canvas';
+import { allPages } from 'src/utils/content';
+
+// setup rtlLanguages here
+const rtlLanguages = new Set(['']);
+const getLangFromSlug = (slug: CollectionEntry<'docs'>['slug']) => slug.split('/')[0];
+
+/** Paths for all of our Markdown content we want to generate OG images for. */
+const paths = process.env.CONTEXT == 'production' || import.meta.env.DEV ? allPages : [];
+// const paths = allPages // use this to build locally
+
+/** An object mapping file paths to file metadata. */
+const pages = Object.fromEntries(paths.map(({ id, slug, data }) => [id, { data, slug }]));
+
+/**
+ * TODO: This can be improved
+ * Helper function to clamp a string
+ * @returns A string that fits in two lines with "..." at the end if text is longer than MAX_LEN
+ */
+function clampTwoLines(txt: string, fontSize: number): string {
+  // those numbers are what more or less fit to description and title size, not precisely
+  // it can vary based on font, as of now it matches Inter.
+  // Maybe this can help? https://github.com/adambisek/string-pixel-width/blob/master/src/pixelWidthCalculator.html
+  // or this https://github.com/Evgenus/js-server-text-width
+  let MAX_LEN = 73;
+  // title:
+  if (fontSize > 60) {
+    MAX_LEN = 48;
+  }
+  if (txt.length > MAX_LEN) {
+    txt = txt.trim().substring(0, MAX_LEN).trim();
+    txt[txt.length - 1] === '.' ? (txt += '..') : (txt += '...');
+  }
+  const arTxt = breakText(txt, 2, 80 / 2);
+  return arTxt.join('');
+}
+
+function breakText(str: string, maxLines: number, maxLineLen: number) {
+  const segmenterTitle = new Intl.Segmenter('en-US', { granularity: 'word' });
+  const segments = segmenterTitle.segment(str);
+
+  let linesOut = [''];
+  let lineNo = 0;
+  let offsetInLine = 0;
+  for (const word of Array.from(segments)) {
+    if (offsetInLine + word.segment.length >= maxLineLen) {
+      lineNo++;
+      offsetInLine = 0;
+      linesOut.push('');
+    }
+
+    if (lineNo >= maxLines) {
+      return linesOut.slice(0, maxLines);
+    }
+
+    linesOut[lineNo] += word.segment;
+    offsetInLine += word.segment.length;
+  }
+
+  return linesOut;
+}
+
+// REFERENCE:
+// https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
+export const { getStaticPaths, GET } = OGImageRoute({
+  param: 'docs',
+  pages,
+  getImageOptions: async (_, { data, slug }: (typeof pages)[string]) => {
+    /** titleSize and descSize are coupled with @function clampTwoLines() */
+    let [titleSize, descSize] = [72, 48];
+    let description = '';
+    let title = clampTwoLines(data.title, titleSize);
+    if (data.description) {
+      description = clampTwoLines(data.description, descSize);
+    }
+    if (slug.startsWith('blog/') && data.date && data.excerpt) {
+      description = clampTwoLines(data.excerpt, descSize);
+    }
+    return {
+      title,
+      description,
+      dir: rtlLanguages.has(getLangFromSlug(slug)) ? 'rtl' : 'ltr',
+      padding: 66,
+      bgImage: { path: './src/assets/og-bg.png' },
+      logo: { path: './src/assets/og-logo.png' },
+      font: {
+        title: {
+          /** Size is coupled with @function clampTwoLines() */
+          size: titleSize,
+          lineHeight: 1.25,
+          weight: 'Normal',
+          families: ['Inter', 'Noto Sans SC Thin'],
+        },
+        description: {
+          /** Size is coupled with @function clampTwoLines() */
+          size: descSize,
+          lineHeight: 1.25,
+          weight: 'Normal',
+          families: ['Inter', 'Noto Sans SC Thin'],
+        },
+      },
+      fonts: [
+        './node_modules/@fontsource-variable/inter/files/inter-latin-standard-normal.woff2',
+        // simplified chinese
+        './node_modules/@fontsource/noto-sans-sc/files/noto-sans-sc-chinese-simplified-400-normal.woff2',
+      ],
+    };
+  },
+});

src/pages/open-graph/_open-graph-files.md

@@ -0,0 +1,11 @@
+# Open Graph files:
+
+```sh
+src/assets/og-bg.png    -   Background image
+src/assets/og-logo.png  -   Logo image
+src/components/overrides/Head.astro -   Head override to inject social metatags
+src/pages/0/0.ts    -  Chris\'s "00 hack" to make it work in Starlight in this specific setup
+src/utils/content.ts    -   Export docs collection
+src/utils/getOgImageUrl.ts  -   Used in the head override to get the url for current page
+src/pages/open-graph/[...docs].ts   -   Customize and generate each image and rtlLanguages
+```