diff --git a/app/film/[simulation]/image/route.tsx b/app/film/[simulation]/image/route.tsx index 2cb562fa..70ac67aa 100644 --- a/app/film/[simulation]/image/route.tsx +++ b/app/film/[simulation]/image/route.tsx @@ -6,7 +6,7 @@ import { import FilmSimulationImageResponse from '@/image-response/FilmSimulationImageResponse'; import { FilmSimulation } from '@/simulation'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { GENERATE_STATIC_PARAMS_LIMIT } from '@/photo/db'; @@ -40,7 +40,7 @@ export async function GET( headers, ] = await Promise.all([ getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY, simulation }), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/focal/[focal]/image/route.tsx b/app/focal/[focal]/image/route.tsx index 0254fd99..00733977 100644 --- a/app/focal/[focal]/image/route.tsx +++ b/app/focal/[focal]/image/route.tsx @@ -3,7 +3,7 @@ import { IMAGE_OG_DIMENSION_SMALL, MAX_PHOTOS_TO_SHOW_PER_CATEGORY, } from '@/image-response'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import FocalLengthImageResponse from @@ -42,7 +42,7 @@ export async function GET( headers, ] = await Promise.all([ getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY, focal }), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/home-image/route.tsx b/app/home-image/route.tsx index 7223cec0..338d7f98 100644 --- a/app/home-image/route.tsx +++ b/app/home-image/route.tsx @@ -4,7 +4,7 @@ import { MAX_PHOTOS_TO_SHOW_OG, } from '@/image-response'; import HomeImageResponse from '@/image-response/HomeImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { isNextImageReadyBasedOnPhotos } from '@/photo'; @@ -19,7 +19,7 @@ export async function GET() { ] = await Promise.all([ getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_OG }).catch(() => []), getImageResponseCacheControlHeaders(), - getIBMPlexMonoMedium(), + getIBMPlexMono(), ]); const { width, height } = IMAGE_OG_DIMENSION_SMALL; diff --git a/app/p/[photoId]/image/route.tsx b/app/p/[photoId]/image/route.tsx index 55f48f34..38d4dee2 100644 --- a/app/p/[photoId]/image/route.tsx +++ b/app/p/[photoId]/image/route.tsx @@ -1,7 +1,7 @@ import { getPhotoCached } from '@/photo/cache'; import { IMAGE_OG_DIMENSION } from '@/image-response'; import PhotoImageResponse from '@/image-response/PhotoImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { @@ -34,7 +34,7 @@ export async function GET( headers, ] = await Promise.all([ getPhotoCached(photoId), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/recipe/[recipe]/image/route.tsx b/app/recipe/[recipe]/image/route.tsx index 619712af..ba2c88a9 100644 --- a/app/recipe/[recipe]/image/route.tsx +++ b/app/recipe/[recipe]/image/route.tsx @@ -3,7 +3,7 @@ import { IMAGE_OG_DIMENSION_SMALL, MAX_PHOTOS_TO_SHOW_PER_CATEGORY, } from '@/image-response'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { GENERATE_STATIC_PARAMS_LIMIT } from '@/photo/db'; @@ -38,7 +38,7 @@ export async function GET( headers, ] = await Promise.all([ getPhotosCached({ recipe, limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY }), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/shot-on/[make]/[model]/image/route.tsx b/app/shot-on/[make]/[model]/image/route.tsx index 30d7a848..daec24ea 100644 --- a/app/shot-on/[make]/[model]/image/route.tsx +++ b/app/shot-on/[make]/[model]/image/route.tsx @@ -5,7 +5,7 @@ import { MAX_PHOTOS_TO_SHOW_PER_CATEGORY, } from '@/image-response'; import CameraImageResponse from '@/image-response/CameraImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { GENERATE_STATIC_PARAMS_LIMIT } from '@/photo/db'; @@ -42,7 +42,7 @@ export async function GET( limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY, camera: camera, }), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/tag/[tag]/image/route.tsx b/app/tag/[tag]/image/route.tsx index 7ca795eb..180378a2 100644 --- a/app/tag/[tag]/image/route.tsx +++ b/app/tag/[tag]/image/route.tsx @@ -4,7 +4,7 @@ import { MAX_PHOTOS_TO_SHOW_PER_CATEGORY, } from '@/image-response'; import TagImageResponse from '@/image-response/TagImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { GENERATE_STATIC_PARAMS_LIMIT } from '@/photo/db'; @@ -38,7 +38,7 @@ export async function GET( headers, ] = await Promise.all([ getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_PER_CATEGORY, tag }), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/template-image-tight/route.tsx b/app/template-image-tight/route.tsx index 177beaba..cc3f27e2 100644 --- a/app/template-image-tight/route.tsx +++ b/app/template-image-tight/route.tsx @@ -5,7 +5,7 @@ import { } from '@/image-response'; import TemplateImageResponse from '@/image-response/TemplateImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { isNextImageReadyBasedOnPhotos } from '@/photo'; @@ -20,7 +20,7 @@ export async function GET() { sortBy: 'priority', limit: MAX_PHOTOS_TO_SHOW_TEMPLATE_TIGHT, }).catch(() => []), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/app/template-image/route.tsx b/app/template-image/route.tsx index 1d54f99c..e23edf2f 100644 --- a/app/template-image/route.tsx +++ b/app/template-image/route.tsx @@ -5,7 +5,7 @@ import { } from '@/image-response'; import TemplateImageResponse from '@/image-response/TemplateImageResponse'; -import { getIBMPlexMonoMedium } from '@/app/font'; +import { getIBMPlexMono } from '@/app/font'; import { ImageResponse } from 'next/og'; import { getImageResponseCacheControlHeaders } from '@/image-response/cache'; import { isNextImageReadyBasedOnPhotos } from '@/photo'; @@ -20,7 +20,7 @@ export async function GET() { sortBy: 'priority', limit: MAX_PHOTOS_TO_SHOW_TEMPLATE, }).catch(() => []), - getIBMPlexMonoMedium(), + getIBMPlexMono(), getImageResponseCacheControlHeaders(), ]); diff --git a/src/app/font.ts b/src/app/font.ts index 9f0f3b78..27373932 100644 --- a/src/app/font.ts +++ b/src/app/font.ts @@ -3,18 +3,31 @@ import path from 'path'; import { cwd } from 'process'; const FONT_IBM_PLEX_MONO_FAMILY = 'IBMPlexMono'; -const FONT_IBM_PLEX_MONO_PATH = '/public/fonts/IBMPlexMono-Medium.ttf'; -const getFontData = async () => - fs.readFileSync(path.join(cwd(), FONT_IBM_PLEX_MONO_PATH)); +const FONT_IBM_PLEX_MONO_PATH_REGULAR = '/public/fonts/IBMPlexMono-Regular.ttf'; +const FONT_IBM_PLEX_MONO_PATH_MEDIUM = '/public/fonts/IBMPlexMono-Medium.ttf'; -export const getIBMPlexMonoMedium = () => getFontData() - .then(data => ({ +const getFontData = async (fontPath: string) => + fs.readFileSync(path.join(cwd(), fontPath)); + +export const getIBMPlexMono = async () => { + const [regular, medium] = await Promise.all([ + getFontData(FONT_IBM_PLEX_MONO_PATH_REGULAR), + getFontData(FONT_IBM_PLEX_MONO_PATH_MEDIUM), + ]); + return { fontFamily: FONT_IBM_PLEX_MONO_FAMILY, fonts: [{ name: FONT_IBM_PLEX_MONO_FAMILY, - data, + data: regular, + weight: 400, + style: 'normal', + } as const, { + name: FONT_IBM_PLEX_MONO_FAMILY, + data: medium, weight: 500, style: 'normal', - } as const], - })); + } as const, + ], + }; +}; diff --git a/src/image-response/RecipeImageResponse.tsx b/src/image-response/RecipeImageResponse.tsx index 4ca91e3a..f3492250 100644 --- a/src/image-response/RecipeImageResponse.tsx +++ b/src/image-response/RecipeImageResponse.tsx @@ -15,12 +15,14 @@ export default function RecipeImageResponse({ width, height, fontFamily, + smallText = true, }: { recipe: string, photos: Photo[] width: NextImageSize height: number fontFamily: string + smallText?: boolean }) { const photo = getPhotoWithRecipeFromPhotos(photos); @@ -51,7 +53,7 @@ export default function RecipeImageResponse({ tw="flex absolute inset-0" style={{ background: - 'linear-gradient(to right, rgba(0, 0, 0, .5) 40%, transparent 75%)', + 'linear-gradient(to right, rgba(0, 0, 0, .5) 30%, transparent 60%)', }} /> {photo?.recipeData &&
{recipeLines.map(text => ( diff --git a/src/image-response/components/ImageCaption.tsx b/src/image-response/components/ImageCaption.tsx index 208a1086..1afed4a8 100644 --- a/src/image-response/components/ImageCaption.tsx +++ b/src/image-response/components/ImageCaption.tsx @@ -33,6 +33,7 @@ export default function ImageCaption({ color: 'white', backgroundBlendMode: 'multiply', fontFamily, + fontWeight: 500, fontSize: height *.08, gap, lineHeight: 1.2, diff --git a/src/recipe/index.ts b/src/recipe/index.ts index 13dbcb23..41643d03 100644 --- a/src/recipe/index.ts +++ b/src/recipe/index.ts @@ -59,19 +59,18 @@ export const generateRecipeText = ({ simulation, }: RecipeProps) => { const lines = [ - `${labelForFilmSimulation(simulation).large.toLocaleUpperCase()}`, + `${labelForFilmSimulation(simulation).small.toLocaleUpperCase()}`, `DR${recipe.dynamicRange.development} NR${formatNoiseReduction(recipe)}`, // eslint-disable-next-line max-len `${formatWhiteBalance(recipe).toLocaleUpperCase()} ${formatWhiteBalanceColor(recipe)}`, ]; if (recipe.highlight || recipe.shadow) { - // eslint-disable-next-line max-len - lines.push(`HIGH/SHAD ${addSign(recipe.highlight)}/${addSign(recipe.shadow)}`); + lines.push(`HI/SH ${addSign(recipe.highlight)}/${addSign(recipe.shadow)}`); } // eslint-disable-next-line max-len - lines.push(`COL${addSign(recipe.color)} SHARP${addSign(recipe.sharpness)} CLAR${addSign(recipe.clarity)}`); + lines.push(`CO${addSign(recipe.color)} SH${addSign(recipe.sharpness)} CL${addSign(recipe.clarity)}`); if (recipe.colorChromeEffect) { lines.push(`CHROME ${recipe.colorChromeEffect.toLocaleUpperCase()}`); @@ -141,15 +140,15 @@ export const formatWhiteBalanceColor = ({ whiteBalance: { red, blue }, }: FujifilmRecipe) => (red || blue) - ? `(R${addSign(red)}/B${addSign(blue)})` + ? `R${addSign(red)}/B${addSign(blue)}` : ''; export const formatGrain = ({ grainEffect }: FujifilmRecipe) => grainEffect.roughness === 'off' ? 'OFF' : grainEffect.roughness === 'weak' - ? `WEAK/${grainEffect.size.toLocaleUpperCase()}` - : `STRONG/${grainEffect.size.toLocaleUpperCase()}`; + ? `WEAK/${grainEffect.size === 'small' ? 'SM' : 'LG'}` + : `STRONG/${grainEffect.size === 'small' ? 'SM' : 'LG'}`; export const formatNoiseReduction = ({ highISONoiseReduction,