diff --git a/README.md b/README.md index 15eea1a7..ffb3fa35 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,8 @@ Installation ### 6. Optional configuration -- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage +- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (will result in increased storage usage) +- `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_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..d34c1fc1 --- /dev/null +++ b/src/components/ImageBlurFallback.tsx @@ -0,0 +1,22 @@ +import { BLUR_ENABLED } from '@/site/config'; +import clsx from 'clsx/lite'; +import Image, { ImageProps } from 'next/image'; + +export default function ImageBlurFallback(props: ImageProps) { + return ( + // eslint-disable-next-line jsx-a11y/alt-text + + ); +} 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" > - 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 ( - { - setFormData(data => ({ - ...data, - blurData, - })); + if (BLUR_ENABLED) { + setFormData(data => ({ + ...data, + blurData, + })); + } }, []); return (
- string | undefined capitalize?: boolean + hide?: boolean hideIfEmpty?: boolean - hideTemporarily?: boolean hideBasedOnCamera?: (make?: string, mode?: string) => boolean loadingMessage?: string checkbox?: boolean @@ -50,7 +50,8 @@ const FORM_METADATA: Record = { blurData: { label: 'blur data', readOnly: true, - required: true, + required: BLUR_ENABLED, + hideIfEmpty: !BLUR_ENABLED, loadingMessage: 'Generating blur data ...', }, url: { label: 'url', readOnly: true }, @@ -70,7 +71,7 @@ const FORM_METADATA: Record = { iso: { label: 'ISO' }, exposureTime: { label: 'exposure time' }, exposureCompensation: { label: 'exposure compensation' }, - locationName: { label: 'location name', hideTemporarily: true }, + locationName: { label: 'location name', hide: true }, latitude: { label: 'latitude' }, longitude: { label: 'longitude' }, takenAt: { label: 'taken at' }, @@ -82,7 +83,7 @@ const FORM_METADATA: Record = { export const FORM_METADATA_ENTRIES = (Object.entries(FORM_METADATA) as [keyof PhotoFormData, FormMeta][]) - .filter(([_, meta]) => !meta.hideTemporarily); + .filter(([_, meta]) => !meta.hide); export const convertFormKeysToLabels = (keys: (keyof PhotoFormData)[]) => keys.map(key => FORM_METADATA[key].label.toUpperCase()); diff --git a/src/photo/index.ts b/src/photo/index.ts index bef1ae1b..1a06ec6c 100644 --- a/src/photo/index.ts +++ b/src/photo/index.ts @@ -51,7 +51,7 @@ export interface PhotoDbInsert extends PhotoExif { id: string url: string extension: string - blurData: string + blurData?: string title?: string tags?: string[] locationName?: string 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'])} + + Set environment variable to {'"1"'} to prevent + image blur data being stored and displayed + {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])} +