Introduce site meta:description + about

README.md

@@ -29,9 +29,10 @@ Installation
 1. Click [Deploy](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Ftemplate-image-tight&project-name=Photo+Blog&repository-name=exif-photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fexif-photo-blog&from=templates&skippable-integrations=1&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
 2. Add required storage ([Vercel Postgres](https://vercel.com/docs/storage/vercel-postgres/quickstart#create-a-postgres-database) + [Vercel Blob](https://vercel.com/docs/storage/vercel-blob/quickstart#create-a-blob-store)) as part of template installation
 3. Configure environment variables from project settings:
-   - `NEXT_PUBLIC_SITE_TITLE` (e.g., My Photos)
    - `NEXT_PUBLIC_SITE_DOMAIN` (e.g., photos.domain.com)
-   - `NEXT_PUBLIC_SITE_DESCRIPTION` (optional—mainly used for OG meta)
+   - `NEXT_PUBLIC_SITE_TITLE` (seen in browser tab)
+   - `NEXT_PUBLIC_SITE_DESCRIPTION` (seen in nav, under title)
+   - `NEXT_PUBLIC_SITE_ABOUT` (e.g., seen in grid sidebar)
 
 ### 2. Setup Auth
 

src/photo/PhotoGridSidebar.tsx

@@ -15,6 +15,7 @@ import FavsTag from '../tag/FavsTag';
 import { useAppState } from '@/state/AppState';
 import { useMemo } from 'react';
 import HiddenTag from '@/tag/HiddenTag';
+import { SITE_ABOUT } from '@/site/config';
 
 export default function PhotoGridSidebar({
   tags,
@@ -39,6 +40,10 @@ export default function PhotoGridSidebar({
 
   return (
     <>
+      {SITE_ABOUT &&
+        <p className="max-w-72">
+          {SITE_ABOUT}
+        </p>}
       {tags.length > 0 && <HeaderList
         title='Tags'
         icon={<FaTag size={12} className="text-icon" />}

src/site/Nav.tsx

@@ -15,9 +15,17 @@ import {
 } from '@/site/paths';
 import AnimateItems from '../components/AnimateItems';
 import { useAppState } from '@/state/AppState';
-import { GRID_HOMEPAGE_ENABLED } from './config';
+import {
+  GRID_HOMEPAGE_ENABLED,
+  HAS_DEFINED_SITE_DESCRIPTION,
+  SITE_DESCRIPTION,
+} from './config';
 import AdminAppMenu from '@/admin/AdminAppMenu';
 
+const NAV_HEIGHT_CLASS = HAS_DEFINED_SITE_DESCRIPTION
+  ? 'min-h-[4rem] sm:min-h-[5rem]'
+  : 'min-h-[4rem]';
+
 export default function Nav({
   siteDomainOrTitle,
 }: {
@@ -60,18 +68,28 @@ export default function Nav({
             ? [<div
               key="nav"
               className={clsx(
-                'flex items-center',
+                'flex items-center w-full',
-                'w-full min-h-[4rem]',
+                NAV_HEIGHT_CLASS,
               )}>
               <ViewSwitcher
                 currentSelection={switcherSelectionForPath()}
                 showAdmin={isUserSignedIn}
               />
               <div className={clsx(
-                'flex-grow text-right text-ellipsis overflow-hidden',
+                'flex-grow text-right min-w-0',
                 'hidden xs:block',
+                'translate-y-[-1px]',
               )}>
-                {renderLink(siteDomainOrTitle, PATH_ROOT)}
+                <div className={clsx(
+                  'truncate overflow-hidden',
+                  HAS_DEFINED_SITE_DESCRIPTION && 'sm:font-bold',
+                )}>
+                  {renderLink(siteDomainOrTitle, PATH_ROOT)}
+                </div>
+                {HAS_DEFINED_SITE_DESCRIPTION &&
+                  <div className="hidden sm:block truncate overflow-hidden">
+                    {SITE_DESCRIPTION}
+                  </div>}
               </div>
             </div>]
             : []}
@@ -80,8 +98,8 @@ export default function Nav({
       contentSide={isUserSignedIn && !isPathAdmin(pathname)
         ? <div
           className={clsx(
-            'flex items-center translate-x-[-6px]',
+            'flex items-center translate-x-[-6px] w-full',
-            'w-full min-h-[4rem]',
+            NAV_HEIGHT_CLASS,
           )}
         >
           <AdminAppMenu />

src/site/SiteChecklistClient.tsx

@@ -44,6 +44,7 @@ export default function SiteChecklistClient({
   hasDomain,
   hasTitle,
   hasDescription,
+  hasAbout,
   showRepoLink,
   showSocial,
   showFilmSimulations,
@@ -335,7 +336,7 @@ export default function SiteChecklistClient({
                 'Not explicitly setting a domain may cause ' + 
                 'certain features to behave unexpectedly',
               })}
-            Store in environment variable (displayed in top-right nav):
+            Store in environment variable (seen in top-right nav):
             {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
           </ChecklistRow>
           <ChecklistRow
@@ -343,7 +344,7 @@ export default function SiteChecklistClient({
             status={hasTitle}
             optional
           >
-            Store in environment variable (used in page titles):
+            Store in environment variable (seen in browser tab):
             {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])}
           </ChecklistRow>
           <ChecklistRow
@@ -351,10 +352,17 @@ export default function SiteChecklistClient({
             status={hasDescription}
             optional
           >
-            Store in environment variable (mainly used for OG meta):
+            Store in environment variable (seen in nav, under title):
             {renderEnvVars(['NEXT_PUBLIC_SITE_DESCRIPTION'])}
           </ChecklistRow>
-          
+          <ChecklistRow
+            title="Add about"
+            status={hasAbout}
+            optional
+          >
+            Store in environment variable (seen in grid sidebar):
+            {renderEnvVars(['NEXT_PUBLIC_SITE_ABOUT'])}
+          </ChecklistRow>
         </Checklist>
         {!simplifiedView && <>
           <Checklist

src/site/config.ts

@@ -61,6 +61,11 @@ export const SITE_DESCRIPTION =
   process.env.NEXT_PUBLIC_SITE_DESCRIPTION ||
   SITE_DOMAIN;
 
+export const SITE_ABOUT = process.env.NEXT_PUBLIC_SITE_ABOUT;
+
+export const HAS_DEFINED_SITE_DESCRIPTION =
+  Boolean(process.env.NEXT_PUBLIC_SITE_DESCRIPTION);
+
 // STORAGE: DATABASE
 export const HAS_DATABASE =
   Boolean(process.env.POSTGRES_URL);
@@ -179,7 +184,8 @@ export const CONFIG_CHECKLIST_STATUS = {
   ),
   hasDomain: Boolean(process.env.NEXT_PUBLIC_SITE_DOMAIN),
   hasTitle: Boolean(process.env.NEXT_PUBLIC_SITE_TITLE),
-  hasDescription: Boolean(process.env.NEXT_PUBLIC_SITE_DESCRIPTION),
+  hasDescription: HAS_DEFINED_SITE_DESCRIPTION,
+  hasAbout: Boolean(process.env.NEXT_PUBLIC_SITE_ABOUT),
   showRepoLink: SHOW_REPO_LINK,
   showSocial: SHOW_SOCIAL,
   showFilmSimulations: SHOW_FILM_SIMULATIONS,