Rename grid homepage environment variable

README.md

@@ -99,7 +99,7 @@ _⚠️ READ BEFORE PROCEEDING_
 Application behavior can be changed by configuring the following environment variables:
 
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
-- `NEXT_PUBLIC_SHOW_GRID_FIRST = 1` shows grid layout on homepage
+- `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage
 - `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_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)

src/app/page.tsx

@@ -7,7 +7,7 @@ import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { Metadata } from 'next/types';
 import { cache } from 'react';
 import { getPhotos, getPhotosMeta } from '@/photo/db/query';
-import { SHOW_GRID_FIRST } from '@/site/config';
+import { GRID_HOMEPAGE_ENABLED } from '@/site/config';
 import { getPhotoSidebarData } from '@/photo/data';
 import PhotoGridPage from '@/photo/PhotoGridPage';
 import PhotoFeedPage from '@/photo/PhotoFeedPage';
@@ -16,7 +16,7 @@ export const dynamic = 'force-static';
 export const maxDuration = 60;
 
 const getPhotosCached = cache(() => getPhotos({
-  limit: SHOW_GRID_FIRST
+  limit: GRID_HOMEPAGE_ENABLED
     ? INFINITE_SCROLL_GRID_INITIAL
     : INFINITE_SCROLL_FEED_INITIAL,
 }));
@@ -40,14 +40,14 @@ export default async function HomePage() {
     getPhotosMeta()
       .then(({ count }) => count)
       .catch(() => 0),
-    ...(SHOW_GRID_FIRST
+    ...(GRID_HOMEPAGE_ENABLED
       ? getPhotoSidebarData()
       : [[], [], []]),
   ]);
 
   return (
     photos.length > 0
-      ? SHOW_GRID_FIRST
+      ? GRID_HOMEPAGE_ENABLED
         ? <PhotoGridPage
           {...{ photos, photosCount, tags, cameras, simulations }}
         />

src/site/Nav.tsx

@@ -15,7 +15,7 @@ import {
 } from '@/site/paths';
 import AnimateItems from '../components/AnimateItems';
 import { useAppState } from '@/state/AppState';
-import { SHOW_GRID_FIRST } from './config';
+import { GRID_HOMEPAGE_ENABLED } from './config';
 
 export default function Nav({
   siteDomainOrTitle,
@@ -38,7 +38,7 @@ export default function Nav({
 
   const switcherSelectionForPath = (): SwitcherSelection | undefined => {
     if (pathname === PATH_ROOT) {
-      return SHOW_GRID_FIRST ? 'grid' : 'feed';
+      return GRID_HOMEPAGE_ENABLED ? 'grid' : 'feed';
     } else if (isPathGrid(pathname)) {
       return 'grid';
     } else if (isPathFeed(pathname)) {

src/site/SiteChecklistClient.tsx

@@ -49,7 +49,7 @@ export default function SiteChecklistClient({
   showFilmSimulations,
   showExifInfo,
   isProModeEnabled,
-  isGridFirst,
+  isGridHomepageEnabled: isGridFirst,
   isStaticallyOptimized,
   arePagesStaticallyOptimized,
   areOGImagesStaticallyOptimized,
@@ -432,7 +432,7 @@ export default function SiteChecklistClient({
             >
               Set environment variable to {'"1"'} to show grid layout
               on homepage:
-              {renderEnvVars(['NEXT_PUBLIC_SHOW_GRID_FIRST'])}
+              {renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
             </ChecklistRow>
             <ChecklistRow
               title="Static optimization"

src/site/ViewSwitcher.tsx

@@ -11,7 +11,7 @@ import {
 import { BiLockAlt } from 'react-icons/bi';
 import IconSearch from './IconSearch';
 import { useAppState } from '@/state/AppState';
-import { SHOW_GRID_FIRST } from './config';
+import { GRID_HOMEPAGE_ENABLED } from './config';
 
 export type SwitcherSelection = 'feed' | 'grid' | 'admin';
 
@@ -27,7 +27,7 @@ export default function ViewSwitcher({
   const renderItemFeed = () =>
     <SwitcherItem
       icon={<IconFeed />}
-      href={SHOW_GRID_FIRST ? PATH_FEED : PATH_ROOT}
+      href={GRID_HOMEPAGE_ENABLED ? PATH_FEED : PATH_ROOT}
       active={currentSelection === 'feed'}
       noPadding
     />;
@@ -35,7 +35,7 @@ export default function ViewSwitcher({
   const renderItemGrid = () =>
     <SwitcherItem
       icon={<IconGrid />}
-      href={SHOW_GRID_FIRST ? PATH_ROOT : PATH_GRID}
+      href={GRID_HOMEPAGE_ENABLED ? PATH_ROOT : PATH_GRID}
       active={currentSelection === 'grid'}
       noPadding
     />;
@@ -43,8 +43,8 @@ export default function ViewSwitcher({
   return (
     <div className="flex gap-1 sm:gap-2">
       <Switcher>
-        {SHOW_GRID_FIRST ? renderItemGrid() : renderItemFeed()}
+        {GRID_HOMEPAGE_ENABLED ? renderItemGrid() : renderItemFeed()}
-        {SHOW_GRID_FIRST ? renderItemFeed() : renderItemGrid()}
+        {GRID_HOMEPAGE_ENABLED ? renderItemFeed() : renderItemGrid()}
         {showAdmin &&
           <SwitcherItem
             icon={<BiLockAlt size={16} className="translate-y-[-0.5px]" />}

src/site/config.ts

@@ -116,8 +116,8 @@ export const CURRENT_STORAGE: StorageType =
 
 export const PRO_MODE_ENABLED =
   process.env.NEXT_PUBLIC_PRO_MODE === '1';
-export const SHOW_GRID_FIRST =
+export const GRID_HOMEPAGE_ENABLED =
-  process.env.NEXT_PUBLIC_SHOW_GRID_FIRST === '1';
+  process.env.NEXT_PUBLIC_GRID_HOMEPAGE === '1';
 export const STATICALLY_OPTIMIZED_PAGES =
   process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES === '1';
 export const STATICALLY_OPTIMIZED_OG_IMAGES =
@@ -185,7 +185,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
-  isGridFirst: SHOW_GRID_FIRST,
+  isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
   isStaticallyOptimized: (
     STATICALLY_OPTIMIZED_PAGES ||
     STATICALLY_OPTIMIZED_OG_IMAGES