|
1 |
| -import { ImageResponse } from '@vercel/og'; |
2 |
| -import { notFound, redirect } from 'next/navigation'; |
3 | 1 | import type { NextRequest } from 'next/server';
|
4 | 2 |
|
5 |
| -import { getEmojiForCode } from '@/lib/emojis'; |
6 | 3 | import { getSiteContentPointer } from '@/lib/pointer';
|
7 |
| -import { tcls } from '@/lib/tailwind'; |
8 | 4 | import { fetchV1ContextForSitePointer } from '@/lib/v1';
|
9 |
| -import { getResizedImageURL } from '@v2/lib/images'; |
| 5 | +import { serveIcon } from '@/routes/icon'; |
10 | 6 |
|
11 | 7 | export const runtime = 'edge';
|
12 | 8 |
|
13 |
| -const SIZES = { |
14 |
| - /** Size for a favicon */ |
15 |
| - small: { |
16 |
| - width: 48, |
17 |
| - height: 48, |
18 |
| - textSize: 'text-[32px]', |
19 |
| - boxStyle: 'rounded-[8px]', |
20 |
| - }, |
21 |
| - /** Size for display as an app icon or in the header */ |
22 |
| - medium: { |
23 |
| - width: 256, |
24 |
| - height: 256, |
25 |
| - textSize: 'text-[164px]', |
26 |
| - boxStyle: 'rounded-[32px]', |
27 |
| - }, |
28 |
| -}; |
29 |
| - |
30 |
| -/** |
31 |
| - * Generate an icon for a site content. |
32 |
| - */ |
33 | 9 | export async function GET(req: NextRequest) {
|
34 |
| - const options = getOptions(req.url); |
35 | 10 | const pointer = await getSiteContentPointer();
|
36 | 11 | const context = await fetchV1ContextForSitePointer(pointer);
|
37 | 12 |
|
38 |
| - const size = SIZES[options.size]; |
39 |
| - const { site, customization } = context; |
40 |
| - const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null; |
41 |
| - |
42 |
| - // If the site has a custom icon, redirect to it |
43 |
| - if (customIcon) { |
44 |
| - const iconUrl = options.theme === 'light' ? customIcon.light : customIcon.dark; |
45 |
| - redirect( |
46 |
| - await getResizedImageURL(context.imageResizer, iconUrl, { |
47 |
| - width: size.width, |
48 |
| - height: size.height, |
49 |
| - }) |
50 |
| - ); |
51 |
| - } |
52 |
| - |
53 |
| - const contentTitle = site.title; |
54 |
| - return new ImageResponse( |
55 |
| - <div |
56 |
| - tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle)} |
57 |
| - style={{ |
58 |
| - width: '100%', |
59 |
| - height: '100%', |
60 |
| - display: 'flex', |
61 |
| - alignItems: 'center', |
62 |
| - justifyContent: 'center', |
63 |
| - }} |
64 |
| - > |
65 |
| - <h2 |
66 |
| - tw={tcls( |
67 |
| - size.textSize, |
68 |
| - 'font-bold', |
69 |
| - 'tracking-tight', |
70 |
| - options.theme === 'light' ? 'text-black' : 'text-white' |
71 |
| - )} |
72 |
| - > |
73 |
| - {'emoji' in customization.favicon |
74 |
| - ? getEmojiForCode(customization.favicon.emoji) |
75 |
| - : contentTitle.slice(0, 1).toUpperCase()} |
76 |
| - </h2> |
77 |
| - </div>, |
78 |
| - { |
79 |
| - width: size.width, |
80 |
| - height: size.height, |
81 |
| - } |
82 |
| - ); |
83 |
| -} |
84 |
| - |
85 |
| -function getOptions(inputUrl: string): { |
86 |
| - size: keyof typeof SIZES; |
87 |
| - theme: 'light' | 'dark'; |
88 |
| -} { |
89 |
| - const url = new URL(inputUrl); |
90 |
| - const sizeParam = (url.searchParams.get('size') ?? 'small') as keyof typeof SIZES; |
91 |
| - const themeParam = url.searchParams.get('theme') ?? 'light'; |
92 |
| - |
93 |
| - if (!SIZES[sizeParam] || !['light', 'dark'].includes(themeParam)) { |
94 |
| - notFound(); |
95 |
| - } |
96 |
| - |
97 |
| - return { |
98 |
| - // @ts-ignore |
99 |
| - size: sizeParam, |
100 |
| - // @ts-ignore |
101 |
| - theme: themeParam, |
102 |
| - }; |
| 13 | + return serveIcon(context, req); |
103 | 14 | }
|
0 commit comments