mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 12:58:28 -04:00
detatch theme provider from stitches logic
This commit is contained in:
parent
b5f0f56702
commit
6f5c066525
SSH Key Fingerprint:
SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
@ -1,9 +1,7 @@
|
||||
import Head from "next/head";
|
||||
import Header from "../Header";
|
||||
import Footer from "../Footer";
|
||||
import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent";
|
||||
import useTheme from "../../hooks/useTheme";
|
||||
import { styled, theme, darkTheme } from "../../lib/styles/stitches.config";
|
||||
import { styled, theme } from "../../lib/styles/stitches.config";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
const Flex = styled("div", {
|
||||
@ -39,18 +37,8 @@ export type LayoutProps = ComponentPropsWithoutRef<typeof Flex> & {
|
||||
};
|
||||
|
||||
const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
|
||||
const { activeTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta
|
||||
// dynamically set browser theme color to match the background color; default to light for SSR
|
||||
name="theme-color"
|
||||
content={(activeTheme === "dark" ? darkTheme : theme)?.colors?.backgroundOuter?.value}
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<SkipToContentLink />
|
||||
|
||||
<Flex {...rest}>
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
import { memo } from "react";
|
||||
import { minify } from "uglify-js";
|
||||
import type { MinifyOutput } from "uglify-js";
|
||||
|
||||
import { restoreTheme as clientFn } from "./client.js";
|
||||
|
||||
export type ThemeScriptProps = {
|
||||
themeClassNames: {
|
||||
[themeName: string]: string;
|
||||
};
|
||||
themeStorageKey: string;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const ThemeScript = memo<ThemeScriptProps>(({ themeClassNames, themeStorageKey }) => {
|
||||
const minified = (() => {
|
||||
// since the client function will end up being injected as a static hard-coded string, we need to determine all of
|
||||
// the dynamic values within it *before* generating the final script.
|
||||
const source = String(clientFn)
|
||||
.replaceAll("__MEDIA_QUERY__", "(prefers-color-scheme: dark)")
|
||||
.replaceAll("__STORAGE_KEY__", themeStorageKey)
|
||||
.replaceAll("__CLASS_NAMES__", Object.values(themeClassNames).join('","'));
|
||||
|
||||
// turn the raw function into an iife
|
||||
const unminified = `(${source})()`;
|
||||
|
||||
// minify the final code. this approach is a bit janky but is ONLY used at build time, so there's essentially no
|
||||
// risk of breaking the entire site and/or accidentally bundling uglify-js clientside (bad).
|
||||
let minified: MinifyOutput | undefined;
|
||||
try {
|
||||
minified = minify(unminified, {
|
||||
toplevel: true,
|
||||
compress: {
|
||||
negate_iife: false,
|
||||
},
|
||||
parse: {
|
||||
bare_returns: true,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
// fail somewhat silenty by returning the unminified version
|
||||
console.warn("Failed to minify inline theme script:", error);
|
||||
return unminified;
|
||||
}
|
||||
|
||||
// same as the catch block above, but in some cases (not really sure when), minify() doesn't throw an actual error
|
||||
// and instead just returns undefined and an "error" string, so we need to check for both.
|
||||
if (!minified || minified.error) {
|
||||
console.warn("Failed to minify inline theme script. uglify-js output:", minified.error);
|
||||
return unminified;
|
||||
}
|
||||
|
||||
return minified.code;
|
||||
})();
|
||||
|
||||
// the script tag injected manually into `<head>` in _document.tsx to prevent FARTing:
|
||||
// https://css-tricks.com/flash-of-inaccurate-color-theme-fart/
|
||||
// even though it's the proper method, using next/script with `strategy="beforeInteractive"` still causes flash of
|
||||
// white on load. injecting a normal script tag lets us prioritize setting the `<html>` class even more urgently.
|
||||
// TODO: using next/script *might* be possible after https://github.com/vercel/next.js/pull/36364 is merged.
|
||||
return (
|
||||
<script
|
||||
id="restore-theme"
|
||||
dangerouslySetInnerHTML={{
|
||||
// make it an IIFE:
|
||||
__html: `(function(){${minified}})()`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export default ThemeScript;
|
||||
@ -1,31 +0,0 @@
|
||||
// @ts-check
|
||||
|
||||
// this function is converted to a string verbatim, substitutions are made to insert dynamic values, minified, and then
|
||||
// finally exported as an inline `<script>` tag in ThemeScript.tsx for _document.tsx to use.
|
||||
export const restoreTheme = () => {
|
||||
// `try/catch` in case I messed something up here bigly... (will default to light theme)
|
||||
try {
|
||||
// help minifier minify
|
||||
const htmlRoot = document.documentElement;
|
||||
// the list of <html>'s current class(es)...
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
const classList = htmlRoot.classList;
|
||||
// map of themes -> classnames ([0]=light, [1]=dark)
|
||||
const classNames = ["__CLASS_NAMES__"];
|
||||
// user's saved preference
|
||||
const pref = typeof Storage !== "undefined" ? window.localStorage.getItem("__STORAGE_KEY__") : null;
|
||||
|
||||
// restore the local storage preference if it's set, otherwise test CSS media query for browser dark mode preference
|
||||
// https://stackoverflow.com/a/57795495/1438024
|
||||
const newTheme = (pref && pref === "dark") ?? window.matchMedia("__MEDIA_QUERY__").matches ? 1 : 0;
|
||||
|
||||
// remove both `classNames` to start fresh...
|
||||
classList.remove(...classNames);
|
||||
|
||||
// ...and then FINALLY set the root class
|
||||
classList.add(classNames[newTheme] || "");
|
||||
|
||||
// set "color-scheme" inline css property
|
||||
htmlRoot.style.colorScheme = newTheme === 1 ? "dark" : "light";
|
||||
} catch (error) {} // eslint-disable-line no-empty
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./ThemeScript";
|
||||
export { default } from "./ThemeScript";
|
||||
@ -1,7 +1,7 @@
|
||||
import { createContext, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Script from "next/script";
|
||||
import useLocalStorage from "../hooks/useLocalStorage";
|
||||
import useMedia from "../hooks/useMedia";
|
||||
import { themeStorageKey } from "../lib/styles/stitches.config";
|
||||
import type { Context, PropsWithChildren } from "react";
|
||||
|
||||
export const ThemeContext: Context<{
|
||||
@ -21,15 +21,18 @@ export const ThemeContext: Context<{
|
||||
// provider used once in _app.tsx to wrap entire app
|
||||
export const ThemeProvider = ({
|
||||
classNames,
|
||||
storageKey = "theme",
|
||||
children,
|
||||
}: PropsWithChildren<{
|
||||
/** Mapping of theme name ("light", "dark") to the corresponding `<html>`'s class names. */
|
||||
classNames: {
|
||||
[themeName: string]: string;
|
||||
};
|
||||
/** Key to use when saving preferred theme to local storage. Defaults to "theme". */
|
||||
storageKey?: string;
|
||||
}>) => {
|
||||
// keep track of if/when the user has set their theme *on this site*
|
||||
const [preferredTheme, setPreferredTheme] = useLocalStorage(themeStorageKey);
|
||||
const [preferredTheme, setPreferredTheme] = useLocalStorage(storageKey);
|
||||
// keep track of changes to the user's OS/browser dark mode setting
|
||||
const [systemTheme, setSystemTheme] = useState("");
|
||||
// hook into system `prefers-dark-mode` setting
|
||||
@ -88,7 +91,21 @@ export const ThemeProvider = ({
|
||||
[changeTheme, preferredTheme, systemTheme, themeNames]
|
||||
);
|
||||
|
||||
return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
|
||||
return (
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */}
|
||||
<Script id="restore-theme" strategy="beforeInteractive">
|
||||
{/* unminified: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0 */}
|
||||
{`(function(){try{var e=document.documentElement,t=e.classList,a=[${Object.values(classNames)
|
||||
.map((cn) => `"${cn}"`)
|
||||
.join(
|
||||
","
|
||||
)}],o="undefined"!=typeof Storage?window.localStorage.getItem("${storageKey}"):null,c=(o&&"dark"===o)??window.matchMedia("(prefers-color-scheme: dark)").matches?1:0;t.remove(...a),t.add(a[c]||""),e.style.colorScheme=1==c?"dark":"light"}catch(e){}})()`}
|
||||
</Script>
|
||||
|
||||
<ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// debugging help pls
|
||||
|
||||
@ -153,11 +153,8 @@ export const globalStyles = globalCss(
|
||||
}
|
||||
);
|
||||
|
||||
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
|
||||
export const themeClassNames = {
|
||||
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from here
|
||||
export const classNames = {
|
||||
light: theme.className,
|
||||
dark: darkTheme.className,
|
||||
};
|
||||
|
||||
// local storage key
|
||||
export const themeStorageKey = "theme";
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
"devDependencies": {
|
||||
"@jakejarvis/eslint-config": "^3.1.0",
|
||||
"@types/comma-number": "^2.1.2",
|
||||
"@types/node": "^20.11.17",
|
||||
"@types/node": "^20.11.18",
|
||||
"@types/novnc__novnc": "^1.3.4",
|
||||
"@types/prop-types": "^15.7.11",
|
||||
"@types/react": "^18.2.55",
|
||||
|
||||
@ -6,7 +6,7 @@ import { ThemeProvider } from "../contexts/ThemeContext";
|
||||
import Layout from "../components/Layout";
|
||||
import * as config from "../lib/config";
|
||||
import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
|
||||
import { globalStyles, themeClassNames } from "../lib/styles/stitches.config";
|
||||
import { globalStyles, classNames } from "../lib/styles/stitches.config";
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import type { NextPage } from "next";
|
||||
import type { AppProps as NextAppProps } from "next/app";
|
||||
@ -72,7 +72,7 @@ const App = ({ Component, pageProps }: AppProps) => {
|
||||
/>
|
||||
<SocialProfileJsonLd {...socialProfileJsonLd} />
|
||||
|
||||
<ThemeProvider classNames={themeClassNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
|
||||
<ThemeProvider classNames={classNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
import ThemeScript from "../components/ThemeScript";
|
||||
import { getCssText, themeClassNames, themeStorageKey } from "../lib/styles/stitches.config";
|
||||
import { getCssText, theme } from "../lib/styles/stitches.config";
|
||||
import * as config from "../lib/config";
|
||||
|
||||
// https://nextjs.org/docs/advanced-features/custom-document
|
||||
const Document = () => {
|
||||
return (
|
||||
<Html lang={config.siteLocale} className={themeClassNames["light"]}>
|
||||
<Html lang={config.siteLocale} className={theme.className}>
|
||||
<Head>
|
||||
{/* inject this script (generated at build-time) to prioritize setting/restoring the user's theme. */}
|
||||
<ThemeScript key="restore-theme-js" {...{ themeClassNames, themeStorageKey }} />
|
||||
|
||||
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
|
||||
</Head>
|
||||
<body>
|
||||
|
||||
@ -97,6 +97,11 @@ const Sup = styled("sup", {
|
||||
fontSize: "0.6em",
|
||||
});
|
||||
|
||||
const PGPIcon = styled(GoLock, {
|
||||
verticalAlign: "-0.25em",
|
||||
strokeWidth: 0.5,
|
||||
});
|
||||
|
||||
const PGPKey = styled("code", {
|
||||
margin: "0 0.15em",
|
||||
letterSpacing: "0.075em",
|
||||
@ -335,8 +340,7 @@ const Index = () => {
|
||||
underline={false}
|
||||
openInNewTab
|
||||
>
|
||||
<GoLock size="1.25em" style={{ verticalAlign: "-0.25em", strokeWidth: 0.5 }} />{" "}
|
||||
<PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
|
||||
<PGPIcon size="1.25em" /> <PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
|
||||
</ColorfulLink>
|
||||
</Sup>
|
||||
,{" "}
|
||||
|
||||
14
pnpm-lock.yaml
generated
14
pnpm-lock.yaml
generated
@ -172,8 +172,8 @@ devDependencies:
|
||||
specifier: ^2.1.2
|
||||
version: 2.1.2
|
||||
'@types/node':
|
||||
specifier: ^20.11.17
|
||||
version: 20.11.17
|
||||
specifier: ^20.11.18
|
||||
version: 20.11.18
|
||||
'@types/novnc__novnc':
|
||||
specifier: ^1.3.4
|
||||
version: 1.3.4
|
||||
@ -952,7 +952,7 @@ packages:
|
||||
/@types/concat-stream@2.0.0:
|
||||
resolution: {integrity: sha512-t3YCerNM7NTVjLuICZo5gYAXYoDvpuuTceCcFQWcDQz26kxUR5uIWolxbIR5jRNIXpMqhOpW/b8imCR1LEmuJw==}
|
||||
dependencies:
|
||||
'@types/node': 20.11.17
|
||||
'@types/node': 20.11.18
|
||||
dev: true
|
||||
|
||||
/@types/debug@4.1.12:
|
||||
@ -1029,8 +1029,8 @@ packages:
|
||||
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
|
||||
dev: false
|
||||
|
||||
/@types/node@20.11.17:
|
||||
resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==}
|
||||
/@types/node@20.11.18:
|
||||
resolution: {integrity: sha512-ABT5VWnnYneSBcNWYSCuR05M826RoMyMSGiFivXGx6ZUIsXb9vn4643IEwkg2zbEOSgAiSogtapN2fgc4mAPlw==}
|
||||
dependencies:
|
||||
undici-types: 5.26.5
|
||||
|
||||
@ -1067,7 +1067,7 @@ packages:
|
||||
/@types/sax@1.2.5:
|
||||
resolution: {integrity: sha512-9jWta97bBVC027/MShr3gLab8gPhKy4l6qpb+UJLF5pDm3501NvA7uvqVCW+REFtx00oTi6Cq9JzLwgq6evVgw==}
|
||||
dependencies:
|
||||
'@types/node': 20.11.17
|
||||
'@types/node': 20.11.18
|
||||
dev: false
|
||||
|
||||
/@types/scheduler@0.16.4:
|
||||
@ -5849,7 +5849,7 @@ packages:
|
||||
'@types/concat-stream': 2.0.0
|
||||
'@types/debug': 4.1.12
|
||||
'@types/is-empty': 1.2.1
|
||||
'@types/node': 20.11.17
|
||||
'@types/node': 20.11.18
|
||||
'@types/unist': 3.0.2
|
||||
'@ungap/structured-clone': 1.2.0
|
||||
concat-stream: 2.0.0
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user