Add custom Head component with dynamic OG images

Introduces a new Head.astro component to set dynamic OpenGraph and Twitter images based on the page title. Updates astro.config.mjs to register the new Head component and adds default meta tags for social sharing.

Author: kylemclaren

astro.config.mjs

@@ -79,8 +79,24 @@ export default defineConfig({
           ],
         },
       ],
-      head: [], // Fonts are now self-hosted via fontsource
+      head: [
+        // OpenGraph / Social (og:image and twitter:image are set dynamically in Head.astro)
+        {
+          tag: 'meta',
+          attrs: { property: 'og:type', content: 'website' },
+        },
+        {
+          tag: 'meta',
+          attrs: { property: 'og:site_name', content: 'Sprites Documentation' },
+        },
+        // Twitter Card
+        {
+          tag: 'meta',
+          attrs: { name: 'twitter:card', content: 'summary_large_image' },
+        },
+      ],
       components: {
+        Head: './src/components/Head.astro',
         Header: './src/components/Header.astro',
         ThemeSelect: './src/components/ThemeSelect.astro',
         PageTitle: './src/components/PageTitle.astro',

src/components/Head.astro

@@ -0,0 +1,12 @@
+---
+import Default from '@astrojs/starlight/components/Head.astro';
+
+const pageTitle = Astro.locals.starlightRoute?.entry?.data?.title ?? 'Sprites Documentation';
+const ogImageUrl = `https://og-image.fly.dev/image?template=sprites&text=${encodeURIComponent(pageTitle)}`;
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<!-- Dynamic OG Image -->
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />