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

load theme restoration script earlier in the <head>

Browse Source
This commit is contained in:
Jake Jarvis 2025-03-31 09:38:41 -04:00
parent ec7c9fae54
commit 4203516cf3
Signed by: jake
SSH Key Fingerprint: SHA256:nCkvAjYA6XaSPUqc4TfbBQTpzr8Xj7ritg/sGInCdkc
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout.tsx
View File

@ -1,7 +1,7 @@
import clsx from "clsx";
import { JsonLd } from "react-schemaorg";
import Analytics from "./analytics";
import { ThemeProvider } from "../contexts/ThemeContext";
import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent";
@ -26,6 +26,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<html lang={config.siteLocale} suppressHydrationWarning>
<head>
<ThemeScript />
<JsonLd<Person>
item={{
"@context": "https://schema.org",

7
components/Tweet/Tweet.tsx
View File

@ -14,7 +14,12 @@ export type TweetProps = Omit<ComponentPropsWithoutRef<typeof EmbeddedTweet>, "t
const Tweet = async ({ id, className, ...rest }: TweetProps) => {
try {
const tweet = await getTweet(id);
const tweet = await getTweet(id, {
next: {
// cache for 12 hours
revalidate: 43200,
},
});
return (
<div className={clsx(styles.tweet, className)}>

28
contexts/ThemeContext.tsx
View File

@ -50,22 +50,22 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
setTheme: setPreferredTheme,
};
return (
<ThemeContext.Provider value={providerValues}>
<script
id="restore-theme"
// unminified: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
dangerouslySetInnerHTML={{
__html:
"(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
}}
/>
{children}
</ThemeContext.Provider>
);
return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
};
// loaded in <head> by layout.tsx to avoid blinding flash of unstyled content (FOUC). irrelevant after the first render
// since the theme provider above takes over.
// unminified JS: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
export const ThemeScript = () => (
<script
id="restore-theme"
dangerouslySetInnerHTML={{
__html:
"(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
}}
/>
);
// debugging help pls
if (process.env.NODE_ENV !== "production") {
ThemeContext.displayName = "ThemeContext";