jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 19:45:33 -04:00
Code Issues Activity

refactor font preloading

Browse Source
This commit is contained in:
Jake Jarvis
2022-07-18 17:27:49 -04:00
parent de604f2f04
commit a788f673e9
8 changed files with 59 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Menu/Menu.tsx
View File

@@ -50,7 +50,7 @@ const Menu = ({ ...rest }: MenuProps) => {
const isCurrent = item.href === `/${router.pathname.split("/")[1]}`; const isCurrent = item.href === `/${router.pathname.split("/")[1]}`;
return ( return (
<Item key={index}> <Item key={item.text || index}>
<MenuItem {...item} current={isCurrent} /> <MenuItem {...item} current={isCurrent} />
</Item> </Item>
); );

8
components/ThemeScript/ThemeScript.tsx
View File

@@ -2,14 +2,14 @@ import { useMemo } from "react";
import { minify } from "uglify-js"; import { minify } from "uglify-js";
import { clientScript } from "./client"; import { clientScript } from "./client";
export type ThemeScriptProps = { export type ThemeScriptProps = JSX.IntrinsicElements["script"] & {
themeClassNames: { themeClassNames: {
[themeName: string]: string; [themeName: string]: string;
}; };
themeStorageKey: string; themeStorageKey: string;
}; };
const ThemeScript = ({ themeClassNames, themeStorageKey }: ThemeScriptProps) => { const ThemeScript = ({ key, themeClassNames, themeStorageKey, ...rest }: ThemeScriptProps) => {
const minified = useMemo(() => { const minified = useMemo(() => {
// since the client function will end up being injected as a plain dumb string, we need to set dynamic values here: // since the client function will end up being injected as a plain dumb string, we need to set dynamic values here:
const functionString = String(clientScript) const functionString = String(clientScript)
@@ -53,8 +53,8 @@ const ThemeScript = ({ themeClassNames, themeStorageKey }: ThemeScriptProps) =>
// TODO: using next/script *might* be possible after https://github.com/vercel/next.js/pull/36364 is merged. // TODO: using next/script *might* be possible after https://github.com/vercel/next.js/pull/36364 is merged.
return ( return (
<script <script
key="restore-theme" key={key} // separate on purpose!
id="restore-theme" {...rest}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
// make it an IIFE: // make it an IIFE:
__html: `(function(){${minified}})()`, __html: `(function(){${minified}})()`,

10
lib/styles/fonts/ComicNeue.ts
View File

@@ -13,13 +13,9 @@ import comicNeueLatin700ItalicWoff2 from "@fontsource/comic-neue/files/comic-neu
export const name = { export const name = {
regular: "Comic Neue", regular: "Comic Neue",
}; };
export const preloadFonts = [
{ export const preloads = [];
key: "comic-neue-700",
src: comicNeueLatin700NormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, fontFamily: name.regular,

9
lib/styles/fonts/Inter.ts
View File

@@ -15,14 +15,15 @@ export const name = {
regular: "Inter", regular: "Inter",
variable: "Inter var", variable: "Inter var",
}; };
// re-export hashed URL(s) of the most prominent file so we can preload it in head:
export const preloadFonts = [ // re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{ {
key: "inter-var", href: interLatinVarFullNormalWoff2,
src: interLatinVarFullNormalWoff2,
type: "font/woff2", type: "font/woff2",
}, },
]; ];
export const family: AtRule.FontFace[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, fontFamily: name.regular,

9
lib/styles/fonts/RobotoMono.ts
View File

@@ -22,14 +22,15 @@ export const name = {
regular: "Roboto Mono", regular: "Roboto Mono",
variable: "Roboto Mono var", variable: "Roboto Mono var",
}; };
// re-export hashed URL(s) of the most prominent file so we can preload it in head:
export const preloadFonts = [ // re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{ {
key: "roboto-mono-var", href: robotoMonoLatinVarWghtOnlyNormalWoff2,
src: robotoMonoLatinVarWghtOnlyNormalWoff2,
type: "font/woff2", type: "font/woff2",
}, },
]; ];
export const family: AtRule.FontFace[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, fontFamily: name.regular,

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

@@ -176,6 +176,3 @@ export const themeClassNames = {
// local storage key // local storage key
export const themeStorageKey = "theme"; export const themeStorageKey = "theme";
// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts];

16
pages/_document.tsx
View File

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

89
pages/previously.tsx
View File

@@ -1,6 +1,4 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
import Head from "next/head";
import { NextSeo } from "next-seo"; import { NextSeo } from "next-seo";
import Marquee from "react-fast-marquee"; import Marquee from "react-fast-marquee";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
@@ -198,65 +196,50 @@ Previously.getLayout = (page: ReactElement) => {
})(); })();
return ( return (
<> <Layout
<Head> css={{
{ComicNeue.preloadFonts.map((font) => ( fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
<link fontWeight: 600,
key={`font-${font.key}`}
rel="preload"
as="font"
type={font.type}
href={font.src}
crossOrigin="anonymous"
/>
))}
</Head>
<Layout // classic windows 9x cursor easter egg
css={{ cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto`,
fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
fontWeight: 600,
// classic windows 9x cursor easter egg "a:hover, button": {
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto`, // windows 9x hand cursor
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto`,
},
"a:hover, button": { "& em": {
// windows 9x hand cursor fontStyle: "revert !important",
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto`, },
"& header": {
// title text
"& > nav > a:first-of-type > span:last-of-type": {
fontSize: "1.4em",
fontWeight: 700,
}, },
"& em": { // menu item text
fontStyle: "revert !important", "& > nav > ul > li > a > span": {
},
"& header": {
// title text
"& > nav > a:first-of-type > span:last-of-type": {
fontSize: "1.4em",
fontWeight: 700,
},
// menu item text
"& > nav > ul > li > a > span": {
fontSize: "1.1em",
fontWeight: 700,
lineHeight: 1.1,
},
},
"& main > div > div": {
fontSize: "1.1em", fontSize: "1.1em",
textAlign: "center", fontWeight: 700,
lineHeight: 1.1,
}, },
},
"& footer > div": { "& main > div > div": {
fontSize: "0.95em", fontSize: "1.1em",
}, textAlign: "center",
}} },
>
{page} "& footer > div": {
</Layout> fontSize: "0.95em",
</> },
}}
>
{page}
</Layout>
); );
}; };