hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-26 10:55:57 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix error

Browse Source
This commit is contained in:
SonMooSans
2023-08-31 20:49:13 +08:00
parent 4e81aeb738
commit 024ceae705
3 changed files with 161 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/app/api/og/[mode]/og.tsx
+128
View File
@@ -0,0 +1,128 @@
/* eslint-disable */
function OG({
title,
description,
isUI,
backgroundImage
}: {
isUI: boolean
title: string
description: string
backgroundImage: any
}) {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
padding: '3.5rem',
justifyContent: 'space-between'
}}
>
<img
width={1200}
height={630}
src={backgroundImage}
style={{
position: 'absolute'
}}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: '3rem'
}}
>
<div
style={{
display: 'flex',
padding: '0.75rem',
border: `2px ${isUI ? 'rgb(96 165 250)' : 'rgb(192 132 252)'}`,
borderRadius: '0.75rem',
background: `linear-gradient(to bottom, black, ${
isUI ? 'rgb(0,50,150)' : 'rgb(150,50,150)'
})`
}}
>
{isUI ? (
<svg
width="44"
height="44"
viewBox="0 0 24 24"
fill="none"
stroke="rgb(165 243 252)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
<line x1="3" x2="21" y1="9" y2="9" />
<line x1="9" x2="9" y1="21" y2="9" />
</svg>
) : (
<svg
width="44"
height="44"
viewBox="0 0 24 24"
fill="none"
stroke="rgb(233 213 255)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
)}
</div>
<p
style={{
color: 'rgb(229 231 235)',
fontWeight: 700,
marginLeft: '1.5rem',
fontSize: '2.25rem'
}}
>
{isUI ? 'Next Docs UI' : 'Next Docs Zeta'}
</p>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
padding: '2.5rem',
border: '1px rgba(156,163,175,0.3)',
borderRadius: '1.5rem',
background:
'linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.02))'
}}
>
<p
style={{
color: 'white',
fontWeight: 700,
fontSize: '3.75rem'
}}
>
{title}
</p>
<p
style={{
color: 'rgb(209 213 219)',
fontWeight: 500,
fontSize: '1.875rem'
}}
>
{description}
</p>
</div>
</div>
)
}
apps/docs/app/api/og/[mode]/route.ts
+33
View File
@@ -0,0 +1,33 @@
import { ImageResponse, type NextRequest } from 'next/server'
export const runtime = 'edge'
const medium = fetch(new URL('./inter-medium.otf', import.meta.url)).then(res =>
res.arrayBuffer()
)
const backgroundImage = fetch(
new URL('./background.png', import.meta.url)
).then(res => res.arrayBuffer())
export async function GET(
request: NextRequest,
{ params }: { params: { mode: string } }
) {
const title = request.nextUrl.searchParams.get('title'),
description = request.nextUrl.searchParams.get('description')
return new ImageResponse(
OG({
title: title ?? 'Next Docs',
description: description ?? 'The Documentation Framework',
isUI: params.mode === 'ui',
backgroundImage
}),
{
width: 1200,
height: 630,
fonts: [{ name: 'Inter', data: await medium, weight: 500 }]
}
)
}
apps/docs/app/api/og/[mode]/route.tsx
-99
View File
@@ -1,99 +0,0 @@
/* eslint-disable */
import { ImageResponse, type NextRequest } from 'next/server'
export const runtime = 'edge'
const medium = fetch(new URL('./inter-medium.otf', import.meta.url)).then(res =>
res.arrayBuffer()
)
const backgroundImage = fetch(
new URL('./background.png', import.meta.url)
).then(res => res.arrayBuffer())
export async function GET(
request: NextRequest,
{ params }: { params: { mode: string } }
) {
const title = request.nextUrl.searchParams.get('title') ?? 'Next Docs',
description =
request.nextUrl.searchParams.get('description') ??
'The Documentation Framework'
const isUI = params.mode === 'ui'
return new ImageResponse(
(
<div tw="flex flex-col w-full h-full p-14 justify-between">
<img src={(await backgroundImage) as any} tw="absolute top-0 right-0" />
<div tw="flex flex-row items-center mb-12">
<div
tw={`flex p-3 border-2 rounded-xl shadow-xl ${
isUI
? 'shadow-blue-600 border-blue-400'
: 'shadow-purple-600 border-purple-400'
}`}
style={{
background: `linear-gradient(to bottom, black, ${
isUI ? 'rgb(0,50,150)' : 'rgb(150,50,150)'
})`
}}
>
{isUI ? (
<svg
width="44"
height="44"
viewBox="0 0 24 24"
fill="none"
stroke="rgb(165 243 252)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
<line x1="3" x2="21" y1="9" y2="9" />
<line x1="9" x2="9" y1="21" y2="9" />
</svg>
) : (
<svg
width="44"
height="44"
viewBox="0 0 24 24"
fill="none"
stroke="rgb(233 213 255)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
)}
</div>
<p tw="text-gray-200 font-bold ml-6 text-4xl">
{isUI ? 'Next Docs UI' : 'Next Docs Zeta'}
</p>
</div>
<div
tw="flex flex-col p-10 border border-gray-400/30 rounded-3xl"
style={{
background:
'linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.02))'
}}
>
<p tw="text-white font-bold text-6xl">{title}</p>
<p tw="text-gray-300 font-medium text-3xl">
{description ?? 'The Documentation Framework'}
</p>
</div>
</div>
),
{
width: 1200,
height: 630,
fonts: [{ name: 'Inter', data: await medium, weight: 500 }]
}
)
}