Split static optimization config into pages + images

README.md

@@ -94,7 +94,8 @@ _⚠️ READ BEFORE PROCEEDING_
 Application behavior can be changed by configuring the following environment variables:
 
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
-- `NEXT_PUBLIC_STATICALLY_OPTIMIZE = 1` enables static optimization, i.e., renders pages and images at build time (results in increased project usage)—⚠️ _Experimental_
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1` enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ _Experimental_
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ _Experimental_
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order

src/app/p/[photoId]/image/route.tsx

@@ -4,14 +4,14 @@ import PhotoImageResponse from '@/image-response/PhotoImageResponse';
 import { getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
-import { STATICALLY_OPTIMIZED } from '@/site/config';
+import { STATICALLY_OPTIMIZED_OG_IMAGES } from '@/site/config';
 import { GENERATE_STATIC_PARAMS_LIMIT, getPhotoIds } from '@/photo/db';
 import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export let generateStaticParams:
   (() => Promise<{ photoId: string }[]>) | undefined = undefined;
 
-if (STATICALLY_OPTIMIZED) {
+if (STATICALLY_OPTIMIZED_OG_IMAGES) {
   generateStaticParams = async () => {
     const photos = await getPhotoIds({ limit: GENERATE_STATIC_PARAMS_LIMIT });
     return photos.map(photoId => ({ photoId }));

src/app/p/[photoId]/layout.tsx

@@ -12,13 +12,13 @@ import {
 } from '@/site/paths';
 import PhotoDetailPage from '@/photo/PhotoDetailPage';
 import { getPhotosNearIdCachedCached } from '@/photo/cache';
-import { STATICALLY_OPTIMIZED } from '@/site/config';
+import { STATICALLY_OPTIMIZED_PAGES } from '@/site/config';
 import { GENERATE_STATIC_PARAMS_LIMIT, getPhotoIds } from '@/photo/db';
 
 export let generateStaticParams:
   (() => Promise<{ photoId: string }[]>) | undefined = undefined;
 
-if (STATICALLY_OPTIMIZED) {
+if (STATICALLY_OPTIMIZED_PAGES) {
   generateStaticParams = async () => {
     const photos = await getPhotoIds({ limit: GENERATE_STATIC_PARAMS_LIMIT });
     return photos.map(photoId => ({ photoId }));

src/components/ExperimentalBadge.tsx

@@ -12,6 +12,7 @@ export default function ExperimentalBadge({
       className={clsx(
         'text-pink-500 dark:text-white',
         'bg-pink-100 dark:bg-pink-600',
+        'pt-0.5',
         className,
       )}>
       Experimental

src/site/SiteChecklistClient.tsx

@@ -42,6 +42,8 @@ export default function SiteChecklistClient({
   showExifInfo,
   isProModeEnabled,
   isStaticallyOptimized,
+  arePagesStaticallyOptimized,
+  areOGImagesStaticallyOptimized,
   isBlurEnabled,
   isGeoPrivacyEnabled,
   isPriorityOrderEnabled,
@@ -120,7 +122,8 @@ export default function SiteChecklistClient({
     >
       <span className="inline-flex items-center gap-1">
         <span className={clsx(
-          'text-medium',
+          'text-xs font-medium tracking-wide',
+          'px-0.5 py-0.5',
           'rounded-sm',
           'bg-gray-100 dark:bg-gray-800',
         )}>
@@ -138,10 +141,13 @@ export default function SiteChecklistClient({
   const renderSubStatus = (
     type: ComponentProps<typeof StatusIcon>['type'],
     label: ReactNode,
+    iconClassName?: string,
   ) =>
     <div className="flex gap-1 -translate-x-1">
-      <StatusIcon {...{ type }} />
-      <span>
+      <span className={iconClassName}>
+        <StatusIcon {...{ type }} />
+      </span>
+      <span className="min-w-0">
         {label}
       </span>
     </div>;
@@ -360,7 +366,16 @@ export default function SiteChecklistClient({
           >
             Set environment variable to {'"1"'} to enable static optimization,
             i.e., rendering pages and images at build time:
-            {renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE'])}
+            {renderSubStatus(
+              arePagesStaticallyOptimized ? 'checked' : 'optional',
+              renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES']),
+              'translate-y-[4.5px]',
+            )}
+            {renderSubStatus(
+              areOGImagesStaticallyOptimized ? 'checked' : 'optional',
+              renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES']),
+              'translate-y-[4.5px]',
+            )}
           </ChecklistRow>
           <ChecklistRow
             title="Image Blur"

src/site/config.ts

@@ -104,8 +104,10 @@ export const CURRENT_STORAGE: StorageType =
 
 export const PRO_MODE_ENABLED =
   process.env.NEXT_PUBLIC_PRO_MODE === '1';
-export const STATICALLY_OPTIMIZED =
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE === '1';
+export const STATICALLY_OPTIMIZED_PAGES =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES === '1';
+export const STATICALLY_OPTIMIZED_OG_IMAGES =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES === '1';
 export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 export const GEO_PRIVACY_ENABLED =
@@ -145,10 +147,11 @@ export const CONFIG_CHECKLIST_STATUS = {
   hasVercelBlobStorage: HAS_VERCEL_BLOB_STORAGE,
   hasCloudflareR2Storage: HAS_CLOUDFLARE_R2_STORAGE,
   hasAwsS3Storage: HAS_AWS_S3_STORAGE,
-  hasStorageProvider:
+  hasStorageProvider: (
     HAS_VERCEL_BLOB_STORAGE ||
     HAS_CLOUDFLARE_R2_STORAGE ||
-    HAS_AWS_S3_STORAGE,
+    HAS_AWS_S3_STORAGE
+  ),
   hasMultipleStorageProviders: HAS_MULTIPLE_STORAGE_PROVIDERS,
   currentStorage: CURRENT_STORAGE,
   hasAuthSecret: (process.env.AUTH_SECRET ?? '').length > 0,
@@ -162,7 +165,12 @@ export const CONFIG_CHECKLIST_STATUS = {
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
-  isStaticallyOptimized: STATICALLY_OPTIMIZED,
+  isStaticallyOptimized: (
+    STATICALLY_OPTIMIZED_PAGES ||
+    STATICALLY_OPTIMIZED_OG_IMAGES
+  ),
+  arePagesStaticallyOptimized: STATICALLY_OPTIMIZED_PAGES,
+  areOGImagesStaticallyOptimized: STATICALLY_OPTIMIZED_OG_IMAGES,
   isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isAiTextGenerationEnabled: AI_TEXT_GENERATION_ENABLED,