Remove safe-photo-image-response checks in favor of centralized solution
This commit is contained in:
parent
284e5fedfb
commit
af672dfcf4
@ -7,7 +7,7 @@ import HomeImageResponse from '@/app/HomeImageResponse';
|
|||||||
import { getIBMPlexMono } from '@/app/font';
|
import { getIBMPlexMono } from '@/app/font';
|
||||||
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
||||||
import { APP_OG_IMAGE_QUERY_OPTIONS } from '@/feed';
|
import { APP_OG_IMAGE_QUERY_OPTIONS } from '@/feed';
|
||||||
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
export const dynamic = 'force-static';
|
export const dynamic = 'force-static';
|
||||||
|
|
||||||
@ -28,15 +28,13 @@ export async function GET() {
|
|||||||
|
|
||||||
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
|
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
|
||||||
|
|
||||||
return safePhotoImageResponse(
|
return new ImageResponse(
|
||||||
photos,
|
|
||||||
isNextImageReady => (
|
|
||||||
<HomeImageResponse {...{
|
<HomeImageResponse {...{
|
||||||
photos: isNextImageReady ? photos : [],
|
photos,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
}}/>
|
}}/>,
|
||||||
), { width, height, headers, fonts },
|
{ width, height, headers, fonts },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import PhotoImageResponse from '@/photo/PhotoImageResponse';
|
|||||||
import { getIBMPlexMono } from '@/app/font';
|
import { getIBMPlexMono } from '@/app/font';
|
||||||
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
||||||
import { staticallyGeneratePhotosIfConfigured } from '@/app/static';
|
import { staticallyGeneratePhotosIfConfigured } from '@/app/static';
|
||||||
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
export const generateStaticParams = staticallyGeneratePhotosIfConfigured(
|
export const generateStaticParams = staticallyGeneratePhotosIfConfigured(
|
||||||
'image',
|
'image',
|
||||||
@ -30,17 +30,13 @@ export async function GET(
|
|||||||
|
|
||||||
const { width, height } = IMAGE_OG_DIMENSION;
|
const { width, height } = IMAGE_OG_DIMENSION;
|
||||||
|
|
||||||
return safePhotoImageResponse(
|
return new ImageResponse(
|
||||||
[photo],
|
|
||||||
isNextImageReady => (
|
|
||||||
<PhotoImageResponse {...{
|
<PhotoImageResponse {...{
|
||||||
photo,
|
photo,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
isNextImageReady,
|
}} />,
|
||||||
}} />
|
|
||||||
),
|
|
||||||
{ width, height, fonts, headers },
|
{ width, height, fonts, headers },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@ import { getIBMPlexMono } from '@/app/font';
|
|||||||
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
||||||
import { getAppText } from '@/i18n/state/server';
|
import { getAppText } from '@/i18n/state/server';
|
||||||
import { SHOW_RECENTS } from '@/app/config';
|
import { SHOW_RECENTS } from '@/app/config';
|
||||||
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
export const dynamic = 'force-static';
|
export const dynamic = 'force-static';
|
||||||
|
|
||||||
@ -35,17 +35,14 @@ export async function GET() {
|
|||||||
|
|
||||||
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
|
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
|
||||||
|
|
||||||
return safePhotoImageResponse(
|
return new ImageResponse(
|
||||||
photos,
|
|
||||||
isNextImageReady => (
|
|
||||||
<RecentsImageResponse {...{
|
<RecentsImageResponse {...{
|
||||||
title,
|
title,
|
||||||
photos: isNextImageReady ? photos : [],
|
photos,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
}}/>
|
}}/>,
|
||||||
),
|
|
||||||
{ width, height, fonts, headers },
|
{ width, height, fonts, headers },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import TemplateImageResponse from
|
|||||||
'@/app/TemplateImageResponse';
|
'@/app/TemplateImageResponse';
|
||||||
import { getIBMPlexMono } from '@/app/font';
|
import { getIBMPlexMono } from '@/app/font';
|
||||||
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
||||||
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
export async function GET() {
|
export async function GET() {
|
||||||
const [
|
const [
|
||||||
@ -25,23 +25,15 @@ export async function GET() {
|
|||||||
|
|
||||||
const { width, height } = IMAGE_OG_DIMENSION;
|
const { width, height } = IMAGE_OG_DIMENSION;
|
||||||
|
|
||||||
return safePhotoImageResponse(
|
return new ImageResponse(
|
||||||
photos,
|
|
||||||
isNextImageReady => (
|
|
||||||
<TemplateImageResponse {...{
|
<TemplateImageResponse {...{
|
||||||
photos: isNextImageReady ? photos : [],
|
photos,
|
||||||
includeHeader: false,
|
includeHeader: false,
|
||||||
outerMargin: 0,
|
outerMargin: 0,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
}}/>
|
}}/>,
|
||||||
),
|
{ width, height, fonts, headers },
|
||||||
{
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
fonts,
|
|
||||||
headers,
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import TemplateImageResponse from
|
|||||||
'@/app/TemplateImageResponse';
|
'@/app/TemplateImageResponse';
|
||||||
import { getIBMPlexMono } from '@/app/font';
|
import { getIBMPlexMono } from '@/app/font';
|
||||||
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
|
||||||
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
export async function GET() {
|
export async function GET() {
|
||||||
const [
|
const [
|
||||||
@ -25,16 +25,13 @@ export async function GET() {
|
|||||||
|
|
||||||
const { width, height } = GRID_OG_DIMENSION;
|
const { width, height } = GRID_OG_DIMENSION;
|
||||||
|
|
||||||
return safePhotoImageResponse(
|
return new ImageResponse(
|
||||||
photos,
|
|
||||||
isNextImageReady => (
|
|
||||||
<TemplateImageResponse {...{
|
<TemplateImageResponse {...{
|
||||||
photos: isNextImageReady ? photos : [],
|
photos,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
}}/>
|
}}/>,
|
||||||
),
|
|
||||||
{ width, height, fonts, headers },
|
{ width, height, fonts, headers },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,13 +12,11 @@ export default function PhotoImageResponse({
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
isNextImageReady = true,
|
|
||||||
}: {
|
}: {
|
||||||
photo: Photo
|
photo: Photo
|
||||||
width: NextImageSize
|
width: NextImageSize
|
||||||
height: number
|
height: number
|
||||||
fontFamily: string
|
fontFamily: string
|
||||||
isNextImageReady: boolean
|
|
||||||
}) {
|
}) {
|
||||||
const caption = [
|
const caption = [
|
||||||
photo.model
|
photo.model
|
||||||
@ -34,7 +32,7 @@ export default function PhotoImageResponse({
|
|||||||
return (
|
return (
|
||||||
<ImageContainer>
|
<ImageContainer>
|
||||||
<ImagePhotoGrid {...{
|
<ImagePhotoGrid {...{
|
||||||
photos: isNextImageReady ? [photo] : [],
|
photos: [photo],
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },
|
...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },
|
||||||
|
|||||||
@ -1,36 +0,0 @@
|
|||||||
import { Photo } from '@/photo';
|
|
||||||
import { ImageResponse } from 'next/og';
|
|
||||||
import { JSX } from 'react';
|
|
||||||
import { IS_PREVIEW } from '@/app/config';
|
|
||||||
import { getOptimizedPhotoUrl } from '@/photo/storage';
|
|
||||||
|
|
||||||
const isNextImageReadyBasedOnPhotos = async (
|
|
||||||
photos: Photo[],
|
|
||||||
): Promise<boolean> =>
|
|
||||||
photos.length > 0 &&
|
|
||||||
fetch(getOptimizedPhotoUrl({
|
|
||||||
imageUrl: photos[0].url,
|
|
||||||
size: 640,
|
|
||||||
addBypassSecret: IS_PREVIEW,
|
|
||||||
}))
|
|
||||||
.then(response => response.ok)
|
|
||||||
.catch(() => false);
|
|
||||||
|
|
||||||
export const safePhotoImageResponse = async (
|
|
||||||
photos: Photo[],
|
|
||||||
jsx: (isNextImageReady: boolean) => JSX.Element,
|
|
||||||
options: ConstructorParameters<typeof ImageResponse>[1],
|
|
||||||
disableCheck = true,
|
|
||||||
) => {
|
|
||||||
// Make sure next/image can be reached from absolute urls,
|
|
||||||
// which may not exist on first pre-render
|
|
||||||
const isNextImageReady = (
|
|
||||||
disableCheck ||
|
|
||||||
await isNextImageReadyBasedOnPhotos(photos)
|
|
||||||
);
|
|
||||||
|
|
||||||
return new ImageResponse(
|
|
||||||
jsx(isNextImageReady),
|
|
||||||
options,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user