feat: add dynamic og image

Author: withden

public/images/og.jpg

@@ -1,4 +1,3 @@
-// import { Footer, Topbar } from "@/components/docs/layouts";
 import { Footer } from "@/components/docs/layouts/footer";
 import { Topbar } from "@/components/docs/layouts/topbar";
 import { Newsletter } from "@/components/docs/newsletter";
@@ -7,8 +6,6 @@ import { Demo } from "./components/demo";
 import { Feature } from "./components/feature";
 import { Hero } from "./components/hero";
 
-// import { docsSidebarNavItems } from "@/app/docs/menu";
-
 export default function LandingPage() {
     return (
         <div>

src/app/(home)/page.tsx

@@ -8,7 +8,7 @@ import { DocsBreadcrumb } from "@/components/docs/layouts/breadcrumb";
 import { CopyMarkdown } from "@/components/docs/layouts/copy-markdown";
 import { Footer } from "@/components/docs/layouts/footer";
 import { getMDXComponents } from "@/components/docs/mdx/mdx-components";
-import { routes } from "@/lib/docs";
+import { getMetadata, routes } from "@/lib/docs";
 import { source } from "@/lib/source";
 
 export async function generateStaticParams() {
@@ -20,10 +20,10 @@ export async function generateMetadata(props: PageProps<"/docs/[[...slug]]">): P
     const page = source.getPage(params.slug);
     if (!page) notFound();
 
-    return {
+    return getMetadata({
         title: page.data.title,
         description: page.data.description,
-    };
+    });
 }
 
 export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {

src/app/docs/[[...slug]]/page.tsx

@@ -5,16 +5,16 @@ import Link from "next/link";
 import { Footer } from "@/components/docs/layouts/footer";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
-import { routes } from "@/lib/docs";
+import { getMetadata, routes } from "@/lib/docs";
 
 import { blockSections } from "./menu";
 
-export const metadata: Metadata = {
-    title: "Blocks",
-    description:
-        "Beautiful, interactive, and production-ready sections you can drop into your project with a single shadcn command.",
-};
-
+export async function generateMetadata(): Promise<Metadata> {
+    return getMetadata({
+        title: "Blocks",
+        description: "Beautiful, interactive, and production-ready sections you can drop into your project with a single shadcn command.",
+    });
+}
 export default async function Page() {
     return (
         <DocsPage

src/app/docs/blocks/page.tsx

@@ -1,10 +1,11 @@
 import { DocsBody, DocsPage } from "fumadocs-ui/page";
 import { ArrowRightIcon } from "lucide-react";
+import { Metadata } from "next";
 import Link from "next/link";
 import { ReactNode, useMemo } from "react";
 
 import { Footer } from "@/components/docs/layouts/footer";
-import { routes } from "@/lib/docs";
+import { getMetadata, routes } from "@/lib/docs";
 import { source } from "@/lib/source";
 
 type Item = {
@@ -13,6 +14,13 @@ type Item = {
     items?: Item[];
 };
 
+export async function generateMetadata(): Promise<Metadata> {
+    return getMetadata({
+        title: "Components",
+        description: "Beautiful, animated components that respond smoothly, feel natural, and elevate user experience.",
+    });
+}
+
 const Page = () => {
     const groupedItems = useMemo(() => {
         const pages = source.pageTree;

src/app/docs/components/page.tsx

@@ -4,7 +4,7 @@ import fs from "node:fs/promises";
 
 import { source } from "@/lib/source";
 
-// export const revalidate = 604800;
+export const revalidate = 604800;
 
 export function generateStaticParams() {
     return source.generateParams();

src/app/fetch-mdx/[[...slug]]/route.ts

@@ -0,0 +1,73 @@
+import { ImageResponse } from "next/og";
+
+async function loadGoogleFont(font: string, text: string) {
+    const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
+    const css = await (await fetch(url)).text();
+    const resource = css.match(
+        /src: url\((.+)\) format\('(opentype|truetype)'\)/,
+    );
+
+    if (resource) {
+        const response = await fetch(resource[1]);
+        if (response.status == 200) {
+            return await response.arrayBuffer();
+        }
+    }
+
+    throw new Error('failed to load font data');
+}
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const title = searchParams.get("title");
+    const description = searchParams.get("description");
+
+
+    return new ImageResponse(
+        (
+            <div tw="flex h-full w-full bg-white text-black" style={{ fontFamily: "Work Sans" }}>
+                <div tw="border absolute border-neutral-200 border-dashed inset-y-0 left-16 w-[1px]" />
+                <div tw="border absolute border-neutral-200 border-dashed inset-y-0 right-16 w-[1px]" />
+                <div tw="border absolute border-neutral-200 inset-x-0 h-[1px] bottom-16" />
+                <p tw="absolute bottom-2 right-24 text-neutral-600">
+                    @paceui
+                </p>
+                <div tw="flex flex-col absolute w-[896px] inset-x-32 inset-y-24">
+                    <img src="https://paceui.com/images/brand/logo-light.svg" tw="h-20" alt="Logo"/>
+                    <div tw="flex flex-col mt-24">
+                        <div
+                            tw="tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]"
+                            style={{
+                                textWrap: "balance",
+                                fontSize: title && title.length > 20 ? 64 : 80,
+                                letterSpacing: "-0.04em",
+                            }}>
+                            {title}
+                        </div>
+                        <div
+                            tw="text-[40px] leading-[1.5] flex-grow-1 text-neutral-600 mt-4"
+                            style={{
+                                textWrap: "balance",
+                            }}>
+                            {description}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        ),
+        {
+            width: 1200,
+            height: 630,
+            fonts: [
+                {
+                    name: 'Work Sans',
+                    data: await loadGoogleFont(
+                        'Work Sans',
+                        `${title} ${description} @paceui`,
+                    ),
+                    style: 'normal',
+                },
+            ],
+        },
+    );
+}

src/app/og/route.tsx

@@ -1,3 +1,4 @@
 export * from "./fetch-file";
 export * from "./newsletter";
 export * from "./routes";
+export * from "./metadata";

src/lib/docs/index.ts

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+
+type Props = {
+    title: string;
+    description?: string;
+};
+
+export const getMetadata = ({ title, description }: Props): Metadata => {
+    return {
+        title: title,
+        description: description,
+        openGraph: {
+            title: title,
+            description: description,
+            type: "article",
+            url: "https://ui.paceui.com",
+            images: [
+                {
+                    url: `/og?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description ?? "")}`,
+                },
+            ],
+        },
+        twitter: {
+            card: "summary_large_image",
+            title: title,
+            description: description,
+            images: [
+                {
+                    url: `/og?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description ?? "")}`,
+                },
+            ],
+            creator: "@paceui_",
+        },
+    };
+};