From 72900966982985621b605c6ec33c8a3db1105be0 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 26 Mar 2024 12:13:51 -0500
Subject: [PATCH 01/15] Enforce baseline grid

---
 src/app/admin/baseline/page.tsx           | 193 ++++++++++++++++++++++
 src/camera/PhotoCamera.tsx                |   6 +-
 src/components/Badge.tsx                  |   7 +-
 src/components/EntityLink.tsx             |  97 -----------
 src/components/primitives/EntityLink.tsx  |  89 ++++++++++
 src/components/primitives/Icon.tsx        |  35 ++++
 src/components/primitives/LabeledIcon.tsx |  60 +++++++
 src/photo/PhotoLarge.tsx                  |  12 +-
 src/simulation/PhotoFilmSimulation.tsx    |   4 +-
 src/site/FooterClient.tsx                 |   2 +-
 src/site/SiteChecklistClient.tsx          |   2 +-
 src/site/globals.css                      |  22 ++-
 src/tag/FavsTag.tsx                       |   6 +-
 src/tag/PhotoTag.tsx                      |   6 +-
 src/tag/PhotoTags.tsx                     |  12 +-
 tailwind.config.js                        |  14 +-
 16 files changed, 437 insertions(+), 130 deletions(-)
 create mode 100644 src/app/admin/baseline/page.tsx
 delete mode 100644 src/components/EntityLink.tsx
 create mode 100644 src/components/primitives/EntityLink.tsx
 create mode 100644 src/components/primitives/Icon.tsx
 create mode 100644 src/components/primitives/LabeledIcon.tsx

diff --git a/src/app/admin/baseline/page.tsx b/src/app/admin/baseline/page.tsx
new file mode 100644
index 00000000..0dbec5f6
--- /dev/null
+++ b/src/app/admin/baseline/page.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import FieldSetWithStatus from '@/components/FieldSetWithStatus';
+import EntityLink from '@/components/primitives/EntityLink';
+import LabeledIcon from '@/components/primitives/LabeledIcon';
+import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
+import { clsx } from 'clsx/lite';
+import { useState } from 'react';
+import { FaCamera, FaHandSparkles, FaUserAltSlash } from 'react-icons/fa';
+import { IoMdCamera } from 'react-icons/io';
+import { IoImageSharp } from 'react-icons/io5';
+
+const DEBUG_LINES = new Array(22).fill(null);
+
+export default function ComponentsPage() {
+  const [_debugGrid, setDebugGrid] = useState('true');
+  const [_debugComponents, setDebugComponents] = useState('false');
+
+  const debugGrid = _debugGrid === 'true';
+  const debugComponents = _debugComponents === 'true';
+
+  return (
+    <>
+      <h1 className="flex mb-6">
+        <div className="grow">
+          <span>Baseline Grid: </span>
+          <span className="text-dim">
+            <span className="md:hidden">13px / 18px</span>
+            <span className="hidden md:inline-block">14px / 20px</span>
+          </span>
+        </div>
+        <div className={clsx(
+          'flex gap-1',
+          '[&>*]:inline-flex [&>*]:gap-1 [&_input]:-translate-y-0.5',
+        )}>
+          <FieldSetWithStatus
+            id="grid"
+            label="Grid"
+            type="checkbox"
+            value={_debugGrid}
+            onChange={setDebugGrid}
+          />
+          <FieldSetWithStatus
+            id="components"
+            label="Components"
+            type="checkbox"
+            value={_debugComponents}
+            onChange={setDebugComponents}
+          />
+        </div>
+      </h1>
+      <div
+        className={clsx(
+          'flex gap-8',
+          debugGrid && 'debug-baseline-grid'
+        )}
+      >
+        <div className="[&>*]:flex">
+          <div>
+            <LabeledIcon
+              icon={<FaCamera size={12} />}
+              debug={debugComponents}
+            >
+              Camera<br />Line two
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<IoImageSharp />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <EntityLink
+              icon={<FaHandSparkles />}
+              label="Image"
+              debug={debugComponents}
+            />
+          </div>
+          <div>
+            <EntityLink
+              icon={<FaHandSparkles />}
+              label="Image"
+              badged
+              debug={debugComponents}
+            />
+          </div>
+          <div>
+            <LabeledIcon
+              icon={<IoMdCamera size={12} />}
+              debug={debugComponents}
+            >
+              Canon Mark III
+            </LabeledIcon>
+          </div>
+          <div>
+            <EntityLink
+              icon={<PhotoFilmSimulationIcon simulation="astia" />}
+              label="Astia/Soft"
+              type="icon-last"
+              iconWide
+              badged
+              debug={debugComponents}
+            />
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <EntityLink
+              icon={<PhotoFilmSimulationIcon simulation="astia" />}
+              label="Astia/Soft"
+              type="icon-last"
+              badged
+              debug={debugComponents}
+            />
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+          <div>
+            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+              Image
+            </LabeledIcon>
+          </div>
+        </div>
+        <div className={clsx(
+          debugComponents && '[&>*]:bg-gray-800',
+          '[&>*]:flex',
+        )}>
+          {DEBUG_LINES.map((_, i) =>
+            <div key={i}>
+              Line {(i + 1).toString().padStart(2, '0')}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx
index 1f9eb84c..e6e8511a 100644
--- a/src/camera/PhotoCamera.tsx
+++ b/src/camera/PhotoCamera.tsx
@@ -2,7 +2,9 @@ import { AiFillApple } from 'react-icons/ai';
 import { pathForCamera } from '@/site/paths';
 import { IoMdCamera } from 'react-icons/io';
 import { Camera, formatCameraText } from '.';
-import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
 
 export default function PhotoCamera({
   camera,
@@ -31,7 +33,7 @@ export default function PhotoCamera({
         />
         : <IoMdCamera
           size={12}
-          className="translate-x-[-1px] translate-y-[3.5px]"
+          className="translate-x-[-1px]"
         />}
       type={showAppleIcon && isCameraApple ? 'icon-first' : type}
       badged={badged}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 8a942928..e3fa1b6d 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -27,8 +27,9 @@ export default function Badge({
       );
     case 'small':
       return clsx(
-        'px-[0.3rem] py-1 rounded-[0.25rem]',
-        'text-[0.7rem] font-medium',
+        'px-[4px] py-[2.5px]',
+        'md:px-[4.5px] md:py-[3px]',
+        'text-[0.7rem] font-medium rounded-[0.25rem]',
         highContrast
           ? 'text-invert bg-invert'
           : 'text-medium bg-gray-300/30 dark:bg-gray-700/50',
@@ -43,7 +44,7 @@ export default function Badge({
   };
   return (
     <span className={clsx(
-      'leading-none',
+      'leading-none inline-flex',
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
       className,
diff --git a/src/components/EntityLink.tsx b/src/components/EntityLink.tsx
deleted file mode 100644
index da271fd6..00000000
--- a/src/components/EntityLink.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import Link from 'next/link';
-import { ReactNode } from 'react';
-import Badge from './Badge';
-import { clsx } from 'clsx/lite';
-
-export interface EntityLinkExternalProps {
-  type?: 'icon-last' | 'icon-first' | 'icon-only' | 'text-only'
-  badged?: boolean
-  contrast?: 'low' | 'medium' | 'high'
-}
-
-export default function EntityLink({
-  label,
-  labelSmall,
-  href,
-  icon,
-  title,
-  type = 'icon-first',
-  badged,
-  contrast = 'high',
-  hoverEntity,
-}: {
-  label: ReactNode
-  labelSmall?: ReactNode
-  href: string
-  icon?: ReactNode
-  title?: string
-  hoverEntity?: ReactNode
-} & EntityLinkExternalProps) {
-  const renderLabel = () => <>
-    <span className="xs:hidden">
-      {labelSmall ?? label}
-    </span>
-    <span className="hidden xs:inline-block">
-      {label}
-    </span>
-  </>;
-
-  const classForContrast = () => {
-    switch (contrast) {
-    case 'low':
-      return 'text-dim';
-    case 'high':
-      return 'text-main';
-    default:
-      return 'text-medium';
-    }
-  };
-
-  return (
-    <span className="group inline-flex items-center gap-2 h-5">
-      <Link
-        href={href}
-        title={title}
-        className={clsx(
-          'inline-flex gap-[0.23rem]',
-          !badged && 'text-main hover:text-gray-900 dark:hover:text-gray-100',
-          classForContrast(),
-        )}
-      >
-        {type !== 'icon-only' && <>
-          {badged
-            ? <span className="h-6 inline-flex items-center">
-              <Badge
-                type="small"
-                highContrast={contrast === 'high'}
-                uppercase
-                interactive
-              >
-                {renderLabel()}
-              </Badge>
-            </span>
-            : <span className="uppercase">
-              {renderLabel()}
-            </span>}
-        </>}
-        {icon && type !== 'text-only' &&
-          <span className={clsx(
-            'flex-shrink-0',
-            'inline-flex min-w-[0.9rem]',
-            contrast === 'high'
-              ? 'text-icon'
-              : classForContrast(),
-            type === 'icon-first' && 'order-first',
-            badged && 'translate-y-[4px]',
-            hoverEntity !== undefined && 'group-hover:hidden',
-          )}>
-            {icon}
-          </span>}
-      </Link>
-      {hoverEntity !== undefined &&
-        <span className="hidden group-hover:inline">
-          {hoverEntity}
-        </span>}
-    </span>
-  );
-}
diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
new file mode 100644
index 00000000..9ccd22fc
--- /dev/null
+++ b/src/components/primitives/EntityLink.tsx
@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import LabeledIcon, { LabeledIconType } from './LabeledIcon';
+import Badge from '../Badge';
+import { clsx } from 'clsx/lite';
+
+export interface EntityLinkExternalProps {
+  type?: LabeledIconType
+  badged?: boolean
+  contrast?: 'low' | 'medium' | 'high'
+}
+
+export default function EntityLink({
+  icon,
+  label,
+  labelSmall,
+  iconWide,
+  type,
+  badged,
+  contrast = 'medium',
+  href,
+  prefetch,
+  title,
+  hoverEntity,
+  debug,
+}: {
+  icon: ReactNode
+  label: ReactNode
+  labelSmall?: ReactNode
+  iconWide?: boolean
+  href?: string
+  prefetch?: boolean
+  title?: string
+  hoverEntity?: ReactNode
+  debug?: boolean
+} & EntityLinkExternalProps) {
+  const classForContrast = () => {
+    switch (contrast) {
+    case 'low':
+      return 'text-dim';
+    case 'high':
+      return 'text-main';
+    default:
+      return 'text-medium';
+    }
+  };
+
+  const renderLabel = () => <>
+    <span className="xs:hidden">
+      {labelSmall ?? label}
+    </span>
+    <span className="hidden xs:inline-block">
+      {label}
+    </span>
+  </>;
+
+  return (
+    <span className="group inline-flex gap-2">
+      <LabeledIcon {...{
+        icon,
+        iconWide,
+        href,
+        prefetch,
+        title,
+        type,
+        className: clsx(
+          classForContrast(),
+          href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
+        ),
+        debug,
+      }}>
+        {badged
+          ? <Badge
+            type="small"
+            highContrast={contrast === 'high'}
+            className='translate-y-[-0.5px]'
+            uppercase
+            interactive
+          >
+            {renderLabel()}
+          </Badge>
+          : renderLabel()}
+      </LabeledIcon>
+      {hoverEntity !== undefined &&
+        <span className="hidden group-hover:inline">
+          {hoverEntity}
+        </span>}
+    </span>
+  );
+}
diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx
new file mode 100644
index 00000000..57adbe06
--- /dev/null
+++ b/src/components/primitives/Icon.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { clsx } from 'clsx/lite';
+import Spinner from '../Spinner';
+
+export default function Icon({
+  children,
+  className,
+  iconClassName,
+  wide,
+  loading,
+  debug,
+}: {
+  children: ReactNode
+  className?: string
+  iconClassName?: string
+  wide?: boolean
+  loading?: boolean
+  debug?: boolean,
+}) {
+  return (
+    <span className={clsx(
+      'h-[18px] md:h-[20px]',
+      wide ? 'w-[28px]' : 'w-[14px]',
+      'inline-flex items-center justify-center',
+      debug && 'bg-gray-700',
+      className,
+    )}>
+      {loading
+        ? <Spinner />
+        : <span className={iconClassName}>
+          {children}
+        </span>}
+    </span>
+  );
+}
diff --git a/src/components/primitives/LabeledIcon.tsx b/src/components/primitives/LabeledIcon.tsx
new file mode 100644
index 00000000..ca249680
--- /dev/null
+++ b/src/components/primitives/LabeledIcon.tsx
@@ -0,0 +1,60 @@
+import { ComponentProps, ReactNode } from 'react';
+import Icon from './Icon';
+import { clsx } from 'clsx/lite';
+import Link from 'next/link';
+
+export type LabeledIconType =
+  'icon-first' |
+  'icon-last' |
+  'icon-only' |
+  'text-only';
+
+export default function LabeledIcon({
+  icon,
+  type = 'icon-first',
+  className: classNameProp,
+  children,
+  iconWide,
+  href,
+  prefetch,
+  debug,
+}: {
+  icon?: ReactNode,
+  type?: LabeledIconType,
+  className?: string,
+  children: ReactNode,
+  iconWide?:boolean,
+  debug?: boolean,
+} & Partial<ComponentProps<typeof Link>>) {
+  const className = clsx(
+    'inline-flex gap-x-1 md:gap-x-1.5',
+    classNameProp,
+    debug && 'border border-green-500 m-[-1px]',
+  );
+
+  const renderContent = () => <>
+    {icon && type !== 'text-only' &&
+      <Icon {...{
+        className: clsx(type === 'icon-last' && 'order-1'),
+        wide: iconWide,
+        debug,
+      }}>
+        {icon}
+      </Icon>}
+    {children && type !== 'icon-only' &&
+      <span className={clsx(
+        'uppercase',
+        debug && 'bg-gray-700'
+      )}>
+        {children}
+      </span>}
+  </>;
+  
+  return href
+    ? <Link {...{ href, prefetch, className }}>
+      {renderContent()}
+    </Link>
+    : <div {...{ className }}>
+      {renderContent()}
+    </div>;
+}
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index c54b0088..376315fe 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -65,11 +65,11 @@ export default function PhotoLarge({
       contentSide={
         <div className={clsx(
           'relative',
-          'leading-snug',
           'sticky top-4 self-start -translate-y-1',
           'grid grid-cols-2 md:grid-cols-1',
-          'gap-x-0.5 sm:gap-x-1 gap-y-4',
+          'gap-x-0.5 sm:gap-x-1 gap-y-baseline',
           'pb-6',
+          'debug-baseline-grid',
         )}>
           {/* Meta */}
           <div className="pr-3 md:pr-0">
@@ -88,7 +88,7 @@ export default function PhotoLarge({
                 </div>
               </Suspense>
             </div>
-            <div className="space-y-4">
+            <div className="space-y-baseline">
               {photo.caption &&
                 <div className="uppercase">
                   {photo.caption}
@@ -106,7 +106,7 @@ export default function PhotoLarge({
             </div>
           </div>
           {/* EXIF Data */}
-          <div className="space-y-4">
+          <div className="space-y-baseline">
             {showExifContent &&
               <>
                 <ul className="text-medium">
@@ -134,8 +134,8 @@ export default function PhotoLarge({
                   />}
               </>}
             <div className={clsx(
-              'flex gap-2',
-              'md:flex-col md:gap-4 md:justify-normal',
+              'flex gap-x-1.5 gap-y-baseline',
+              'md:flex-col md:justify-normal',
             )}>
               <div className={clsx(
                 'text-medium uppercase pr-1',
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index cfa722b2..7a185350 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -2,7 +2,9 @@ import { labelForFilmSimulation } from '@/vendors/fujifilm';
 import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon';
 import { pathForFilmSimulation } from '@/site/paths';
 import { FilmSimulation } from '.';
-import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
 
 export default function PhotoFilmSimulation({
   simulation,
diff --git a/src/site/FooterClient.tsx b/src/site/FooterClient.tsx
index ab114e7c..966b008e 100644
--- a/src/site/FooterClient.tsx
+++ b/src/site/FooterClient.tsx
@@ -38,7 +38,7 @@ export default function FooterClient({
                 'flex items-center',
                 'text-dim min-h-[4rem]',
               )}>
-              <div className="flex gap-x-4 gap-y-1 flex-grow flex-wrap h-4">
+              <div className="flex gap-x-4 gap-y-0.5 flex-grow flex-wrap">
                 {isPathAdmin(pathname)
                   ? <>
                     {userEmail === undefined &&
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index d140f0ef..b17daa95 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -138,7 +138,7 @@ export default function SiteChecklistClient({
     </div>;
 
   return (
-    <div className="text-sm max-w-xl space-y-6 w-full">
+    <div className="max-w-xl space-y-6 w-full">
       <Checklist
         title="Storage"
         icon={<BiData size={16} />}
diff --git a/src/site/globals.css b/src/site/globals.css
index 9803be2a..fefddffb 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -116,7 +116,7 @@
       hover:text-gray-600
       hover:dark:text-gray-400
   }
-  /* Common Utilities: Text */
+  /* Utilities: Text */
   .text-main {
     @apply
       text-gray-900 dark:text-gray-100
@@ -145,7 +145,7 @@
     @apply
       text-red-500 dark:text-red-400
   }
-  /* Common Utilities: Background */
+  /* Utilities: Background */
   .bg-main {
     @apply
       bg-white dark:bg-black
@@ -159,4 +159,22 @@
     @apply
       bg-gray-900 dark:bg-gray-100
   }
+  /* Utilities: Baseline Grid */
+  .space-y-baseline {
+    @apply
+      space-y-[1.125rem] md:space-y-[1.25rem]
+  }
+  .gap-y-baseline {
+    @apply
+      gap-y-[1.125rem] md:gap-y-[1.25rem]
+  }
+  .gap-baseline {
+    @apply
+      gap-[1.125rem] md:gap-[1.25rem]
+  }
+  .debug-baseline-grid {
+    @apply
+      bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.125rem)]
+      md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
+  }
 }
diff --git a/src/tag/FavsTag.tsx b/src/tag/FavsTag.tsx
index 5496a276..65fc5d8e 100644
--- a/src/tag/FavsTag.tsx
+++ b/src/tag/FavsTag.tsx
@@ -1,8 +1,10 @@
 import { FaStar } from 'react-icons/fa';
-import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
 import { TAG_FAVS } from '.';
 import { pathForTag } from '@/site/paths';
 import { clsx } from 'clsx/lite';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
 
 export default function FavsTag({
   type,
@@ -30,7 +32,7 @@ export default function FavsTag({
           size={12}
           className={clsx(
             'text-amber-500',
-            'translate-x-[-1px] translate-y-[3.5px]',
+            'translate-x-[-1px] translate-y-[-0.5px]',
           )}
         />}
       type={type}
diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx
index 56fab6a6..0c1e4546 100644
--- a/src/tag/PhotoTag.tsx
+++ b/src/tag/PhotoTag.tsx
@@ -1,7 +1,9 @@
 import { pathForTag } from '@/site/paths';
 import { FaTag } from 'react-icons/fa';
 import { formatTag } from '.';
-import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
 
 export default function PhotoTag({
   tag,
@@ -19,7 +21,7 @@ export default function PhotoTag({
       href={pathForTag(tag)}
       icon={<FaTag
         size={11}
-        className="translate-y-[5px]"
+        className="translate-y-[1px]"
       />}
       type={type}
       badged={badged}
diff --git a/src/tag/PhotoTags.tsx b/src/tag/PhotoTags.tsx
index ef48121e..6eec2af3 100644
--- a/src/tag/PhotoTags.tsx
+++ b/src/tag/PhotoTags.tsx
@@ -1,7 +1,7 @@
 import PhotoTag from '@/tag/PhotoTag';
 import { isTagFavs } from '.';
 import FavsTag from './FavsTag';
-import { EntityLinkExternalProps } from '@/components/EntityLink';
+import { EntityLinkExternalProps } from '@/components/primitives/EntityLink';
 
 export default function PhotoTags({
   tags,
@@ -10,13 +10,13 @@ export default function PhotoTags({
   tags: string[]
 } & EntityLinkExternalProps) {
   return (
-    <div className="-space-y-0.5">
+    <div className="flex flex-col">
       {tags.map(tag =>
-        <div key={tag}>
+        <>
           {isTagFavs(tag)
-            ? <FavsTag {...{ contrast }} />
-            : <PhotoTag {...{ tag, contrast }} />}
-        </div>)}
+            ? <FavsTag {...{ key:tag, contrast }} />
+            : <PhotoTag {...{ key:tag, tag, contrast }} />}
+        </>)}
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9816930c..b76c7276 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,13 +12,13 @@ module.exports = {
       ...defaultTheme.screens,
     },
     fontSize: {
-      'xs': '0.75rem',
-      'sm': ['0.825rem', '1.15rem'],
-      'base': ['0.875rem', '1.275rem'],
-      'lg': ['0.925rem', '1.05rem'],
-      'xl': '1rem',
-      '2xl': '1.1rem',
-      '3xl': ['1.3rem', '1.7rem'],
+      'xs':   ['0.75rem', '1rem'],        // 12px on 16px
+      'sm':   ['0.8125rem', '1.125rem'],  // 13px on 18px [Default: mobile]
+      'base': ['0.875rem', '1.25rem'],    // 14px on 20px [Default: desktop]
+      'lg':   ['1rem', '1.25rem'],        // 16px on 20px
+      'xl':   ['1.125rem', '1.25rem'],    // 18px on 20px
+      '2xl':  ['1.25rem', '1.25rem'],     // 20px on 20px
+      '3xl':  ['1.5rem', '1.5rem'],       // 24px on 24px
     },
     extend: {
       fontFamily: {

From bdd83170bc4311f69722680132e7c62e47c9de6a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 26 Mar 2024 12:50:49 -0500
Subject: [PATCH 02/15] Fix debug baseline grid in light mode

---
 src/site/globals.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/site/globals.css b/src/site/globals.css
index fefddffb..b4481406 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -174,7 +174,9 @@
   }
   .debug-baseline-grid {
     @apply
-      bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.125rem)]
-      md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
+      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.125rem)]
+      md:bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.25rem)]
+      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.125rem)]
+      dark:md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
   }
 }

From 9b9818f17c909d871cb653739484c669452c42e1 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 26 Mar 2024 12:55:28 -0500
Subject: [PATCH 03/15] Fix photo header contrast

---
 src/camera/CameraHeader.tsx            | 2 +-
 src/simulation/PhotoFilmSimulation.tsx | 3 ++-
 src/tag/TagHeader.tsx                  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/camera/CameraHeader.tsx b/src/camera/CameraHeader.tsx
index 657c0e5a..35f7b9ef 100644
--- a/src/camera/CameraHeader.tsx
+++ b/src/camera/CameraHeader.tsx
@@ -21,7 +21,7 @@ export default function CameraHeader({
   const camera = cameraFromPhoto(photos[0], cameraProp);
   return (
     <PhotoSetHeader
-      entity={<PhotoCamera {...{ camera }} hideAppleIcon />}
+      entity={<PhotoCamera {...{ camera }} contrast="high" hideAppleIcon />}
       entityVerb="Photo"
       entityDescription={
         descriptionForCameraPhotos(photos, undefined, count, dateRange)}
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index 7a185350..3ae380c7 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -25,13 +25,14 @@ export default function PhotoFilmSimulation({
       href={pathForFilmSimulation(simulation)}
       icon={<PhotoFilmSimulationIcon
         simulation={simulation}
-        className="translate-y-[-1px]"
+        className="translate-y-[-0.5px]"
       />}
       title={`Film Simulation: ${large}`}
       type={type}
       badged={badged}
       contrast={contrast}
       hoverEntity={countOnHover}
+      iconWide
     />
   );
 }
diff --git a/src/tag/TagHeader.tsx b/src/tag/TagHeader.tsx
index f320de7d..fe97f856 100644
--- a/src/tag/TagHeader.tsx
+++ b/src/tag/TagHeader.tsx
@@ -22,7 +22,7 @@ export default function TagHeader({
     <PhotoSetHeader
       entity={isTagFavs(tag) 
         ? <FavsTag />
-        : <PhotoTag tag={tag} />}
+        : <PhotoTag tag={tag} contrast="high" />}
       entityVerb="Tagged"
       entityDescription={descriptionForTaggedPhotos(photos, undefined, count)}
       photos={photos}

From 9b1b94175546b10f94dd55358bc8c2baa7637b06 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 26 Mar 2024 16:33:16 -0500
Subject: [PATCH 04/15] Turn off baseline grid

---
 src/photo/PhotoLarge.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 376315fe..72dadd64 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -69,7 +69,6 @@ export default function PhotoLarge({
           'grid grid-cols-2 md:grid-cols-1',
           'gap-x-0.5 sm:gap-x-1 gap-y-baseline',
           'pb-6',
-          'debug-baseline-grid',
         )}>
           {/* Meta */}
           <div className="pr-3 md:pr-0">

From fa53e7ece37752e9ca59367d28db323701aa17a9 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 26 Mar 2024 23:46:13 -0500
Subject: [PATCH 05/15] Refine baseline type sizes

---
 src/app/admin/baseline/page.tsx        |  2 +-
 src/components/Badge.tsx               |  6 +++---
 src/components/OGTile.tsx              |  3 +--
 src/components/ShareModal.tsx          |  2 +-
 src/simulation/PhotoFilmSimulation.tsx |  5 +----
 src/site/NavClient.tsx                 |  1 -
 src/site/globals.css                   | 16 ++++++++++------
 tailwind.config.js                     | 14 +++++++-------
 8 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/app/admin/baseline/page.tsx b/src/app/admin/baseline/page.tsx
index 0dbec5f6..60383037 100644
--- a/src/app/admin/baseline/page.tsx
+++ b/src/app/admin/baseline/page.tsx
@@ -52,7 +52,7 @@ export default function ComponentsPage() {
       <div
         className={clsx(
           'flex gap-8',
-          debugGrid && 'debug-baseline-grid'
+          debugGrid && 'bg-baseline-grid'
         )}
       >
         <div className="[&>*]:flex">
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index e3fa1b6d..02124a22 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -27,8 +27,8 @@ export default function Badge({
       );
     case 'small':
       return clsx(
-        'px-[4px] py-[2.5px]',
-        'md:px-[4.5px] md:py-[3px]',
+        'h-max-baseline',
+        'px-[5px] py-[2.75px]',
         'text-[0.7rem] font-medium rounded-[0.25rem]',
         highContrast
           ? 'text-invert bg-invert'
@@ -44,7 +44,7 @@ export default function Badge({
   };
   return (
     <span className={clsx(
-      'leading-none inline-flex',
+      'leading-none',
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
       className,
diff --git a/src/components/OGTile.tsx b/src/components/OGTile.tsx
index 8afa1603..46938167 100644
--- a/src/components/OGTile.tsx
+++ b/src/components/OGTile.tsx
@@ -110,9 +110,8 @@ export default function OGTile({
           />}
       </div>
       <div className={clsx(
-        'md:text-lg',
+        'font-sans leading-tight',
         'flex flex-col gap-1 p-3',
-        'font-sans leading-none',
         'bg-gray-50 dark:bg-gray-900/50',
         'group-active:bg-gray-50 group-active:dark:bg-gray-900/50',
         'group-hover:bg-gray-100 group-hover:dark:bg-gray-900/70',
diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
index 9e3bad45..d807ed86 100644
--- a/src/components/ShareModal.tsx
+++ b/src/components/ShareModal.tsx
@@ -24,7 +24,7 @@ export default function ShareModal({
       <div className="space-y-3 md:space-y-4 w-full">
         <div className={clsx(
           'flex items-center gap-x-3',
-          'text-xl md:text-3xl leading-snug',
+          'text-2xl leading-snug',
         )}>
           <TbPhotoShare size={22} className="hidden xs:block" />
           <div className="flex-grow">
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index 3ae380c7..ddcfc819 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -23,10 +23,7 @@ export default function PhotoFilmSimulation({
       label={medium}
       labelSmall={small}
       href={pathForFilmSimulation(simulation)}
-      icon={<PhotoFilmSimulationIcon
-        simulation={simulation}
-        className="translate-y-[-0.5px]"
-      />}
+      icon={<PhotoFilmSimulationIcon simulation={simulation} />}
       title={`Film Simulation: ${large}`}
       type={type}
       badged={badged}
diff --git a/src/site/NavClient.tsx b/src/site/NavClient.tsx
index 9ff3f75c..a34d4350 100644
--- a/src/site/NavClient.tsx
+++ b/src/site/NavClient.tsx
@@ -57,7 +57,6 @@ export default function NavClient({
               className={clsx(
                 'flex items-center',
                 'w-full min-h-[4rem]',
-                'leading-none',
               )}>
               <div className="flex-grow">
                 <ViewSwitcher
diff --git a/src/site/globals.css b/src/site/globals.css
index b4481406..9579ee8e 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -162,21 +162,25 @@
   /* Utilities: Baseline Grid */
   .space-y-baseline {
     @apply
-      space-y-[1.125rem] md:space-y-[1.25rem]
+      space-y-[1.1875rem] md:space-y-[1.25rem]
   }
   .gap-y-baseline {
     @apply
-      gap-y-[1.125rem] md:gap-y-[1.25rem]
+      gap-y-[1.1875rem] md:gap-y-[1.25rem]
   }
   .gap-baseline {
     @apply
-      gap-[1.125rem] md:gap-[1.25rem]
+      gap-[1.1875rem] md:gap-[1.25rem]
   }
-  .debug-baseline-grid {
+  .max-h-baseline {
     @apply
-      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.125rem)]
+      max-h-[1.1875rem] md:max-h-[1.25rem]
+  }
+  .bg-baseline-grid {
+    @apply
+      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.1875rem)]
       md:bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.25rem)]
-      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.125rem)]
+      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.1875rem)]
       dark:md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index b76c7276..23b349c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,13 +12,13 @@ module.exports = {
       ...defaultTheme.screens,
     },
     fontSize: {
-      'xs':   ['0.75rem', '1rem'],        // 12px on 16px
-      'sm':   ['0.8125rem', '1.125rem'],  // 13px on 18px [Default: mobile]
-      'base': ['0.875rem', '1.25rem'],    // 14px on 20px [Default: desktop]
-      'lg':   ['1rem', '1.25rem'],        // 16px on 20px
-      'xl':   ['1.125rem', '1.25rem'],    // 18px on 20px
-      '2xl':  ['1.25rem', '1.25rem'],     // 20px on 20px
-      '3xl':  ['1.5rem', '1.5rem'],       // 24px on 24px
+      'xs':   ['0.75rem', '1rem'],          // 12px on 16px
+      'sm':   ['0.84375rem', '1.1875rem'],  // 13.5px on 19px [Default: mobile]
+      'base': ['0.875rem', '1.25rem'],      // 14px on 20px   [Default: desktop]
+      'lg':   ['1rem', '1.25rem'],          // 16px on 20px
+      'xl':   ['1.125rem', '1.25rem'],      // 18px on 20px
+      '2xl':  ['1.25rem', '1.25rem'],       // 20px on 20px
+      '3xl':  ['1.5rem', '1.5rem'],         // 24px on 24px
     },
     extend: {
       fontFamily: {

From a48a42106392b85992602b74b17cb34e0a1cceb2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 00:03:48 -0500
Subject: [PATCH 06/15] Provide keys explicitly in <PhotoTags />

---
 src/tag/PhotoTags.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tag/PhotoTags.tsx b/src/tag/PhotoTags.tsx
index 6eec2af3..e9273fee 100644
--- a/src/tag/PhotoTags.tsx
+++ b/src/tag/PhotoTags.tsx
@@ -14,8 +14,8 @@ export default function PhotoTags({
       {tags.map(tag =>
         <>
           {isTagFavs(tag)
-            ? <FavsTag {...{ key:tag, contrast }} />
-            : <PhotoTag {...{ key:tag, tag, contrast }} />}
+            ? <FavsTag key={tag} {...{ contrast }} />
+            : <PhotoTag key={tag} {...{ tag, contrast }} />}
         </>)}
     </div>
   );

From cd4445d880f39fb62f28b6dbf51cb929ddeeac49 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 00:18:29 -0500
Subject: [PATCH 07/15] Improve responsive date handling

---
 src/app/admin/photos/page.tsx     |  3 ++-
 src/components/ResponsiveDate.tsx | 20 ++++++++++++++++++++
 src/photo/PhotoDate.tsx           | 17 +++++++++++++++++
 src/site/CommandK.tsx             | 11 ++---------
 4 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ResponsiveDate.tsx
 create mode 100644 src/photo/PhotoDate.tsx

diff --git a/src/app/admin/photos/page.tsx b/src/app/admin/photos/page.tsx
index b59a38f8..cb8f78bf 100644
--- a/src/app/admin/photos/page.tsx
+++ b/src/app/admin/photos/page.tsx
@@ -33,6 +33,7 @@ import { PRO_MODE_ENABLED } from '@/site/config';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 import IconGrSync from '@/site/IconGrSync';
 import { getStoragePhotoUrlsNoStore } from '@/services/storage/cache';
+import PhotoDate from '@/photo/PhotoDate';
 
 const DEBUG_PHOTO_BLOBS = false;
 
@@ -103,7 +104,7 @@ export default async function AdminPhotosPage({
                       'lg:w-[50%] uppercase',
                       'text-dim',
                     )}>
-                      {photo.takenAtNaive}
+                      <PhotoDate {...{ photo }} />
                     </div>
                   </div>
                   <div className={clsx(
diff --git a/src/components/ResponsiveDate.tsx b/src/components/ResponsiveDate.tsx
new file mode 100644
index 00000000..f393d77c
--- /dev/null
+++ b/src/components/ResponsiveDate.tsx
@@ -0,0 +1,20 @@
+import { formatDate } from '@/utility/date';
+
+export default function ResponsiveDate({
+  date,
+}: {
+  date: Date
+}) {
+  return (
+    <>
+      {/* Mobile */}
+      <span className="inline-block sm:hidden">
+        {formatDate(date, true)}
+      </span>
+      {/* Desktop */}
+      <span className="hidden sm:inline-block">
+        {formatDate(date)}
+      </span>
+    </>
+  );
+}
diff --git a/src/photo/PhotoDate.tsx b/src/photo/PhotoDate.tsx
new file mode 100644
index 00000000..c2a9ea24
--- /dev/null
+++ b/src/photo/PhotoDate.tsx
@@ -0,0 +1,17 @@
+import ResponsiveDate from '@/components/ResponsiveDate';
+import { Photo } from '.';
+import { useMemo } from 'react';
+
+export default function PhotoDate({
+  photo: { takenAtNaive },
+}: {
+  photo: Photo
+}) {
+  const date = useMemo(() => {
+    const date = new Date(takenAtNaive);
+    return isNaN(date.getTime()) ? new Date() : date;
+  }, [takenAtNaive]);
+  return (
+    <ResponsiveDate {...{ date }} />
+  );
+}
diff --git a/src/site/CommandK.tsx b/src/site/CommandK.tsx
index 523207bf..b006f7b6 100644
--- a/src/site/CommandK.tsx
+++ b/src/site/CommandK.tsx
@@ -21,7 +21,6 @@ import { authCached } from '@/auth/cache';
 import { getPhotos } from '@/services/vercel-postgres';
 import { getKeywordsForPhoto, photoQuantityText, titleForPhoto } from '@/photo';
 import PhotoTiny from '@/photo/PhotoTiny';
-import { formatDate } from '@/utility/date';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import { BiLockAlt, BiSolidUser } from 'react-icons/bi';
 import { sortTagsObject } from '@/tag';
@@ -31,6 +30,7 @@ import { TbPhoto } from 'react-icons/tb';
 import { IoMdCamera } from 'react-icons/io';
 import { HiDocumentText } from 'react-icons/hi';
 import { signOutAction } from '@/auth/actions';
+import PhotoDate from '@/photo/PhotoDate';
 
 export default async function CommandK() {
   const [
@@ -147,14 +147,7 @@ export default async function CommandK() {
           items: photos.map(photo => ({
             label: titleForPhoto(photo),
             keywords: getKeywordsForPhoto(photo),
-            annotation: <>
-              <span className="hidden sm:inline-block">
-                {formatDate(photo.takenAt)}
-              </span>
-              <span className="inline-block sm:hidden">
-                {formatDate(photo.takenAt, true)}
-              </span>
-            </>,
+            annotation: <PhotoDate {...{ photo }} />,
             accessory: <PhotoTiny photo={photo} />,
             path: pathForPhoto(photo),
           })),

From 5b98d8edf8dedb774dd8141ed19c152b422ab2ed Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 00:21:08 -0500
Subject: [PATCH 08/15] Refine /grid sidebar spacing

---
 src/components/HeaderList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderList.tsx b/src/components/HeaderList.tsx
index 9abc7f98..31f80d33 100644
--- a/src/components/HeaderList.tsx
+++ b/src/components/HeaderList.tsx
@@ -17,7 +17,7 @@ export default function HeaderList({
     <AnimateItems
       className={clsx(
         className,
-        'space-y-0.5',
+        'space-y-1',
       )}
       scaleOffset={0.95}
       duration={0.5}

From 62e83ede84e178cfc14033a9b7ecf6ad8b374ec2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 11:21:19 -0500
Subject: [PATCH 09/15] Add leading 0 to dates

---
 src/components/LocalDate.tsx | 11 -----------
 src/utility/date.ts          |  4 ++--
 2 files changed, 2 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/LocalDate.tsx

diff --git a/src/components/LocalDate.tsx b/src/components/LocalDate.tsx
deleted file mode 100644
index 2f2fd88f..00000000
--- a/src/components/LocalDate.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client';
-
-import { formatDate } from '@/utility/date';
-
-export default function LocalDate({ date }: { date: Date }) {
-  return (
-    <>
-      {formatDate(date)}
-    </>
-  );
-};
diff --git a/src/utility/date.ts b/src/utility/date.ts
index 7e6159be..df214bfe 100644
--- a/src/utility/date.ts
+++ b/src/utility/date.ts
@@ -1,13 +1,13 @@
 import { format, parseISO, parse } from 'date-fns';
 
 const DATE_STRING_FORMAT_SHORT    = 'dd MMM yyyy';
-const DATE_STRING_FORMAT          = 'd MMM yyyy h:mma';
+const DATE_STRING_FORMAT          = 'dd MMM yyyy h:mma';
 const DATE_STRING_FORMAT_POSTGRES = 'yyyy-MM-dd HH:mm:ss';
 
 type AmbiguousTimestamp = number | string;
 
 export const formatDate = (date: Date, short?: boolean) =>
-  format(date, short? DATE_STRING_FORMAT_SHORT : DATE_STRING_FORMAT);
+  format(date, short ? DATE_STRING_FORMAT_SHORT : DATE_STRING_FORMAT);
 
 export const formatDateFromPostgresString = (date: string, short?: boolean) =>
   formatDate(parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()), short);

From edbc6421f73f69eab72cf5ec9ed5486b82c53f77 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 11:28:49 -0500
Subject: [PATCH 10/15] Fix Apple icon positioning

---
 src/camera/PhotoCamera.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx
index e6e8511a..66e21d06 100644
--- a/src/camera/PhotoCamera.tsx
+++ b/src/camera/PhotoCamera.tsx
@@ -28,7 +28,7 @@ export default function PhotoCamera({
       icon={showAppleIcon
         ? <AiFillApple
           title="Apple"
-          className="translate-x-[-2.5px] translate-y-[2px]"
+          className="translate-x-[-0.5px]"
           size={15}
         />
         : <IoMdCamera

From 3b19ba04250b621cb5ef090f3ad5eb0f8ecef695 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 13:10:38 -0500
Subject: [PATCH 11/15] Add admin toggle to debug site-wide baseline grid

---
 src/app/admin/baseline/page.tsx               | 340 +++++++++---------
 src/components/CommandKClient.tsx             |  26 +-
 src/components/DebugBaselineGridContainer.tsx |  24 ++
 src/photo/PhotoLarge.tsx                      |   6 +-
 src/site/CommandK.tsx                         |  11 +-
 src/site/config.ts                            |   1 +
 src/site/paths.ts                             |   1 +
 src/state/AppStateProvider.tsx                |  13 +-
 src/state/index.ts                            |   2 +
 9 files changed, 241 insertions(+), 183 deletions(-)
 create mode 100644 src/components/DebugBaselineGridContainer.tsx

diff --git a/src/app/admin/baseline/page.tsx b/src/app/admin/baseline/page.tsx
index 60383037..99a18ce4 100644
--- a/src/app/admin/baseline/page.tsx
+++ b/src/app/admin/baseline/page.tsx
@@ -1,9 +1,13 @@
 'use client';
 
+import DebugBaselineGridContainer from
+  '@/components/DebugBaselineGridContainer';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
+import SiteGrid from '@/components/SiteGrid';
 import EntityLink from '@/components/primitives/EntityLink';
 import LabeledIcon from '@/components/primitives/LabeledIcon';
 import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
+import { useAppState } from '@/state';
 import { clsx } from 'clsx/lite';
 import { useState } from 'react';
 import { FaCamera, FaHandSparkles, FaUserAltSlash } from 'react-icons/fa';
@@ -13,181 +17,179 @@ import { IoImageSharp } from 'react-icons/io5';
 const DEBUG_LINES = new Array(22).fill(null);
 
 export default function ComponentsPage() {
-  const [_debugGrid, setDebugGrid] = useState('true');
-  const [_debugComponents, setDebugComponents] = useState('false');
+  const {
+    shouldShowBaselineGrid,
+    setShouldShowBaselineGrid,
+  } = useAppState();
 
-  const debugGrid = _debugGrid === 'true';
-  const debugComponents = _debugComponents === 'true';
+  const [debugComponents, setDebugComponents] = useState(false);
 
   return (
-    <>
-      <h1 className="flex mb-6">
-        <div className="grow">
-          <span>Baseline Grid: </span>
-          <span className="text-dim">
-            <span className="md:hidden">13px / 18px</span>
-            <span className="hidden md:inline-block">14px / 20px</span>
-          </span>
-        </div>
-        <div className={clsx(
-          'flex gap-1',
-          '[&>*]:inline-flex [&>*]:gap-1 [&_input]:-translate-y-0.5',
-        )}>
-          <FieldSetWithStatus
-            id="grid"
-            label="Grid"
-            type="checkbox"
-            value={_debugGrid}
-            onChange={setDebugGrid}
-          />
-          <FieldSetWithStatus
-            id="components"
-            label="Components"
-            type="checkbox"
-            value={_debugComponents}
-            onChange={setDebugComponents}
-          />
-        </div>
-      </h1>
-      <div
-        className={clsx(
-          'flex gap-8',
-          debugGrid && 'bg-baseline-grid'
-        )}
-      >
-        <div className="[&>*]:flex">
-          <div>
-            <LabeledIcon
-              icon={<FaCamera size={12} />}
-              debug={debugComponents}
-            >
-              Camera<br />Line two
-            </LabeledIcon>
+    <SiteGrid
+      contentMain={<>
+        <h1 className="flex mb-6">
+          <div className="grow">
+            <span>Baseline Grid: </span>
+            <span className="text-dim">
+              <span className="md:hidden">13.5px / 19px</span>
+              <span className="hidden md:inline-block">14px / 20px</span>
+            </span>
           </div>
-          <div>
-            <LabeledIcon icon={<IoImageSharp />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <EntityLink
-              icon={<FaHandSparkles />}
-              label="Image"
-              debug={debugComponents}
+          <div className={clsx(
+            'flex gap-1',
+            '[&>*]:inline-flex [&>*]:gap-1 [&_input]:-translate-y-0.5',
+          )}>
+            <FieldSetWithStatus
+              id="grid"
+              label="Grid"
+              type="checkbox"
+              value={shouldShowBaselineGrid ? 'true' : 'false'}
+              onChange={e => setShouldShowBaselineGrid?.(e === 'true')}
+            />
+            <FieldSetWithStatus
+              id="components"
+              label="Components"
+              type="checkbox"
+              value={debugComponents ? 'true' : 'false'}
+              onChange={e => setDebugComponents(e === 'true')}
             />
           </div>
-          <div>
-            <EntityLink
-              icon={<FaHandSparkles />}
-              label="Image"
-              badged
-              debug={debugComponents}
-            />
-          </div>
-          <div>
-            <LabeledIcon
-              icon={<IoMdCamera size={12} />}
-              debug={debugComponents}
-            >
-              Canon Mark III
-            </LabeledIcon>
-          </div>
-          <div>
-            <EntityLink
-              icon={<PhotoFilmSimulationIcon simulation="astia" />}
-              label="Astia/Soft"
-              type="icon-last"
-              iconWide
-              badged
-              debug={debugComponents}
-            />
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <EntityLink
-              icon={<PhotoFilmSimulationIcon simulation="astia" />}
-              label="Astia/Soft"
-              type="icon-last"
-              badged
-              debug={debugComponents}
-            />
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-          <div>
-            <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
-              Image
-            </LabeledIcon>
-          </div>
-        </div>
-        <div className={clsx(
-          debugComponents && '[&>*]:bg-gray-800',
-          '[&>*]:flex',
-        )}>
-          {DEBUG_LINES.map((_, i) =>
-            <div key={i}>
-              Line {(i + 1).toString().padStart(2, '0')}
+        </h1>
+        <DebugBaselineGridContainer className="flex gap-8">
+          <div className="[&>*]:flex">
+            <div>
+              <LabeledIcon
+                icon={<FaCamera size={12} />}
+                debug={debugComponents}
+              >
+                Camera<br />Line two
+              </LabeledIcon>
             </div>
-          )}
-        </div>
-      </div>
-    </>
+            <div>
+              <LabeledIcon icon={<IoImageSharp />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <EntityLink
+                icon={<FaHandSparkles />}
+                label="Image"
+                debug={debugComponents}
+              />
+            </div>
+            <div>
+              <EntityLink
+                icon={<FaHandSparkles />}
+                label="Image"
+                badged
+                debug={debugComponents}
+              />
+            </div>
+            <div>
+              <LabeledIcon
+                icon={<IoMdCamera size={12} />}
+                debug={debugComponents}
+              >
+                Canon Mark III
+              </LabeledIcon>
+            </div>
+            <div>
+              <EntityLink
+                icon={<PhotoFilmSimulationIcon simulation="astia" />}
+                label="Astia/Soft"
+                type="icon-last"
+                iconWide
+                badged
+                debug={debugComponents}
+              />
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <EntityLink
+                icon={<PhotoFilmSimulationIcon simulation="astia" />}
+                label="Astia/Soft"
+                type="icon-last"
+                badged
+                debug={debugComponents}
+              />
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+            <div>
+              <LabeledIcon icon={<FaUserAltSlash />} debug={debugComponents}>
+                Image
+              </LabeledIcon>
+            </div>
+          </div>
+          <div className={clsx(
+            debugComponents && '[&>*]:bg-gray-800',
+            '[&>*]:flex',
+          )}>
+            {DEBUG_LINES.map((_, i) =>
+              <div key={i}>
+                Line {(i + 1).toString().padStart(2, '0')}
+              </div>
+            )}
+          </div>
+        </DebugBaselineGridContainer>
+      </>}
+    />
   );
 }
diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx
index eb9a103d..f36e69f9 100644
--- a/src/components/CommandKClient.tsx
+++ b/src/components/CommandKClient.tsx
@@ -18,6 +18,8 @@ import { useTheme } from 'next-themes';
 import { BiDesktop, BiMoon, BiSun } from 'react-icons/bi';
 import { IoInvertModeSharp } from 'react-icons/io5';
 import { useAppState } from '@/state';
+import { ADMIN_DEBUG_TOOLS_ENABLED } from '@/site/config';
+import { RiToolsFill } from 'react-icons/ri';
 
 const LISTENER_KEYDOWN = 'keydown';
 const MINIMUM_QUERY_LENGTH = 2;
@@ -38,17 +40,18 @@ export type CommandKSection = {
 
 export default function CommandKClient({
   onQueryChange,
-  sections = [],
+  serverSections = [],
   footer,
 }: {
   onQueryChange?: (query: string) => Promise<CommandKSection[]>
-  sections?: CommandKSection[]
+  serverSections?: CommandKSection[]
   footer?: string
 }) {
   const {
     isCommandKOpen: isOpen,
     setIsCommandKOpen: setIsOpen,
     setShouldRespondToKeyboardCommands,
+    setShouldShowBaselineGrid,
   } = useAppState();
 
   const isOpenRef = useRef(isOpen);
@@ -132,7 +135,7 @@ export default function CommandKClient({
     }
   }, [isOpen, setShouldRespondToKeyboardCommands]);
 
-  const sectionTheme: CommandKSection = {
+  const clientSections: CommandKSection[] = [{
     heading: 'Theme',
     accessory: <IoInvertModeSharp
       size={14}
@@ -151,7 +154,18 @@ export default function CommandKClient({
       annotation: <BiMoon className="translate-x-[1px]" />,
       action: () => setTheme('dark'),
     }],
-  };
+  }];
+
+  if (ADMIN_DEBUG_TOOLS_ENABLED) {
+    clientSections.push({
+      heading: 'Debug Tools',
+      accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
+      items: [{
+        label: 'Toggle Baseline Grid',
+        action: () => setShouldShowBaselineGrid?.(prev => !prev),
+      }],
+    });
+  }
 
   return (
     <Command.Dialog
@@ -204,8 +218,8 @@ export default function CommandKClient({
               {isLoading ? 'Searching ...' : 'No results found'}
             </Command.Empty>
             {queriedSections
-              .concat(sections)
-              .concat(sectionTheme)
+              .concat(serverSections)
+              .concat(clientSections)
               .filter(({ items }) => items.length > 0)
               .map(({ heading, accessory, items }) =>
                 <Command.Group
diff --git a/src/components/DebugBaselineGridContainer.tsx b/src/components/DebugBaselineGridContainer.tsx
new file mode 100644
index 00000000..8d474c48
--- /dev/null
+++ b/src/components/DebugBaselineGridContainer.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { useAppState } from '@/state';
+import { clsx } from 'clsx/lite';
+import { ReactNode } from 'react';
+
+export default function DebugBaselineGridContainer({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  const { shouldShowBaselineGrid } = useAppState();
+
+  return (
+    <div className={clsx(
+      className,
+      shouldShowBaselineGrid && 'bg-baseline-grid',
+    )}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 72dadd64..4184e78f 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -18,6 +18,8 @@ import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
 import { sortTags } from '@/tag';
 import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
 import { Suspense } from 'react';
+import DebugBaselineGridContainer from
+  '@/components/DebugBaselineGridContainer';
 
 export default function PhotoLarge({
   photo,
@@ -63,7 +65,7 @@ export default function PhotoLarge({
           priority={priority}
         />}
       contentSide={
-        <div className={clsx(
+        <DebugBaselineGridContainer className={clsx(
           'relative',
           'sticky top-4 self-start -translate-y-1',
           'grid grid-cols-2 md:grid-cols-1',
@@ -153,7 +155,7 @@ export default function PhotoLarge({
               />
             </div>
           </div>
-        </div>}
+        </DebugBaselineGridContainer>}
     />
   );
 };
diff --git a/src/site/CommandK.tsx b/src/site/CommandK.tsx
index b006f7b6..ecf17f08 100644
--- a/src/site/CommandK.tsx
+++ b/src/site/CommandK.tsx
@@ -6,6 +6,7 @@ import {
   getUniqueTagsCached,
 } from '@/photo/cache';
 import {
+  PATH_ADMIN_BASELINE,
   PATH_ADMIN_CONFIGURATION,
   PATH_ADMIN_PHOTOS,
   PATH_ADMIN_TAGS,
@@ -31,6 +32,7 @@ import { IoMdCamera } from 'react-icons/io';
 import { HiDocumentText } from 'react-icons/hi';
 import { signOutAction } from '@/auth/actions';
 import PhotoDate from '@/photo/PhotoDate';
+import { ADMIN_DEBUG_TOOLS_ENABLED } from './config';
 
 export default async function CommandK() {
   const [
@@ -129,8 +131,15 @@ export default async function CommandK() {
       }],
   };
 
+  if (isAdminLoggedIn && ADMIN_DEBUG_TOOLS_ENABLED) {
+    SECTION_ADMIN.items.push({
+      label: 'Baseline Overview',
+      path: PATH_ADMIN_BASELINE,
+    });
+  }
+
   return <CommandKClient
-    sections={[
+    serverSections={[
       SECTION_TAGS,
       SECTION_CAMERAS,
       SECTION_FILM,
diff --git a/src/site/config.ts b/src/site/config.ts
index 4059cf05..b7d35de7 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -109,6 +109,7 @@ export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
   : 1;
 export const OG_TEXT_BOTTOM_ALIGNMENT =
   (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
+export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
 
 export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
 
diff --git a/src/site/paths.ts b/src/site/paths.ts
index 0d500be6..ec049364 100644
--- a/src/site/paths.ts
+++ b/src/site/paths.ts
@@ -32,6 +32,7 @@ export const PATH_ADMIN_PHOTOS        = `${PATH_ADMIN}/photos`;
 export const PATH_ADMIN_UPLOADS       = `${PATH_ADMIN}/uploads`;
 export const PATH_ADMIN_TAGS          = `${PATH_ADMIN}/tags`;
 export const PATH_ADMIN_CONFIGURATION = `${PATH_ADMIN}/configuration`;
+export const PATH_ADMIN_BASELINE      = `${PATH_ADMIN}/baseline`;
 
 // API paths
 export const PATH_API_STORAGE = `${PATH_API}/storage`;
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index a0d86a92..d20e7aa2 100644
--- a/src/state/AppStateProvider.tsx
+++ b/src/state/AppStateProvider.tsx
@@ -12,15 +12,16 @@ export default function AppStateProvider({
 }) {
   const { previousPathname } = usePathnames();
 
-  const [hasLoaded, setHasLoaded] = useState(false);
-  
+  const [hasLoaded, setHasLoaded] =
+    useState(false);
   const [nextPhotoAnimation, setNextPhotoAnimation] =
     useState<AnimationConfig>();
-
   const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] =
     useState(true);
-
-  const [isCommandKOpen, setIsCommandKOpen] = useState(false);
+  const [isCommandKOpen, setIsCommandKOpen] =
+    useState(false);
+  const [shouldShowBaselineGrid, setShouldShowBaselineGrid] =
+    useState(false);
 
   useEffect(() => {
     setHasLoaded?.(true);
@@ -38,6 +39,8 @@ export default function AppStateProvider({
         setShouldRespondToKeyboardCommands,
         isCommandKOpen,
         setIsCommandKOpen,
+        shouldShowBaselineGrid,
+        setShouldShowBaselineGrid,
         clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
       }}
     >
diff --git a/src/state/index.ts b/src/state/index.ts
index 8c303280..18b08869 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -11,6 +11,8 @@ export interface AppStateContext {
   setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
+  shouldShowBaselineGrid?: boolean
+  setShouldShowBaselineGrid?: Dispatch<SetStateAction<boolean>>
   clearNextPhotoAnimation?: () => void
 }
 

From d36a1c5536d962ab18ddb784a064e189c785e8c1 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 13:22:31 -0500
Subject: [PATCH 12/15] Fix debug tools cmd-k interaction

---
 src/components/CommandKClient.tsx | 5 +++--
 src/site/CommandK.tsx             | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx
index f36e69f9..d16be976 100644
--- a/src/components/CommandKClient.tsx
+++ b/src/components/CommandKClient.tsx
@@ -18,7 +18,6 @@ import { useTheme } from 'next-themes';
 import { BiDesktop, BiMoon, BiSun } from 'react-icons/bi';
 import { IoInvertModeSharp } from 'react-icons/io5';
 import { useAppState } from '@/state';
-import { ADMIN_DEBUG_TOOLS_ENABLED } from '@/site/config';
 import { RiToolsFill } from 'react-icons/ri';
 
 const LISTENER_KEYDOWN = 'keydown';
@@ -41,10 +40,12 @@ export type CommandKSection = {
 export default function CommandKClient({
   onQueryChange,
   serverSections = [],
+  showDebugTools,
   footer,
 }: {
   onQueryChange?: (query: string) => Promise<CommandKSection[]>
   serverSections?: CommandKSection[]
+  showDebugTools?: boolean
   footer?: string
 }) {
   const {
@@ -156,7 +157,7 @@ export default function CommandKClient({
     }],
   }];
 
-  if (ADMIN_DEBUG_TOOLS_ENABLED) {
+  if (showDebugTools) {
     clientSections.push({
       heading: 'Debug Tools',
       accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
diff --git a/src/site/CommandK.tsx b/src/site/CommandK.tsx
index ecf17f08..7a44a423 100644
--- a/src/site/CommandK.tsx
+++ b/src/site/CommandK.tsx
@@ -163,6 +163,7 @@ export default async function CommandK() {
         }]
         : [];
     }}
+    showDebugTools={isAdminLoggedIn && ADMIN_DEBUG_TOOLS_ENABLED}
     footer={photoQuantityText(count, false)}
   />;
 }

From 7a9c839a2084bf601396c2adc4010c5b1da16d5a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 27 Mar 2024 17:59:53 -0500
Subject: [PATCH 13/15] Add baseline grid debugging to photo set headers

---
 src/app/admin/baseline/page.tsx                            | 7 +++----
 ...gBaselineGridContainer.tsx => DivDebugBaselineGrid.tsx} | 2 +-
 src/photo/PhotoLarge.tsx                                   | 7 +++----
 src/photo/PhotoSetHeader.tsx                               | 5 +++--
 4 files changed, 10 insertions(+), 11 deletions(-)
 rename src/components/{DebugBaselineGridContainer.tsx => DivDebugBaselineGrid.tsx} (88%)

diff --git a/src/app/admin/baseline/page.tsx b/src/app/admin/baseline/page.tsx
index 99a18ce4..181682d9 100644
--- a/src/app/admin/baseline/page.tsx
+++ b/src/app/admin/baseline/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import DebugBaselineGridContainer from
-  '@/components/DebugBaselineGridContainer';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
 import SiteGrid from '@/components/SiteGrid';
 import EntityLink from '@/components/primitives/EntityLink';
@@ -55,7 +54,7 @@ export default function ComponentsPage() {
             />
           </div>
         </h1>
-        <DebugBaselineGridContainer className="flex gap-8">
+        <DivDebugBaselineGrid className="flex gap-8">
           <div className="[&>*]:flex">
             <div>
               <LabeledIcon
@@ -188,7 +187,7 @@ export default function ComponentsPage() {
               </div>
             )}
           </div>
-        </DebugBaselineGridContainer>
+        </DivDebugBaselineGrid>
       </>}
     />
   );
diff --git a/src/components/DebugBaselineGridContainer.tsx b/src/components/DivDebugBaselineGrid.tsx
similarity index 88%
rename from src/components/DebugBaselineGridContainer.tsx
rename to src/components/DivDebugBaselineGrid.tsx
index 8d474c48..2724d6d7 100644
--- a/src/components/DebugBaselineGridContainer.tsx
+++ b/src/components/DivDebugBaselineGrid.tsx
@@ -4,7 +4,7 @@ import { useAppState } from '@/state';
 import { clsx } from 'clsx/lite';
 import { ReactNode } from 'react';
 
-export default function DebugBaselineGridContainer({
+export default function DivDebugBaselineGrid({
   children,
   className,
 }: {
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 4184e78f..6b76868d 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -18,8 +18,7 @@ import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
 import { sortTags } from '@/tag';
 import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
 import { Suspense } from 'react';
-import DebugBaselineGridContainer from
-  '@/components/DebugBaselineGridContainer';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 
 export default function PhotoLarge({
   photo,
@@ -65,7 +64,7 @@ export default function PhotoLarge({
           priority={priority}
         />}
       contentSide={
-        <DebugBaselineGridContainer className={clsx(
+        <DivDebugBaselineGrid className={clsx(
           'relative',
           'sticky top-4 self-start -translate-y-1',
           'grid grid-cols-2 md:grid-cols-1',
@@ -155,7 +154,7 @@ export default function PhotoLarge({
               />
             </div>
           </div>
-        </DebugBaselineGridContainer>}
+        </DivDebugBaselineGrid>}
     />
   );
 };
diff --git a/src/photo/PhotoSetHeader.tsx b/src/photo/PhotoSetHeader.tsx
index 163a8a9f..7fe89136 100644
--- a/src/photo/PhotoSetHeader.tsx
+++ b/src/photo/PhotoSetHeader.tsx
@@ -4,6 +4,7 @@ import ShareButton from '@/components/ShareButton';
 import AnimateItems from '@/components/AnimateItems';
 import { ReactNode } from 'react';
 import { HIGH_DENSITY_GRID } from '@/site/config';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 
 export default function PhotoSetHeader({
   entity,
@@ -35,7 +36,7 @@ export default function PhotoSetHeader({
       type="bottom"
       distanceOffset={10}
       animateOnFirstLoadOnly
-      items={[<div
+      items={[<DivDebugBaselineGrid
         key="PhotosHeader"
         className={clsx(
           'grid gap-0.5 sm:gap-1 items-start',
@@ -74,7 +75,7 @@ export default function PhotoSetHeader({
             ? start
             : <>{end}<br />– {start}</>}
         </span>
-      </div>]}
+      </DivDebugBaselineGrid>]}
     />
   );
 }

From ef0b652c97a524ebe28d26ad9101fab351c1a3fb Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 28 Mar 2024 18:52:09 -0500
Subject: [PATCH 14/15] Fix AI Button intercepting implicit form submits

---
 src/photo/ai/AiButton.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/photo/ai/AiButton.tsx b/src/photo/ai/AiButton.tsx
index b7892312..b88d1fb0 100644
--- a/src/photo/ai/AiButton.tsx
+++ b/src/photo/ai/AiButton.tsx
@@ -41,6 +41,7 @@ export default function AiButton({
 
   return (
     <button
+      type="button"
       className={clsx(
         'flex min-w-[3.25rem] min-h-9 justify-center',
         className,

From eb94f4f0fbec6c89a5ca3df10f96033f6effa231 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 29 Mar 2024 11:08:51 -0500
Subject: [PATCH 15/15] Refactor camera paths and string parsing

---
 __tests__/camera.test.ts                      | 32 ++++++---
 __tests__/path.test.ts                        |  8 +--
 .../[model]}/[photoId]/layout.tsx             | 14 ++--
 .../[model]}/[photoId]/page.tsx               |  0
 .../[model]}/[photoId]/share/page.tsx         | 10 ++-
 .../[model]}/image/route.tsx                  |  6 +-
 .../{[camera] => [make]/[model]}/page.tsx     | 10 +--
 .../[model]}/share/page.tsx                   | 14 ++--
 src/camera/index.ts                           | 67 +++++++++++--------
 src/image-response/PhotoImageResponse.tsx     |  4 +-
 src/services/vercel-postgres.ts               |  6 +-
 src/site/paths.ts                             | 48 ++++++-------
 12 files changed, 119 insertions(+), 100 deletions(-)
 rename src/app/shot-on/{[camera] => [make]/[model]}/[photoId]/layout.tsx (83%)
 rename src/app/shot-on/{[camera] => [make]/[model]}/[photoId]/page.tsx (100%)
 rename src/app/shot-on/{[camera] => [make]/[model]}/[photoId]/share/page.tsx (65%)
 rename src/app/shot-on/{[camera] => [make]/[model]}/image/route.tsx (86%)
 rename src/app/shot-on/{[camera] => [make]/[model]}/page.tsx (86%)
 rename src/app/shot-on/{[camera] => [make]/[model]}/share/page.tsx (87%)

diff --git a/__tests__/camera.test.ts b/__tests__/camera.test.ts
index 41f11eb3..e4950b68 100644
--- a/__tests__/camera.test.ts
+++ b/__tests__/camera.test.ts
@@ -1,14 +1,30 @@
 import { Camera, formatCameraText } from '@/camera';
 
+const APPLE     : Camera = { make: 'Apple', model: 'iPhone 11 Pro' };
+const APPLE_01  : Camera = { make: 'Apple', model: 'iPhone 11' };
+const APPLE_02  : Camera = { make: 'Apple', model: 'iPhone 15 Pro Max' };
+const FUJIFILM  : Camera = { make: 'Fujifilm', model: 'X-T5' };
+const CANON     : Camera = { make: 'Canon', model: 'Canon EOS 800D' };
+const NIKON     : Camera = {
+  make: 'Nikon Corporation',
+  model: 'Nikon D7000',
+};
+
 describe('Camera', () => {
-  it('labels correctly', () => {
-    const apple: Camera = { make: 'Apple', model: 'iPhone 11 Pro' };
-    expect(formatCameraText(apple, true)).toBe('Apple iPhone 11 Pro');
-    expect(formatCameraText(apple, false)).toBe('iPhone 11 Pro');
-    const fujifilm: Camera = { make: 'Fujifilm', model: 'X-T5' };
-    expect(formatCameraText(fujifilm)).toBe('Fujifilm X-T5');
-    const canon: Camera = { make: 'Canon', model: 'Canon EOS 800D' };
-    expect(formatCameraText(canon)).toBe('Canon EOS 800D');
+  it('labels full text correctly', () => {
+    expect(formatCameraText(APPLE)).toBe('iPhone 11 Pro');
+    expect(formatCameraText(APPLE, 'always')).toBe('Apple iPhone 11 Pro');
+    expect(formatCameraText(APPLE, 'if-not-apple')).toBe('iPhone 11 Pro');
+    expect(formatCameraText(APPLE, 'never')).toBe('iPhone 11 Pro');
+    expect(formatCameraText(FUJIFILM)).toBe('Fujifilm X-T5');
+    expect(formatCameraText(CANON)).toBe('Canon EOS 800D');
+    expect(formatCameraText(NIKON)).toBe('Nikon D7000');
+  });
+  it('labels models correctly', () => {
+    expect(formatCameraText(APPLE, 'never')).toBe('iPhone 11 Pro');
+    expect(formatCameraText(APPLE, 'never', true)).toBe('11 Pro');
+    expect(formatCameraText(APPLE_01, 'never', true)).toBe('iPhone 11');
+    expect(formatCameraText(APPLE_02, 'never', true)).toBe('15 Pro Max');
   });
 });
 
diff --git a/__tests__/path.test.ts b/__tests__/path.test.ts
index 4263daef..858dfede 100644
--- a/__tests__/path.test.ts
+++ b/__tests__/path.test.ts
@@ -18,12 +18,12 @@ import {
   isPathTagPhotoShare,
   isPathTagShare,
 } from '@/site/paths';
-import { getCameraFromKey } from '@/camera';
 
 const PHOTO_ID        = 'UsKSGcbt';
 const TAG             = 'tag-name';
-const CAMERA          = 'fujifilm-x-t1';
-const CAMERA_OBJECT   = getCameraFromKey(CAMERA);
+const CAMERA_MAKE     = 'fujifilm';
+const CAMERA_MODEL    = 'x-t1';
+const CAMERA_OBJECT   = { make: CAMERA_MAKE, model: CAMERA_MODEL };
 const FILM_SIMULATION = 'acros';
 const SHARE           = 'share';
 
@@ -39,7 +39,7 @@ const PATH_TAG_SHARE                    = `${PATH_TAG}/${SHARE}`;
 const PATH_TAG_PHOTO                    = `${PATH_TAG}/${PHOTO_ID}`;
 const PATH_TAG_PHOTO_SHARE              = `${PATH_TAG_PHOTO}/${SHARE}`;
 
-const PATH_CAMERA                       = `/shot-on/${CAMERA}`;
+const PATH_CAMERA                       = `/shot-on/${CAMERA_MAKE}/${CAMERA_MODEL}`;
 const PATH_CAMERA_SHARE                 = `${PATH_CAMERA}/${SHARE}`;
 const PATH_CAMERA_PHOTO                 = `${PATH_CAMERA}/${PHOTO_ID}`;
 const PATH_CAMERA_PHOTO_SHARE           = `${PATH_CAMERA_PHOTO}/${SHARE}`;
diff --git a/src/app/shot-on/[camera]/[photoId]/layout.tsx b/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx
similarity index 83%
rename from src/app/shot-on/[camera]/[photoId]/layout.tsx
rename to src/app/shot-on/[make]/[model]/[photoId]/layout.tsx
index a4a02c4f..55198d8a 100644
--- a/src/app/shot-on/[camera]/[photoId]/layout.tsx
+++ b/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx
@@ -11,16 +11,12 @@ import {
 } from '@/site/paths';
 import PhotoDetailPage from '@/photo/PhotoDetailPage';
 import { getPhotoCached } from '@/photo/cache';
-import { cameraFromPhoto } from '@/camera';
+import { PhotoCameraProps, cameraFromPhoto } from '@/camera';
 import { getPhotosCameraDataCached } from '@/camera/data';
 import { ReactNode } from 'react';
 
-interface PhotoCameraProps {
-  params: { photoId: string, camera: string }
-}
-
 export async function generateMetadata({
-  params: { photoId, camera },
+  params: { photoId, make, model },
 }: PhotoCameraProps): Promise<Metadata> {
   const photo = await getPhotoCached(photoId);
 
@@ -32,7 +28,7 @@ export async function generateMetadata({
   const url = absolutePathForPhoto(
     photo,
     undefined,
-    cameraFromPhoto(photo, camera),
+    cameraFromPhoto(photo, { make, model }),
   );
 
   return {
@@ -54,14 +50,14 @@ export async function generateMetadata({
 }
 
 export default async function PhotoCameraPage({
-  params: { photoId, camera: cameraProp },
+  params: { photoId, make, model },
   children,
 }: PhotoCameraProps & { children: ReactNode }) {
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { redirect(PATH_ROOT); }
 
-  const camera = cameraFromPhoto(photo, cameraProp);
+  const camera = cameraFromPhoto(photo, { make, model });
 
   const [
     photos,
diff --git a/src/app/shot-on/[camera]/[photoId]/page.tsx b/src/app/shot-on/[make]/[model]/[photoId]/page.tsx
similarity index 100%
rename from src/app/shot-on/[camera]/[photoId]/page.tsx
rename to src/app/shot-on/[make]/[model]/[photoId]/page.tsx
diff --git a/src/app/shot-on/[camera]/[photoId]/share/page.tsx b/src/app/shot-on/[make]/[model]/[photoId]/share/page.tsx
similarity index 65%
rename from src/app/shot-on/[camera]/[photoId]/share/page.tsx
rename to src/app/shot-on/[make]/[model]/[photoId]/share/page.tsx
index 15e02113..2c932248 100644
--- a/src/app/shot-on/[camera]/[photoId]/share/page.tsx
+++ b/src/app/shot-on/[make]/[model]/[photoId]/share/page.tsx
@@ -1,19 +1,17 @@
 import { getPhotoCached } from '@/photo/cache';
-import { cameraFromPhoto } from '@/camera';
+import { PhotoCameraProps, cameraFromPhoto } from '@/camera';
 import PhotoShareModal from '@/photo/PhotoShareModal';
 import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId, camera: cameraProp },
-}: {
-  params: { photoId: string, camera: string }
-}) {
+  params: { photoId, make, model },
+}: PhotoCameraProps) {
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { return redirect(PATH_ROOT); }
 
-  const camera = cameraFromPhoto(photo, cameraProp);
+  const camera = cameraFromPhoto(photo, { make, model });
 
   return <PhotoShareModal {...{ photo, camera }} />;
 }
diff --git a/src/app/shot-on/[camera]/image/route.tsx b/src/app/shot-on/[make]/[model]/image/route.tsx
similarity index 86%
rename from src/app/shot-on/[camera]/image/route.tsx
rename to src/app/shot-on/[make]/[model]/image/route.tsx
index 209454e0..cebecea5 100644
--- a/src/app/shot-on/[camera]/image/route.tsx
+++ b/src/app/shot-on/[make]/[model]/image/route.tsx
@@ -1,5 +1,5 @@
 import { getPhotosCached } from '@/photo/cache';
-import { getCameraFromKey } from '@/camera';
+import { CameraProps, getCameraFromParams } from '@/camera';
 import {
   IMAGE_OG_DIMENSION_SMALL,
   MAX_PHOTOS_TO_SHOW_PER_TAG,
@@ -13,9 +13,9 @@ export const runtime = 'edge';
 
 export async function GET(
   _: Request,
-  context: { params: { camera: string } },
+  context: CameraProps,
 ) {
-  const camera = getCameraFromKey(context.params.camera);
+  const camera = getCameraFromParams(context.params);
 
   const [
     photos,
diff --git a/src/app/shot-on/[camera]/page.tsx b/src/app/shot-on/[make]/[model]/page.tsx
similarity index 86%
rename from src/app/shot-on/[camera]/page.tsx
rename to src/app/shot-on/[make]/[model]/page.tsx
index c726f350..404bb979 100644
--- a/src/app/shot-on/[camera]/page.tsx
+++ b/src/app/shot-on/[make]/[model]/page.tsx
@@ -1,4 +1,4 @@
-import { getCameraFromKey } from '@/camera';
+import { CameraProps, getCameraFromParams } from '@/camera';
 import { Metadata } from 'next';
 import { generateMetaForCamera } from '@/camera/meta';
 import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
@@ -9,14 +9,10 @@ import {
 } from '@/camera/data';
 import CameraOverview from '@/camera/CameraOverview';
 
-interface CameraProps {
-  params: { camera: string },
-}
-
 export async function generateMetadata({
   params,
 }: CameraProps): Promise<Metadata> {
-  const camera = getCameraFromKey(params.camera);
+  const camera = getCameraFromParams(params);
 
   const [
     photos,
@@ -55,7 +51,7 @@ export default async function CameraPage({
   params,
   searchParams,
 }: CameraProps & PaginationParams) {
-  const camera = getCameraFromKey(params.camera);
+  const camera = getCameraFromParams(params);
 
   const {
     photos,
diff --git a/src/app/shot-on/[camera]/share/page.tsx b/src/app/shot-on/[make]/[model]/share/page.tsx
similarity index 87%
rename from src/app/shot-on/[camera]/share/page.tsx
rename to src/app/shot-on/[make]/[model]/share/page.tsx
index cc684ea7..037b5b92 100644
--- a/src/app/shot-on/[camera]/share/page.tsx
+++ b/src/app/shot-on/[make]/[model]/share/page.tsx
@@ -1,4 +1,8 @@
-import { cameraFromPhoto, getCameraFromKey } from '@/camera';
+import {
+  CameraProps,
+  cameraFromPhoto,
+  getCameraFromParams,
+} from '@/camera';
 import CameraShareModal from '@/camera/CameraShareModal';
 import { generateMetaForCamera } from '@/camera/meta';
 import { Metadata } from 'next';
@@ -10,14 +14,10 @@ import {
 } from '@/camera/data';
 import CameraOverview from '@/camera/CameraOverview';
 
-interface CameraProps {
-  params: { camera: string }
-}
-
 export async function generateMetadata({
   params,
 }: CameraProps): Promise<Metadata> {
-  const camera = getCameraFromKey(params.camera);
+  const camera = getCameraFromParams(params);
 
   const [
     photos,
@@ -56,7 +56,7 @@ export default async function Share({
   params,
   searchParams,
 }: CameraProps & PaginationParams) {
-  const cameraFromParams = getCameraFromKey(params.camera);
+  const cameraFromParams = getCameraFromParams(params);
 
   const {
     photos,
diff --git a/src/camera/index.ts b/src/camera/index.ts
index 8b609f9b..1a2e910a 100644
--- a/src/camera/index.ts
+++ b/src/camera/index.ts
@@ -8,6 +8,14 @@ export type Camera = {
   model: string
 };
 
+export interface CameraProps {
+  params: Camera
+}
+
+export interface PhotoCameraProps {
+  params: Camera & { photoId: string }
+}
+
 export type CameraWithCount = {
   cameraKey: string
   camera: Camera
@@ -19,11 +27,16 @@ export type Cameras = CameraWithCount[];
 export const createCameraKey = ({ make, model }: Camera) =>
   parameterize(`${make}-${model}`, true);
 
-// Assumes no makes ('Fujifilm,' 'Apple,' 'Canon', etc.) have dashes
-export const getCameraFromKey = (cameraKey: string): Camera => {
-  const [make, model] = cameraKey.toLowerCase().split(/[-| ](.*)/s);
-  return { make, model };
-};
+export const getCameraFromParams = ({
+  make,
+  model,
+}: {
+  make: string,
+  model: string,
+}): Camera => ({
+  make: parameterize(make, true),
+  model: parameterize(model, true),
+});
 
 export const sortCamerasWithCount = (
   a: CameraWithCount,
@@ -36,36 +49,34 @@ export const sortCamerasWithCount = (
 
 export const cameraFromPhoto = (
   photo: Photo | undefined,
-  fallback?: Camera | string,
+  fallback?: Camera,
 ): Camera =>
   photo?.make && photo?.model
     ? { make: photo.make, model: photo.model }
-    : typeof fallback === 'string'
-      ? getCameraFromKey(fallback)
-      : fallback ?? CAMERA_PLACEHOLDER;
+    : fallback ?? CAMERA_PLACEHOLDER;
 
 export const formatCameraText = (
-  { make, model: modelRaw }: Camera,
-  includeMakeApple?: boolean,
+  { make: makeRaw, model: modelRaw }: Camera,
+  includeMake: 'always' | 'never' | 'if-not-apple' = 'if-not-apple',
+  removeIPhoneOnLongModels?: boolean
 ) => {
+  // Remove 'Corporation' from makes like 'Nikon Corporation'
+  const make = makeRaw.replace(/ Corporation/i, '');
   // Remove potential duplicate make from model
-  const model = modelRaw.replace(`${make} `, '');
-  return make === 'Apple' && !includeMakeApple
-    ? model
+  let model = modelRaw.replace(`${make} `, '');
+  if (
+    removeIPhoneOnLongModels &&
+    model.includes('iPhone') &&
+    model.length > 9
+  ) {
+    model = model.replace(/iPhone\s*/i, '');
+  }
+  return (
+    includeMake === 'never' || 
+    includeMake === 'if-not-apple' && make === 'Apple'
+  ) ? model
     : `${make} ${model}`;
 };
 
-export const formatCameraModelText = (
-  { make, model: modelRaw }: Camera,
-) => {
-  // Remove potential duplicate make from model
-  const model = modelRaw.replace(`${make} `, '');
-  const textLength = model?.length ?? 0;
-  if (textLength > 0 && textLength <= 8) {
-    return model;
-  } else if (model?.includes('iPhone')) {
-    return model.split('iPhone')[1];
-  } else {
-    return undefined;
-  }
-};
+export const formatCameraModelTextShort = (camera: Camera) =>
+  formatCameraText(camera, 'never', true);
diff --git a/src/image-response/PhotoImageResponse.tsx b/src/image-response/PhotoImageResponse.tsx
index be8e7796..f633e513 100644
--- a/src/image-response/PhotoImageResponse.tsx
+++ b/src/image-response/PhotoImageResponse.tsx
@@ -5,7 +5,7 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
 import { OG_TEXT_BOTTOM_ALIGNMENT } from '@/site/config';
 import { NextImageSize } from '@/services/next-image';
-import { cameraFromPhoto, formatCameraModelText } from '@/camera';
+import { cameraFromPhoto, formatCameraModelTextShort } from '@/camera';
 
 export default function PhotoImageResponse({
   photo,
@@ -19,7 +19,7 @@ export default function PhotoImageResponse({
   fontFamily: string
 }) {
   const model = photo.model
-    ? formatCameraModelText(cameraFromPhoto(photo))
+    ? formatCameraModelTextShort(cameraFromPhoto(photo))
     : undefined;
 
   return (
diff --git a/src/services/vercel-postgres.ts b/src/services/vercel-postgres.ts
index a0b67f6b..e6c82e5f 100644
--- a/src/services/vercel-postgres.ts
+++ b/src/services/vercel-postgres.ts
@@ -191,7 +191,7 @@ const sqlGetPhotosTagCount = async (tag: string) => sql`
 const sqlGetPhotosCameraCount = async (camera: Camera) => sql`
   SELECT COUNT(*) FROM photos
   WHERE
-  LOWER(make)=${parameterize(camera.make, true)} AND
+  LOWER(REPLACE(make, ' ', '-'))=${parameterize(camera.make, true)} AND
   LOWER(REPLACE(model, ' ', '-'))=${parameterize(camera.model, true)} AND
   hidden IS NOT TRUE
 `.then(({ rows }) => parseInt(rows[0].count, 10));
@@ -225,7 +225,7 @@ const sqlGetPhotosCameraDateRange = async (camera: Camera) => sql`
   SELECT MIN(taken_at_naive) as start, MAX(taken_at_naive) as end
   FROM photos
   WHERE
-  LOWER(make)=${parameterize(camera.make, true)} AND
+  LOWER(REPLACE(make, ' ', '-'))=${parameterize(camera.make, true)} AND
   LOWER(REPLACE(model, ' ', '-'))=${parameterize(camera.model, true)} AND
   hidden IS NOT TRUE
 `.then(({ rows }) => rows[0]?.start && rows[0]?.end
@@ -380,7 +380,7 @@ export const getPhotos = async (options: GetPhotosOptions = {}) => {
     values.push(tag);
   }
   if (camera) {
-    wheres.push(`LOWER(make)=$${valueIndex++}`);
+    wheres.push(`LOWER(REPLACE(make, ' ', '-'))=$${valueIndex++}`);
     wheres.push(`LOWER(REPLACE(model, ' ', '-'))=$${valueIndex++}`);
     values.push(parameterize(camera.make, true));
     values.push(parameterize(camera.model, true));
diff --git a/src/site/paths.ts b/src/site/paths.ts
index ec049364..b8ae486a 100644
--- a/src/site/paths.ts
+++ b/src/site/paths.ts
@@ -1,11 +1,8 @@
 import { Photo } from '@/photo';
 import { BASE_URL } from './config';
-import {
-  Camera,
-  createCameraKey,
-  getCameraFromKey,
-} from '@/camera';
+import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
+import { parameterize } from '@/utility/string';
 
 // Core paths
 export const PATH_ROOT      = '/';
@@ -24,7 +21,7 @@ export const PREFIX_FILM_SIMULATION = '/film';
 // Dynamic paths
 const PATH_PHOTO_DYNAMIC            = `${PREFIX_PHOTO}/[photoId]`;
 const PATH_TAG_DYNAMIC              = `${PREFIX_TAG}/[tag]`;
-const PATH_CAMERA_DYNAMIC           = `${PREFIX_CAMERA}/[camera]`;
+const PATH_CAMERA_DYNAMIC           = `${PREFIX_CAMERA}/[make]/[model]`;
 const PATH_FILM_SIMULATION_DYNAMIC  = `${PREFIX_FILM_SIMULATION}/[simulation]`;
 
 // Admin paths
@@ -126,8 +123,11 @@ export const pathForTag = (tag: string, next?: number) =>
 export const pathForTagShare = (tag: string) =>
   `${pathForTag(tag)}/${SHARE}`;
 
-export const pathForCamera = (camera: Camera, next?: number) =>
-  pathWithNext(`${PREFIX_CAMERA}/${createCameraKey(camera)}`, next);
+export const pathForCamera = ({ make, model }: Camera, next?: number) =>
+  pathWithNext(
+    `${PREFIX_CAMERA}/${parameterize(make, true)}/${parameterize(model, true)}`,
+    next,
+  );
 
 export const pathForCameraShare = (camera: Camera) =>
   `${pathForCamera(camera)}/${SHARE}`;
@@ -196,22 +196,22 @@ export const isPathTagPhoto = (pathname = '') =>
 export const isPathTagPhotoShare = (pathname = '') =>
   new RegExp(`^${PREFIX_TAG}/[^/]+/[^/]+/${SHARE}/?$`).test(pathname);
 
-// shot-on/[camera]
+// shot-on/[make]/[model]
 export const isPathCamera = (pathname = '') =>
-  new RegExp(`^${PREFIX_CAMERA}/[^/]+/?$`).test(pathname);
-
-// shot-on/[camera]/share
-export const isPathCameraShare = (pathname = '') =>
-  new RegExp(`^${PREFIX_CAMERA}/[^/]+/${SHARE}/?$`).test(pathname);
-
-// shot-on/[camera]/[photoId]
-export const isPathCameraPhoto = (pathname = '') =>
   new RegExp(`^${PREFIX_CAMERA}/[^/]+/[^/]+/?$`).test(pathname);
 
-// shot-on/[camera]/[photoId]/share
-export const isPathCameraPhotoShare = (pathname = '') =>
+// shot-on/[make]/[model]/share
+export const isPathCameraShare = (pathname = '') =>
   new RegExp(`^${PREFIX_CAMERA}/[^/]+/[^/]+/${SHARE}/?$`).test(pathname);
 
+// shot-on/[make]/[model]/[photoId]
+export const isPathCameraPhoto = (pathname = '') =>
+  new RegExp(`^${PREFIX_CAMERA}/[^/]+/[^/]+/[^/]+/?$`).test(pathname);
+
+// shot-on/[make]/[model]/[photoId]/share
+export const isPathCameraPhotoShare = (pathname = '') =>
+  new RegExp(`^${PREFIX_CAMERA}/[^/]+/[^/]+/[^/]+/${SHARE}/?$`).test(pathname);
+
 // film/[simulation]
 export const isPathFilmSimulation = (pathname = '') =>
   new RegExp(`^${PREFIX_FILM_SIMULATION}/[^/]+/?$`).test(pathname);
@@ -258,18 +258,20 @@ export const getPathComponents = (pathname = ''): {
   const photoIdFromTag = pathname.match(
     new RegExp(`^${PREFIX_TAG}/[^/]+/((?!${SHARE})[^/]+)`))?.[1];
   const photoIdFromCamera = pathname.match(
-    new RegExp(`^${PREFIX_CAMERA}/[^/]+/((?!${SHARE})[^/]+)`))?.[1];
+    new RegExp(`^${PREFIX_CAMERA}/[^/]+/[^/]+/((?!${SHARE})[^/]+)`))?.[1];
   const photoIdFromFilmSimulation = pathname.match(
     new RegExp(`^${PREFIX_FILM_SIMULATION}/[^/]+/((?!${SHARE})[^/]+)`))?.[1];
   const tag = pathname.match(
     new RegExp(`^${PREFIX_TAG}/([^/]+)`))?.[1];
-  const cameraString = pathname.match(
+  const cameraMake = pathname.match(
     new RegExp(`^${PREFIX_CAMERA}/([^/]+)`))?.[1];
+  const cameraModel = pathname.match(
+    new RegExp(`^${PREFIX_CAMERA}/[^/]+/([^/]+)`))?.[1];
   const simulation = pathname.match(
     new RegExp(`^${PREFIX_FILM_SIMULATION}/([^/]+)`))?.[1] as FilmSimulation;
 
-  const camera = cameraString
-    ? getCameraFromKey(cameraString)
+  const camera = cameraMake && cameraModel
+    ? { make: cameraMake, model: cameraModel }
     : undefined;
 
   return {