From 9b9590a88432d3b886a2d6a69263f1e1cb5831ad Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 28 Nov 2022 21:00:07 +0400 Subject: [PATCH] feat: add dark and light modes to og images --- app/(docs)/docs/[[...slug]]/head.tsx | 2 +- components/docs/mdx-head.tsx | 1 + lib/validations/og.ts | 1 + pages/api/og.tsx | 27 +++++++++++++++++---------- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/app/(docs)/docs/[[...slug]]/head.tsx b/app/(docs)/docs/[[...slug]]/head.tsx index f566c335..37cdf37c 100644 --- a/app/(docs)/docs/[[...slug]]/head.tsx +++ b/app/(docs)/docs/[[...slug]]/head.tsx @@ -8,7 +8,7 @@ export default function Head({ params }) { return ( ) } diff --git a/components/docs/mdx-head.tsx b/components/docs/mdx-head.tsx index 1ed9f07f..79db7d05 100644 --- a/components/docs/mdx-head.tsx +++ b/components/docs/mdx-head.tsx @@ -30,6 +30,7 @@ export default function MdxHead({ params, og }: MdxHeadProps) { ogUrl = new URL(`${url}/api/og`) ogUrl.searchParams.set("heading", ogTitle) ogUrl.searchParams.set("type", og.type) + ogUrl.searchParams.set("mode", og.mode || "dark") } return ( diff --git a/lib/validations/og.ts b/lib/validations/og.ts index fcd31257..bc246f82 100644 --- a/lib/validations/og.ts +++ b/lib/validations/og.ts @@ -3,4 +3,5 @@ import * as z from "zod" export const ogImageSchema = z.object({ heading: z.string(), type: z.string(), + mode: z.enum(["light", "dark"]).default("dark"), }) diff --git a/pages/api/og.tsx b/pages/api/og.tsx index 4236c3eb..3c3f7755 100644 --- a/pages/api/og.tsx +++ b/pages/api/og.tsx @@ -26,18 +26,25 @@ export default async function handler(req: NextRequest) { ? `${values.heading.substring(0, 140)}...` : values.heading + const { mode } = values + const paint = mode === "dark" ? "#fff" : "#000" + const fontSize = heading.length > 100 ? "70px" : "100px" return new ImageResponse( (
- + - + -
+
-
+