From 813658a3d4deb02499c8ee46000f61c8d201d753 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 29 Mar 2025 13:00:24 -0500 Subject: [PATCH 1/4] Offer matte background color configuration --- app/layout.tsx | 2 ++ src/admin/AdminAppConfigurationClient.tsx | 24 ++++++++++++++++++++--- src/app/ThemeColors.tsx | 14 +++++++++++++ src/app/config.ts | 6 ++++++ src/components/EnvVar.tsx | 3 +++ src/photo/PhotoLarge.tsx | 14 +++++++++++-- 6 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 src/app/ThemeColors.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 7a6bf424..6f933459 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -23,6 +23,7 @@ import ShareModals from '@/share/ShareModals'; import AdminUploadPanel from '@/admin/upload/AdminUploadPanel'; import { revalidatePath } from 'next/cache'; import RecipeModal from '@/recipe/RecipeModal'; +import ThemeColors from '@/app/ThemeColors'; import '../tailwind.css'; @@ -79,6 +80,7 @@ export default function RootLayout({ '3xl:flex flex-col items-center', )}> +
- {variables.map(envVar => - )} + {variables.map(variable => + )}
; const renderSubStatus = ( @@ -478,7 +480,23 @@ export default function AdminAppConfigurationClient({ Set environment variable to {'"1"'} to constrain the size {' '} of each photo, and display a surrounding border: - {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])} +
+ + } + /> + } + /> +
+ {MATTE_COLOR && } + {MATTE_COLOR_DARK && } + ); +} diff --git a/src/app/config.ts b/src/app/config.ts index 534314a8..084e4581 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -232,6 +232,10 @@ export const DEFAULT_THEME = : 'system'; export const MATTE_PHOTOS = process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1'; +export const MATTE_COLOR = + process.env.NEXT_PUBLIC_MATTE_COLOR; +export const MATTE_COLOR_DARK = + process.env.NEXT_PUBLIC_MATTE_COLOR_DARK; // DISPLAY @@ -350,6 +354,8 @@ export const APP_CONFIGURATION = { hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME), defaultTheme: DEFAULT_THEME, arePhotosMatted: MATTE_PHOTOS, + matteColor: MATTE_COLOR, + matteColorDark: MATTE_COLOR_DARK, // Display hasCategoryVisibility: Boolean(process.env.NEXT_PUBLIC_CATEGORY_VISIBILITY), diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx index 44bd1158..484e0c5e 100644 --- a/src/components/EnvVar.tsx +++ b/src/components/EnvVar.tsx @@ -5,12 +5,14 @@ import CopyButton from './CopyButton'; export default function EnvVar({ variable, value, + accessory, includeCopyButton = true, trailingContent, className, }: { variable: string, value?: string, + accessory?: ReactNode, includeCopyButton?: boolean, trailingContent?: ReactNode, className?: string, @@ -33,6 +35,7 @@ export default function EnvVar({ )}> {variable}{value && ` = ${value}`} + {accessory} {includeCopyButton && ; - const largePhotoContainerClassName = clsx(arePhotosMatted && - 'flex items-center justify-center aspect-3/2 bg-gray-100', + const largePhotoContainerClassName = clsx( + arePhotosMatted && 'flex items-center justify-center aspect-3/2', + // Matte theme colors defined in root layout + arePhotosMatted && (MATTE_COLOR + ? 'bg-(--matte-bg)' + : 'bg-gray-100'), + arePhotosMatted && (MATTE_COLOR_DARK + ? 'dark:bg-(--matte-bg-dark)' + // Only specify dark background when MATTE_COLOR is not configured + : !MATTE_COLOR && 'dark:bg-gray-700/35'), ); return ( From a383c62fd1e61c2f0fa147cbde8e5b20d1a40d69 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 29 Mar 2025 13:08:51 -0500 Subject: [PATCH 2/4] Add matte color configuration to README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3b531952..07a78e2c 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ Application behavior can be changed by configuring the following environment var #### Visual - `NEXT_PUBLIC_DEFAULT_THEME = light | dark` sets preferred initial theme (defaults to `system` when not configured) -- `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and displays a surrounding border (potentially useful for photos with tall aspect ratios) +- `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and displays a surrounding border, potentially useful for photos with tall aspect ratios (colors can be customized via `NEXT_PUBLIC_MATTE_COLOR` + `NEXT_PUBLIC_MATTE_COLOR_DARK`) #### Display - `NEXT_PUBLIC_CATEGORY_VISIBILITY` From 9b5f5a521f3e0223ecb7596d2a5d4a8e479900bc Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 29 Mar 2025 13:16:57 -0500 Subject: [PATCH 3/4] Shrink matte color swatch --- src/admin/AdminAppConfigurationClient.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx index f994a7f8..7356ed97 100644 --- a/src/admin/AdminAppConfigurationClient.tsx +++ b/src/admin/AdminAppConfigurationClient.tsx @@ -485,14 +485,14 @@ export default function AdminAppConfigurationClient({ } /> } /> From 720489b78175e7c4bcbad96950e35f500e6bafff Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 29 Mar 2025 13:26:52 -0500 Subject: [PATCH 4/4] Lighten default dark matte --- src/photo/PhotoLarge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 6ea1e97b..aed963f6 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -248,7 +248,7 @@ export default function PhotoLarge({ arePhotosMatted && (MATTE_COLOR_DARK ? 'dark:bg-(--matte-bg-dark)' // Only specify dark background when MATTE_COLOR is not configured - : !MATTE_COLOR && 'dark:bg-gray-700/35'), + : !MATTE_COLOR && 'dark:bg-gray-700/30'), ); return (