jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 19:08:26 -04:00
Code Issues

detatch theme provider from stitches logic

Browse Source
This commit is contained in:
Jake Jarvis 2024-02-15 10:48:45 -05:00
parent b5f0f56702
commit 6f5c066525
Signed by: jake
SSH Key Fingerprint: SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
11 changed files with 41 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Layout/Layout.tsx
View File

@ -1,9 +1,7 @@
import Head from "next/head";
import Header from "../Header"; import Header from "../Header";
import Footer from "../Footer"; import Footer from "../Footer";
import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent"; import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent";
import useTheme from "../../hooks/useTheme"; import { styled, theme } from "../../lib/styles/stitches.config";
import { styled, theme, darkTheme } from "../../lib/styles/stitches.config";
import type { ComponentPropsWithoutRef } from "react"; import type { ComponentPropsWithoutRef } from "react";
const Flex = styled("div", { const Flex = styled("div", {
@ -39,18 +37,8 @@ export type LayoutProps = ComponentPropsWithoutRef<typeof Flex> & {
}; };
const Layout = ({ container = true, children, ...rest }: LayoutProps) => { const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
const { activeTheme } = useTheme();
return ( 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 /> <SkipToContentLink />
<Flex {...rest}> <Flex {...rest}>

72
components/ThemeScript/ThemeScript.tsx
View File

@ -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;

31
components/ThemeScript/client.js
View File

@ -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
};

2
components/ThemeScript/index.ts
View File

@ -1,2 +0,0 @@
export * from "./ThemeScript";
export { default } from "./ThemeScript";

23
contexts/ThemeContext.tsx
View File

@ -1,7 +1,7 @@
import { createContext, useCallback, useEffect, useMemo, useState } from "react"; import { createContext, useCallback, useEffect, useMemo, useState } from "react";
import Script from "next/script";
import useLocalStorage from "../hooks/useLocalStorage"; import useLocalStorage from "../hooks/useLocalStorage";
import useMedia from "../hooks/useMedia"; import useMedia from "../hooks/useMedia";
import { themeStorageKey } from "../lib/styles/stitches.config";
import type { Context, PropsWithChildren } from "react"; import type { Context, PropsWithChildren } from "react";
export const ThemeContext: Context<{ export const ThemeContext: Context<{
@ -21,15 +21,18 @@ export const ThemeContext: Context<{
// provider used once in _app.tsx to wrap entire app // provider used once in _app.tsx to wrap entire app
export const ThemeProvider = ({ export const ThemeProvider = ({
classNames, classNames,
storageKey = "theme",
children, children,
}: PropsWithChildren<{ }: PropsWithChildren<{
/** Mapping of theme name ("light", "dark") to the corresponding `<html>`'s class names. */ /** Mapping of theme name ("light", "dark") to the corresponding `<html>`'s class names. */
classNames: { classNames: {
[themeName: string]: string; [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* // 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 // keep track of changes to the user's OS/browser dark mode setting
const [systemTheme, setSystemTheme] = useState(""); const [systemTheme, setSystemTheme] = useState("");
// hook into system `prefers-dark-mode` setting // hook into system `prefers-dark-mode` setting
@ -88,7 +91,21 @@ export const ThemeProvider = ({
[changeTheme, preferredTheme, systemTheme, themeNames] [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 // debugging help pls

7
lib/styles/stitches.config.ts
View File

@ -153,11 +153,8 @@ export const globalStyles = globalCss(
} }
); );
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there // theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from here
export const themeClassNames = { export const classNames = {
light: theme.className, light: theme.className,
dark: darkTheme.className, dark: darkTheme.className,
}; };
// local storage key
export const themeStorageKey = "theme";

2
package.json
View File

@ -73,7 +73,7 @@
"devDependencies": { "devDependencies": {
"@jakejarvis/eslint-config": "^3.1.0", "@jakejarvis/eslint-config": "^3.1.0",
"@types/comma-number": "^2.1.2", "@types/comma-number": "^2.1.2",
"@types/node": "^20.11.17", "@types/node": "^20.11.18",
"@types/novnc__novnc": "^1.3.4", "@types/novnc__novnc": "^1.3.4",
"@types/prop-types": "^15.7.11", "@types/prop-types": "^15.7.11",
"@types/react": "^18.2.55", "@types/react": "^18.2.55",

4
pages/_app.tsx
View File

@ -6,7 +6,7 @@ import { ThemeProvider } from "../contexts/ThemeContext";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
import * as config from "../lib/config"; import * as config from "../lib/config";
import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo"; 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 { ReactElement, ReactNode } from "react";
import type { NextPage } from "next"; import type { NextPage } from "next";
import type { AppProps as NextAppProps } from "next/app"; import type { AppProps as NextAppProps } from "next/app";
@ -72,7 +72,7 @@ const App = ({ Component, pageProps }: AppProps) => {
/> />
<SocialProfileJsonLd {...socialProfileJsonLd} /> <SocialProfileJsonLd {...socialProfileJsonLd} />
<ThemeProvider classNames={themeClassNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider> <ThemeProvider classNames={classNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
</> </>
); );
}; };

8
pages/_document.tsx
View File

@ -1,16 +1,12 @@
import { Html, Head, Main, NextScript } from "next/document"; import { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript"; import { getCssText, theme } from "../lib/styles/stitches.config";
import { getCssText, themeClassNames, themeStorageKey } from "../lib/styles/stitches.config";
import * as config from "../lib/config"; import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document // https://nextjs.org/docs/advanced-features/custom-document
const Document = () => { const Document = () => {
return ( return (
<Html lang={config.siteLocale} className={themeClassNames["light"]}> <Html lang={config.siteLocale} className={theme.className}>
<Head> <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() }} /> <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
</Head> </Head>
<body> <body>

8
pages/index.tsx
View File

@ -97,6 +97,11 @@ const Sup = styled("sup", {
fontSize: "0.6em", fontSize: "0.6em",
}); });
const PGPIcon = styled(GoLock, {
verticalAlign: "-0.25em",
strokeWidth: 0.5,
});
const PGPKey = styled("code", { const PGPKey = styled("code", {
margin: "0 0.15em", margin: "0 0.15em",
letterSpacing: "0.075em", letterSpacing: "0.075em",
@ -335,8 +340,7 @@ const Index = () => {
underline={false} underline={false}
openInNewTab openInNewTab
> >
<GoLock size="1.25em" style={{ verticalAlign: "-0.25em", strokeWidth: 0.5 }} />{" "} <PGPIcon size="1.25em" /> <PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
<PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
</ColorfulLink> </ColorfulLink>
</Sup> </Sup>
,{" "} ,{" "}

14
pnpm-lock.yaml generated
View File

@ -172,8 +172,8 @@ devDependencies:
specifier: ^2.1.2 specifier: ^2.1.2
version: 2.1.2 version: 2.1.2
'@types/node': '@types/node':
specifier: ^20.11.17 specifier: ^20.11.18
version: 20.11.17 version: 20.11.18
'@types/novnc__novnc': '@types/novnc__novnc':
specifier: ^1.3.4 specifier: ^1.3.4
version: 1.3.4 version: 1.3.4
@ -952,7 +952,7 @@ packages:
/@types/concat-stream@2.0.0: /@types/concat-stream@2.0.0:
resolution: {integrity: sha512-t3YCerNM7NTVjLuICZo5gYAXYoDvpuuTceCcFQWcDQz26kxUR5uIWolxbIR5jRNIXpMqhOpW/b8imCR1LEmuJw==} resolution: {integrity: sha512-t3YCerNM7NTVjLuICZo5gYAXYoDvpuuTceCcFQWcDQz26kxUR5uIWolxbIR5jRNIXpMqhOpW/b8imCR1LEmuJw==}
dependencies: dependencies:
'@types/node': 20.11.17 '@types/node': 20.11.18
dev: true dev: true
/@types/debug@4.1.12: /@types/debug@4.1.12:
@ -1029,8 +1029,8 @@ packages:
resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
dev: false dev: false
/@types/node@20.11.17: /@types/node@20.11.18:
resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==} resolution: {integrity: sha512-ABT5VWnnYneSBcNWYSCuR05M826RoMyMSGiFivXGx6ZUIsXb9vn4643IEwkg2zbEOSgAiSogtapN2fgc4mAPlw==}
dependencies: dependencies:
undici-types: 5.26.5 undici-types: 5.26.5
@ -1067,7 +1067,7 @@ packages:
/@types/sax@1.2.5: /@types/sax@1.2.5:
resolution: {integrity: sha512-9jWta97bBVC027/MShr3gLab8gPhKy4l6qpb+UJLF5pDm3501NvA7uvqVCW+REFtx00oTi6Cq9JzLwgq6evVgw==} resolution: {integrity: sha512-9jWta97bBVC027/MShr3gLab8gPhKy4l6qpb+UJLF5pDm3501NvA7uvqVCW+REFtx00oTi6Cq9JzLwgq6evVgw==}
dependencies: dependencies:
'@types/node': 20.11.17 '@types/node': 20.11.18
dev: false dev: false
/@types/scheduler@0.16.4: /@types/scheduler@0.16.4:
@ -5849,7 +5849,7 @@ packages:
'@types/concat-stream': 2.0.0 '@types/concat-stream': 2.0.0
'@types/debug': 4.1.12 '@types/debug': 4.1.12
'@types/is-empty': 1.2.1 '@types/is-empty': 1.2.1
'@types/node': 20.11.17 '@types/node': 20.11.18
'@types/unist': 3.0.2 '@types/unist': 3.0.2
'@ungap/structured-clone': 1.2.0 '@ungap/structured-clone': 1.2.0
concat-stream: 2.0.0 concat-stream: 2.0.0