95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { NextRequest } from 'next/server';
|
|
|
|
export const runtime = 'edge';
|
|
|
|
export async function GET(req: NextRequest) {
|
|
try {
|
|
const { searchParams } = new URL(req.url);
|
|
|
|
// ?title=<title>
|
|
const hasTitle = searchParams.has('title');
|
|
const title = hasTitle
|
|
? searchParams.get('title')?.slice(0, 100)
|
|
: 'My default title';
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#fff',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: 60,
|
|
fontStyle: 'normal',
|
|
letterSpacing: '-0.025em',
|
|
color: 'black',
|
|
marginTop: 30,
|
|
padding: '0 120px',
|
|
lineHeight: 1.4,
|
|
whiteSpace: 'pre-wrap',
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
}
|
|
);
|
|
} catch (error: unknown) {
|
|
console.log(`${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
return new Response(`Failed to generate the image`, {
|
|
status: 500,
|
|
});
|
|
}
|
|
}
|
|
|
|
// Default export za korištenje u app/search/[collection]/opengraph-image.tsx
|
|
export default async function OpengraphImage({ title = 'My default title' }: { title?: string }) {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#fff',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: 60,
|
|
fontStyle: 'normal',
|
|
letterSpacing: '-0.025em',
|
|
color: 'black',
|
|
marginTop: 30,
|
|
padding: '0 120px',
|
|
lineHeight: 1.4,
|
|
whiteSpace: 'pre-wrap',
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
}
|
|
);
|
|
}
|