Add footer repo link

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`

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} />

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>
   );

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 />
     </>
   );
 }

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 &&

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(

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>
+  );
+}

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>

src/photo/PhotoForm.tsx

@@ -86,6 +86,7 @@ export default function PhotoForm({
         )}
         width={THUMBNAIL_WIDTH}
         height={THUMBNAIL_HEIGHT}
+        priority
       />
       <canvas
         ref={canvasRef}

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,

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