fix og image (#3504)

* fix og image

* Update route.tsx

* remove vercel og

docs/app/og/route.tsx

@@ -0,0 +1,62 @@
+/* eslint react/no-unknown-property: ['error', { ignore: ['tw'] }] */
+import { NextraLogo } from '@components/icons'
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+const font = fetch(new URL('./Inter-SemiBold.otf', import.meta.url)).then(res =>
+ res.arrayBuffer()
+)
+
+export async function GET(req: Request): Promise<Response> {
+ try {
+ const { searchParams } = new URL(req.url)
+
+ // ?title=<title>
+ const title =
+ searchParams.get('title')?.slice(0, 75) || 'Nextra Documentation'
+
+ return new ImageResponse(
+ (
+ <div
+ tw="text-white px-20 py-[70px] bg-[#030303] h-full w-full flex justify-between flex-col"
+ style={{
+ backgroundImage:
+ 'radial-gradient(circle at 25px 25px, #333 2%, transparent 0%), radial-gradient(circle at 75px 75px, #333 2%, transparent 0%)',
+ backgroundSize: '100px 100px',
+ backgroundPosition: '-30px -10px'
+ }}
+ >
+ <NextraLogo height="40" />
+ <h1
+ tw="text-transparent text-[82px] m-0 mb-10 tracking-tighter leading-[1.1]"
+ style={{
+ textShadow: '0 2px 30px #000',
+ backgroundImage: 'linear-gradient(90deg, #fff 40%, #aaa)',
+ backgroundClip: 'text'
+ }}
+ >
+ {title}
+ </h1>
+ <p tw="m-0 text-3xl tracking-tight">
+ Create beautiful websites with Next.js & MDX.
+ </p>
+ </div>
+ ),
+ {
+ width: 1200,
+ height: 630,
+ fonts: [
+ {
+ name: 'inter',
+ data: await font,
+ style: 'normal'
+ }
+ ]
+ }
+ )
+ } catch (error) {
+ console.error(error)
+ return new Response('Failed to generate the image', { status: 500 })
+ }
+}

docs/components/icons/index.ts

@@ -25,3 +25,4 @@ export { default as SwitchIcon } from './switch.svg'
 export { default as DiagramIcon } from './diagram.svg'
 export { default as FolderTreeIcon } from './folder-tree.svg'
 export { default as IdCardIcon } from './id-card.svg'
+export { default as NextraLogo } from './nextra.svg'

docs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

docs/package.json

@@ -9,7 +9,6 @@
  "start": "next start"
  },
  "dependencies": {
- "@vercel/og": "^0.6.0",
  "clsx": "^2.0.0",
  "framer-motion": "^11.0.0",
  "next": "^14.2.5",

docs/theme.config.tsx

@@ -66,7 +66,7 @@ const config: DocsThemeConfig = {
  const isDefault = route === '/' || !config.title
  const image =
  'https://nextra.site/' +
- (isDefault ? 'og.jpeg' : `api/og?title=${config.title}`)
+ (isDefault ? 'og.jpeg' : `/og?title=${config.title}`)
 
  const description =
  config.frontMatter.description ||