Document matte setting

README.md

@@ -96,6 +96,7 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
 - `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_MATTE_SETTING = light` constrains the size of each photo, and enables a surrounding border (can be set to `light` or `dark`)
 - `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/components/ChecklistRow.tsx

@@ -29,7 +29,7 @@ export default function ChecklistRow({
       />
       <div className="flex flex-col min-w-0">
         <div className={clsx(
-          'flex flex-wrap items-center gap-2 pb-1',
+          'flex flex-wrap items-center gap-2 pb-0.5',
           'font-bold dark:text-gray-300',
         )}>
           {title}

src/site/SiteChecklistClient.tsx

@@ -44,6 +44,7 @@ export default function SiteChecklistClient({
   isStaticallyOptimized,
   arePagesStaticallyOptimized,
   areOGImagesStaticallyOptimized,
+  matteSetting,
   isBlurEnabled,
   isGeoPrivacyEnabled,
   isPriorityOrderEnabled,
@@ -377,6 +378,19 @@ export default function SiteChecklistClient({
               'translate-y-[4.5px]',
             )}
           </ChecklistRow>
+          <ChecklistRow
+            title={'Photo Matte' + (matteSetting
+              ? `: ${matteSetting?.toLocaleUpperCase()}`
+              : '')}
+            status={Boolean(matteSetting)}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"light"'} or {'"dark"'} to
+            {' '}
+            constrain the size of each photo, and enable a surrounding border:
+            {renderEnvVars(['NEXT_PUBLIC_MATTE_SETTING'])}
+          </ChecklistRow>
           <ChecklistRow
             title="Image Blur"
             status={isBlurEnabled}

src/site/config.ts

@@ -114,6 +114,12 @@ 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 MATTE_SETTING =
+  process.env.NEXT_PUBLIC_MATTE_SETTING === 'light'
+    ? 'light'
+    : process.env.NEXT_PUBLIC_MATTE_SETTING === 'dark'
+      ? 'dark'
+      : undefined;
 export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 export const GEO_PRIVACY_ENABLED =
@@ -177,6 +183,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   ),
   arePagesStaticallyOptimized: STATICALLY_OPTIMIZED_PAGES,
   areOGImagesStaticallyOptimized: STATICALLY_OPTIMIZED_OG_IMAGES,
+  matteSetting: MATTE_SETTING,
   isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isAiTextGenerationEnabled: AI_TEXT_GENERATION_ENABLED,

src/state/AppStateProvider.tsx

@@ -6,6 +6,7 @@ import { AnimationConfig } from '@/components/AnimateItems';
 import usePathnames from '@/utility/usePathnames';
 import { getAuthAction } from '@/auth/actions';
 import useSWR from 'swr';
+import { MATTE_SETTING } from '@/site/config';
 
 export default function AppStateProvider({
   children,
@@ -17,7 +18,7 @@ export default function AppStateProvider({
   const [hasLoaded, setHasLoaded] =
     useState(false);
   const [matteSetting, setMatteSetting] =
-    useState<MatteSetting>();
+    useState<MatteSetting>(MATTE_SETTING);
   const [swrTimestamp, setSwrTimestamp] =
     useState(Date.now());
   const [userEmail, setUserEmail] =