tried adding opengraph to the docs site

astro.config.mjs

@@ -12,6 +12,10 @@ export default defineConfig({
       logo: {
         src: "./src/assets/alg-logo.png",
       },
+      components: {
+        // Relative path to the custom component.
+        Head: "./src/components/Head.astro",
+      },
       social: {
         github: "https://github.com/arch-linux-gui",
       },

package.json

@@ -10,10 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.4",
     "@astrojs/starlight": "^0.29.0",
     "astro": "^4.16.10",
+    "astro-og-canvas": "^0.5.4",
     "sharp": "^0.32.5",
-    "@astrojs/check": "^0.9.4",
     "typescript": "^5.6.3"
   }
 }

src/components/Head.astro

@@ -0,0 +1,18 @@
+---
+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,29 @@
+import { OGImageRoute } from "astro-og-canvas";
+import { getCollection } from "astro:content";
+
+// 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,
+    };
+  },
+});