jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 05:01:16 -04:00
Code Issues Activity

React 18 (#863)

Browse Source 
* gymnastics to make theme script work with react 18 hydration

* try next 12.1.3 canary to fix SSG head tags?

* revert theme script changes

* next 12.1.3-canary.3

* double-revert some of the use-theme.tsx changes

* separate theme restoration script & move to _document

* bump next

* bump next (again)

* clean up some theme stuff

* use hashed image URLs in webmanifest and feeds

* text experimental react config

* Update ThemeScript.tsx

* switch selfie image to `layout="raw"`

* use `layout="raw"` for all non-imported images

* revert raw images in some places, messes up responsiveness

* fix nitpicky "no divs inside buttons" html validation error

* fix react-player hydration errors

* fix hydration errors from server/client time zone differences

* clean up hydration fixes

* Update format-date.ts

* last-minute cleanup
This commit is contained in:
Jake Jarvis
2022-04-06 09:37:16 -04:00
committed by GitHub
parent 0a741b4282
commit eccf2108c7
29 changed files with 575 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/ThemeScript/ThemeScript.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { darkModeQuery, themeStorageKey, themeClassNames } from "../../lib/styles/helpers/themes";
// comments are up here to avoid having them inside the actual client output:
// - `p` is the user's saved preference
// - `c` is the map of theme -> classname
// - `l` is the list of <html>'s current class(es), which the `cn` values are removed to start fresh
// - `q` is always the CSS media query for prefers dark mode
// - `m` is the listener which tests that media query
// - `try/catch` is in case I messed something up here bigly... (will default to light theme)
/* eslint-disable no-empty, no-var, one-var */
const clientScript = () => {
try {
var p = localStorage.getItem("__STORAGE_KEY__"),
c = "__CLASS_NAMES__",
l = document.documentElement.classList;
l.remove("__LIST_OF_CLASSES__");
if (!p || p === "system") {
var q = "__MEDIA_QUERY__",
m = window.matchMedia(q);
m.media !== q || m.matches ? l.add(c["dark"]) : l.add(c["light"]);
} else {
l.add(c[p]);
}
} catch (e) {}
};
/* eslint-enable no-empty, no-var, one-var */
// since the function above will end up being injected as a plain dumb string, we need to set the dynamic values here:
const prepareScript = (script: unknown) => {
const functionString = String(script)
.replace('"__MEDIA_QUERY__"', `"${darkModeQuery}"`)
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames))
.replace(
'"__LIST_OF_CLASSES__"',
Object.values(themeClassNames)
.map((t: string) => `"${t}"`)
.join(",")
);
// somewhat "minify" the final code by removing tabs/newlines:
// https://github.com/sindresorhus/condense-whitespace/blob/main/index.js
// .replace(/\s{2,}/gu, "")
// .trim();
// make it an IIFE:
return `(${functionString})()`;
};
// the script tag injected manually into `<head>` in _document.tsx.
// 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 `<html>` attributes even more.
const ThemeScript = () => (
<script
key="restore-theme"
dangerouslySetInnerHTML={{
__html: prepareScript(clientScript),
}}
/>
);
export default ThemeScript;