Merge branch 'main' into static

.vscode/settings.json

@@ -18,6 +18,7 @@
     "headlessui",
     "hgetall",
     "hset",
+    "jpgs",
     "Lightbox",
     "Makernote",
     "nanoids",

README.md

@@ -58,12 +58,18 @@ Installation
 
 1. Open project on Vercel
 2. Click "Analytics" tab
-3. Follow "Enable Web Analytics" instructions (`@vercel/analytics` is already part of your project)
+3. Follow "Enable Web Analytics" instructions (`@vercel/analytics` already included)
 
-### 6. Optional configuration
+### 6. Add Speed Insights (optional)
 
-- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
+1. Open project on Vercel
-- `NEXT_PUBLIC_STATICALLY_OPTIMIZE = 1` enables PPR and static optimization, i.e., building pages ahead of time (results in increased storage usage)—⚠️ _Experimental_
+2. Click "Speed Insights" tab
+3. Follow "Enable Speed Insights" instructions (`@vercel/speed-insights` already included)
+
+### 7. Optional configuration
+
+- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage for jpgs (will result in increased storage usage)
+- `NEXT_PUBLIC_STATICALLY_OPTIMIZE = 1` enables PPR and static optimization, i.e., building pages ahead of time (will results in increased storage usage)—⚠️ _Experimental_
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order

next.config.js

@@ -2,14 +2,14 @@ const VERCEL_BLOB_STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(
   /^vercel_blob_rw_([a-z0-9]+)_[a-z0-9]+$/i,
 )?.[1].toLowerCase();
 
-const VERCEL_BLOB_HOSTNAME = VERCEL_BLOB_STORE_ID
+const HOSTNAME_VERCEL_BLOB = VERCEL_BLOB_STORE_ID
   ? `${VERCEL_BLOB_STORE_ID}.public.blob.vercel-storage.com`
   : undefined;
 
-const CLOUDFLARE_R2_HOSTNAME =
+const HOSTNAME_CLOUDFLARE_R2 =
   process.env.NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN;
 
-const AWS_S3_HOSTNAME =
+const HOSTNAME_AWS_S3 =
   process.env.NEXT_PUBLIC_AWS_S3_BUCKET &&
   process.env.NEXT_PUBLIC_AWS_S3_REGION
     // eslint-disable-next-line max-len
@@ -30,9 +30,9 @@ const nextConfig = {
   images: {
     imageSizes: [200],
     remotePatterns: []
-      .concat(createRemotePattern(VERCEL_BLOB_HOSTNAME))
+      .concat(createRemotePattern(HOSTNAME_VERCEL_BLOB))
-      .concat(createRemotePattern(CLOUDFLARE_R2_HOSTNAME))
+      .concat(createRemotePattern(HOSTNAME_CLOUDFLARE_R2))
-      .concat(createRemotePattern(AWS_S3_HOSTNAME)),
+      .concat(createRemotePattern(HOSTNAME_AWS_S3)),
     minimumCacheTTL: 31536000,
   },
   ...process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE === '1' && {

src/admin/AdminPhotoMenuClient.tsx

@@ -22,15 +22,15 @@ export default function AdminPhotoMenuClient({
     <MoreMenu {...{
       items: [
         {
-          label: 'Edit Photo',
+          label: 'Edit',
-          icon: <FaRegEdit size={14} className="translate-y-[-0.5px]" />,
+          icon: <FaRegEdit size={14} />,
           href: pathForAdminPhotoEdit(photo.id),
         }, {
           label: isFav ? 'Unfavorite' : 'Favorite',
           icon: isFav
             ? <FaStar
               size={14}
-              className="translate-y-[-1px] text-amber-500"
+              className="text-amber-500"
             />
             : <FaRegStar
               size={14}

src/components/MoreMenu.tsx

@@ -23,7 +23,7 @@ export default function MoreMenu({
   const itemClass = clsx(
     'block w-full',
     'border-none min-h-0 bg-transparent',
-    'text-base text-main text-left',
+    'text-sm text-main text-left',
     'px-3 py-1.5 rounded-[3px]',
     'hover:text-main',
     'hover:bg-gray-50 active:bg-gray-100',
@@ -58,7 +58,7 @@ export default function MoreMenu({
         </Menu.Button>
         <Menu.Items className={clsx(
           'absolute top-6',
-          'min-w-[9rem]',
+          'min-w-[8rem]',
           'text-left',
           'md:right-1',
           'p-1 rounded-md border',

src/photo/PhotoSetHeader.tsx

@@ -50,7 +50,7 @@ export default function PhotoSetHeader({
           {entity}
         </span>
         <span className={clsx(
-          'inline-flex gap-2 items-center self-start',
+          'inline-flex gap-2 self-start',
           'uppercase text-dim',
           HIGH_DENSITY_GRID
             ? 'lg:col-span-2'
@@ -61,7 +61,9 @@ export default function PhotoSetHeader({
             ? `${entityVerb} ${selectedPhotoIndex + 1} of ${count ?? photos.length}`
             : entityDescription}
           {selectedPhotoIndex === undefined &&
-            <ShareButton path={sharePath} dim />}
+            <span className="translate-y-[1px]">
+              <ShareButton path={sharePath} dim />
+            </span>}
         </span>
         <span className={clsx(
           'hidden sm:inline-block',