added rich embeds for socials

astro.config.mjs

@@ -5,6 +5,10 @@ export default defineConfig({
 	site: 'https://shaders.properties',
 	integrations: [
 		starlight({
+			components: {
+				// Relative path to the custom component.
+				Head: './src/components/Head.astro',
+			},
 			title: 'Iris Docs',
 			logo: {
 				src: '/src/assets/iris.webp',

package.json

@@ -10,10 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.5.10",
     "@astrojs/starlight": "^0.21.5",
     "astro": "^4.3.5",
+    "astro-og-canvas": "^0.5.0",
+    "canvaskit-wasm": "^0.39.1",
     "sharp": "^0.32.5",
-    "@astrojs/check": "^0.5.10",
     "typescript": "^5.4.5"
   }
 }

src/components/Head.astro

@@ -0,0 +1,14 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/Head.astro'
+
+const ogImageUrl = new URL(
+    `/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`,
+    Astro.site,
+)
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />

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

@@ -0,0 +1,28 @@
+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({
+    pages,
+    param: 'slug',
+    getImageOptions: (_path, page: (typeof pages)[number]) => {
+        return {
+            title: page.data.title,
+            description: page.data.description,
+            // Specify the path to your background image.
+            backgroundImage: '/assets/banner.png',
+            // Add a semi-transparent background color on top of the image.
+            // The color is specified in RGB format, and the alpha channel (opacity) is set to 0.4.
+            backgroundColor: [24, 24, 27, 0.4],
+            bgGradient: [[24, 24, 27]],
+            border: { color: [63, 63, 70], width: 20 },
+            padding: 120,
+        }
+    },
+})