From 237f608496d79b70eefbecdfa1c6a324ccb6ed1d Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Tue, 22 Feb 2022 02:35:53 +0800
Subject: [PATCH] ui: load builtin fonts

---
 packages/ui-default/build/config/webpack.js   |  5 +++-
 packages/ui-default/package.json              | 10 ++++++-
 .../ui-default/pages/home_preference.page.jsx | 29 +++++++++++++++++++
 packages/ui-default/setting.yaml              |  9 +++++-
 packages/ui-default/theme/default.js          |  9 ++++++
 5 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/ui-default/build/config/webpack.js b/packages/ui-default/build/config/webpack.js
index bf24db4dc..67e6b6bbe 100644
--- a/packages/ui-default/build/config/webpack.js
+++ b/packages/ui-default/build/config/webpack.js
@@ -53,8 +53,11 @@ export default function (env = {}) {
           if (resourcePath.includes('node_modules')) {
             const extra = resourcePath.split('node_modules')[1];
             const moduleName = extra.split('/')[0];
+            if (extra.includes('@fontsource')) {
+              return `fonts/${extra.substr(2).replace(/\\/g, '/')}?[contenthash]`;
+            }
             if (['katex', 'monaco-editor'].includes(moduleName)) return `modules/${moduleName}/[name].[ext]?[contenthash]`;
-            return `modules/${extra.substr(1, extra.length - 1).replace(/\\/g, '/')}?[contenthash]`;
+            return `modules/${extra.substr(1).replace(/\\/g, '/')}?[contenthash]`;
           }
           if (resourcePath.includes('misc/.iconfont')) return 'modules/icon/[name].[ext]?[contenthash]';
           return '[path][name].[ext]?[contenthash]';
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 162392dee..f535956c9 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.32.3",
+  "version": "4.32.4",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -11,6 +11,14 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^3.53.0",
+    "@fontsource/dm-mono": "^4.5.3",
+    "@fontsource/fira-code": "^4.5.5",
+    "@fontsource/inconsolata": "^4.5.2",
+    "@fontsource/jetbrains-mono": "^4.5.3",
+    "@fontsource/pt-mono": "^4.5.2",
+    "@fontsource/roboto-mono": "^4.5.3",
+    "@fontsource/source-code-pro": "^4.5.4",
+    "@fontsource/ubuntu-mono": "^4.5.3",
     "@hydrooj/utils": "workspace:*",
     "@types/gulp-if": "^0.0.34",
     "@types/jquery": "^3.5.13",
diff --git a/packages/ui-default/pages/home_preference.page.jsx b/packages/ui-default/pages/home_preference.page.jsx
index 212f76d73..4fc6a8057 100644
--- a/packages/ui-default/pages/home_preference.page.jsx
+++ b/packages/ui-default/pages/home_preference.page.jsx
@@ -68,15 +68,44 @@ function initCodeLangHelper() {
   });
 }
 
+function supportFontFamily(f) {
+  const h = 'Arial';
+  if (f.toLowerCase() === h.toLowerCase()) return true;
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  const ctx = canvas.getContext('2d');
+  ctx.textAlign = 'center';
+  ctx.fillStyle = 'black';
+  ctx.textBaseline = 'middle';
+  const g = (j) => {
+    ctx.clearRect(0, 0, 100, 100);
+    ctx.font = `100px ${j}, ${h}`;
+    ctx.fillText('a', 50, 50);
+    const k = ctx.getImageData(0, 0, 100, 100).data;
+    return [].slice.call(k).filter((l) => l !== 0);
+  };
+  return g(h).join('') !== g(f).join('');
+}
+
 const page = new NamedPage('home_preference', () => {
   initCodeLangHelper();
   $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+    if (!supportFontFamily(this.value)) {
+      $(this).hide();
+      console.log(`Unsupported: ${this.value}`);
+    }
     this.style.fontFamily = this.getAttribute('value');
     this.textContent = i18n(this.textContent.trim());
   });
   function updateFont() {
     this.style.fontFamily = $(this).val();
   }
+  document.fonts.onloadingdone = () => {
+    $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+      if (supportFontFamily(this.value)) $(this).show();
+    });
+  };
   $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
 });
 
diff --git a/packages/ui-default/setting.yaml b/packages/ui-default/setting.yaml
index 4f23d0b4f..d53b7e347 100644
--- a/packages/ui-default/setting.yaml
+++ b/packages/ui-default/setting.yaml
@@ -19,8 +19,15 @@ codeFontFamily:
     Source Code Pro: Source Code Pro
     Consolas: Consolas
     Lucida Console: Lucida Console
-    monospace: monospace
     Fira Code: Fira Code
+    Roboto Mono: Roboto Mono
+    Inconsolata: Inconsolata
+    Hack: Hack
+    Jetbrains Mono: Jetbrains Mono
+    DM Mono: DM Mono
+    Ubuntu Mono: Ubuntu Mono
+    PT Mono: PT Mono
+    SF Mono: SF Mono
   family: setting_display
   category: preference
   value: Source Code Pro
diff --git a/packages/ui-default/theme/default.js b/packages/ui-default/theme/default.js
index 89de01118..3b329a939 100644
--- a/packages/ui-default/theme/default.js
+++ b/packages/ui-default/theme/default.js
@@ -6,6 +6,15 @@ import 'pickadate/lib/themes/classic.time.css';
 import 'katex/dist/katex.min.css';
 import '@blueprintjs/core/lib/css/blueprint.css';
 
+import '@fontsource/fira-code';
+import '@fontsource/source-code-pro';
+import '@fontsource/roboto-mono';
+import '@fontsource/inconsolata';
+import '@fontsource/ubuntu-mono';
+import '@fontsource/pt-mono';
+import '@fontsource/dm-mono';
+import '@fontsource/jetbrains-mono';
+
 import 'vj/misc/float.styl';
 import 'vj/misc/typography.styl';
 import 'vj/misc/textalign.styl';