jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-14 18:50:50 -05:00
Code Issues Activity

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
3 changed files with 22 additions and 16 deletions
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 clsx from "clsx";
import { JsonLd } from "react-schemaorg"; import { JsonLd } from "react-schemaorg";
import Analytics from "./analytics"; import Analytics from "./analytics";
import { ThemeProvider } from "../contexts/ThemeContext"; import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext";
import Header from "../components/Header"; import Header from "../components/Header";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent"; import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent";
@@ -26,6 +26,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return ( return (
<html lang={config.siteLocale} suppressHydrationWarning> <html lang={config.siteLocale} suppressHydrationWarning>
<head> <head>
<ThemeScript />
<JsonLd<Person> <JsonLd<Person>
item={{ item={{
"@context": "https://schema.org", "@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) => { const Tweet = async ({ id, className, ...rest }: TweetProps) => {
try { try {
const tweet = await getTweet(id); const tweet = await getTweet(id, {
next: {
// cache for 12 hours
revalidate: 43200,
},
});
return ( return (
<div className={clsx(styles.tweet, className)}> <div className={clsx(styles.tweet, className)}>

16
contexts/ThemeContext.tsx
View File

@@ -50,21 +50,21 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
setTheme: setPreferredTheme, setTheme: setPreferredTheme,
}; };
return ( return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
<ThemeContext.Provider value={providerValues}> };
// 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 <script
id="restore-theme" id="restore-theme"
// unminified: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: __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){}})()", "(()=>{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>
);
};
// debugging help pls // debugging help pls
if (process.env.NODE_ENV !== "production") { if (process.env.NODE_ENV !== "production") {