strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add configuration for preferred initial theme

Browse Source
This commit is contained in:
Sam Becker 2024-07-21 20:28:44 -05:00
parent 91a17369bd
commit fe7bb07ac4
5 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -103,6 +103,7 @@ Application behavior can be changed by configuring the following environment var
#### Site behavior #### Site behavior
- `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage - `NEXT_PUBLIC_GRID_HOMEPAGE = 1` shows grid layout on homepage
- `NEXT_PUBLIC_DEFAULT_THEME = light | dark` sets preferred initial theme (defaults to `system` when not configured)
- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage) - `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (results in increased storage usage)
- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1` enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ _Experimental_ - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES = 1` enables static optimization for pages, i.e., renders pages at build time (results in increased project usage)—⚠️ _Experimental_
- `NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ _Experimental_ - `NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES = 1` enables static optimization for OG images, i.e., renders images at build time (results in increased project usage)—⚠️ _Experimental_

6
src/app/layout.tsx
View File

@ -4,6 +4,7 @@ import { clsx } from 'clsx/lite';
import { IBM_Plex_Mono } from 'next/font/google'; import { IBM_Plex_Mono } from 'next/font/google';
import { import {
BASE_URL, BASE_URL,
DEFAULT_THEME,
SITE_DESCRIPTION, SITE_DESCRIPTION,
SITE_DOMAIN_OR_TITLE, SITE_DOMAIN_OR_TITLE,
SITE_TITLE, SITE_TITLE,
@ -79,7 +80,10 @@ export default function RootLayout({
<body className={ibmPlexMono.variable}> <body className={ibmPlexMono.variable}>
<AppStateProvider> <AppStateProvider>
<SwrConfigClient> <SwrConfigClient>
<ThemeProvider attribute="class"> <ThemeProvider
attribute="class"
defaultTheme={DEFAULT_THEME}
>
<main className={clsx( <main className={clsx(
'mx-3 mb-3', 'mx-3 mb-3',
'lg:mx-6 lg:mb-6', 'lg:mx-6 lg:mb-6',

4
src/components/Spinner.tsx
View File

@ -16,14 +16,14 @@ export default function Spinner({
return ( return (
<span <span
className={clsx( className={clsx(
className, 'inline-flex',
color === 'light-gray' && color === 'light-gray' &&
'text-gray-300 dark:text-gray-600', 'text-gray-300 dark:text-gray-600',
color === 'dim' && color === 'dim' &&
'text-dim', 'text-dim',
className,
)} )}
style={{ style={{
display: 'inline-flex',
width: size, width: size,
height: size, height: size,
}} }}

32
src/site/SiteChecklistClient.tsx
View File

@ -45,10 +45,12 @@ export default function SiteChecklistClient({
hasTitle, hasTitle,
hasDescription, hasDescription,
hasAbout, hasAbout,
hasDefaultTheme,
showRepoLink, showRepoLink,
showSocial, showSocial,
showFilmSimulations, showFilmSimulations,
showExifInfo, showExifInfo,
defaultTheme,
isProModeEnabled, isProModeEnabled,
isGridHomepageEnabled: isGridFirst, isGridHomepageEnabled: isGridFirst,
isStaticallyOptimized, isStaticallyOptimized,
@ -424,15 +426,6 @@ export default function SiteChecklistClient({
icon={<BiCog size={16} />} icon={<BiCog size={16} />}
optional optional
> >
<ChecklistRow
title="Pro mode"
status={isProModeEnabled}
optional
>
Set environment variable to {'"1"'} to enable
higher quality image storage:
{renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
</ChecklistRow>
<ChecklistRow <ChecklistRow
title="Grid homepage" title="Grid homepage"
status={isGridFirst} status={isGridFirst}
@ -442,6 +435,27 @@ export default function SiteChecklistClient({
on homepage: on homepage:
{renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])} {renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
</ChecklistRow> </ChecklistRow>
<ChecklistRow
title={`Default theme: ${defaultTheme}`}
status={hasDefaultTheme}
optional
>
{'Set environment variable to \'light\' or \'dark\''}
{' '}
to configure initial theme
{' '}
(defaults to {'\'system\''}):
{renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
</ChecklistRow>
<ChecklistRow
title="Pro mode"
status={isProModeEnabled}
optional
>
Set environment variable to {'"1"'} to enable
higher quality image storage:
{renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
</ChecklistRow>
<ChecklistRow <ChecklistRow
title="Static optimization" title="Static optimization"
status={isStaticallyOptimized} status={isStaticallyOptimized}

8
src/site/config.ts
View File

@ -119,6 +119,12 @@ export const CURRENT_STORAGE: StorageType =
// SETTINGS // SETTINGS
export const DEFAULT_THEME =
process.env.NEXT_PUBLIC_DEFAULT_THEME === 'dark'
? 'dark'
: process.env.NEXT_PUBLIC_DEFAULT_THEME === 'light'
? 'light'
: 'system';
export const PRO_MODE_ENABLED = export const PRO_MODE_ENABLED =
process.env.NEXT_PUBLIC_PRO_MODE === '1'; process.env.NEXT_PUBLIC_PRO_MODE === '1';
export const GRID_HOMEPAGE_ENABLED = export const GRID_HOMEPAGE_ENABLED =
@ -186,10 +192,12 @@ export const CONFIG_CHECKLIST_STATUS = {
hasTitle: Boolean(process.env.NEXT_PUBLIC_SITE_TITLE), hasTitle: Boolean(process.env.NEXT_PUBLIC_SITE_TITLE),
hasDescription: HAS_DEFINED_SITE_DESCRIPTION, hasDescription: HAS_DEFINED_SITE_DESCRIPTION,
hasAbout: Boolean(process.env.NEXT_PUBLIC_SITE_ABOUT), hasAbout: Boolean(process.env.NEXT_PUBLIC_SITE_ABOUT),
hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
showRepoLink: SHOW_REPO_LINK, showRepoLink: SHOW_REPO_LINK,
showSocial: SHOW_SOCIAL, showSocial: SHOW_SOCIAL,
showFilmSimulations: SHOW_FILM_SIMULATIONS, showFilmSimulations: SHOW_FILM_SIMULATIONS,
showExifInfo: SHOW_EXIF_DATA, showExifInfo: SHOW_EXIF_DATA,
defaultTheme: DEFAULT_THEME,
isProModeEnabled: PRO_MODE_ENABLED, isProModeEnabled: PRO_MODE_ENABLED,
isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED, isGridHomepageEnabled: GRID_HOMEPAGE_ENABLED,
isStaticallyOptimized: ( isStaticallyOptimized: (