1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:46:39 -04:00

refactor font preloading

This commit is contained in:
2022-07-18 17:27:49 -04:00
parent de604f2f04
commit a788f673e9
8 changed files with 59 additions and 87 deletions

View File

@ -1,6 +1,7 @@
import { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript/ThemeScript";
import { getCssText, themeClassNames, themeStorageKey, preloadFonts } from "../lib/styles/stitches.config";
import { getCssText, themeClassNames, themeStorageKey } from "../lib/styles/stitches.config";
import { Inter, RobotoMono } from "../lib/styles/fonts";
import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document
@ -9,18 +10,11 @@ const Document = () => {
<Html lang={config.siteLocale} className={themeClassNames["light"]}>
<Head>
{/* inject a small script to set/restore the user's theme ASAP */}
<ThemeScript {...{ themeClassNames, themeStorageKey }} />
<ThemeScript id="restore-theme" {...{ themeClassNames, themeStorageKey }} />
{/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
{preloadFonts.map((font) => (
<link
key={`font-${font.key}`}
rel="preload"
as="font"
type={font.type}
href={font.src}
crossOrigin="anonymous"
/>
{[...Inter.preloads, ...RobotoMono.preloads].map(({ href, type }) => (
<link key={href} rel="preload" as="font" {...{ type, href }} crossOrigin="anonymous" />
))}
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />