Add visual, grid sections to configuration

README.md

@@ -109,23 +109,29 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS = 1` prevents photo uploads being compressed before storing
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 
+#### Visual
+
+- `NEXT_PUBLIC_DEFAULT_THEME = light | dark` sets preferred initial theme (defaults to `system` when not configured)
+- `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)
+
 #### Display
 - `NEXT_PUBLIC_HIDE_EXIF_DATA = 1` hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
 - `NEXT_PUBLIC_HIDE_ZOOM_CONTROLS = 1` hides fullscreen photo zoom controls
 - `NEXT_PUBLIC_HIDE_TAKEN_AT_TIME = 1` hides taken at time from photo meta
-- `NEXT_PUBLIC_HIDE_SOCIAL = 1` removes X button from share modal
+- `NEXT_PUBLIC_HIDE_SOCIAL = 1` removes X (formerly Twitter) button from share modal
 - `NEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1` prevents Fujifilm simulations showing up in `/grid` sidebar and CMD-K search results
 - `NEXT_PUBLIC_HIDE_REPO_LINK = 1` removes footer link to repo
 
-#### Settings
+#### Grid
 - `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_GRID_ASPECT_RATIO = 1.5` sets aspect ratio for grid tiles (defaults to `1`—setting to `0` removes the constraint)
-- `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_SHOW_LARGE_THUMBNAILS = 1` ensures large thumbnails on photo grid views (if not configured, density is based on aspect ratio)
+
+#### Settings
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data (⚠️ re-compresses uploaded images in order to remove GPS information)
 - `NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS = 1` enables public photo downloads for all visitors (⚠️ may result in increased bandwidth usage)
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order
-- `NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5` sets aspect ratio for grid tiles (defaults to `1`—setting to `0` removes the constraint)
 - `NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS = 1` ensures large thumbnails on photo grid views
 - `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
 

src/site/SiteChecklistClient.tsx

@@ -26,6 +26,8 @@ import { RiSpeedMiniLine } from 'react-icons/ri';
 import Link from 'next/link';
 import SecretGenerator from './SecretGenerator';
 import CopyButton from '@/components/CopyButton';
+import { PiPaintBrushHousehold } from 'react-icons/pi';
+import { IoMdGrid } from 'react-icons/io';
 
 export default function SiteChecklistClient({
   // Storage
@@ -58,6 +60,10 @@ export default function SiteChecklistClient({
   arePhotoCategoriesStaticallyOptimized,
   areOriginalUploadsPreserved,
   isBlurEnabled,
+  // Visual
+  hasDefaultTheme,
+  defaultTheme,
+  arePhotosMatted,
   // Display
   showExifInfo,
   showZoomControls,
@@ -65,16 +71,14 @@ export default function SiteChecklistClient({
   showSocial,
   showFilmSimulations,
   showRepoLink,
-  // Settings
+  // Grid
   isGridHomepageEnabled,
-  hasDefaultTheme,
-  defaultTheme,
-  arePhotosMatted,
-  isGeoPrivacyEnabled,
   gridAspectRatio,
   hasGridAspectRatio,
   gridDensity,
   hasGridDensityPreference,
+  // Settings
+  isGeoPrivacyEnabled,
   arePublicDownloadsEnabled,
   isPublicApiEnabled,
   isPriorityOrderEnabled,
@@ -366,7 +370,6 @@ export default function SiteChecklistClient({
             title="AI text generation"
             titleShort="AI"
             icon={<HiSparkles />}
-            experimental
             optional
           >
             <ChecklistRow
@@ -461,6 +464,34 @@ export default function SiteChecklistClient({
               {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
             </ChecklistRow>
           </Checklist>
+          <Checklist
+            title="Visual"
+            icon={<PiPaintBrushHousehold size={19} />}
+            optional
+          >
+            <ChecklistRow
+              title={`Default theme: ${defaultTheme}`}
+              status={hasDefaultTheme}
+              optional
+            >
+              {'Set environment variable to \'light\' or \'dark\''}
+              {' '}
+              to configure initial theme
+              {' '}
+              (defaults to {'\'system\''}):
+              {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
+            </ChecklistRow>
+            <ChecklistRow
+              title="Photo matting"
+              status={arePhotosMatted}
+              optional
+            >
+              Set environment variable to {'"1"'} to constrain the size
+              {' '}
+              of each photo, and enable a surrounding border:
+              {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])}
+            </ChecklistRow>
+          </Checklist>
           <Checklist
             title="Display"
             icon={<BiHide size={18} />}
@@ -475,7 +506,7 @@ export default function SiteChecklistClient({
               {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
             </ChecklistRow>
             <ChecklistRow
-              title="Zoom controls"
+              title="Show zoom controls"
               status={showZoomControls}
               optional
             >
@@ -499,7 +530,7 @@ export default function SiteChecklistClient({
             >
               Set environment variable to {'"1"'} to hide
               {' '}
-              X button from share modal:
+              X (formerly Twitter) button from share modal:
               {renderEnvVars(['NEXT_PUBLIC_HIDE_SOCIAL'])}
             </ChecklistRow>
             <ChecklistRow
@@ -522,8 +553,8 @@ export default function SiteChecklistClient({
             </ChecklistRow>
           </Checklist>
           <Checklist
-            title="Settings"
+            title="Grid"
-            icon={<BiCog size={16} />}
+            icon={<IoMdGrid size={17} />}
             optional
           >
             <ChecklistRow
@@ -535,37 +566,6 @@ export default function SiteChecklistClient({
               on homepage:
               {renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
             </ChecklistRow>
-            <ChecklistRow
-              title={`Default theme: ${defaultTheme}`}
-              status={hasDefaultTheme}
-              optional
-            >
-              {'Set environment variable to \'light\' or \'dark\''}
-              {' '}
-              to configure initial theme
-              {' '}
-              (defaults to {'\'system\''}):
-              {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Photo matting"
-              status={arePhotosMatted}
-              optional
-            >
-              Set environment variable to {'"1"'} to constrain the size
-              {' '}
-              of each photo, and enable a surrounding border:
-              {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Geo privacy"
-              status={isGeoPrivacyEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to disable
-              collection/display of location-based data:
-              {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
-            </ChecklistRow>
             <ChecklistRow
               title={`Grid aspect ratio: ${gridAspectRatio}`}
               status={hasGridAspectRatio}
@@ -583,9 +583,24 @@ export default function SiteChecklistClient({
             >
               Set environment variable to {'"1"'} to ensure large thumbnails
               on photo grid views (if not configured, density is based on
-              aspect ratio configuration):
+              aspect ratio):
               {renderEnvVars(['NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS'])}
             </ChecklistRow>
+          </Checklist>
+          <Checklist
+            title="Settings"
+            icon={<BiCog size={16} />}
+            optional
+          >
+            <ChecklistRow
+              title="Geo privacy"
+              status={isGeoPrivacyEnabled}
+              optional
+            >
+              Set environment variable to {'"1"'} to disable
+              collection/display of location-based data:
+              {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Public downloads"
               status={arePublicDownloadsEnabled}

src/site/config.ts

@@ -161,6 +161,17 @@ export const PRESERVE_ORIGINAL_UPLOADS =
 export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 
+// VISUAL
+
+export const DEFAULT_THEME =
+  process.env.NEXT_PUBLIC_DEFAULT_THEME === 'dark'
+    ? 'dark'
+    : process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
+      ? 'light'
+      : 'system';
+export const MATTE_PHOTOS =
+  process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
+
 // DISPLAY
 
 export const SHOW_EXIF_DATA =
@@ -176,20 +187,10 @@ export const SHOW_FILM_SIMULATIONS =
 export const SHOW_REPO_LINK =
   process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
 
-// SETTINGS
+// GRID
 
 export const GRID_HOMEPAGE_ENABLED =
   process.env.NEXT_PUBLIC_GRID_HOMEPAGE === '1';
-export const DEFAULT_THEME =
-  process.env.NEXT_PUBLIC_DEFAULT_THEME === 'dark'
-    ? 'dark'
-    : process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
-      ? 'light'
-      : 'system';
-export const MATTE_PHOTOS =
-  process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
-export const GEO_PRIVACY_ENABLED =
-  process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
 export const GRID_ASPECT_RATIO =
   process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
     ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
@@ -199,6 +200,11 @@ export const PREFERS_LOW_DENSITY_GRID =
 export const HIGH_DENSITY_GRID =
   GRID_ASPECT_RATIO <= 1 &&
   !PREFERS_LOW_DENSITY_GRID;
+
+// SETTINGS
+
+export const GEO_PRIVACY_ENABLED =
+  process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
 export const ALLOW_PUBLIC_DOWNLOADS = 
   process.env.NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS === '1';
 export const PUBLIC_API_ENABLED =
@@ -213,7 +219,7 @@ export const OG_TEXT_BOTTOM_ALIGNMENT =
 export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
 
 export const CONFIG_CHECKLIST_STATUS = {
-  // STORAGE
+  // Storage
   hasDatabase: HAS_DATABASE,
   isPostgresSslEnabled: POSTGRES_SSL_ENABLED,
   hasVercelPostgres: (
@@ -231,13 +237,13 @@ export const CONFIG_CHECKLIST_STATUS = {
   ),
   hasMultipleStorageProviders: HAS_MULTIPLE_STORAGE_PROVIDERS,
   currentStorage: CURRENT_STORAGE,
-  // AUTH
+  // Auth
   hasAuthSecret: Boolean(process.env.AUTH_SECRET),
   hasAdminUser: (
     Boolean(process.env.ADMIN_EMAIL) &&
     Boolean(process.env.ADMIN_PASSWORD)
   ),
-  // CONTENT
+  // Content
   hasDomain: Boolean(process.env.NEXT_PUBLIC_SITE_DOMAIN),
   hasTitle: Boolean(process.env.NEXT_PUBLIC_SITE_TITLE),
   hasDescription: HAS_DEFINED_SITE_DESCRIPTION,
@@ -251,7 +257,7 @@ export const CONFIG_CHECKLIST_STATUS = {
     : ['all'],
   hasAiTextAutoGeneratedFields:
     Boolean(process.env.AI_TEXT_AUTO_GENERATED_FIELDS),
-  // PERFORMANCE
+  // Performance
   isStaticallyOptimized: (
     STATICALLY_OPTIMIZED_PHOTOS ||
     STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES ||
@@ -262,29 +268,31 @@ export const CONFIG_CHECKLIST_STATUS = {
   arePhotoCategoriesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORIES,
   areOriginalUploadsPreserved: PRESERVE_ORIGINAL_UPLOADS,
   isBlurEnabled: BLUR_ENABLED,
-  // DISPLAY
+  // Visual
+  hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
+  defaultTheme: DEFAULT_THEME,
+  arePhotosMatted: MATTE_PHOTOS,
+  // Display
   showExifInfo: SHOW_EXIF_DATA,
   showZoomControls: SHOW_ZOOM_CONTROLS,
   showTakenAtTimeHidden: SHOW_TAKEN_AT_TIME,
   showSocial: SHOW_SOCIAL,
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showRepoLink: SHOW_REPO_LINK,
-  // SETTINGS
+  // Grid
   isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
-  hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
-  defaultTheme: DEFAULT_THEME,
-  arePhotosMatted: MATTE_PHOTOS,
-  isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   gridAspectRatio: GRID_ASPECT_RATIO,
   hasGridAspectRatio: Boolean(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO),
   gridDensity: HIGH_DENSITY_GRID,
   hasGridDensityPreference:
     Boolean(process.env.NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS),
+  // Settings
+  isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   arePublicDownloadsEnabled: ALLOW_PUBLIC_DOWNLOADS,
   isPublicApiEnabled: PUBLIC_API_ENABLED,
   isPriorityOrderEnabled: PRIORITY_ORDER_ENABLED,
   isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
-  // MISC
+  // Misc
   baseUrl: BASE_URL,
   commitSha: VERCEL_GIT_COMMIT_SHA_SHORT,
   commitMessage: VERCEL_GIT_COMMIT_MESSAGE,