chore(site): add auto-generated og image

website/package.json

@@ -38,7 +38,9 @@
 		"@types/react-dom": "^19.0.0",
 		"acorn": "^8.15.0",
 		"astro": "^5.1.1",
+		"astro-og-canvas": "^0.10.0",
 		"autoprefixer": "^10.4.22",
+		"canvaskit-wasm": "^0.40.0",
 		"chart.js": "^4.5.1",
 		"chartjs-adapter-date-fns": "^3.0.0",
 		"clsx": "^2.1.1",

website/src/layouts/DocsLayout.astro

@@ -6,12 +6,13 @@ interface Props {
 	title: string;
 	description?: string;
 	canonicalUrl?: string;
+	ogImage?: string;
 }
 
-const { title, description, canonicalUrl } = Astro.props;
+const { title, description, canonicalUrl, ogImage } = Astro.props;
 ---
 
-<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl}>
+<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage}>
 	<Header variant="full-width" showDocsTabs={true} client:load />
 	<div class="w-full relative z-10 font-sans">
 		<div class="mx-auto w-full min-h-content flex flex-col md:grid md:grid-cols-docs-no-sidebar lg:grid-cols-docs" style="--header-height: 3.5rem;">

website/src/layouts/LearnLayout.astro

@@ -8,20 +8,21 @@ interface Props {
 	title: string;
 	description?: string;
 	canonicalUrl?: string;
+	ogImage?: string;
 	act?: string;
 	subtitle?: string;
 	tableOfContents?: Array<{ title: string; id: string; children: Array<{ title: string; id: string }> }>;
 	isIndex?: boolean;
 	scene?: string;
 }
 
-const { title, description, canonicalUrl, act, subtitle, tableOfContents = [], isIndex = false, scene = '' } = Astro.props;
+const { title, description, canonicalUrl, ogImage, act, subtitle, tableOfContents = [], isIndex = false, scene = '' } = Astro.props;
 
 // Extract page title from title prop (remove " - Rivet" suffix if present)
 const pageTitle = title.replace(/ - Rivet$/, '');
 ---
 
-<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl}>
+<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage}>
 	<Header active="learn" variant="full-width" learnMode client:load />
 
 	<div class="learn-container">

website/src/pages/blog/[...slug].astro

@@ -59,6 +59,9 @@ const tableOfContents = headings
 
 const isTechnical = category.name === 'Technical' || category.name === 'Guide';
 
+// Use custom image if available, otherwise fall back to generated OG image
+const ogImage = image?.src || `https://rivet.gg/og/blog/${slug}.png`;
+
 // Load other articles
 const allPosts = await getCollection('posts');
 const filteredOtherPosts = allPosts
@@ -82,7 +85,7 @@ const otherArticles = await Promise.all(
 	title={title}
 	description={description}
 	canonicalUrl={`https://rivet.gg/blog/${slug}/`}
-	ogImage={image?.src}
+	ogImage={ogImage}
 	publishedTime={entry.data.published.toISOString()}
 	keywords={entry.data.keywords}
 >

website/src/pages/changelog/[...slug].astro

@@ -57,6 +57,9 @@ const tableOfContents = headings
 		return acc;
 	}, [] as any[]);
 
+// Use custom image if available, otherwise fall back to generated OG image
+const ogImage = image?.src || `https://rivet.gg/og/changelog/${slug}.png`;
+
 // Load other articles
 const allPosts = await getCollection('posts');
 const filteredOtherPosts = allPosts
@@ -80,7 +83,7 @@ const otherArticles = await Promise.all(
 	title={title}
 	description={description}
 	canonicalUrl={`https://rivet.gg/changelog/${slug}/`}
-	ogImage={image?.src}
+	ogImage={ogImage}
 	publishedTime={entry.data.published.toISOString()}
 	keywords={entry.data.keywords}
 >

website/src/pages/docs/[...slug].astro

@@ -62,9 +62,13 @@ const canonicalUrl = `https://rivet.gg${fullPath}`;
 // Create markdown path for the dropdown
 const markdownPath = `docs/${entry.id}`;
 const componentSourcePath = `docs/${entry.id}.mdx`;
+
+// Build OG image URL
+const ogSlug = entry.id === 'index' ? '' : entry.id.replace(/\/index$/, '');
+const ogImage = `https://rivet.gg/og/docs/${ogSlug}.png`;
 ---
 
-<DocsLayout title={`${title} - Rivet`} description={description} canonicalUrl={canonicalUrl}>
+<DocsLayout title={`${title} - Rivet`} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage}>
 	<aside class="hidden lg:block border-r">
 		{foundTab?.tab?.sidebar && <DocsNavigation sidebar={foundTab.tab.sidebar} client:load />}
 	</aside>

website/src/pages/guides/[...slug].astro

@@ -46,9 +46,12 @@ const canonicalUrl = `https://rivet.gg${fullPath}`;
 // Create markdown path for the dropdown
 const markdownPath = `guides/${entry.id}`;
 const componentSourcePath = `guides/${entry.id}.mdx`;
+
+// Build OG image URL
+const ogImage = `https://rivet.gg/og/guides/${entry.id}.png`;
 ---
 
-<DocsLayout title={`${title} - Rivet`} description={description} canonicalUrl={canonicalUrl}>
+<DocsLayout title={`${title} - Rivet`} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage}>
 	<aside class="hidden lg:block border-r">
 		{foundTab?.tab?.sidebar && <DocsNavigation sidebar={foundTab.tab.sidebar} client:load />}
 	</aside>

website/src/pages/learn/[...slug].astro

@@ -51,12 +51,17 @@ const tableOfContents = headings
 		}
 		return acc;
 	}, [] as Array<{ title: string; id: string; children: Array<{ title: string; id: string }> }>);
+
+// Build OG image URL
+const ogSlug = entry.id === 'index' ? '' : entry.id.replace(/\/index$/, '');
+const ogImage = `https://rivet.gg/og/learn/${ogSlug}.png`;
 ---
 
 <LearnLayout
 	title={`${title} - Rivet`}
 	description={description}
 	canonicalUrl={canonicalUrl}
+	ogImage={ogImage}
 	act={entry.data.act}
 	subtitle={entry.data.subtitle}
 	tableOfContents={tableOfContents}