ui: load builtin fonts

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]';

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",

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);
 });
 

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

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';