From a76fa30331e47ad3acee0d9bf25edf6f5b51941a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 9 May 2024 13:40:46 -0500
Subject: [PATCH] Document matte setting

---
 README.md                        |  1 +
 src/components/ChecklistRow.tsx  |  2 +-
 src/site/SiteChecklistClient.tsx | 14 ++++++++++++++
 src/site/config.ts               |  7 +++++++
 src/state/AppStateProvider.tsx   |  3 ++-
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d22110fc..940cc140 100644
--- a/README.md
+++ b/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
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index efec5c21..4b4c68e4 100644
--- a/src/components/ChecklistRow.tsx
+++ b/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}
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 546ce113..e07129cb 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/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}
diff --git a/src/site/config.ts b/src/site/config.ts
index 1fead692..8daf3b6e 100644
--- a/src/site/config.ts
+++ b/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,
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index 69607565..bb4ceebf 100644
--- a/src/state/AppStateProvider.tsx
+++ b/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] =