82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { NextRequest } from 'next/server';
|
|
|
|
export const runtime = 'edge';
|
|
|
|
export async function GET(req: NextRequest) {
|
|
const { searchParams } = req.nextUrl;
|
|
const title = searchParams.get('title');
|
|
const description = searchParams.get('description');
|
|
const font = fetch(new URL('./mono.ttf', import.meta.url)).then((res) =>
|
|
res.arrayBuffer(),
|
|
);
|
|
const fontData = await font;
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
height: '100%',
|
|
width: '100%',
|
|
backgroundColor: '#000',
|
|
color: '#fff',
|
|
fontFamily: 'Geist Sans'
|
|
}}
|
|
>
|
|
<div style={{
|
|
position: 'absolute',
|
|
border: '1px dashed #404040',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: '64px',
|
|
width: '1px'
|
|
}} />
|
|
{/* Repite el mismo patrón para los otros bordes */}
|
|
|
|
<div style={{
|
|
position: 'absolute',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '896px',
|
|
justifyContent: 'center',
|
|
top: '128px',
|
|
bottom: '128px',
|
|
left: '128px',
|
|
right: '128px'
|
|
}}>
|
|
<div style={{
|
|
letterSpacing: '-0.04em',
|
|
textWrap: 'balance' as any,
|
|
fontWeight: 600,
|
|
fontSize: title && title.length > 20 ? 64 : 80,
|
|
lineHeight: '1.1'
|
|
}}>
|
|
{title}
|
|
</div>
|
|
<div style={{
|
|
fontSize: '40px',
|
|
lineHeight: '1.5',
|
|
color: '#a3a3a3',
|
|
fontWeight: 500,
|
|
textWrap: 'balance' as any
|
|
}}>
|
|
{`${description?.slice(0, 100)}`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 628,
|
|
fonts: [
|
|
{
|
|
name: 'Jetbrains Mono',
|
|
data: fontData,
|
|
style: 'normal',
|
|
},
|
|
],
|
|
}
|
|
);
|
|
}
|