feat(www): update og (#6658)

* feat(www): update og

* fix: remove export

apps/www/app/(app)/blocks/layout.tsx

@@ -13,10 +13,32 @@ import { Button } from "@/registry/new-york/ui/button"
 import "@/styles/mdx.css"
 import Link from "next/link"
 
+const title = "Building Blocks for the Web"
+const description =
+  "Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
+
 export const metadata: Metadata = {
-  title: "Building Blocks.",
-  description:
-    "Beautifully designed. Copy and paste into your apps. Open Source.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function BlocksLayout({
@@ -28,11 +50,8 @@ export default function BlocksLayout({
     <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
-        <PageHeaderDescription>
-          Clean, modern building blocks. Copy and paste into your apps. Works
-          with all React frameworks. Open Source. Free forever.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#blocks">Browse Blocks</a>

apps/www/app/(app)/charts/layout.tsx

@@ -11,10 +11,32 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Beautiful Charts"
+const description =
+  "Built using Recharts. Copy and paste into your apps. Open Source."
+
 export const metadata: Metadata = {
-  title: "Beautiful Charts",
-  description:
-    "Built using Recharts. Copy and paste into your apps. Open Source.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function ChartsLayout({
@@ -26,10 +48,8 @@ export default function ChartsLayout({
     <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
-        <PageHeaderDescription>
-          Built using Recharts. Copy and paste into your apps. Open Source.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#charts">Browse Charts</a>

apps/www/app/(app)/colors/layout.tsx

@@ -10,9 +10,31 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Color Library"
+const description = "Tailwind CSS colors in HSL, RGB, HEX and OKLCH formats."
+
 export const metadata: Metadata = {
-  title: "Tailwind Colors",
-  description: "All colors in all formats.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function ColorsLayout({
@@ -24,10 +46,8 @@ export default function ColorsLayout({
     <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
-        <PageHeaderDescription>
-          Tailwind CSS colors in HSL, RGB, and HEX formats.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <a href="#colors">Browse Colors</a>

apps/www/app/(app)/docs/[[...slug]]/page.tsx

@@ -7,7 +7,6 @@ import Link from "next/link"
 import { ChevronRight, ExternalLink } from "lucide-react"
 import Balancer from "react-wrap-balancer"
 
-import { siteConfig } from "@/config/site"
 import { getTableOfContents } from "@/lib/toc"
 import { absoluteUrl, cn } from "@/lib/utils"
 import { Mdx } from "@/components/mdx-components"
@@ -52,10 +51,9 @@ export async function generateMetadata({
       url: absoluteUrl(doc.slug),
       images: [
         {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
         },
       ],
     },
@@ -63,7 +61,13 @@ export async function generateMetadata({
       card: "summary_large_image",
       title: doc.title,
       description: doc.description,
-      images: [siteConfig.ogImage],
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            doc.title
+          )}&description=${encodeURIComponent(doc.description)}`,
+        },
+      ],
       creator: "@shadcn",
     },
   }

apps/www/app/(app)/examples/layout.tsx

@@ -11,9 +11,31 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Examples"
+const description = "Check out some examples app built using the components."
+
 export const metadata: Metadata = {
-  title: "Examples",
-  description: "Check out some examples app built using the components.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function ExamplesLayout({
@@ -27,8 +49,8 @@ export default function ExamplesLayout({
         <Announcement />
         <PageHeaderHeading>Build your component library</PageHeaderHeading>
         <PageHeaderDescription>
-          Beautifully designed components that you can copy and paste into your
-          apps. Made with Tailwind CSS. Open source.
+          A set of beautifully-designed, accessible, and customizable components
+          to help you build your component library. Open Source.
         </PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">

apps/www/app/(app)/og/route.tsx

@@ -0,0 +1,117 @@
+import { ImageResponse } from "next/og"
+
+async function loadAssets(): Promise<
+  { name: string; data: Buffer; weight: 400 | 600; style: "normal" }[]
+> {
+  const [
+    { base64Font: normal },
+    { base64Font: mono },
+    { base64Font: semibold },
+  ] = await Promise.all([
+    import("./geist-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geistmono-regular-otf.json").then((mod) => mod.default || mod),
+    import("./geist-semibold-otf.json").then((mod) => mod.default || mod),
+  ])
+
+  return [
+    {
+      name: "Geist",
+      data: Buffer.from(normal, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist Mono",
+      data: Buffer.from(mono, "base64"),
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+    {
+      name: "Geist",
+      data: Buffer.from(semibold, "base64"),
+      weight: 600 as const,
+      style: "normal" as const,
+    },
+  ]
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const title = searchParams.get("title")
+  const description = searchParams.get("description")
+
+  const [fonts] = await Promise.all([loadAssets()])
+
+  return new ImageResponse(
+    (
+      <div
+        tw="flex h-full w-full bg-black text-white"
+        style={{ fontFamily: "Geist Sans" }}
+      >
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 left-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 border-dashed inset-y-0 right-16 w-[1px]" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] top-16" />
+        <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] bottom-16" />
+        <div tw="flex absolute flex-row bottom-24 right-24 text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            width={48}
+            height={48}
+          >
+            <rect width="256" height="256" fill="none"></rect>
+            <line
+              x1="208"
+              y1="128"
+              x2="128"
+              y2="208"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+            <line
+              x1="192"
+              y1="40"
+              x2="40"
+              y2="192"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="32"
+            ></line>
+          </svg>
+        </div>
+        <div tw="flex flex-col absolute w-[896px] justify-center inset-32">
+          <div
+            tw="tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]"
+            style={{
+              textWrap: "balance",
+              fontWeight: 600,
+              fontSize: title && title.length > 20 ? 64 : 80,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            {title}
+          </div>
+          <div
+            tw="text-[40px] leading-[1.5] flex-grow-1 text-stone-400"
+            style={{
+              fontWeight: 500,
+              textWrap: "balance",
+            }}
+          >
+            {description}
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 628,
+      fonts,
+    }
+  )
+}

apps/www/app/(app)/page.tsx

@@ -1,3 +1,4 @@
+import { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 
@@ -12,16 +13,41 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+const title = "Build your component library"
+const description =
+  "A set of beautifully-designed, accessible, and customizable components to help you build your component library. Open Source."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
 export default function IndexPage() {
   return (
     <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Build your component library</PageHeaderHeading>
-        <PageHeaderDescription>
-          A set of beautifully-designed, accessible, and customizable components
-          to help you build your component library. Open Source.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
             <Link href="/docs">Get Started</Link>

apps/www/app/(app)/themes/layout.tsx

@@ -9,9 +9,32 @@ import {
 } from "@/components/page-header"
 import { ThemeCustomizer } from "@/components/theme-customizer"
 
+const title = "Add colors. Make it yours."
+const description =
+  "Hand-picked themes that you can copy and paste into your apps."
+
 export const metadata: Metadata = {
-  title: "Themes",
-  description: "Hand-picked themes that you can copy and paste into your apps.",
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
 }
 
 export default function ThemesLayout({
@@ -23,15 +46,8 @@ export default function ThemesLayout({
     <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading className="hidden md:block">
-          Add colors. Make it yours.
-        </PageHeaderHeading>
-        <PageHeaderHeading className="md:hidden">
-          Make it yours
-        </PageHeaderHeading>
-        <PageHeaderDescription>
-          Hand-picked themes that you can copy and paste into your apps.
-        </PageHeaderDescription>
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <ThemeCustomizer />
         </PageActions>