+ {/* Background image */}
+

+ {/* Noise overlay */}
+

+ {/* Logo - top right */}
+
+
+
+ {/* Date tag - top left */}
+ {date && (
+
+ {formatDate(date)}
+
+ )}
+ {/* Text content - bottom left */}
+
+
+ {title}
+
+ {(summary || description) && (
+
+ {summary ?? description}
+
+ )}
+
+
,
+ {
+ width: OG_WIDTH,
+ height: OG_HEIGHT,
+ fonts: [
+ {
+ name: "Geist",
+ data: await geistRegular,
+ style: "normal",
+ weight: 400,
+ },
+ ],
+ }
+ );
+ } catch (error) {
+ console.error("Error generating OG image:", error);
+ return new Response("Error generating image", { status: 500 });
+ }
+}
diff --git a/apps/website/app/blog/[...slug]/page.tsx b/apps/website/app/blog/[...slug]/page.tsx
index 14ee808e..112d490d 100644
--- a/apps/website/app/blog/[...slug]/page.tsx
+++ b/apps/website/app/blog/[...slug]/page.tsx
@@ -6,6 +6,8 @@ import type { Metadata } from "next";
import { createRelativeLink } from "fumadocs-ui/mdx";
import { CodeBlock } from "@/components/codeblock";
import { BlogPage } from "@/components/layout/blog";
+import { getBlogMetadata } from "@/utils/blog";
+import { getBaseUrl } from "@/lib/base-url";
export default async function Page(props: PageProps<"/blog/[...slug]">) {
const params = await props.params;
@@ -43,14 +45,37 @@ export async function generateMetadata(
props: PageProps<"/blog/[...slug]">
): Promise