Vercel/app/focal/[focal]/image/route.tsx
Sam Becker e1af77d40c
OG image hovers (#268)
* Create og tooltip component

* Refactor og image handling

* Introduce category hover configuration

* Add og hovers to all categories

* Move category labels to client

* Disable og tooltips in headers

* Prevent og tooltips on accessory/loader hovers
2025-06-19 18:19:59 -05:00

54 lines
1.5 KiB
TypeScript

import { getPhotosCached } from '@/photo/cache';
import {
IMAGE_OG_DIMENSION_SMALL,
MAX_PHOTOS_TO_SHOW_PER_CATEGORY,
} from '@/image-response';
import { getIBMPlexMono } from '@/app/font';
import { ImageResponse } from 'next/og';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import FocalLengthImageResponse from
'@/image-response/FocalLengthImageResponse';
import { formatFocalLength, getFocalLengthFromString } from '@/focal';
import { getUniqueFocalLengths } from '@/photo/db/query';
import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
export const generateStaticParams = staticallyGenerateCategoryIfConfigured(
'focal-lengths',
'image',
getUniqueFocalLengths,
focalLengths => focalLengths
.map(({ focal }) => ({ focal: formatFocalLength(focal) })),
);
export async function GET(
_: Request,
context: { params: Promise<{ focal: string }> },
) {
const focalString = (await context.params).focal;
const focal = getFocalLengthFromString(focalString);
const [
photos,
{ fontFamily, fonts },
headers,
] = await Promise.all([
getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY, focal }),
getIBMPlexMono(),
getImageResponseCacheControlHeaders(),
]);
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
return new ImageResponse(
<FocalLengthImageResponse {...{
focal,
photos,
width,
height,
fontFamily,
}}/>,
{ width, height, fonts, headers },
);
}