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

fontsource -> next/font

Browse Source
This commit is contained in:
Jake Jarvis 2022-10-28 09:26:01 -04:00
parent 840e73b49a
commit 6520e6fa2e
11 changed files with 45 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/dependabot.yml vendored
View File

@ -7,7 +7,6 @@ updates:
interval: daily interval: daily
versioning-strategy: increase versioning-strategy: increase
ignore: ignore:
- dependency-name: "@fontsource/*"
- dependency-name: "@types/*" - dependency-name: "@types/*"
- dependency-name: "@jakejarvis/eslint-config" - dependency-name: "@jakejarvis/eslint-config"
labels: labels:

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

@ -1,30 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff";
import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2";
import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";
export const name = {
regular: "Comic Neue",
};
export const preloads = [];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
},
];

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

@ -1,59 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import interLatin400NormalWoff from "@fontsource/inter/files/inter-latin-400-normal.woff";
import interLatin400NormalWoff2 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
import interLatin500NormalWoff from "@fontsource/inter/files/inter-latin-500-normal.woff";
import interLatin500NormalWoff2 from "@fontsource/inter/files/inter-latin-500-normal.woff2";
import interLatin700NormalWoff from "@fontsource/inter/files/inter-latin-700-normal.woff";
import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
// Variable
import interLatinVarWghtOnlyNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-wghtOnly-normal.woff2";
// note: inter does have italics, of course, but google fonts has refused to add them.
// https://github.com/google/fonts/issues/2386
export const name = {
regular: "Inter",
variable: "Inter var",
};
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{
href: interLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 500,
src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
},
{
fontFamily: name.variable,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 900",
src: `url(${interLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
];

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

@ -1,56 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import robotoMonoLatin400NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff";
import robotoMonoLatin400NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2";
import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff";
import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
// Variable
import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
export const name = {
regular: "Roboto Mono",
variable: "Roboto Mono var",
};
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{
href: robotoMonoLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 500,
src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
},
{
fontFamily: name.variable,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
];

3
lib/styles/fonts/index.ts
View File

@ -1,3 +0,0 @@
export * as ComicNeue from "./ComicNeue";
export * as Inter from "./Inter";
export * as RobotoMono from "./RobotoMono";

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

@ -6,7 +6,17 @@ import hexToRgba from "./utils/hex-to-rgba";
import normalizeStyles from "./utils/normalize"; import normalizeStyles from "./utils/normalize";
// web fonts // web fonts
import { Inter, RobotoMono } from "./fonts"; import { Inter, Roboto_Mono } from "@next/font/google";
export const inter = Inter({
weight: "variable",
display: "fallback",
preload: true,
});
export const robotoMono = Roboto_Mono({
weight: "variable",
display: "fallback",
preload: true,
});
// https://stitches.dev/docs/typescript#type-a-css-object // https://stitches.dev/docs/typescript#type-a-css-object
export type CSS = Stitches.CSS<typeof stitchesConfig>; export type CSS = Stitches.CSS<typeof stitchesConfig>;
@ -23,10 +33,8 @@ export const {
} = createStitches({ } = createStitches({
theme: { theme: {
fonts: { fonts: {
sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, sans: `${inter.style.fontFamily}, sans-serif`,
sansVar: `"${Inter.name.variable}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, mono: `${robotoMono.style.fontFamily}, monospace`,
mono: `"${RobotoMono.name.regular}", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
monoVar: `"${RobotoMono.name.variable}", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
}, },
colors: { colors: {
@ -138,25 +146,14 @@ export const globalStyles = globalCss(
// @ts-ignore // @ts-ignore
normalizeStyles, normalizeStyles,
{ {
"@font-face": [...Inter.family, ...RobotoMono.family],
body: { body: {
fontFamily: theme.fonts.sans, fontFamily: theme.fonts.sans,
backgroundColor: theme.colors.backgroundInner, backgroundColor: theme.colors.backgroundInner,
transition: `background ${theme.transitions.fade}`, transition: `background ${theme.transitions.fade}`,
// variable font support?
"@supports (font-variation-settings: normal)": {
fontFamily: theme.fonts.sansVar,
},
}, },
"code, kbd, samp, pre": { "code, kbd, samp, pre": {
fontFamily: theme.fonts.mono, fontFamily: theme.fonts.mono,
"@supports (font-variation-settings: normal)": {
fontFamily: theme.fonts.monoVar,
},
}, },
} }
); );

21
next.config.js
View File

@ -33,18 +33,15 @@ module.exports = (phase) => {
legacyBrowsers: false, legacyBrowsers: false,
newNextLinkBehavior: true, // https://github.com/vercel/next.js/pull/36436 newNextLinkBehavior: true, // https://github.com/vercel/next.js/pull/36436
optimisticClientCache: false, // https://github.com/vercel/next.js/discussions/40268#discussioncomment-3572642 optimisticClientCache: false, // https://github.com/vercel/next.js/discussions/40268#discussioncomment-3572642
fontLoaders: [
{
// https://beta.nextjs.org/docs/optimizing/fonts#specifying-a-subset
loader: "@next/font/google",
options: { subsets: ["latin"] },
},
],
}, },
webpack: (config) => { webpack: (config) => {
// this lets us statically import webfonts like we would images, allowing cool things like preloading them
config.module.rules.push({
test: /\.(woff|woff2|eot|ttf|otf)$/i,
issuer: { and: [/\.(js|ts)x?$/] },
type: "asset/resource",
generator: {
filename: "static/media/[name].[hash:8][ext]",
},
});
// allow processing SVGs from the below packages directly instead of through their different exports, and leave // allow processing SVGs from the below packages directly instead of through their different exports, and leave
// other static imports of SVGs alone. // other static imports of SVGs alone.
// see: ./components/Icons/index.ts // see: ./components/Icons/index.ts
@ -95,10 +92,6 @@ module.exports = (phase) => {
{ {
source: "/pubkey.asc", source: "/pubkey.asc",
headers: [ headers: [
{
key: "Cache-Control",
value: "private, no-cache, no-store, must-revalidate",
},
{ {
key: "Content-Type", key: "Content-Type",
value: "text/plain; charset=utf-8", value: "text/plain; charset=utf-8",

44
package-lock.json generated
View File

@ -7,11 +7,9 @@
"name": "jarv.is", "name": "jarv.is",
"license": "(MIT AND CC-BY-4.0)", "license": "(MIT AND CC-BY-4.0)",
"dependencies": { "dependencies": {
"@fontsource/comic-neue": "4.5.10",
"@fontsource/inter": "4.5.14",
"@fontsource/roboto-mono": "4.5.8",
"@giscus/react": "^2.2.0", "@giscus/react": "^2.2.0",
"@hcaptcha/react-hcaptcha": "^1.4.4", "@hcaptcha/react-hcaptcha": "^1.4.4",
"@next/font": "13.0.1-canary.0",
"@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649", "@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649",
"@octokit/graphql": "^5.0.4", "@octokit/graphql": "^5.0.4",
"@octokit/graphql-schema": "^12.21.0", "@octokit/graphql-schema": "^12.21.0",
@ -1917,21 +1915,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@fontsource/comic-neue": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/comic-neue/-/comic-neue-4.5.10.tgz",
"integrity": "sha512-pLqW/lYy+/SOfzW/zn0+s8Lv9EDvYe/Rz1CK8Tsbcvh4SI9DuGGc46FFAfFI7MTpZKXhJCRwYz2bmvAV5fC5fw=="
},
"node_modules/@fontsource/inter": {
"version": "4.5.14",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
"integrity": "sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q=="
},
"node_modules/@fontsource/roboto-mono": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.8.tgz",
"integrity": "sha512-AW44UkbQD0w1CT5mzDbsvhGZ6/bb0YmZzoELj6Sx8vcVEzcbYGUdt2Dtl5zqlOuYMWQFY1mniwWyVv+Bm/lVxw=="
},
"node_modules/@giscus/react": { "node_modules/@giscus/react": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz", "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz",
@ -2120,6 +2103,11 @@
"glob": "7.1.7" "glob": "7.1.7"
} }
}, },
"node_modules/@next/font": {
"version": "13.0.1-canary.0",
"resolved": "https://registry.npmjs.org/@next/font/-/font-13.0.1-canary.0.tgz",
"integrity": "sha512-Z0h1dhDoT+BxK3KCHlUGuBcqm+Okd/bffEYLUFTIlEh1p9WflkjBQfePvxte9EiIEZVBmIpjn5mSKJ/QmShuMw=="
},
"node_modules/@next/swc-android-arm-eabi": { "node_modules/@next/swc-android-arm-eabi": {
"version": "13.0.1-canary.0", "version": "13.0.1-canary.0",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.1-canary.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.1-canary.0.tgz",
@ -12820,21 +12808,6 @@
} }
} }
}, },
"@fontsource/comic-neue": {
"version": "4.5.10",
"resolved": "https://registry.npmjs.org/@fontsource/comic-neue/-/comic-neue-4.5.10.tgz",
"integrity": "sha512-pLqW/lYy+/SOfzW/zn0+s8Lv9EDvYe/Rz1CK8Tsbcvh4SI9DuGGc46FFAfFI7MTpZKXhJCRwYz2bmvAV5fC5fw=="
},
"@fontsource/inter": {
"version": "4.5.14",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
"integrity": "sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q=="
},
"@fontsource/roboto-mono": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.8.tgz",
"integrity": "sha512-AW44UkbQD0w1CT5mzDbsvhGZ6/bb0YmZzoELj6Sx8vcVEzcbYGUdt2Dtl5zqlOuYMWQFY1mniwWyVv+Bm/lVxw=="
},
"@giscus/react": { "@giscus/react": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz", "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz",
@ -12980,6 +12953,11 @@
"glob": "7.1.7" "glob": "7.1.7"
} }
}, },
"@next/font": {
"version": "13.0.1-canary.0",
"resolved": "https://registry.npmjs.org/@next/font/-/font-13.0.1-canary.0.tgz",
"integrity": "sha512-Z0h1dhDoT+BxK3KCHlUGuBcqm+Okd/bffEYLUFTIlEh1p9WflkjBQfePvxte9EiIEZVBmIpjn5mSKJ/QmShuMw=="
},
"@next/swc-android-arm-eabi": { "@next/swc-android-arm-eabi": {
"version": "13.0.1-canary.0", "version": "13.0.1-canary.0",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.1-canary.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.1-canary.0.tgz",

4
package.json
View File

@ -17,11 +17,9 @@
"lint": "eslint . --ext js,jsx,ts,tsx,md,mdx" "lint": "eslint . --ext js,jsx,ts,tsx,md,mdx"
}, },
"dependencies": { "dependencies": {
"@fontsource/comic-neue": "4.5.10",
"@fontsource/inter": "4.5.14",
"@fontsource/roboto-mono": "4.5.8",
"@giscus/react": "^2.2.0", "@giscus/react": "^2.2.0",
"@hcaptcha/react-hcaptcha": "^1.4.4", "@hcaptcha/react-hcaptcha": "^1.4.4",
"@next/font": "13.0.1-canary.0",
"@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649", "@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649",
"@octokit/graphql": "^5.0.4", "@octokit/graphql": "^5.0.4",
"@octokit/graphql-schema": "^12.21.0", "@octokit/graphql-schema": "^12.21.0",

6
pages/_document.tsx
View File

@ -1,7 +1,6 @@
import { Html, Head, Main, NextScript } from "next/document"; import { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript"; import ThemeScript from "../components/ThemeScript";
import { getCssText, themeClassNames, themeStorageKey } 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
@ -12,11 +11,6 @@ const Document = () => {
{/* 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 id="restore-theme" {...{ themeClassNames, themeStorageKey }} /> <ThemeScript id="restore-theme" {...{ themeClassNames, themeStorageKey }} />
{/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
{[...Inter.preloads, ...RobotoMono.preloads].map(({ href, type }) => (
<link key={href} rel="preload" as="font" {...{ type, href }} crossOrigin="anonymous" />
))}
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} /> <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
</Head> </Head>
<body> <body>

24
pages/previously.tsx
View File

@ -1,4 +1,5 @@
import { NextSeo } from "next-seo"; import { NextSeo } from "next-seo";
import { Comic_Neue } from "@next/font/google";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
import Content from "../components/Content"; import Content from "../components/Content";
import PageTitle from "../components/PageTitle"; import PageTitle from "../components/PageTitle";
@ -8,8 +9,7 @@ import IFrame from "../components/IFrame";
import CodeInline from "../components/CodeInline"; import CodeInline from "../components/CodeInline";
import HorizontalRule from "../components/HorizontalRule"; import HorizontalRule from "../components/HorizontalRule";
import { Windows95Logo } from "../components/Icons"; import { Windows95Logo } from "../components/Icons";
import { styled, theme, globalCss } from "../lib/styles/stitches.config"; import { styled, theme } from "../lib/styles/stitches.config";
import { ComicNeue } from "../lib/styles/fonts";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import img_wayback from "../public/static/images/previously/wayback.png"; import img_wayback from "../public/static/images/previously/wayback.png";
@ -182,20 +182,22 @@ const Previously = () => {
); );
}; };
const comicNeue = Comic_Neue({
weight: "700",
display: "swap",
fallback: ["'Comic Sans MS'", "'Comic Sans'"],
adjustFontFallback: false,
preload: false,
});
// a complete sh*tshow of "global" overrides, mainly to compensate for font change // a complete sh*tshow of "global" overrides, mainly to compensate for font change
Previously.getLayout = (page: ReactElement) => { Previously.getLayout = (page: ReactElement) => {
// only declare Comic Neue typeface if/when this page is loaded.
// note: other "global" styles for this page are declared via the `css={{...}}` prop below instead, so they don't
// persist when navigating away to a different page.
globalCss({
"@font-face": [...ComicNeue.family],
})();
return ( return (
<Layout <Layout
css={{ css={{
fontFamily: `"${ComicNeue.name.regular}", "Comic Sans MS", "Comic Sans", ${theme.fonts.sans.value}`, // only declare Comic Neue typeface if/when this page is loaded.
fontWeight: 600, fontFamily: `${comicNeue.style.fontFamily}, ${theme.fonts.sans.value}`,
fontWeight: 700,
// classic windows 9x cursor easter egg // classic windows 9x cursor easter egg
cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto`, cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto`,