strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 16:9 template image

Browse Source
This commit is contained in:
Sam Becker 2023-09-06 22:00:40 -05:00
parent 56c9a5fe7c
commit b6093426e1
5 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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

44
src/app/(isr)/template-image-tight/route.tsx Normal file
View File

@ -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(
(
<DeployImageResponse {...{
photos,
request,
includeHeader: false,
outerMargin: 0,
width: 1200,
height: 1200 * 900 / 1600,
verticalOffset: -30,
fontFamily: FONT_FAMILY_IBM_PLEX_MONO,
}}/>
),
{
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',
},
},
);
}

2
src/app/(isr)/template-url/route.tsx
View File

@ -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}`);

46
src/photo/image-response/DeployImageResponse.tsx
View File

@ -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%',
}}>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
flexGrow: 1,
}}>
{includeHeader &&
<div style={{
display: 'flex',
border: '2px solid #333',
alignItems: 'center',
borderRadius: 8,
justifyContent: 'flex-start',
flexGrow: 1,
}}>
<div style={{
display: 'flex',
padding: '3px 10px',
color: '#333',
borderRight: '2px solid #333',
border: '2px solid #333',
alignItems: 'center',
borderRadius: 8,
}}>
<IconFullFrame includeTitle={false} width={80} />
<div style={{
display: 'flex',
padding: '3px 10px',
color: '#333',
borderRight: '2px solid #333',
}}>
<IconFullFrame includeTitle={false} width={80} />
</div>
<div style={{
display: 'flex',
padding: '3px 10px',
}}>
<IconGrid includeTitle={false} width={80} />
</div>
</div>
<div style={{
display: 'flex',
padding: '3px 10px',
}}>
<IconGrid includeTitle={false} width={80} />
</div>
</div>
</div>
</div>}
<div style={{
display: 'flex',
justifyContent: 'flex-end',
@ -86,6 +91,7 @@ export default function DeployImageResponse({
colCount: 4,
rowCount: 4,
width: innerWidth,
verticalOffset,
}} />
</div>
);

3
src/photo/image-response/PhotoGridImageResponse.tsx
View File

@ -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({
<div style={{
display: 'flex',
flexWrap: 'wrap',
...verticalOffset && { transform: `translateY(${verticalOffset}px)` },
}}>
{photos
.slice(0, colCount * rowCount)