docs: add openGraph and twitter images to metadata for enhanced sharing

Author: LuggaPugga

src/app/docs-og/[...slug]/og.tsx

@@ -0,0 +1,96 @@
+import { ImageResponse } from "next/og"
+import type { ReactElement, ReactNode } from "react"
+import type { ImageResponseOptions } from "next/dist/compiled/@vercel/og/types"
+
+interface GenerateProps {
+  title: ReactNode
+  description?: ReactNode
+  primaryTextColor?: string
+}
+
+export function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse {
+  const { title, description, primaryTextColor, ...rest } = options
+
+  return new ImageResponse(
+    generate({
+      title,
+      description,
+      primaryTextColor,
+    }),
+    {
+      width: 1200,
+      height: 630,
+      ...rest,
+    },
+  )
+}
+
+export function generate({
+  primaryTextColor = "rgb(255,150,255)",
+  ...props
+}: GenerateProps): ReactElement {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        color: "white",
+        backgroundColor: "rgb(10,10,10)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          padding: "4rem",
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 600,
+            fontSize: "76px",
+          }}
+        >
+          {props.title}
+        </p>
+        <p
+          style={{
+            fontSize: "48px",
+            color: "rgba(240,240,240,0.7)",
+          }}
+        >
+          {props.description}
+        </p>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "24px",
+            marginTop: "auto",
+            color: primaryTextColor,
+          }}
+        >
+          <img
+            src={`${process.env.NEXT_PUBLIC_BASE_URL}/logo.png`}
+            width="60"
+            height="60"
+            alt="Logo"
+          />
+          <p
+            style={{
+              fontSize: "46px",
+              fontWeight: 600,
+            }}
+          >
+            TheNextLvl
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/docs-og/[...slug]/route.tsx

@@ -0,0 +1,24 @@
+import { generateOGImage } from "./og"
+import { source } from "@/lib/source"
+import { notFound } from "next/navigation"
+
+export async function GET(_req: Request, { params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const page = source.getPage(slug.slice(0, -1))
+  if (!page) notFound()
+
+  return generateOGImage({
+    primaryTextColor: "rgb(240,240,240)",
+    title: page.data.title,
+    description: page.data.description,
+  })
+}
+
+export function generateStaticParams(): {
+  slug: string[]
+}[] {
+  return source.generateParams().map((page) => ({
+    ...page,
+    slug: [...page.slug, "image.png"],
+  }))
+}

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

@@ -54,8 +54,21 @@ export async function generateMetadata(props: { params: Promise<{ slug?: string[
   const page = source.getPage(params.slug)
   if (!page) notFound()
 
+  const image = {
+    url: ["/docs-og", ...(params.slug || []), "image.png"].join("/"),
+    width: 1200,
+    height: 630,
+  }
+
   return {
     title: page.data.title,
     description: page.data.description,
+    openGraph: {
+      images: image,
+    },
+    twitter: {
+      card: "summary_large_image",
+      images: image,
+    },
   }
 }