From 1b0604dd10f25311569ab7afe5bb4cb72b2cef67 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 10 Sep 2023 23:20:15 -0500
Subject: [PATCH] Add footer repo link

---
 README.md                                     |  4 ++++
 src/app/(auth-state)/admin/photos/page.tsx    |  4 +++-
 src/app/(auth-state)/layout.tsx               |  4 ++--
 src/app/{(isr) => (static)}/grid/page.tsx     |  0
 src/app/{(isr) => (static)}/layout.tsx        |  4 ++--
 src/app/{(isr) => (static)}/og/page.tsx       |  0
 .../p/[photoId]/image/route.tsx               |  0
 .../p/[photoId]/layout.tsx                    |  0
 .../{(isr) => (static)}/p/[photoId]/page.tsx  |  0
 .../p/[photoId]/share/page.tsx                |  0
 src/app/{(isr) => (static)}/page.tsx          |  0
 .../template-image-tight/route.tsx            |  0
 .../template-image/route.tsx                  |  0
 .../template-url/route.tsx                    |  0
 .../{AuthNav.tsx => FooterAuth.tsx}           |  4 ++--
 .../{Footer.tsx => FooterStatic.tsx}          |  8 +++++--
 src/components/RepoLink.tsx                   | 24 +++++++++++++++++++
 src/components/SubmitButtonWithStatus.tsx     |  4 +++-
 src/photo/PhotoForm.tsx                       |  1 +
 src/site/config.ts                            |  2 ++
 src/site/globals.css                          |  5 ++++
 21 files changed, 54 insertions(+), 10 deletions(-)
 rename src/app/{(isr) => (static)}/grid/page.tsx (100%)
 rename src/app/{(isr) => (static)}/layout.tsx (64%)
 rename src/app/{(isr) => (static)}/og/page.tsx (100%)
 rename src/app/{(isr) => (static)}/p/[photoId]/image/route.tsx (100%)
 rename src/app/{(isr) => (static)}/p/[photoId]/layout.tsx (100%)
 rename src/app/{(isr) => (static)}/p/[photoId]/page.tsx (100%)
 rename src/app/{(isr) => (static)}/p/[photoId]/share/page.tsx (100%)
 rename src/app/{(isr) => (static)}/page.tsx (100%)
 rename src/app/{(isr) => (static)}/template-image-tight/route.tsx (100%)
 rename src/app/{(isr) => (static)}/template-image/route.tsx (100%)
 rename src/app/{(isr) => (static)}/template-url/route.tsx (100%)
 rename src/components/{AuthNav.tsx => FooterAuth.tsx} (92%)
 rename src/components/{Footer.tsx => FooterStatic.tsx} (79%)
 create mode 100644 src/components/RepoLink.tsx

diff --git a/README.md b/README.md
index 38de96d4..731f8421 100644
--- a/README.md
+++ b/README.md
@@ -48,3 +48,7 @@ _Database schema changes are expected._
 1. Open project on Vercel
 2. Click "Analytics" tab
 3. Follow "Enable Web Analytics" instructions (`@vercel/analytics` is already part of your project)
+
+### 6. Remove repo link (optional)
+
+1. Set `NEXT_PUBLIC_HIDE_REPO_LINK = 1`
\ No newline at end of file
diff --git a/src/app/(auth-state)/admin/photos/page.tsx b/src/app/(auth-state)/admin/photos/page.tsx
index ebec2659..6ed78ba3 100644
--- a/src/app/(auth-state)/admin/photos/page.tsx
+++ b/src/app/(auth-state)/admin/photos/page.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/services/blob';
 import { getPhotos } from '@/services/postgres';
 import { routeForPhoto } from '@/site/routes';
+import { titleForPhoto } from '@/photo';
 
 export const runtime = 'edge';
 
@@ -88,7 +89,8 @@ export default async function AdminPage() {
                   <FormWithConfirm
                     action={deletePhotoAction}
                     confirmText={
-                      `Are you sure you want to delete "${photo.title}?"`}
+                      // eslint-disable-next-line max-len
+                      `Are you sure you want to delete "${titleForPhoto(photo)}?"`}
                   >
                     <input type="hidden" name="id" value={photo.id} />
                     <input type="hidden" name="url" value={photo.url} />
diff --git a/src/app/(auth-state)/layout.tsx b/src/app/(auth-state)/layout.tsx
index aad99a67..1af6c543 100644
--- a/src/app/(auth-state)/layout.tsx
+++ b/src/app/(auth-state)/layout.tsx
@@ -1,4 +1,4 @@
-import AuthNav from '@/components/AuthNav';
+import FooterAuth from '@/components/FooterAuth';
 import { SessionProvider } from 'next-auth/react';
 
 export default function RootLayout({
@@ -10,7 +10,7 @@ export default function RootLayout({
     <SessionProvider>
       {children}
       <div className="my-8">
-        <AuthNav />
+        <FooterAuth />
       </div>
     </SessionProvider>
   );
diff --git a/src/app/(isr)/grid/page.tsx b/src/app/(static)/grid/page.tsx
similarity index 100%
rename from src/app/(isr)/grid/page.tsx
rename to src/app/(static)/grid/page.tsx
diff --git a/src/app/(isr)/layout.tsx b/src/app/(static)/layout.tsx
similarity index 64%
rename from src/app/(isr)/layout.tsx
rename to src/app/(static)/layout.tsx
index 8871d883..e8ebd56b 100644
--- a/src/app/(isr)/layout.tsx
+++ b/src/app/(static)/layout.tsx
@@ -1,4 +1,4 @@
-import Footer from '@/components/Footer';
+import FooterStatic from '@/components/FooterStatic';
 
 export default function RootLayout({
   children,
@@ -8,7 +8,7 @@ export default function RootLayout({
   return (
     <>
       {children}
-      <Footer />
+      <FooterStatic />
     </>
   );
 }
\ No newline at end of file
diff --git a/src/app/(isr)/og/page.tsx b/src/app/(static)/og/page.tsx
similarity index 100%
rename from src/app/(isr)/og/page.tsx
rename to src/app/(static)/og/page.tsx
diff --git a/src/app/(isr)/p/[photoId]/image/route.tsx b/src/app/(static)/p/[photoId]/image/route.tsx
similarity index 100%
rename from src/app/(isr)/p/[photoId]/image/route.tsx
rename to src/app/(static)/p/[photoId]/image/route.tsx
diff --git a/src/app/(isr)/p/[photoId]/layout.tsx b/src/app/(static)/p/[photoId]/layout.tsx
similarity index 100%
rename from src/app/(isr)/p/[photoId]/layout.tsx
rename to src/app/(static)/p/[photoId]/layout.tsx
diff --git a/src/app/(isr)/p/[photoId]/page.tsx b/src/app/(static)/p/[photoId]/page.tsx
similarity index 100%
rename from src/app/(isr)/p/[photoId]/page.tsx
rename to src/app/(static)/p/[photoId]/page.tsx
diff --git a/src/app/(isr)/p/[photoId]/share/page.tsx b/src/app/(static)/p/[photoId]/share/page.tsx
similarity index 100%
rename from src/app/(isr)/p/[photoId]/share/page.tsx
rename to src/app/(static)/p/[photoId]/share/page.tsx
diff --git a/src/app/(isr)/page.tsx b/src/app/(static)/page.tsx
similarity index 100%
rename from src/app/(isr)/page.tsx
rename to src/app/(static)/page.tsx
diff --git a/src/app/(isr)/template-image-tight/route.tsx b/src/app/(static)/template-image-tight/route.tsx
similarity index 100%
rename from src/app/(isr)/template-image-tight/route.tsx
rename to src/app/(static)/template-image-tight/route.tsx
diff --git a/src/app/(isr)/template-image/route.tsx b/src/app/(static)/template-image/route.tsx
similarity index 100%
rename from src/app/(isr)/template-image/route.tsx
rename to src/app/(static)/template-image/route.tsx
diff --git a/src/app/(isr)/template-url/route.tsx b/src/app/(static)/template-url/route.tsx
similarity index 100%
rename from src/app/(isr)/template-url/route.tsx
rename to src/app/(static)/template-url/route.tsx
diff --git a/src/components/AuthNav.tsx b/src/components/FooterAuth.tsx
similarity index 92%
rename from src/components/AuthNav.tsx
rename to src/components/FooterAuth.tsx
index 0faf7fce..21cf5e77 100644
--- a/src/components/AuthNav.tsx
+++ b/src/components/FooterAuth.tsx
@@ -13,7 +13,7 @@ const LINK_STYLE = cc(
   'hover:text-gray-600',
 );
 
-export default function AuthNav() {
+export default function FooterAuth() {
   const { data: session, status  } = useSession();
 
   const hasState = status !== 'loading';
@@ -26,7 +26,7 @@ export default function AuthNav() {
         'flex items-center',
         'text-gray-400 dark:text-gray-500',
       )}>
-        <div className="flex gap-4 flex-grow">
+        <div className="flex gap-x-4 gap-y-1 flex-wrap flex-grow">
           {hasState
             ? <>
               {session?.user === undefined &&
diff --git a/src/components/Footer.tsx b/src/components/FooterStatic.tsx
similarity index 79%
rename from src/components/Footer.tsx
rename to src/components/FooterStatic.tsx
index 1d6f3001..e4881d8d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/FooterStatic.tsx
@@ -5,8 +5,10 @@ import SiteGrid from './SiteGrid';
 import ThemeSwitcher from '@/site/ThemeSwitcher';
 import { signOut } from 'next-auth/react';
 import Link from 'next/link';
+import { SHOW_REPO_LINK } from '@/site/config';
+import RepoLink from './RepoLink';
 
-export default function Footer({
+export default function FooterStatic({
   showSignOut,
 }: {
   showSignOut?: boolean
@@ -18,13 +20,15 @@ export default function Footer({
         'flex items-center',
         'text-gray-400 dark:text-gray-500',
       )}>
-        <div className="flex gap-4 flex-grow">
+        <div className="flex gap-x-4 gap-y-1 flex-grow flex-wrap">
           <Link
             href="/admin/photos"
             className="hover:text-gray-600 dark:hover:text-gray-400"
           >
             Admin
           </Link>
+          {SHOW_REPO_LINK &&
+            <RepoLink />}
           {showSignOut &&
             <div
               className={cc(
diff --git a/src/components/RepoLink.tsx b/src/components/RepoLink.tsx
new file mode 100644
index 00000000..a7d2b918
--- /dev/null
+++ b/src/components/RepoLink.tsx
@@ -0,0 +1,24 @@
+import { cc } from '@/utility/css';
+import Link from 'next/link';
+import { BiLogoGithub } from 'react-icons/bi';
+
+export default function RepoLink() {
+  return (
+    <span className="inline-flex items-center gap-2 whitespace-nowrap">
+      <span className="hidden sm:inline-block">
+        Made with
+      </span>
+      <Link
+        href="http://github.com/sambecker/exif-photo-blog"
+        target="_blank"
+        className={cc(
+          'flex items-center gap-1',
+          'text-black dark:text-white',
+        )}
+      >
+        <BiLogoGithub className="translate-y-[1px]" />
+        exif-photo-blog
+      </Link>
+    </span>
+  );
+}
diff --git a/src/components/SubmitButtonWithStatus.tsx b/src/components/SubmitButtonWithStatus.tsx
index 27730b77..d5f560bb 100644
--- a/src/components/SubmitButtonWithStatus.tsx
+++ b/src/components/SubmitButtonWithStatus.tsx
@@ -41,7 +41,9 @@ export default function SubmitButtonWithStatus(props: Props) {
             ? <Spinner size={14} />
             : icon}
         </span>}
-      <span className="hidden sm:inline-block">
+      <span className={cc(
+        icon !== undefined && 'hidden sm:inline-block',
+      )}>
         {children}
       </span>
     </button>
diff --git a/src/photo/PhotoForm.tsx b/src/photo/PhotoForm.tsx
index f68b5e60..3dc70886 100644
--- a/src/photo/PhotoForm.tsx
+++ b/src/photo/PhotoForm.tsx
@@ -86,6 +86,7 @@ export default function PhotoForm({
         )}
         width={THUMBNAIL_WIDTH}
         height={THUMBNAIL_HEIGHT}
+        priority
       />
       <canvas
         ref={canvasRef}
diff --git a/src/site/config.ts b/src/site/config.ts
index a072d629..3b2d9e16 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -18,6 +18,8 @@ export const BASE_URL = process.env.NODE_ENV === 'production'
   ? `https://${SITE_DOMAIN}`
   : 'http://localhost:3000';
 
+export const SHOW_REPO_LINK = process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
+
 export const CONFIG_CHECKLIST_STATUS = {
   hasTitle: (process.env.NEXT_PUBLIC_SITE_TITLE ?? '').length > 0,
   hasDomain: (process.env.NEXT_PUBLIC_SITE_DOMAIN ?? '').length > 0,
diff --git a/src/site/globals.css b/src/site/globals.css
index 48c6758f..f72b1c1c 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -9,6 +9,10 @@
       bg-white dark:bg-black
      text-gray-900 dark:text-gray-100
   }
+  a {
+    @apply
+      hover:underline
+  }
   label {
     @apply
       font-sans font-medium block uppercase text-xs
@@ -50,6 +54,7 @@
   button, .button {
     @apply
       cursor-pointer
+      hover:no-underline
       inline-flex gap-2 items-center
       px-4
       text-base