From b34e200513b23d9fb913698173cd408f01f63f9c Mon Sep 17 00:00:00 2001 From: Maxwell <145994855+ping-maxwell@users.noreply.github.com> Date: Tue, 3 Mar 2026 12:05:11 -0800 Subject: [PATCH] docs: fix OG image (#8342) --- landing/app/api/og-release/route.tsx | 171 +++++++++++++++++++++ landing/app/api/og/route.tsx | 208 ++++++++++++++++++++++++++ landing/app/blog/[[...slug]]/page.tsx | 41 +++-- landing/app/blog/layout.tsx | 11 ++ landing/app/docs/[[...slug]]/page.tsx | 26 ++++ landing/app/layout.tsx | 20 ++- landing/assets/Geist.ttf | Bin 0 -> 106024 bytes landing/assets/GeistMono.ttf | Bin 0 -> 114088 bytes landing/package.json | 1 + pnpm-lock.yaml | 38 +++++ 10 files changed, 499 insertions(+), 17 deletions(-) create mode 100644 landing/app/api/og-release/route.tsx create mode 100644 landing/app/api/og/route.tsx create mode 100644 landing/assets/Geist.ttf create mode 100644 landing/assets/GeistMono.ttf diff --git a/landing/app/api/og-release/route.tsx b/landing/app/api/og-release/route.tsx new file mode 100644 index 0000000000..4d76eb8070 --- /dev/null +++ b/landing/app/api/og-release/route.tsx @@ -0,0 +1,171 @@ +import { ImageResponse } from "@vercel/og"; +import * as z from "zod"; +export const runtime = "edge"; + +const ogSchema = z.object({ + heading: z.string(), + description: z.string().optional(), + date: z.string().optional(), +}); + +export async function GET(req: Request) { + try { + const geist = await fetch( + new URL("../../../assets/Geist.ttf", import.meta.url), + ).then((res) => res.arrayBuffer()); + + const url = new URL(req.url); + const urlParamsValues = Object.fromEntries(url.searchParams); + const validParams = ogSchema.parse(urlParamsValues); + + const { heading, description, date } = validParams; + const trueHeading = + heading.length > 140 ? `${heading.substring(0, 140)}...` : heading; + + return new ImageResponse( +
+
+
+ +
+
=20'} hasBin: true + '@vercel/og@0.10.1': + resolution: {integrity: sha512-Ilhy0kQyTkeQsk3kAi4NrKzWxwaItHqIHlROrtZGscUGuqvE1N5gib0bPlr06NJdnxlBsDo7J169N7XKf4M19A==} + engines: {node: '>=16'} + '@vercel/og@0.8.6': resolution: {integrity: sha512-hBcWIOppZV14bi+eAmCZj8Elj8hVSUZJTpf1lgGBhVD85pervzQ1poM/qYfFUlPraYSZYP+ASg6To5BwYmUSGQ==} engines: {node: '>=16'} @@ -9391,6 +9398,10 @@ packages: resolution: {integrity: sha512-3O5QdqgFRUbXvK1x5INf1YkBz1UKSWqrd63vWsum8MNHDBYD5urm3QtxZbKU259OrEXNM26lP/MPY3d1IGkBgA==} engines: {node: '>=16'} + css-gradient-parser@0.0.17: + resolution: {integrity: sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==} + engines: {node: '>=16'} + css-in-js-utils@3.1.0: resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==} @@ -14858,6 +14869,10 @@ packages: resolution: {integrity: sha512-ZvHN3ygzZ8FuxjSNB+mKBiF/NIoqHzlBGbD0MJiT+MvSsFOvotnWOhdTjxKzhHRT2wPC1QbhLzx2q/Y83VhfYQ==} engines: {node: '>=16'} + satori@0.21.0: + resolution: {integrity: sha512-PV5II6Z+gsFFLq4jp6mslt0ObNRzcTi5Xq+8JtJ3ReqBS9k4nF4ajqITFXygPZgRA6l5+22NYIS1WRTqTfDp5g==} + engines: {node: '>=16'} + sax@1.4.4: resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==} engines: {node: '>=11.0.0'} @@ -24382,6 +24397,13 @@ snapshots: - rollup - supports-color + '@vercel/og@0.10.1': + dependencies: + '@resvg/resvg-wasm': 2.4.0 + satori: 0.21.0 + optionalDependencies: + sharp: 0.34.5 + '@vercel/og@0.8.6': dependencies: '@resvg/resvg-wasm': 2.4.0 @@ -25960,6 +25982,8 @@ snapshots: css-gradient-parser@0.0.16: {} + css-gradient-parser@0.0.17: {} + css-in-js-utils@3.1.0: dependencies: hyphenate-style-name: 1.1.0 @@ -33251,6 +33275,20 @@ snapshots: postcss-value-parser: 4.2.0 yoga-layout: 3.2.1 + satori@0.21.0: + dependencies: + '@shuding/opentype.js': 1.4.0-beta.0 + css-background-parser: 0.1.0 + css-box-shadow: 1.0.0-3 + css-gradient-parser: 0.0.17 + css-to-react-native: 3.2.0 + emoji-regex-xs: 2.0.1 + escape-html: 1.0.3 + linebreak: 1.1.0 + parse-css-color: 0.2.1 + postcss-value-parser: 4.2.0 + yoga-layout: 3.2.1 + sax@1.4.4: {} scheduler@0.27.0: {}