Add Open Graph images to Starlight

astro.config.ts

@@ -25,6 +25,9 @@ export default defineConfig({
       editLink: {
         baseUrl: 'https://github.com/MedPocket/18-months/tree/main',
       },
+      components: {
+        Head: './src/components/Head.astro',
+      },
       sidebar: [
         {
           label: 'Trang chủ',

package.json

@@ -14,6 +14,7 @@
     "@astrojs/starlight-tailwind": "^2.0.2",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.7.0",
+    "astro-og-canvas": "^0.5.0",
     "katex": "^0.16.10",
     "lite-youtube-embed": "^0.3.2",
     "rehype-katex": "^7.0.0",

src/components/Head.astro

@@ -0,0 +1,19 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/Head.astro'
+
+// Get the URL of the generated image for the current page using its
+// ID and replace the file extension with `.png`.
+const ogImageUrl = new URL(
+  `/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`,
+  Astro.site,
+)
+---
+
+<!-- Render the default <Head/> component. -->
+<Default {...Astro.props}><slot /></Default>
+
+<!-- Render the <meta/> tags for the Open Graph images. -->
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />
+

src/pages/og/[...slug].ts

@@ -0,0 +1,31 @@
+// Add Open Graph images to Starlight: https://hideoo.dev/notes/starlight-og-images
+
+import { getCollection } from 'astro:content'
+import { OGImageRoute } from 'astro-og-canvas'
+
+// Get all entries from the `docs` content collection.
+const entries = await getCollection('docs')
+
+// Map the entry array to an object with the page ID as key and the
+// frontmatter data as value.
+const pages = Object.fromEntries(entries.map(({ data, id }) => [id, { data }]))
+
+export const { getStaticPaths, GET } = OGImageRoute({
+  // Pass down the documentation pages.
+  pages,
+  // Define the name of the parameter used in the endpoint path, here `slug`
+  // as the file is named `[...slug].ts`.
+  param: 'slug',
+  // Define a function called for each page to customize the generated image.
+  getImageOptions: (_path, page: (typeof pages)[number]) => {
+    return {
+      // Use the page title and description as the image title and description.
+      title: page.data.title,
+      description: page.data.description,
+      // Customize various colors and add a border.
+      bgGradient: [[24, 24, 27]],
+      border: { color: [63, 63, 70], width: 20 },
+      padding: 120,
+    }
+  },
+})