From ebd68e1d8e077c1ee67450bc982d500f23eaa75a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 6 Dec 2023 13:38:43 -0600
Subject: [PATCH] Document grid aspect ratio configuration

---
 README.md                        |  3 ++-
 src/photo/PhotoGrid.tsx          |  2 +-
 src/site/SiteChecklistClient.tsx | 12 ++++++++++++
 src/site/config.ts               |  7 ++++---
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 65c8b37a..9ee3f54d 100644
--- a/README.md
+++ b/README.md
@@ -64,9 +64,10 @@ Installation
 
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
-- `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
 - `NEXT_PUBLIC_HIDE_REPO_LINK = 1` removes footer link to repo
 - `NEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1` prevents Fujifilm simulations showing up in `/grid` sidebar
+- `NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5` sets aspect ratio for grid tiles (defaults to `1`—setting to `0` removes the constraint)
+- `NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM` keeps OG image text bottom aligned (default is top)
 
 ### Setup alternate storage
 
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 335e255f..79e5bcf0 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -63,7 +63,7 @@ export default function PhotoGrid({
               : undefined}
             style={{
               ...GRID_ASPECT_RATIO !== 0 && {
-                aspectRatio: GRID_ASPECT_RATIO ?? 1,
+                aspectRatio: GRID_ASPECT_RATIO,
               },
             }}
           >
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index ea09d01b..5afe2398 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -35,6 +35,7 @@ export default function SiteChecklistClient({
   isPublicApiEnabled,
   isOgTextBottomAligned,
   showRefreshButton,
+  gridAspectRatio,
   secret,
 }: ConfigChecklistStatus & {
   showRefreshButton?: boolean
@@ -273,6 +274,17 @@ export default function SiteChecklistClient({
           simulations showing up in <code>/grid</code> sidebar:
           {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
         </ChecklistRow>
+        <ChecklistRow
+          title={`Grid Aspect Ratio: ${gridAspectRatio}`}
+          status={gridAspectRatio !== 0}
+          isPending={isPendingPage}
+          optional
+        >
+          Set environment variable to any number to enforce aspect ratio
+          {' '}
+          (defaults to {'"1"'}, i.e., square)—set to {'"0"'} to disable:
+          {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
+        </ChecklistRow>
         <ChecklistRow
           title="Legacy OG Text Alignment"
           status={isOgTextBottomAligned}
diff --git a/src/site/config.ts b/src/site/config.ts
index 76666fb2..5d37cebd 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -52,11 +52,11 @@ export const PUBLIC_API_ENABLED = process.env.NEXT_PUBLIC_PUBLIC_API === '1';
 export const SHOW_REPO_LINK = process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
 export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
-export const OG_TEXT_BOTTOM_ALIGNMENT =
-  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
   ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)
-  : undefined;
+  : 1;
+export const OG_TEXT_BOTTOM_ALIGNMENT =
+  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 
 export const CONFIG_CHECKLIST_STATUS = {
   hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,
@@ -75,6 +75,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   isProModeEnabled: PRO_MODE_ENABLED,
   isPublicApiEnabled: PUBLIC_API_ENABLED,
   isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
+  gridAspectRatio: GRID_ASPECT_RATIO,
 };
 
 export type ConfigChecklistStatus = typeof CONFIG_CHECKLIST_STATUS;