diff --git a/README.md b/README.md index 796af755..4bd9be71 100644 --- a/README.md +++ b/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 diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index 018ca15b..ea1c3a14 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/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 && +

+ {SITE_ABOUT} +

} {tags.length > 0 && } diff --git a/src/site/Nav.tsx b/src/site/Nav.tsx index b6282b59..412b640d 100644 --- a/src/site/Nav.tsx +++ b/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({ ? [
- {renderLink(siteDomainOrTitle, PATH_ROOT)} +
+ {renderLink(siteDomainOrTitle, PATH_ROOT)} +
+ {HAS_DEFINED_SITE_DESCRIPTION && +
+ {SITE_DESCRIPTION} +
}
] : []} @@ -80,8 +98,8 @@ export default function Nav({ contentSide={isUserSignedIn && !isPathAdmin(pathname) ?
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx index bfa22784..6dc27baf 100644 --- a/src/site/SiteChecklistClient.tsx +++ b/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'])} - Store in environment variable (used in page titles): + Store in environment variable (seen in browser tab): {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])} - Store in environment variable (mainly used for OG meta): + Store in environment variable (seen in nav, under title): {renderEnvVars(['NEXT_PUBLIC_SITE_DESCRIPTION'])} - + + Store in environment variable (seen in grid sidebar): + {renderEnvVars(['NEXT_PUBLIC_SITE_ABOUT'])} + {!simplifiedView && <>