ui: allow font customization

.github/workflows/build.yml

@@ -34,7 +34,6 @@ jobs:
       run: |
         yarn build
         yarn build:ui:production
-        ./packages/geoip/download.sh
     - name: Lint
       run: yarn lint:ci
     - name: Publish

package.json

@@ -28,15 +28,15 @@
     "license": "AGPL-3.0-only",
     "devDependencies": {
         "@types/cross-spawn": "^6.0.2",
-        "@types/node": "^16.11.22",
+        "@types/node": "^16.11.25",
         "@types/semver": "^7.3.9",
-        "@typescript-eslint/eslint-plugin": "5.11.0",
-        "@typescript-eslint/parser": "5.11.0",
+        "@typescript-eslint/eslint-plugin": "5.12.0",
+        "@typescript-eslint/parser": "5.12.0",
         "cac": "^6.7.12",
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
         "esbuild": "0.14.3",
-        "eslint": "^8.8.0",
+        "eslint": "^8.9.0",
         "eslint-config-airbnb-typescript": "12.3.1",
         "eslint-import-resolver-typescript": "2.5.0",
         "eslint-plugin-import": "2.25.4",

packages/ui-default/common/variables.inc.styl

@@ -2,9 +2,9 @@
 $grid-padding = 15px // half gutter
 
 // fonts
-$primary-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans"
-$header-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", "sans-serif"
-$code-font-family = "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace"
+$primary-font-family = var(--font-family)
+$header-font-family = var(--font-family)
+$code-font-family = var(--code-font-family)
 
 // primary palette
 $default-color = #ddd

packages/ui-default/locales/zh.yaml

@@ -323,6 +323,7 @@ File: 文件
 Filename: 文件名
 Files: 文件
 Filter: 过滤
+fontFamily: 字体
 Footer: 页脚
 Footnote: 脚注
 Forgot Password and/or Username: 忘记密码和/或用户名
@@ -458,6 +459,7 @@ Memory: 内存
 Message {0} not found.: 消息 {0} 不存在。
 Messages: 消息
 Method: 方法
+Microsoft Yahei: 微软雅黑
 Moderator: 管理员
 Month: 月
 Monthly Popular: 月度最受欢迎
@@ -549,6 +551,7 @@ Permission: 权限
 Permissions: 权限
 Pick a problem randomly based on current filter: 根据当前过滤条件随机选择一道题
 Pin: 置顶
+PingFang SC: 苹方简体
 Plan: 计划
 Please attend contest to see the problems.: 请参加比赛来查看题目。
 Please claim the assignment to see the problems.: 认领作业后才可以查看作业内容。
@@ -863,6 +866,7 @@ We will check code similarity after this contest.: 我们会在赛后检查代
 WeChat Visibility: 微信可见性
 WeChat: 微信
 Week: 周
+WenQuanYi Micro Hei: 文泉驿
 What is domain?: 什么是域?
 What is this?: 这是什么？
 What's domain?: 什么是域？

packages/ui-default/misc/Page.ts

@@ -24,13 +24,13 @@ export class Page {
 }
 
 export class NamedPage extends Page {
-  constructor(name: string | string[], afterLoading = null, beforeLoading = null) {
+  constructor(name: string | string[], afterLoading: (pagename: string) => any = null, beforeLoading = null) {
     super(name, false, afterLoading, beforeLoading);
   }
 }
 
 export class AutoloadPage extends Page {
-  constructor(name: string | string[], afterLoading = null, beforeLoading = null) {
+  constructor(name: string | string[], afterLoading: (pagename: string) => any = null, beforeLoading = null) {
     super(name, true, afterLoading, beforeLoading);
   }
 }

packages/ui-default/misc/typography.styl

@@ -472,8 +472,13 @@ h1, h2, h3, h4, h5, h6
     color: darken(black, 40%)
 
 textarea
-  font-family: "monaco", "Consolas", "Source Code Pro", "Lucida Console", "monospace" !important
+  font-family: $code-font-family !important
 
 :focus
   outline: 0px;
   outline-offset: 2px;
+
+@font-face
+  font-family: "XiaoLai SC";
+  font-display: swap;
+  src: url('https://raw.githubusercontent.com/lxgw/kose-font/master/TTF%20(Simplified%20Chinese)/XiaolaiSC-Regular.ttf') format('truetype');

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.31.19",
+  "version": "4.32.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -33,7 +33,7 @@
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
     "esbuild-loader": "^2.18.0",
-    "eslint": "^8.8.0",
+    "eslint": "^8.9.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.25.4",
@@ -42,7 +42,7 @@
     "fancy-log": "^1.3.3",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "graphiql": "^1.5.17",
+    "graphiql": "^1.5.19",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.1",
@@ -59,7 +59,7 @@
     "monaco-editor-nls": "^2.0.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "monaco-themes": "^0.4.0",
-    "nanoid": "^3.2.0",
+    "nanoid": "^3.3.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pickadate": "^3.6.4",
@@ -117,8 +117,8 @@
     "markdown-it-table-of-contents": "^0.6.0",
     "mongodb": "^3.7.3",
     "nunjucks": "^3.2.3",
-    "react-query": "^3.34.14",
-    "streamsaver": "^2.0.5",
+    "react-query": "^3.34.15",
+    "streamsaver": "^2.0.6",
     "xss": "^1.0.10"
   }
 }

packages/ui-default/pages/home_preference.page.jsx

@@ -2,7 +2,7 @@ import { NamedPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';
 
-const page = new NamedPage('home_preference', () => {
+function initCodeLangHelper() {
   function setOptions($el, options) {
     $el.empty();
     $.each(options, (key, value) => {
@@ -66,6 +66,14 @@ const page = new NamedPage('home_preference', () => {
   $('#codelang-sub-select').on('change', function () {
     $('[name="codeLang"]').val(this.value);
   });
+}
+
+const page = new NamedPage('home_preference', () => {
+  initCodeLangHelper();
+  $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+    this.style.fontFamily = this.getAttribute('value');
+    this.textContent = i18n(this.textContent.trim());
+  });
 });
 
 export default page;

packages/ui-default/pages/problem_detail.page.jsx

@@ -231,8 +231,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
             { value: UiContext.pdoc.stats.WA, name: 'WA' },
             { value: UiContext.pdoc.stats.RE, name: 'RE' },
             { value: UiContext.pdoc.stats.CE, name: 'CE' },
-            { value: UiContext.pdoc.stats.SE, name: 'SE' },
-            { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
           ],
         },
       ],

packages/ui-default/pages/problem_main.page.js

@@ -205,7 +205,7 @@ async function handleOperation(operation) {
     await request.post('', { operation, pids, ...payload });
     Notification.success(i18n(`Selected problems have been ${operation === 'copy' ? 'copie' : operation}d.`));
     await delay(2000);
-    window.location.reload();
+    updateSelection(true);
   } catch (error) {
     Notification.error(error.message);
   }

packages/ui-default/setting.yaml

@@ -1,3 +1,29 @@
+fontFamily:
+  type:
+    Open Sans: Open Sans
+    Seravek: Seravek
+    Segoe UI: Segoe UI
+    Verdana: Verdana
+    PingFang SC: PingFang SC
+    Hiragino Sans GB: Hiragino Sans GB
+    Microsoft Yahei: Microsoft Yahei
+    WenQuanYi Micro Hei: WenQuanYi Micro Hei
+    sans: sans
+    XiaoLai SC: 小赖 SC
+  family: setting_display
+  category: preference
+  value: Open Sans
+codeFontFamily:
+  type:
+    monaco: Monaco
+    Source Code Pro: Source Code Pro
+    Consolas: Consolas
+    Lucida Console: Lucida Console
+    monospace: monospace
+    Fira Code: Fira Code
+  family: setting_display
+  category: preference
+  value: Source Code Pro
 footer_extra_html:
   type: textarea
   name: footer_extra_html

packages/ui-default/templates/components/comments_discussion.html

@@ -89,7 +89,7 @@
     <div class="media__left top">
       <img src="{{ avatarUrl(udoc.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar">
     </div>
-    <div class="media__body top">
+    <div class="media__body top" id="comment-{{ doc.docId }}">
       <div class="clearfix">
         <div class="supplementary dczcomments__supplementary">
           {{ user.render_inline(udoc, avatar=false) }}

packages/ui-default/templates/layout/html5.html

@@ -24,13 +24,23 @@
   <meta property="og:url" content="{{ model.system.get('server.url') }}{{ handler.ctx.request.path.slice(1) }}" />
   <meta property="og:image" content="{{ static_url('favicon-96x96.png') }}" />
   {% endblock %}
-  <link rel="stylesheet" media="all" href="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.css') }}?version={{ global.Hydro.version['ui-default'] }}">
   <title>{{ handler.renderTitle(page_name) }}</title>
+  <style>
+    body {
+      --font-family: "{{ UserContext.fontFamily }}", "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans";
+      --code-font-family: "{{ UserContext.codeFontFamily }}", "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace";
+    }
+  </style>
+  {% if process.env.DEV %}
+    <link rel="stylesheet" media="all" href="/default.theme.css">
+  {% else %}
+    <link rel="stylesheet" media="all" href="{{ static_url((handler.user|default({})).theme|default('default') + '.theme-' + global.Hydro.version['ui-default'] +'.css') }}">
+  {% endif %}
   {% if not isIE(handler.request.headers['user-agent']) %}
-  <script>
-    var _htmlNode = document.documentElement;
-    _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
-  </script>
+    <script>
+      var _htmlNode = document.documentElement;
+      _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
+    </script>
   {% endif %}
 </head>
 <body>
@@ -40,12 +50,24 @@
       var UiContext = '{{ UiContext|json|jsesc|safe }}';
       var UserContext = '{{ UserContext|json|jsesc|safe }}';
     </script>
-    <script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
     <script type="text/javascript" src="{{ static_url('l/'+_('__id')) }}"></script>
-    {% if process.env.DEV %}
-      <script type="text/javascript" src="{{ static_url('hydro.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
+    {% if process.env.DEV and vite %}
+      <script type="module">
+        import RefreshRuntime from 'http://localhost:3000/@react-refresh'
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => {}
+        window.$RefreshSig$ = () => (type) => type
+        window.__vite_plugin_react_preamble_installed__ = true
+      </script>
+      <script type="module" src="http://localhost:3000/@vite/client"></script>
+      <script type="module" src="http://localhost:3000/entry.js"></script>
     {% else %}
-      <script type="text/javascript" src="{{ static_url('hydro-'+global.Hydro.version['ui-default']+'.js') }}"></script>
+      <script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
+      {% if process.env.DEV %}
+        <script type="text/javascript" src="/hydro.js"></script>
+      {% else %}
+        <script type="text/javascript" src="{{ static_url('hydro-'+global.Hydro.version['ui-default']+'.js') }}"></script>
+      {% endif %}
     {% endif %}
   {% endif %}
 </body>