fix: og

Author: tiesen243

apps/web/app/api/og/route.tsx

@@ -6,13 +6,14 @@ import { OpenGraph } from '@/registry/ui/open-graph'
 
 export const revalidate = false
 
-export async function GET(req: Request) {
+export async function GET(req: Request, _: RouteContext<'/api/og'>) {
   const url = new URL(req.url)
 
-  const { searchParams } = url
-  const title = searchParams.get('title') ?? 'Default Title'
-  const description = searchParams.get('description') ?? 'Default Description'
-  const image = searchParams.get('image') ?? undefined
+  const title = url.searchParams.get('title') ?? ''
+  const description = url.searchParams.get('description') ?? ''
+  let image = url.searchParams.get('image') ?? ''
+  if (image && !image.startsWith('http'))
+    image = new URL(image, req.url).toString()
 
   const fontData = await loadGoogleFont('Geist')
   const logoUrl = new URL('/icon-512.png', req.url).toString()
@@ -23,7 +24,6 @@ export async function GET(req: Request) {
       title={title}
       description={description}
       image={image}
-      // oxlint-disable-next-line jsx-a11y/alt-text, next/no-img-element
       logo={<img src={logoUrl} width={56} height={56} />}
       caption={url.hostname}
     />,

apps/web/content/docs/components/open-graph.mdx

@@ -31,18 +31,19 @@ Copy and paste the following code into your project.
 ```tsx title="app/api/og/route.tsx"
 import { ImageResponse } from 'next/og'
 
+import { OpenGraph } from '@/components/ui/open-graph'
 import { appName } from '@/lib/shared'
-import { OpenGraph } from '@/registry/ui/open-graph'
 
 export const revalidate = false
 
-export async function GET(req: Request) {
+export async function GET(req: Request, _: RouteContext<'/api/og'>) {
   const url = new URL(req.url)
 
-  const { searchParams } = url
-  const title = searchParams.get('title') ?? 'Default Title'
-  const description = searchParams.get('description') ?? 'Default Description'
-  const image = searchParams.get('image') ?? undefined
+  const title = url.searchParams.get('title') ?? ''
+  const description = url.searchParams.get('description') ?? ''
+  let image = url.searchParams.get('image') ?? ''
+  if (image && !image.startsWith('http'))
+    image = new URL(image, req.url).toString()
 
   const logoUrl = new URL('/icon-512.png', req.url).toString()
 
@@ -52,7 +53,6 @@ export async function GET(req: Request) {
       title={title}
       description={description}
       image={image}
-      // oxlint-disable-next-line jsx-a11y/alt-text, next/no-img-element
       logo={<img src={logoUrl} width={56} height={56} />}
       caption={url.hostname}
     />,

apps/web/registry/ui/open-graph.tsx

@@ -22,14 +22,17 @@ function OpenGraph({
   const mutedColor = '#a4a4a4'
   const isImageOnly = !props.title && !props.description
 
+  const MAX_TITLE_LENGTH = props.image ? 35 : 60
+  const MAX_DESCRIPTION_LENGTH = props.image ? 160 : 300
+
   const truncatedTitle = props.title
-    ? props.title.length > 35
-      ? props.title.slice(0, 32) + '...'
+    ? props.title.length > MAX_TITLE_LENGTH
+      ? props.title.slice(0, MAX_TITLE_LENGTH - 3) + '...'
       : props.title
     : ''
   const truncatedDescription = props.description
-    ? props.description.length > 160
-      ? props.description.slice(0, 157) + '...'
+    ? props.description.length > MAX_DESCRIPTION_LENGTH
+      ? props.description.slice(0, MAX_DESCRIPTION_LENGTH - 3) + '...'
       : props.description
     : ''