From 8ef80a9b16089723f9a70aabad3800aadd4131bd Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 19 Jan 2025 23:18:01 -0600
Subject: [PATCH] Create performance configuration section

---
 README.md                        |  9 ++++--
 src/site/SiteChecklistClient.tsx | 53 ++++++++++++++++++--------------
 src/site/config.ts               | 29 +++++++++--------
 3 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 7fbc06a9..b66bbbb8 100644
--- a/README.md
+++ b/README.md
@@ -101,13 +101,16 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_SITE_DESCRIPTION` (seen in nav, beneath title)
 - `NEXT_PUBLIC_SITE_ABOUT` (seen in grid sidebar—accepts rich formatting tags: `<b>`, `<strong>`, `<i>`, `<em>`, `<u>`, `<br>`)
 
+#### Site performance
+> ⚠️ Enabling these will result in increased project usage
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS = 1` enables static optimization for photo pages (`p/[photoId]`), i.e., renders pages at build time
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES = 1` enables static optimization for photo categories (`tag/[tag]`, `shot-on/[make]/[model]`, etc.), i.e., renders pages at build time
+
 #### Site behavior
 - `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage
 - `NEXT_PUBLIC_DEFAULT_THEME = light | dark` sets preferred initial theme (defaults to `system` when not configured)
 - `NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS = 1` do not optimize photo uploads before storing (⚠️ results in increased storage usage)
-- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS = 1` enables static optimization for photo pages (`p/[photoId]`), i.e., renders pages at build time (⚠️ results in increased project usage)
-- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time (⚠️ results in increased project usage)
-- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES = 1` enables static optimization for photo categories (`tag/[tag]`, `shot-on/[make]/[model]`, etc.), i.e., renders pages at build time (⚠️ results in increased project usage)
 - `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)
 - `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 (⚠️ re-compresses uploaded images in order to remove GPS information)
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 6850ed12..238bda37 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -26,6 +26,7 @@ import { testConnectionsAction } from '@/admin/actions';
 import ErrorNote from '@/components/ErrorNote';
 import Spinner from '@/components/Spinner';
 import WarningNote from '@/components/WarningNote';
+import { RiSpeedMiniLine } from 'react-icons/ri';
 
 export default function SiteChecklistClient({
   // Config checklist
@@ -50,13 +51,13 @@ export default function SiteChecklistClient({
   showSocial,
   showFilmSimulations,
   showExifInfo,
-  defaultTheme,
-  areOriginalUploadsPreserved,
-  isGridHomepageEnabled,
   isStaticallyOptimized,
   arePhotosStaticallyOptimized,
   arePhotoOGImagesStaticallyOptimized,
   arePhotoCategoriesStaticallyOptimized,
+  isGridHomepageEnabled,
+  defaultTheme,
+  areOriginalUploadsPreserved,
   arePhotosMatted,
   isBlurEnabled,
   isGeoPrivacyEnabled,
@@ -436,6 +437,32 @@ export default function SiteChecklistClient({
               {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
             </ChecklistRow>
           </Checklist>
+          <Checklist
+            title="Performance"
+            icon={<RiSpeedMiniLine size={18} />}
+            optional
+          >
+            <ChecklistRow
+              title="Static optimization"
+              status={isStaticallyOptimized}
+              optional
+            >
+              Set environment variable to {'"1"'} to enable static optimization,
+              i.e., render pages and images at build time:
+              {renderSubStatusWithEnvVar(
+                arePhotosStaticallyOptimized ? 'checked' : 'optional',
+                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS',
+              )}
+              {renderSubStatusWithEnvVar(
+                arePhotoOGImagesStaticallyOptimized ? 'checked' : 'optional',
+                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES',
+              )}
+              {renderSubStatusWithEnvVar(
+                arePhotoCategoriesStaticallyOptimized ? 'checked' : 'optional',
+                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES',
+              )}
+            </ChecklistRow>
+          </Checklist>
           <Checklist
             title="Settings"
             icon={<BiCog size={16} />}
@@ -471,26 +498,6 @@ export default function SiteChecklistClient({
               image uploads being optimized before storing:
               {renderEnvVars(['NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS'])}
             </ChecklistRow>
-            <ChecklistRow
-              title="Static optimization"
-              status={isStaticallyOptimized}
-              optional
-            >
-              Set environment variable to {'"1"'} to enable static optimization,
-              i.e., render pages and images at build time:
-              {renderSubStatusWithEnvVar(
-                arePhotosStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS',
-              )}
-              {renderSubStatusWithEnvVar(
-                arePhotoOGImagesStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES',
-              )}
-              {renderSubStatusWithEnvVar(
-                arePhotoCategoriesStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES',
-              )}
-            </ChecklistRow>
             <ChecklistRow
               title="Photo matting"
               status={arePhotosMatted}
diff --git a/src/site/config.ts b/src/site/config.ts
index da995156..1463f0f1 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -122,6 +122,19 @@ export const CURRENT_STORAGE: StorageType =
         : 'vercel-blob'
   );
 
+// PERFORMANCE
+
+export const STATICALLY_OPTIMIZED_PHOTOS =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS === '1' ||
+  // Legacy environment variable name
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES === '1';
+export const STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES === '1' ||
+  // Legacy environment variable name
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES === '1';
+export const STATICALLY_OPTIMIZED_PHOTO_CATEGORIES =
+  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES === '1';
+
 // SETTINGS
 
 export const GRID_HOMEPAGE_ENABLED =
@@ -136,16 +149,6 @@ export const PRESERVE_ORIGINAL_UPLOADS =
   process.env.NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS === '1' ||
   // Legacy environment variable name
   process.env.NEXT_PUBLIC_PRO_MODE === '1';
-export const STATICALLY_OPTIMIZED_PHOTOS =
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS === '1' ||
-  // Legacy environment variable name
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES === '1';
-export const STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES =
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES === '1' ||
-  // Legacy environment variable name
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES === '1';
-export const STATICALLY_OPTIMIZED_PHOTO_CATEGORIES =
-  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES === '1';
 export const MATTE_PHOTOS =
   process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
 export const BLUR_ENABLED =
@@ -216,9 +219,6 @@ export const CONFIG_CHECKLIST_STATUS = {
   showSocial: SHOW_SOCIAL,
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
-  isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
-  defaultTheme: DEFAULT_THEME,
-  areOriginalUploadsPreserved: PRESERVE_ORIGINAL_UPLOADS,
   isStaticallyOptimized: (
     STATICALLY_OPTIMIZED_PHOTOS ||
     STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES ||
@@ -227,6 +227,9 @@ export const CONFIG_CHECKLIST_STATUS = {
   arePhotosStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTOS,
   arePhotoOGImagesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES,
   arePhotoCategoriesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORIES,
+  isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
+  defaultTheme: DEFAULT_THEME,
+  areOriginalUploadsPreserved: PRESERVE_ORIGINAL_UPLOADS,
   arePhotosMatted: MATTE_PHOTOS,
   isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,