From b6093426e1cb432cc902d6e999d10cfa29974eb3 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 6 Sep 2023 22:00:40 -0500 Subject: [PATCH] Add 16:9 template image --- README.md | 2 +- src/app/(isr)/template-image-tight/route.tsx | 44 ++++++++++++++++++ src/app/(isr)/template-url/route.tsx | 2 +- .../image-response/DeployImageResponse.tsx | 46 +++++++++++-------- .../image-response/PhotoGridImageResponse.tsx | 3 ++ 5 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 src/app/(isr)/template-image-tight/route.tsx diff --git a/README.md b/README.md index 57acf62b..f891fa09 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ _Database schema changes are expected._ ![App Preview](app-preview.png) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Ftemplate-image&project-name=Photo+Blog&repository-name=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Ftemplate-image-tight&project-name=Photo+Blog&repository-name=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D) ### 1. Deploy to Vercel diff --git a/src/app/(isr)/template-image-tight/route.tsx b/src/app/(isr)/template-image-tight/route.tsx new file mode 100644 index 00000000..57689577 --- /dev/null +++ b/src/app/(isr)/template-image-tight/route.tsx @@ -0,0 +1,44 @@ +import DeployImageResponse from '@/photo/image-response/DeployImageResponse'; +import { getPhotos } from '@/services/postgres'; +import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font'; +import { ImageResponse } from '@vercel/og'; + +const DEBUG_CACHING: boolean = true; + +export const runtime = 'edge'; + +export async function GET(request: Request) { + const photos = await getPhotos('priority'); + const fontData = await getIBMPlexMonoMedium(); + + return new ImageResponse( + ( + + ), + { + width: 1200, + height: 1200 * 900 / 1600, + fonts: [ + { + name: FONT_FAMILY_IBM_PLEX_MONO, + data: fontData, + style: 'normal', + }, + ], + headers: { + 'Cache-Control': DEBUG_CACHING + ? 's-maxage=1' + : 's-maxage=3600, stale-while-revalidate', + }, + }, + ); +} diff --git a/src/app/(isr)/template-url/route.tsx b/src/app/(isr)/template-url/route.tsx index e32e34bb..d1df37aa 100644 --- a/src/app/(isr)/template-url/route.tsx +++ b/src/app/(isr)/template-url/route.tsx @@ -12,7 +12,7 @@ export function GET() { url.searchParams.set('demo-description', DESCRIPTION); url.searchParams.set('demo-url', 'https://photos.sambecker.com'); url.searchParams.set('demo-description', DESCRIPTION); - url.searchParams.set('demo-image', 'https://photos.sambecker.com/template-image'); + url.searchParams.set('demo-image', 'https://photos.sambecker.com/template-image-tight'); url.searchParams.set('project-name', TITLE); url.searchParams.set('repository-name', REPO_NAME); url.searchParams.set('repository-url', `https://github.com/sambecker/${REPO_NAME}`); diff --git a/src/photo/image-response/DeployImageResponse.tsx b/src/photo/image-response/DeployImageResponse.tsx index c0fd9937..d0526fde 100644 --- a/src/photo/image-response/DeployImageResponse.tsx +++ b/src/photo/image-response/DeployImageResponse.tsx @@ -10,7 +10,9 @@ export default function DeployImageResponse({ height, fontFamily, outerMargin = 50, + includeHeader = true, darkMode = true, + verticalOffset, }: { photos: Photo[] request: Request @@ -18,7 +20,9 @@ export default function DeployImageResponse({ height: number fontFamily: string outerMargin?: number + includeHeader?: boolean darkMode?: boolean + verticalOffset?: number }) { const innerWidth = width - (outerMargin * 2); @@ -45,33 +49,34 @@ export default function DeployImageResponse({ marginBottom: outerMargin, width: '100%', }}> -
+ {includeHeader &&
- +
+ +
+
+ +
-
- -
-
-
+ }
); diff --git a/src/photo/image-response/PhotoGridImageResponse.tsx b/src/photo/image-response/PhotoGridImageResponse.tsx index 061781a4..92c6abc8 100644 --- a/src/photo/image-response/PhotoGridImageResponse.tsx +++ b/src/photo/image-response/PhotoGridImageResponse.tsx @@ -10,6 +10,7 @@ export default function PhotoGridImageResponse({ colCount, rowCount, gap = 12, + verticalOffset, }: { photos: Photo[] request: Request @@ -17,6 +18,7 @@ export default function PhotoGridImageResponse({ colCount: number rowCount: number gap?: number + verticalOffset?: number }) { const imageWidth = (width - ((colCount - 1) * gap)) / colCount ; @@ -24,6 +26,7 @@ export default function PhotoGridImageResponse({
{photos .slice(0, colCount * rowCount)