Refine site meta observability

README.md

@@ -111,8 +111,8 @@ Application behavior can be changed by configuring the following environment var
 #### Content
 - `NEXT_PUBLIC_META_TITLE` (seen in search results and browser tab)
 - `NEXT_PUBLIC_META_DESCRIPTION` (seen in search results)
-- `NEXT_PUBLIC_NAV_TITLE` (defaults to domain when not configured)
+- `NEXT_PUBLIC_NAV_TITLE` (seen in top-right navigation, defaults to domain when not configured)
-- `NEXT_PUBLIC_NAV_CAPTION` (seen in navigation, beneath title)
+- `NEXT_PUBLIC_NAV_CAPTION` (seen in top-right navigation, beneath title)
 - `NEXT_PUBLIC_PAGE_ABOUT` (seen in grid sidebar—accepts rich formatting tags: `<b>`, `<strong>`, `<i>`, `<em>`, `<u>`, `<br>`)
 - `NEXT_PUBLIC_DOMAIN_SHARE` (seen in share modals where a shorter url may be desirable)
 

app/layout.tsx

@@ -6,9 +6,10 @@ import {
   DEFAULT_THEME,
   PRESERVE_ORIGINAL_UPLOADS,
   META_DESCRIPTION,
-  NAV_TITLE_OR_DOMAIN,
+  NAV_TITLE,
   META_TITLE,
   HTML_LANG,
+  NAV_CAPTION,
 } from '@/app/config';
 import AppStateProvider from '@/state/AppStateProvider';
 import ToasterWithThemes from '@/toast/ToasterWithThemes';
@@ -90,7 +91,10 @@ export default function RootLayout({
                   'mx-3 mb-3',
                   'lg:mx-6 lg:mb-6',
                 )}>
-                  <Nav navTitleOrDomain={NAV_TITLE_OR_DOMAIN} />
+                  <Nav
+                    navTitle={NAV_TITLE}
+                    navCaption={NAV_CAPTION}
+                  />
                   <main>
                     <ShareModals />
                     <RecipeModal />

src/admin/AdminAppConfigurationClient.tsx

@@ -362,8 +362,8 @@ export default function AdminAppConfigurationClient({
             status={hasNavTitle}
             optional
           >
-            {hasNavTitle && renderContent(navTitle)}
+            {renderContent(navTitle)}
-            Store in environment variable (replaces domain in nav):
+            Store in environment variable (replaces domain in top-right nav):
             {renderEnvVars(['NEXT_PUBLIC_NAV_TITLE'])}
           </ChecklistRow>
           <ChecklistRow
@@ -372,7 +372,7 @@ export default function AdminAppConfigurationClient({
             optional
           >
             {hasNavCaption && renderContent(navCaption)}
-            Store in environment variable (seen in nav, under title):
+            Store in environment variable (seen in top-right nav, under title):
             {renderEnvVars(['NEXT_PUBLIC_NAV_CAPTION'])}
           </ChecklistRow>
           <ChecklistRow

src/app/Nav.tsx

@@ -26,9 +26,11 @@ const NAV_HEIGHT_CLASS = NAV_CAPTION
   : 'min-h-[4rem]';
 
 export default function Nav({
-  navTitleOrDomain,
+  navTitle,
+  navCaption,
 }: {
-  navTitleOrDomain: string;
+  navTitle: string
+  navCaption?: string
 }) {
   const ref = useRef<HTMLElement>(null);
 
@@ -89,14 +91,14 @@ export default function Nav({
                 'translate-y-[-1px]',
               )}>
                 <div className="truncate overflow-hidden select-none">
-                  {renderLink(navTitleOrDomain, PATH_ROOT)}
+                  {renderLink(navTitle, PATH_ROOT)}
                 </div>
-                {NAV_CAPTION &&
+                {navCaption &&
                   <div className={clsx(
                     'hidden sm:block truncate overflow-hidden',
                     'leading-tight text-dim',
                   )}>
-                    {NAV_CAPTION}
+                    {navCaption}
                   </div>}
               </div>
             </nav>]

src/app/config.ts

@@ -107,7 +107,7 @@ export const APP_LOCALE = (process.env.NEXT_PUBLIC_LOCALE || 'en-us')
   .replace('_', '-');
 export const HTML_LANG = (APP_LOCALE.split('-')[1] || 'en');
 
-export const NAV_TITLE =
+export const CUSTOM_NAV_TITLE =
   process.env.NEXT_PUBLIC_NAV_TITLE;
 
 export const NAV_CAPTION =
@@ -119,14 +119,14 @@ export const META_TITLE =
   process.env.NEXT_PUBLIC_META_TITLE ||
   // Legacy environment variable
   process.env.NEXT_PUBLIC_SITE_TITLE ||
-  NAV_TITLE ||
+  CUSTOM_NAV_TITLE ||
   TEMPLATE_TITLE;
 
 export const IS_META_TITLE_CONFIGURED =
   Boolean(process.env.NEXT_PUBLIC_META_TITLE) ||
   // Legacy environment variable
   Boolean(process.env.NEXT_PUBLIC_SITE_TITLE) ||
-  Boolean(NAV_TITLE);
+  Boolean(CUSTOM_NAV_TITLE);
 
 export const IS_META_DESCRIPTION_CONFIGURED =
   Boolean(process.env.NEXT_PUBLIC_META_DESCRIPTION) ||
@@ -135,10 +135,10 @@ export const IS_META_DESCRIPTION_CONFIGURED =
 export const META_DESCRIPTION =
   process.env.NEXT_PUBLIC_META_DESCRIPTION ||
   NAV_CAPTION ||
-  SITE_DOMAIN;
+  SITE_DOMAIN_SHORT;
 
-export const NAV_TITLE_OR_DOMAIN =
+export const NAV_TITLE =
-  NAV_TITLE ||
+  CUSTOM_NAV_TITLE ||
   SITE_DOMAIN_SHORT ||
   META_TITLE;
 
@@ -361,7 +361,7 @@ export const APP_CONFIGURATION = {
   metaDescription: META_DESCRIPTION,
   isMetaDescriptionConfigured: IS_META_DESCRIPTION_CONFIGURED,
   navTitle: NAV_TITLE,
-  hasNavTitle: Boolean(NAV_TITLE),
+  hasNavTitle: Boolean(CUSTOM_NAV_TITLE),
   navCaption: NAV_CAPTION,
   hasNavCaption: Boolean(NAV_CAPTION),
   pageAbout: PAGE_ABOUT,

src/image-response/HomeImageResponse.tsx

@@ -1,4 +1,4 @@
-import { NAV_TITLE_OR_DOMAIN } from '@/app/config';
+import { NAV_TITLE } from '@/app/config';
 import { Photo } from '../photo';
 import ImageCaption from './components/ImageCaption';
 import ImageContainer from './components/ImageContainer';
@@ -29,7 +29,7 @@ export default function HomeImageResponse({
         width,
         height,
         fontFamily,
-        title: NAV_TITLE_OR_DOMAIN,
+        title: NAV_TITLE,
       }} />
     </ImageContainer>
   );