From 335e2dae92fba8ee9fcac7b4a5d2a77a7816a0b6 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 21 Jul 2024 14:03:32 -0500 Subject: [PATCH 1/4] Introduce site meta:description + about --- README.md | 5 +++-- src/photo/PhotoGridSidebar.tsx | 5 +++++ src/site/Nav.tsx | 32 +++++++++++++++++++++++++------- src/site/SiteChecklistClient.tsx | 16 ++++++++++++---- src/site/config.ts | 8 +++++++- 5 files changed, 52 insertions(+), 14 deletions(-) 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 && <> Date: Sun, 21 Jul 2024 14:12:25 -0500 Subject: [PATCH 2/4] Animate about text entrance --- src/photo/PhotoGridSidebar.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index ea1c3a14..15f6a990 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/src/photo/PhotoGridSidebar.tsx @@ -40,10 +40,14 @@ export default function PhotoGridSidebar({ return ( <> - {SITE_ABOUT && -

+ {SITE_ABOUT && {SITE_ABOUT} -

} +

]} + />} {tags.length > 0 && } From bf8b53b2e2c6d77c2c8fba58b55c94b8a083372c Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 21 Jul 2024 14:18:41 -0500 Subject: [PATCH 3/4] Simplify README site meta configuration --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4bd9be71..81c4fe0a 100644 --- a/README.md +++ b/README.md @@ -28,11 +28,8 @@ 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_DOMAIN` (e.g., photos.domain.com) - - `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) +3. Configure environment variable for production domain in project settings + - `NEXT_PUBLIC_SITE_DOMAIN` (e.g., photos.domain.com—used in permalinks and seen in top-right nav) ### 2. Setup Auth @@ -99,8 +96,14 @@ _⚠️ READ BEFORE PROCEEDING_ Application behavior can be changed by configuring the following environment variables: -- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage) +#### Site 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) + +#### Site behavior - `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage +- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage) - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1` enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ _Experimental_ - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ _Experimental_ - `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios) From 99d969b926ec6ddbd08ea7e07b580f56353f9c30 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 21 Jul 2024 18:53:05 -0500 Subject: [PATCH 4/4] Refine new meta layout --- src/photo/PhotoGridSidebar.tsx | 2 +- src/site/Nav.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index 15f6a990..ed795e15 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/src/photo/PhotoGridSidebar.tsx @@ -43,7 +43,7 @@ export default function PhotoGridSidebar({ {SITE_ABOUT && {SITE_ABOUT}

]} diff --git a/src/site/Nav.tsx b/src/site/Nav.tsx index 412b640d..b6f8448b 100644 --- a/src/site/Nav.tsx +++ b/src/site/Nav.tsx @@ -87,7 +87,10 @@ export default function Nav({ {renderLink(siteDomainOrTitle, PATH_ROOT)}
{HAS_DEFINED_SITE_DESCRIPTION && -
+
{SITE_DESCRIPTION}
}