feat: local fonts

.gitignore

@@ -52,3 +52,5 @@ node_modules/
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+public/fonts/

next.config.js

@@ -5,10 +5,58 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
+import path from 'node:path/posix'
+
 import { withSentryConfig } from '@sentry/nextjs'
+import fs from 'fs-extra'
+import { globby } from 'globby'
+import PQueue from 'p-queue'
+
+const queue = new PQueue({ concurrency: 3 })
 
 await import('./src/env.js')
 
+class CopyFontsWebpackPlugin {
+  static started = false
+  apply(/** @type {import('webpack').Compiler} */ compiler) {
+    compiler.hooks.beforeCompile.tapPromise(
+      'CopyFontsWebpackPlugin',
+      async () => {
+        if (CopyFontsWebpackPlugin.started) {
+          return
+        }
+        CopyFontsWebpackPlugin.started = true
+        const cssFiles = await globby(
+          path.resolve('node_modules/@fontsource-variable/**/*.css'),
+        )
+        const fontFiles = await globby(
+          path.resolve('node_modules/@fontsource-variable/**/files/*'),
+        )
+        const dest = path.resolve('public/fonts/')
+        await fs.ensureDir('./public/fonts')
+        await queue.addAll(
+          cssFiles.map((cssFile) => () => {
+            const fontName = /@fontsource-variable\/(.+)\//.exec(cssFile)[1]
+            return fs.copy(
+              cssFile,
+              path.resolve(dest, fontName, path.basename(cssFile)),
+            )
+          }),
+        )
+        await queue.addAll(
+          fontFiles.map((fontFile) => () => {
+            const fontName = /@fontsource-variable\/(.+)\//.exec(fontFile)[1]
+            return fs.copy(
+              fontFile,
+              path.resolve(dest, fontName, 'files', path.basename(fontFile)),
+            )
+          }),
+        )
+      },
+    )
+  }
+}
+
 /** @type {import("next").NextConfig} */
 const config = {
   eslint: {
@@ -21,7 +69,8 @@ const config = {
     testProxy: process.env.NODE_ENV === 'test',
   },
   trailingSlash: true,
-  webpack: (config) => {
+  webpack: (/** @type {import('webpack').Configuration} */ config) => {
+    config.plugins.push(new CopyFontsWebpackPlugin())
     config.module.rules.push({
       test: /\.md/,
       type: 'asset/source',

package.json

@@ -11,6 +11,11 @@
   },
   "dependencies": {
     "@cloudflare/next-on-pages": "^1.13.3",
+    "@fontsource-variable/noto-sans": "^5.1.0",
+    "@fontsource-variable/noto-sans-jp": "^5.1.0",
+    "@fontsource-variable/noto-sans-kr": "^5.1.0",
+    "@fontsource-variable/noto-sans-sc": "^5.1.0",
+    "@fontsource-variable/noto-sans-tc": "^5.1.0",
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -52,17 +57,22 @@
     "@playwright/test": "^1.47.2",
     "@tailwindcss/typography": "^0.5.15",
     "@types/eslint": "^8.56.10",
+    "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-next-on-pages": "^1.13.3",
     "eslint-plugin-prettier": "^5.2.1",
+    "fs-extra": "^11.2.0",
+    "globby": "^14.0.2",
+    "p-queue": "^8.0.1",
     "postcss": "^8.4.39",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",