refactor font-preview

Author: fehmer

.gitignore

@@ -126,7 +126,6 @@ copyAnticheatToDev.sh
 
 # ignore generated fonts
 frontend/src/webfonts-generated
-frontend/static/webfonts-preview
 
 .turbo
 frontend/.env.sentry-build-plugin

frontend/vite-plugins/font-preview.ts

@@ -11,67 +11,45 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 /**
- * Generate a preview file from each font in `static/webfonts` into `static/webfonts-preview`.
+ * Generate a preview file from each font in `static/webfonts` into `dist/webfonts-preview`.
  * A preview file only contains the characters needed to show the preview.
  * @returns
  */
 export function fontPreview(): Plugin {
   return {
     name: "vite-plugin-webfonts-preview",
     apply: "build",
-    async buildStart() {
+
+    async generateBundle() {
+      const srcDir = __dirname + "/../static/webfonts";
       const start = performance.now();
       console.log("\nCreating webfonts preview...");
 
-      await generatePreviewFonts();
-
-      const end = performance.now();
-      console.log(
-        `Creating webfonts preview took ${Math.round(end - start)} ms`,
-      );
-    },
-  };
-}
+      for (const name of Object.keys(Fonts)) {
+        const font = Fonts[name as KnownFontName];
+        if (font.systemFont) continue;
 
-async function generatePreviewFonts(debug: boolean = false): Promise<void> {
-  const srcDir = __dirname + "/../static/webfonts";
-  const targetDir = __dirname + "/../static/webfonts-preview";
-  fs.mkdirSync(targetDir, { recursive: true });
+        const includedCharacters =
+          (font.display ?? name.replaceAll("_", " ")) + "Fontfamily";
 
-  for (const name of Object.keys(Fonts)) {
-    const font = Fonts[name as KnownFontName];
-    if (font.systemFont) continue;
+        const fileName = font.fileName;
 
-    const includedCharacters =
-      (font.display ?? name.replaceAll("_", " ")) + "Fontfamily";
+        const fontFile = fs.readFileSync(srcDir + "/" + fileName);
+        const subset = await subsetFont(fontFile, includedCharacters, {
+          targetFormat: "woff2",
+        });
 
-    const fileName = font.fileName;
+        this.emitFile({
+          type: "asset",
+          fileName: `webfonts-preview/${fileName}`,
+          source: subset,
+        });
+      }
 
-    await generateSubset(
-      srcDir + "/" + fileName,
-      targetDir + "/" + fileName,
-      includedCharacters,
-    );
-    if (debug) {
+      const end = performance.now();
       console.log(
-        `Processing ${name} with file ${fileName} to display "${includedCharacters}".`,
+        `Creating webfonts preview took ${Math.round(end - start)} ms`,
       );
-    }
-  }
-}
-
-async function generateSubset(
-  source: string,
-  target: string,
-  includedCharacters: string,
-): Promise<void> {
-  const font = fs.readFileSync(source);
-  const subset = await subsetFont(font, includedCharacters, {
-    targetFormat: "woff2",
-  });
-  fs.writeFileSync(target, subset);
-}
-//detect if we run this as a main
-if (import.meta.url.endsWith(process.argv[1] as string)) {
-  void generatePreviewFonts(true);
+    },
+  };
 }

frontend/vite.config.ts

@@ -81,6 +81,7 @@ function getPlugins({
   const plugins: PluginOption[] = [
     envConfig({ isDevelopment, clientVersion, env }),
     languageHashes({ skip: isDevelopment }),
+    fontPreview(),
     versionFile({ clientVersion }),
     checker({
       oxlint: {
@@ -97,7 +98,6 @@ function getPlugins({
   const devPlugins: PluginOption[] = [Inspect()];
 
   const prodPlugins: PluginOption[] = [
-    fontPreview(),
     fontawesomeSubset(),
     ViteMinifyPlugin(),
     VitePWA({