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

refactor font preloading

Browse Source
This commit is contained in:
Jake Jarvis 2022-07-18 17:27:49 -04:00
parent de604f2f04
commit a788f673e9
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
8 changed files with 59 additions and 87 deletions
Show Stats 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]}`;
return (
<Item key={index}>
<Item key={item.text || index}>
<MenuItem {...item} current={isCurrent} />
</Item>
);

8
components/ThemeScript/ThemeScript.tsx
View File

@ -2,14 +2,14 @@ import { useMemo } from "react";
import { minify } from "uglify-js";
import { clientScript } from "./client";
export type ThemeScriptProps = {
export type ThemeScriptProps = JSX.IntrinsicElements["script"] & {
themeClassNames: {
[themeName: string]: string;
};
themeStorageKey: string;
};
const ThemeScript = ({ themeClassNames, themeStorageKey }: ThemeScriptProps) => {
const ThemeScript = ({ key, themeClassNames, themeStorageKey, ...rest }: ThemeScriptProps) => {
const minified = useMemo(() => {
// 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)
@ -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.
return (
<script
key="restore-theme"
id="restore-theme"
key={key} // separate on purpose!
{...rest}
dangerouslySetInnerHTML={{
// make it an IIFE:
__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 = {
regular: "Comic Neue",
};
export const preloadFonts = [
{
key: "comic-neue-700",
src: comicNeueLatin700NormalWoff2,
type: "font/woff2",
},
];
export const preloads = [];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

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

@ -15,14 +15,15 @@ export const name = {
regular: "Inter",
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",
src: interLatinVarFullNormalWoff2,
href: interLatinVarFullNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

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

@ -22,14 +22,15 @@ export const name = {
regular: "Roboto Mono",
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",
src: robotoMonoLatinVarWghtOnlyNormalWoff2,
href: robotoMonoLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

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

@ -176,6 +176,3 @@ export const themeClassNames = {
// local storage key
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 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() }} />

89
pages/previously.tsx
View File

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