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
- `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_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_

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 {
BASE_URL,
DEFAULT_THEME,
SITE_DESCRIPTION,
SITE_DOMAIN_OR_TITLE,
SITE_TITLE,
@ -79,7 +80,10 @@ export default function RootLayout({
<body className={ibmPlexMono.variable}>
<AppStateProvider>
<SwrConfigClient>
<ThemeProvider attribute="class">
<ThemeProvider
attribute="class"
defaultTheme={DEFAULT_THEME}
>
<main className={clsx(
'mx-3 mb-3',
'lg:mx-6 lg:mb-6',

4
src/components/Spinner.tsx
View File

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

32
src/site/SiteChecklistClient.tsx
View File

@ -45,10 +45,12 @@ export default function SiteChecklistClient({
hasTitle,
hasDescription,
hasAbout,
hasDefaultTheme,
showRepoLink,
showSocial,
showFilmSimulations,
showExifInfo,
defaultTheme,
isProModeEnabled,
isGridHomepageEnabled: isGridFirst,
isStaticallyOptimized,
@ -424,15 +426,6 @@ export default function SiteChecklistClient({
icon={<BiCog size={16} />}
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
title="Grid homepage"
status={isGridFirst}
@ -442,6 +435,27 @@ export default function SiteChecklistClient({
on homepage:
{renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
</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
title="Static optimization"
status={isStaticallyOptimized}

8
src/site/config.ts
View File

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