diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 280323ff..60b10226 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -7,7 +7,6 @@ updates: interval: daily versioning-strategy: increase ignore: - - dependency-name: "@fontsource/*" - dependency-name: "@types/*" - dependency-name: "@jakejarvis/eslint-config" labels: diff --git a/lib/styles/fonts/ComicNeue.ts b/lib/styles/fonts/ComicNeue.ts deleted file mode 100644 index 40948f03..00000000 --- a/lib/styles/fonts/ComicNeue.ts +++ /dev/null @@ -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")`, - }, -]; diff --git a/lib/styles/fonts/Inter.ts b/lib/styles/fonts/Inter.ts deleted file mode 100644 index 1e17de0a..00000000 --- a/lib/styles/fonts/Inter.ts +++ /dev/null @@ -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 `` (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")`, - }, -]; diff --git a/lib/styles/fonts/RobotoMono.ts b/lib/styles/fonts/RobotoMono.ts deleted file mode 100644 index 679e940c..00000000 --- a/lib/styles/fonts/RobotoMono.ts +++ /dev/null @@ -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 `` (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")`, - }, -]; diff --git a/lib/styles/fonts/index.ts b/lib/styles/fonts/index.ts deleted file mode 100644 index f8617df4..00000000 --- a/lib/styles/fonts/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * as ComicNeue from "./ComicNeue"; -export * as Inter from "./Inter"; -export * as RobotoMono from "./RobotoMono"; diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index c5d2f35c..36c0d853 100644 --- a/lib/styles/stitches.config.ts +++ b/lib/styles/stitches.config.ts @@ -6,7 +6,17 @@ import hexToRgba from "./utils/hex-to-rgba"; import normalizeStyles from "./utils/normalize"; // 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 export type CSS = Stitches.CSS; @@ -23,10 +33,8 @@ export const { } = createStitches({ theme: { fonts: { - sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, - sansVar: `"${Inter.name.variable}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, - 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`, + sans: `${inter.style.fontFamily}, sans-serif`, + mono: `${robotoMono.style.fontFamily}, monospace`, }, colors: { @@ -138,25 +146,14 @@ export const globalStyles = globalCss( // @ts-ignore normalizeStyles, { - "@font-face": [...Inter.family, ...RobotoMono.family], - body: { fontFamily: theme.fonts.sans, backgroundColor: theme.colors.backgroundInner, transition: `background ${theme.transitions.fade}`, - - // variable font support? - "@supports (font-variation-settings: normal)": { - fontFamily: theme.fonts.sansVar, - }, }, "code, kbd, samp, pre": { fontFamily: theme.fonts.mono, - - "@supports (font-variation-settings: normal)": { - fontFamily: theme.fonts.monoVar, - }, }, } ); diff --git a/next.config.js b/next.config.js index 21689831..d91495d5 100644 --- a/next.config.js +++ b/next.config.js @@ -33,18 +33,15 @@ module.exports = (phase) => { legacyBrowsers: false, newNextLinkBehavior: true, // https://github.com/vercel/next.js/pull/36436 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) => { - // 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 // other static imports of SVGs alone. // see: ./components/Icons/index.ts @@ -95,10 +92,6 @@ module.exports = (phase) => { { source: "/pubkey.asc", headers: [ - { - key: "Cache-Control", - value: "private, no-cache, no-store, must-revalidate", - }, { key: "Content-Type", value: "text/plain; charset=utf-8", diff --git a/package-lock.json b/package-lock.json index b891d2b2..eb0bb287 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,11 +7,9 @@ "name": "jarv.is", "license": "(MIT AND CC-BY-4.0)", "dependencies": { - "@fontsource/comic-neue": "4.5.10", - "@fontsource/inter": "4.5.14", - "@fontsource/roboto-mono": "4.5.8", "@giscus/react": "^2.2.0", "@hcaptcha/react-hcaptcha": "^1.4.4", + "@next/font": "13.0.1-canary.0", "@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649", "@octokit/graphql": "^5.0.4", "@octokit/graphql-schema": "^12.21.0", @@ -1917,21 +1915,6 @@ "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": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz", @@ -2120,6 +2103,11 @@ "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": { "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", @@ -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": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.0.tgz", @@ -12980,6 +12953,11 @@ "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": { "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", diff --git a/package.json b/package.json index 4d398f30..9dde19b4 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,9 @@ "lint": "eslint . --ext js,jsx,ts,tsx,md,mdx" }, "dependencies": { - "@fontsource/comic-neue": "4.5.10", - "@fontsource/inter": "4.5.14", - "@fontsource/roboto-mono": "4.5.8", "@giscus/react": "^2.2.0", "@hcaptcha/react-hcaptcha": "^1.4.4", + "@next/font": "13.0.1-canary.0", "@novnc/novnc": "github:novnc/novnc#cd94c2aed2582fd85ec5ecc444967fc7ec60a649", "@octokit/graphql": "^5.0.4", "@octokit/graphql-schema": "^12.21.0", diff --git a/pages/_document.tsx b/pages/_document.tsx index 599c1718..608b6a8e 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,7 +1,6 @@ import { Html, Head, Main, NextScript } from "next/document"; import ThemeScript from "../components/ThemeScript"; 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 @@ -12,11 +11,6 @@ const Document = () => { {/* inject a small script to set/restore the user's theme ASAP */} - {/* preload highest priority fonts defined in ../lib/styles/fonts/ */} - {[...Inter.preloads, ...RobotoMono.preloads].map(({ href, type }) => ( - - ))} -