Make domain configuration optional

README.md

@@ -10,7 +10,7 @@ _Database schema changes are expected._
 
 ![App Preview](app-preview.png)
 
-[![Deploy with Vercel](https://vercel.com/button)](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=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
+[![Deploy with Vercel](https://vercel.com/button)](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=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
 
 ### 1. Deploy to Vercel
 

src/app/(isr)/template-url/route.tsx

@@ -22,7 +22,6 @@ export function GET() {
   url.searchParams.set('env-link', 'BLANK');
   url.searchParams.set('env', [
     'NEXT_PUBLIC_SITE_TITLE',
-    'NEXT_PUBLIC_SITE_DOMAIN',
   ].join(','));
   url.searchParams.set('teamCreateStatus', 'hidden');
   url.searchParams.set('stores', JSON.stringify([

src/components/Nav.tsx

@@ -4,7 +4,7 @@ import { cc } from '@/utility/css';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import SiteGrid from './SiteGrid';
-import { SITE_DOMAIN } from '@/site/config';
+import { SITE_DOMAIN_OR_TITLE } from '@/site/config';
 import ViewSwitcher, { SwitcherSelection } from '@/photo/ViewSwitcher';
 
 export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
@@ -52,7 +52,7 @@ export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
               </>}
             </div>
             <div className="hidden xs:block">
-              {renderLink(SITE_DOMAIN, '/')}
+              {renderLink(SITE_DOMAIN_OR_TITLE, '/')}
             </div>
           </>}
         </div>

src/site/SiteChecklistClient.tsx

@@ -95,9 +95,10 @@ export default function SiteChecklistClient({
           {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])}
         </SiteChecklistRow>
         <SiteChecklistRow
-          title="Add domain"
+          title="Add custom domain"
           status={hasDomain}
           isPending={isPendingPage}
+          optional
         >
           Store in environment variable:
           {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}

src/site/SiteChecklistRow.tsx

@@ -6,11 +6,13 @@ export default function SiteChecklistRow({
   title,
   status,
   isPending,
+  optional,
   children,
 }: {
   title: string
   status: boolean
   isPending: boolean
+  optional?: boolean
   children: ReactNode
 }) {
   return (
@@ -25,12 +27,18 @@ export default function SiteChecklistRow({
             <Spinner size={14} />
           </div>
           : <div className="text-[0.8rem]">
-            {status ? '✅' : '❌'}
+            {status
+              ? '✅'
+              : optional ? '—' : '❌'}
           </div>}
       </div>
       <div className="flex flex-col items-start">
-        <div className="font-bold dark:text-gray-300">{title}</div>
-        <div>{children}</div>
+        <div className="font-bold dark:text-gray-300">
+          {title}{optional && ' (optional)'}
+        </div>
+        <div>
+          {children}
+        </div>
       </div>
     </div>
   );

src/site/config.ts

@@ -1,9 +1,10 @@
 export const SITE_TITLE = process.env.NEXT_PUBLIC_SITE_TITLE
   || 'Photo Blog';
 
-export const SITE_DOMAIN = process.env.NEXT_PUBLIC_SITE_DOMAIN
-  || process.env.NEXT_PUBLIC_VERCEL_URL
-  || SITE_TITLE;
+const SITE_DOMAIN = process.env.NEXT_PUBLIC_SITE_DOMAIN
+  || process.env.NEXT_PUBLIC_VERCEL_URL;
+
+export const SITE_DOMAIN_OR_TITLE = SITE_DOMAIN || SITE_TITLE;
 
 export const SITE_DESCRIPTION = process.env.NEXT_PUBLIC_SITE_DESCRIPTION
   || SITE_DOMAIN;

src/site/routes.ts

@@ -1,5 +1,5 @@
 import { Photo } from '@/photo';
-import { SITE_DOMAIN } from './config';
+import { BASE_URL } from './config';
 
 export const ROUTE_ADMIN_UPLOAD = '/admin/uploads';
 
@@ -11,7 +11,7 @@ export const routeForPhoto = (photo: Photo, share?: boolean) =>
     : `/photos/${photo.idShort}`;
 
 export const absoluteRouteForPhoto = (photo: Photo) =>
-  `https://${SITE_DOMAIN}${routeForPhoto(photo)}`;
+  `${BASE_URL}${routeForPhoto(photo)}`;
 
 export const isRoutePhoto = (pathname = '') =>
   /^\/photos\/[^/]+\/?$/.test(pathname);