From d3e209907f44fa8f5c62b0786b2ab312ed5604f5 Mon Sep 17 00:00:00 2001
From: Johnomated <34685272+Johnomated@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:15:46 -0500
Subject: [PATCH] Content can be centered on large screens with
 NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS env variable

Added CENTERED_LARGE_SCREENS variable in config.ts that gets NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS value from environment variables. Modified SiteGrid.tsx to use CENTERED_LARGE_SCREENS and adjust the pages column layout if it's true.
---
 src/app/layout.tsx          |  3 +++
 src/components/SiteGrid.tsx | 16 ++++++++++++++--
 src/site/config.ts          |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 59aaec56..7fff3211 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { clsx } from 'clsx/lite';
 import { IBM_Plex_Mono } from 'next/font/google';
 import {
   BASE_URL,
+  CENTERED_LARGE_SCREENS,
   DEFAULT_THEME,
   SITE_DESCRIPTION,
   SITE_DOMAIN_OR_TITLE,
@@ -27,6 +28,8 @@ const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
   weight: ['400', '500', '700'],
   variable: '--font-ibm-plex-mono',
+  display: 'swap', // font wouldn't load in vercel dev environment, solution from link below
+  // https://stackoverflow.com/a/76484168
 });
 
 export const metadata: Metadata = {
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 931fec17..6d04648a 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -1,5 +1,6 @@
 import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
+import { CENTERED_LARGE_SCREENS } from '@/site/config';
 
 export default function SiteGrid({
   containerRef,
@@ -25,18 +26,29 @@ export default function SiteGrid({
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
         'max-w-7xl',
+        CENTERED_LARGE_SCREENS && 'mx-auto',
         className,
       )}
     >
       <div className={clsx(
-        'col-span-1 md:col-span-9',
+        // 'col-span-1 md:col-span-9', // original
+        // 'col-span-1 md:col-span-9 md:col-start-2', // without env variable
+        CENTERED_LARGE_SCREENS
+          // ? 'col-span-1 md:col-span-9 md:col-start-2' // option for medium screens and up
+          ? 'col-span-1 md:col-span-9 lg:col-start-2'
+          : 'col-span-1 md:col-span-9',
         sideFirstOnMobile && 'order-2 md:order-none',
       )}>
         {contentMain}
       </div>
       {contentSide &&
         <div className={clsx(
-          'col-span-1 md:col-span-3',
+          // 'col-span-1 md:col-span-3', // original
+          // 'col-span-1 md:col-span-2', // without env variable
+          CENTERED_LARGE_SCREENS
+            // ? 'col-span-1 md:col-span-2' // option for medium screens and up
+            ? 'col-span-1 md:col-span-3 lg:col-span-2'
+            : 'col-span-1 md:col-span-3',
           sideFirstOnMobile && 'order-1 md:order-none',
           sideHiddenOnMobile && 'hidden md:block',
         )}>
diff --git a/src/site/config.ts b/src/site/config.ts
index a7097cc6..ad01fbd8 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -155,6 +155,8 @@ export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
+export const CENTERED_LARGE_SCREENS =
+  process.env.NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS === '1';
 export const GRID_ASPECT_RATIO =
   process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
     ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)