impr: reduce initial loading time of settings page (@fehmer) (#5583)

Author: fehmer

.gitignore

@@ -125,3 +125,4 @@ copyAnticheatToDev.sh
 
 # ignore generated fonts
 frontend/src/webfonts-generated
+frontend/static/webfonts-preview

frontend/package-lock.json

@@ -50,6 +50,7 @@
     "normalize.css": "8.0.1",
     "postcss": "8.4.27",
     "sass": "1.70.0",
+    "subset-font": "2.3.0",
     "typescript": "5.3.3",
     "vite": "5.1.2",
     "vite-bundle-visualizer": "1.0.1",

frontend/package.json

@@ -0,0 +1,55 @@
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
+import Fonts from "../static/fonts/_list.json" assert { type: "json" };
+import subsetFont from "subset-font";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export async function generatePreviewFonts(debug) {
+  const srcDir = __dirname + "/../static/webfonts";
+  const targetDir = __dirname + "/../static/webfonts-preview";
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  const srcFiles = fs.readdirSync(srcDir);
+
+  for (const font of Fonts) {
+    if (font.systemFont) continue;
+
+    const display = font.display || font.name;
+
+    const fileNames = srcFiles.filter((it) =>
+      it.startsWith(font.name.replaceAll(" ", "") + "-")
+    );
+
+    if (fileNames.length !== 1)
+      throw new Error(
+        `cannot find font file for ${font.name}. Candidates: ${fileNames}`
+      );
+    const fileName = fileNames[0];
+
+    generateSubset(
+      srcDir + "/" + fileName,
+      targetDir + "/" + fileName,
+      display
+    );
+    if (debug) {
+      console.log(
+        `Processing ${font.name} with file ${fileName} to display "${display}".`
+      );
+    }
+  }
+}
+
+async function generateSubset(source, target, name, debug) {
+  const font = fs.readFileSync(source);
+  const subset = await subsetFont(font, name, {
+    targetFormat: "woff2",
+  });
+  fs.writeFileSync(target, subset);
+}
+//detect if we run this as a main
+if (import.meta.url.endsWith(process.argv[1])) {
+  generatePreviewFonts(true);
+}

frontend/scripts/font-preview.mjs

@@ -105,11 +105,25 @@ $font-defauls: (
 @each $font, $settings in $fonts {
   $config: map-merge($font-defauls, $settings);
   $src: "/webfonts/" + map-get($config, "src") + "." + map-get($config, "ext");
+  $previewDir: "webfonts-preview";
+  @if variable-exists(previewFontsPath) {
+    $previewDir: $previewFontsPath;
+  }
+
   @font-face {
     font-family: $font;
     font-style: map-get($config, "style");
     font-weight: map-get($config, "weight");
     font-display: map-get($config, "display");
     src: url($src) format(map-get($config, "format"));
   }
+
+  @font-face {
+    font-family: $font + " Preview";
+    font-style: map-get($config, "style");
+    font-weight: map-get($config, "weight");
+    font-display: map-get($config, "display");
+    src: url("/" + $previewDir + "/" + map-get($config, "src") + ".woff2")
+      format("woff2");
+  }
 }

frontend/src/styles/fonts.scss

@@ -636,7 +636,7 @@ async function fillSettingsPage(): Promise<void> {
         Config.fontFamily === font.name ? " active" : ""
       }" style="font-family:${
         font.display !== undefined ? font.display : font.name
-      }" data-config-value="${font.name.replace(/ /g, "_")}">${
+      } Preview" data-config-value="${font.name.replace(/ /g, "_")}">${
         font.display !== undefined ? font.display : font.name
       }</button>`;
     }

frontend/src/ts/pages/settings.ts

@@ -34,7 +34,8 @@
   },
   {
     "name": "Comic Sans MS",
-    "display": "Helvetica"
+    "display": "Helvetica",
+    "systemFont": true
   },
   {
     "name": "Oxygen"
@@ -46,7 +47,8 @@
     "name": "Itim"
   },
   {
-    "name": "Courier"
+    "name": "Courier",
+    "systemFont": true
   },
   {
     "name": "Comfortaa"
@@ -77,7 +79,8 @@
     "name": "Ubuntu Mono"
   },
   {
-    "name": "Georgia"
+    "name": "Georgia",
+    "systemFont": true
   },
   {
     "name": "Cascadia Mono"

frontend/static/fonts/_list.json

@@ -10,6 +10,7 @@ import autoprefixer from "autoprefixer";
 import "dotenv/config";
 import { fontawesomeSubset } from "fontawesome-subset";
 import { getFontawesomeConfig } from "./scripts/fontawesome.mjs";
+import { generatePreviewFonts } from "./scripts/font-preview.mjs";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
@@ -146,7 +147,10 @@ const DEV_CONFIG = {
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `$fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";`,
+        additionalData: `
+        $fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";
+        $previewFontsPath:"webfonts";
+        `,
       },
     },
   },
@@ -165,6 +169,13 @@ const BUILD_CONFIG = {
         });
       },
     },
+    {
+      name: "vite-plugin-webfonts-preview",
+      apply: "build",
+      buildStart() {
+        generatePreviewFonts();
+      },
+    },
     splitVendorChunkPlugin(),
     VitePWA({
       injectRegister: "networkfirst",