From 908db18fb0a0a9c9d1d57e7f8692d19088f6ca31 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 28 Jan 2024 11:52:04 -0600
Subject: [PATCH] Introduce configuration preventing blur data being stored and
 displayed

---
 README.md                            |  1 +
 src/components/ImageBlurFallback.tsx | 30 ++++++++++++++++++++++++++++
 src/components/ImageLarge.tsx        |  7 +++----
 src/components/ImageSmall.tsx        |  6 +++---
 src/components/ImageTiny.tsx         |  4 ++--
 src/photo/PhotoForm.tsx              |  4 ++--
 src/site/SiteChecklistClient.tsx     | 11 ++++++++++
 src/site/config.ts                   |  2 ++
 8 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ImageBlurFallback.tsx

diff --git a/README.md b/README.md
index 15eea1a7..e16e6e31 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,7 @@ Installation
 ### 6. Optional configuration
 
 - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage
+- `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed
 - `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_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
new file mode 100644
index 00000000..ae010c74
--- /dev/null
+++ b/src/components/ImageBlurFallback.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { BLUR_DISABLED } from '@/site/config';
+import { useTheme } from 'next-themes';
+import Image, { ImageProps } from 'next/image';
+
+// Based on bg-gray-100/50 (#f9f9fa)
+// eslint-disable-next-line max-len
+const BLUR_DATA_LIGHT = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAADElEQVQImWP4+fMXAAXbAu0I+kpzAAAAAElFTkSuQmCC';
+
+// Based on bg-gray-900/50 (#090c14)
+// eslint-disable-next-line max-len
+const BLUR_DATA_DARK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAADElEQVQImWPg5BEBAABLACpEF6ULAAAAAElFTkSuQmCC';
+
+export default function ImageBlurFallback(props: ImageProps) {
+  const { resolvedTheme } = useTheme();
+  const blueFallback = resolvedTheme === 'dark'
+    ? BLUR_DATA_DARK
+    : BLUR_DATA_LIGHT;
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <Image {...{
+      ...props,
+      blurDataURL: !BLUR_DISABLED && props.blurDataURL
+        ? props.blurDataURL
+        : blueFallback,
+      placeholder: 'blur',
+    }} />
+  );
+}
diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx
index 10ed1abf..927fb64e 100644
--- a/src/components/ImageLarge.tsx
+++ b/src/components/ImageLarge.tsx
@@ -1,6 +1,6 @@
 import { IMAGE_LARGE_WIDTH } from '@/site';
-import Image from 'next/image';
 import Link from 'next/link';
+import ImageBlurFallback from './ImageBlurFallback';
 
 export default function ImageLarge({
   className,
@@ -16,7 +16,7 @@ export default function ImageLarge({
   src: string
   alt: string
   aspectRatio: number
-  blurData: string
+  blurData?: string
   priority?: boolean
 }) {
   return (
@@ -24,13 +24,12 @@ export default function ImageLarge({
       href={href}
       className="active:brightness-75"
     >
-      <Image {...{
+      <ImageBlurFallback {...{
         className,
         src,
         alt,
         priority,
         blurDataURL: blurData,
-        placeholder: 'blur',
         width: IMAGE_LARGE_WIDTH,
         height: Math.round(IMAGE_LARGE_WIDTH / aspectRatio),
       }} />
diff --git a/src/components/ImageSmall.tsx b/src/components/ImageSmall.tsx
index 9822b02f..5c8cfec8 100644
--- a/src/components/ImageSmall.tsx
+++ b/src/components/ImageSmall.tsx
@@ -1,5 +1,5 @@
 import { IMAGE_SMALL_WIDTH } from '@/site';
-import Image from 'next/image';
+import ImageBlurFallback from './ImageBlurFallback';
 
 export default function ImageSmall({
   className,
@@ -12,10 +12,10 @@ export default function ImageSmall({
   src: string
   alt: string
   aspectRatio: number
-  blurData: string
+  blurData?: string
 }) {
   return (
-    <Image {...{
+    <ImageBlurFallback {...{
       className,
       src,
       alt,
diff --git a/src/components/ImageTiny.tsx b/src/components/ImageTiny.tsx
index cbed91bc..ac1cbff3 100644
--- a/src/components/ImageTiny.tsx
+++ b/src/components/ImageTiny.tsx
@@ -1,5 +1,5 @@
 import { IMAGE_TINY_WIDTH } from '@/site';
-import Image from 'next/image';
+import ImageBlurFallback from './ImageBlurFallback';
 
 export default function ImageTiny({
   className,
@@ -15,7 +15,7 @@ export default function ImageTiny({
   blurData?: string
 }) {
   return (
-    <Image {...{
+    <ImageBlurFallback {...{
       className,
       src,
       alt,
diff --git a/src/photo/PhotoForm.tsx b/src/photo/PhotoForm.tsx
index cd9a50a5..34432b54 100644
--- a/src/photo/PhotoForm.tsx
+++ b/src/photo/PhotoForm.tsx
@@ -9,7 +9,6 @@ import {
   isFormValid,
 } from './form';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
-import NextImage from 'next/image';
 import { createPhotoAction, updatePhotoAction } from './actions';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 import Link from 'next/link';
@@ -22,6 +21,7 @@ import {
 } from '@/utility/date';
 import { toastSuccess, toastWarning } from '@/toast';
 import { getDimensionsFromSize } from '@/utility/size';
+import ImageBlurFallback from '@/components/ImageBlurFallback';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -106,7 +106,7 @@ export default function PhotoForm({
   return (
     <div className="space-y-8 max-w-[38rem]">
       <div className="flex gap-2">
-        <NextImage
+        <ImageBlurFallback
           alt="Upload"
           src={url}
           className={clsx(
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index fb940901..e69b363d 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -37,6 +37,7 @@ export default function SiteChecklistClient({
   showFilmSimulations,
   showExifInfo,
   isProModeEnabled,
+  isBlurEnabled,
   isGeoPrivacyEnabled,
   isPriorityOrderEnabled,
   isPublicApiEnabled,
@@ -270,6 +271,16 @@ export default function SiteChecklistClient({
           higher quality image storage:
           {renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
         </ChecklistRow>
+        <ChecklistRow
+          title="Image Blur"
+          status={isBlurEnabled}
+          isPending={isPendingPage}
+          optional
+        >
+          Set environment variable to {'"1"'} to prevent
+          image blur data being stored and displayed
+          {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
+        </ChecklistRow>
         <ChecklistRow
           title="Geo Privacy"
           status={isGeoPrivacyEnabled}
diff --git a/src/site/config.ts b/src/site/config.ts
index bb7f8212..1f2a0fd9 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -82,6 +82,7 @@ export const CURRENT_STORAGE: StorageType =
 // SETTINGS
 
 export const PRO_MODE_ENABLED = process.env.NEXT_PUBLIC_PRO_MODE === '1';
+export const BLUR_DISABLED = process.env.NEXT_PUBLIC_BLUR_DISABLED === '1';
 export const GEO_PRIVACY_ENABLED = process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
 export const PRIORITY_ORDER_ENABLED =
   process.env.NEXT_PUBLIC_IGNORE_PRIORITY_ORDER !== '1';
@@ -120,6 +121,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
+  isBlurEnabled: !BLUR_DISABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isPriorityOrderEnabled: PRIORITY_ORDER_ENABLED,
   isPublicApiEnabled: PUBLIC_API_ENABLED,