core&ui: update homepage config

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",

packages/hydrooj/setting.yaml

@@ -2,10 +2,18 @@ homepage:
   type: yaml
   desc: Homepage Config
   default:
-    contest: 5
-    homework: 10
-    training: 10
-    discussion: 20
+    - width: 9
+      bulletin: true
+      contest: 5
+      homework: 10
+      training: 10
+      ranking: 10
+      discussion: 20
+    - width: 3
+      hitokoto: true
+      starred_problems: 50
+      discussion_nodes: true
+      suggestion: true
 langs:
   type: yaml
   desc: Code language settings

packages/hydrooj/src/handler/home.ts

@@ -1,5 +1,6 @@
 import yaml from 'js-yaml';
 import { ObjectID } from 'mongodb';
+import { camelCase } from '@hydrooj/utils/lib/utils';
 import {
     BlacklistedError, DomainAlreadyExistsError, InvalidTokenError,
     NotFoundError, PermissionError, UserAlreadyExistError,
@@ -43,9 +44,9 @@ class HomeHandler extends Handler {
             const tsdict = await contest.getListStatus(
                 domainId, this.user._id, tdocs.map((tdoc) => tdoc.docId),
             );
-            return ['homework', tdocs, tsdict];
+            return [tdocs, tsdict];
         }
-        return ['homework', [], {}];
+        return [[], {}];
     }
 
     async getContest(domainId: string, limit = 10) {
@@ -55,9 +56,9 @@ class HomeHandler extends Handler {
             const tsdict = await contest.getListStatus(
                 domainId, this.user._id, tdocs.map((tdoc) => tdoc.docId),
             );
-            return ['contest', tdocs, tsdict];
+            return [tdocs, tsdict];
         }
-        return ['contest', [], {}];
+        return [[], {}];
     }
 
     async getTraining(domainId: string, limit = 10) {
@@ -67,9 +68,9 @@ class HomeHandler extends Handler {
             const tsdict = await training.getListStatus(
                 domainId, this.user._id, tdocs.map((tdoc) => tdoc.docId),
             );
-            return ['training', tdocs, tsdict];
+            return [tdocs, tsdict];
         }
-        return ['training', [], {}];
+        return [[], {}];
     }
 
     async getDiscussion(domainId: string, limit = 20) {
@@ -77,9 +78,9 @@ class HomeHandler extends Handler {
             const ddocs = await discussion.getMulti(domainId).limit(limit).toArray();
             const vndict = await discussion.getListVnodes(domainId, ddocs, this.user.hasPerm(PERM.PERM_VIEW_PROBLEM_HIDDEN), this.user.group);
             this.collectUser(ddocs.map((ddoc) => ddoc.owner));
-            return ['discussion', ddocs, vndict];
+            return [ddocs, vndict];
         }
-        return ['discussion', [], {}];
+        return [[], {}];
     }
 
     async getRanking(domainId: string, limit = 50) {
@@ -88,12 +89,12 @@ class HomeHandler extends Handler {
                 .sort({ rp: -1 }).project({ uid: 1 }).limit(limit).toArray();
             const uids = dudocs.map((dudoc) => dudoc.uid);
             this.collectUser(uids);
-            return ['ranking', uids];
+            return uids;
         }
-        return ['ranking', []];
+        return [];
     }
 
-    async getStarredProblem(domainId: string, limit = 50) {
+    async getStarredProblems(domainId: string, limit = 50) {
         if (this.user.hasPerm(PERM.PERM_VIEW_PROBLEM)) {
             const psdocs = await ProblemModel.getMultiStatus(domainId, { uid: this.user._id, star: true })
                 .sort('_id', 1).limit(limit).toArray();
@@ -104,35 +105,45 @@ class HomeHandler extends Handler {
                 this.user.hasPerm(PERM.PERM_VIEW_PROBLEM_HIDDEN) || this.user._id, this.user.group, false,
             );
             const pdocs = Object.keys(pdict).filter((i) => +i).map((i) => pdict[i]);
-            return ['problem', pdocs, psdict];
+            return [pdocs, psdict];
         }
-        return ['problem', [], {}];
+        return [[], {}];
+    }
+
+    getDiscussionNodes(domainId: string) {
+        return discussion.getNodes(domainId);
     }
 
     async get({ domainId }) {
-        const homepageConfig = system.get('hydrooj.homepage');
-        const tasks = [];
+        const homepageConfig = system.get('hydrooj.homepage1');
         const info = yaml.load(homepageConfig) as any;
-        for (const key in info) {
-            const func = `get${key.replace(/^[a-z]/, (i) => i.toUpperCase())}`;
-            if (!this[func]) continue;
-            tasks.push(this[func](domainId, +info[key]));
+        const contents = [];
+        for (const column of info) {
+            const tasks = [];
+            for (const name in column) {
+                if (name === 'width') continue;
+                const func = `get${camelCase(name).replace(/^[a-z]/, (i) => i.toUpperCase())}`;
+                if (!this[func]) tasks.push([name, column[name]]);
+                else {
+                    tasks.push(
+                        this[func](domainId, column[name])
+                            .then((res) => [name, res])
+                            .catch((err) => ['error', err.message]),
+                    );
+                }
+            }
+            contents.push({
+                width: column.width,
+                // eslint-disable-next-line no-await-in-loop
+                sections: await Promise.all(tasks),
+            });
         }
-        const [, pdocs, psdict] = await this.getStarredProblem(domainId);
-        const contents = await Promise.all(tasks);
-        const [udict, dodoc, vnodes] = await Promise.all([
-            user.getList(domainId, Array.from(this.uids)),
-            domain.get(domainId),
-            discussion.getNodes(domainId),
-        ]);
+        const udict = await user.getList(domainId, Array.from(this.uids));
         this.response.template = 'main.html';
         this.response.body = {
             contents,
             udict,
-            domain: dodoc,
-            vnodes,
-            pdocs,
-            psdict,
+            domain: this.domain,
         };
     }
 }

packages/hydrooj/src/upgrade.ts

@@ -688,6 +688,19 @@ const scripts: UpgradeScript[] = [
         await system.set('hydrooj.langs', langs.replace(/\$\{dir\}/g, '/w').replace(/\$\{name\}/g, 'foo'));
         return true;
     },
+    async function _60_61() {
+        const config = await system.get('hydrooj.homepage');
+        const data = yaml.load(config) as any;
+        if (!(data instanceof Array)) {
+            await system.set('hydrooj.homepage', yaml.dump([
+                { width: 9, bulletin: true, ...data },
+                {
+                    width: 3, hitokoto: true, starred_problems: 50, discussion_nodes: true, suggestion: true,
+                },
+            ]));
+        }
+        return true;
+    },
 ];
 
 export default scripts;

packages/ui-default/backendlib/template.js

@@ -57,6 +57,14 @@ const replacer = (k, v) => {
 class Nunjucks extends nunjucks.Environment {
   constructor() {
     super(new Loader(), { autoescape: true, trimBlocks: true });
+    this.addFilter('await', async (promise, callback) => {
+      try {
+        const result = await promise;
+        callback(null, result);
+      } catch (error) {
+        callback(error);
+      }
+    }, true);
     this.addFilter('json', (self) => (self ? JSON.stringify(self, replacer) : ''));
     this.addFilter('parseYaml', (self) => yaml.load(self));
     this.addFilter('dumpYaml', (self) => yaml.dump(self));
@@ -140,6 +148,7 @@ env.addGlobal('set', (obj, key, val) => {
   return '';
 });
 env.addGlobal('findSubModule', (prefix) => Object.keys(global.Hydro.ui.template).filter((n) => n.startsWith(prefix)));
+env.addGlobal('templateExists', (name) => !!global.Hydro.ui.template[name]);
 
 async function render(name, state) {
   // eslint-disable-next-line no-return-await

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.32.14",
+  "version": "4.33.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/main.html

@@ -4,103 +4,18 @@
 {% import "components/problem.html" as problem with context %}
 {% block content %}
 <div class="row">
-  <div class="large-9 columns">
-    {% if domain['bulletin'] %}
-      <div class="section">
-        <div class="section__body typo">
-          {{ domain['bulletin']|markdown|safe }}
-        </div>
-      </div>
-    {% endif %}
-    {% for node in contents %}
-      {% if node[0] == 'contest' %}
-        {% set tdocs = node[1] %}
-        {% set tsdict = node[2] %}
-        {% include "partials/homepage/contest.html" %}
-      {% elif node[0] == 'homework' %}
-        {% set htdocs = node[1] %}
-        {% set htsdict = node[2] %}
-        {% include "partials/homepage/homework.html" %}
-      {% elif node[0] == 'training' %}
-        {% set tdocs = node[1] %}
-        {% set tsdict = node[2] %}
-        {% include "partials/homepage/training.html" %}
-      {% elif node[0] == 'ranking' %}
-        {% set uids = node[1] %}
-        {% include "partials/homepage/ranking.html" %}
-      {% elif node[0] == 'discussion' %}
-        {% set ddocs = node[1] %}
-        {% set vndict = node[2] %}
-        {% if ddocs.length %}
-          <div class="section page--discussion_main">
-            <div class="section__header">
-              <h1 class="section__title">{{ _('Discussion') }}</h1>
-            </div>
-            {% include "partials/discussion_list.html" %}
-          </div>
+  {% for column in contents %}
+    <div class="large-{{ column.width }} columns">
+      {% for s in column.sections %}
+        {% if templateExists("partials/homepage/" + s[0] + ".html") %}
+          {% set payload = s[1] %}
+          {% include "partials/homepage/" + s[0] + ".html" %}
+        {% else %}
+          {% set payload = _("Template {0} not found.").format(s[0]) %}
+          {% include "partials/homepage/error.html" %}
         {% endif %}
-      {% endif %}
-    {% endfor %}
-  </div>
-  <div class="large-3 columns">
-    <div class="section side nojs--hide">
-      <div class="section__header">
-        <h1 class="section__title">{{ _('Hitokoto') }}</h1>
-      </div>
-      <div class="section__body typo" name="hitokoto"></div>
+      {% endfor %}
     </div>
-    {% if pdocs.length %}
-      <div class="section side nojs--hide">
-        <div class="section__header">
-          <h1 class="section__title">{{ _('Starred Problems') }}</h1>
-        </div>
-        <div class="section__body typo no-media col--problem-name">
-          {%- for pdoc in pdocs -%}
-            <form class="form--inline" action="{{ url('problem_main') }}" method="post">
-              <input type="hidden" name="pid" value="{{ pdoc.docId }}">
-              <input type="hidden" name="operation" value="unstar">
-              <button class="star activated" type="submit">
-                <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
-                <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
-              </button>
-            </form>
-            {{ problem.render_problem_title(pdoc, show_tags=false, show_invisible_flag=false) }}<br/>
-          {%- endfor -%}
-        </div>
-      </div>
-    {% endif %}
-    {% if handler.user.hasPerm(perm.PERM_VIEW_DISCUSSION) %}
-      {% include 'partials/discussion_nodes_widget.html' %}
-    {% endif %}
-    <div class="section side">
-      <div class="section__header">
-        <h1 class="section__title">{{ _('Recommended') }}</h1>
-      </div>
-      <div class="section__body"><ul class="group-list">
-        <li class="group-list__item">
-          <h2 class="section__title">{{ _('Chinese') }}</h2>
-          <ol class="chip-list">
-            <li class="chip-list__item"><a class="typo-a" href="https://www.cometoj.com/" target="_blank">CometOJ</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://loj.ac/" target="_blank">LibreOJ</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://www.luogu.com.cn/" target="_blank">洛谷</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://uoj.ac/" target="_blank">UOJ</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://vijos.org/" target="_blank">Vijos</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://zoj.pintia.cn/" target="_blank">ZOJ</a></li>
-          </ol>
-        </li>
-        <li class="group-list__item">
-          <h2 class="section__title">{{ _('English') }}</h2>
-          <ol class="chip-list">
-            <li class="chip-list__item"><a class="typo-a" href="https://atcoder.jp/" target="_blank">AtCoder</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://www.codechef.com/" target="_blank">CodeChef</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://codeforces.com/" target="_blank">Codeforces</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://www.spoj.com/" target="_blank">SPOJ</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://www.topcoder.com/" target="_blank">TopCoder</a></li>
-            <li class="chip-list__item"><a class="typo-a" href="https://onlinejudge.org/" target="_blank">OnlineJudge</a></li>
-          </ol>
-        </li>
-      </ul></div>
-    </div>
-  </div>
+  {% endfor %}
 </div>
 {% endblock %}

packages/ui-default/templates/partials/homepage/bulletin.html

@@ -0,0 +1,7 @@
+{% if domain.bulletin %}
+  <div class="section">
+    <div class="section__body typo">
+      {{ domain.bulletin|markdown|safe }}
+    </div>
+  </div>
+{% endif %}

packages/ui-default/templates/partials/homepage/contest.html

@@ -1,3 +1,5 @@
+{% set tdocs = payload[0] %}
+{% set tsdict = payload[1] %}
 {% if tdocs.length %}
   <div class="section page--contest_main">
     <div class="section__header">

packages/ui-default/templates/partials/homepage/discussion.html

@@ -0,0 +1,10 @@
+{% set ddocs = payload[0] %}
+{% set vndict = payload[1] %}
+{% if ddocs.length %}
+  <div class="section page--discussion_main">
+    <div class="section__header">
+      <h1 class="section__title">{{ _('Discussion') }}</h1>
+    </div>
+    {% include "partials/discussion_list.html" %}
+  </div>
+{% endif %}

packages/ui-default/templates/partials/homepage/discussion_nodes.html

@@ -0,0 +1,4 @@
+{% if handler.user.hasPerm(perm.PERM_VIEW_DISCUSSION) %}
+  {% set vnodes = payload %}
+  {% include 'partials/discussion_nodes_widget.html' %}
+{% endif %}

packages/ui-default/templates/partials/homepage/error.html

@@ -0,0 +1,5 @@
+<div class="section">
+  <div class="section__body typo">
+    {{ payload }}
+  </div>
+</div>

packages/ui-default/templates/partials/homepage/hitokoto.html

@@ -0,0 +1,6 @@
+<div class="section side nojs--hide">
+  <div class="section__header">
+    <h1 class="section__title">{{ _('Hitokoto') }}</h1>
+  </div>
+  <div class="section__body typo" name="hitokoto"></div>
+</div>

packages/ui-default/templates/partials/homepage/homework.html

@@ -1,3 +1,5 @@
+{% set htdocs = payload[0] %}
+{% set htsdict = payload[1] %}
 {% if htdocs.length %}
   <div class="section page--homework_main">
     <div class="section__header">

packages/ui-default/templates/partials/homepage/ranking.html

@@ -1,4 +1,4 @@
-{% if uids.length %}
+{% if payload.length %}
   <div class="section">
     <div class="section__header">
       <h1 class="section__title">{{ _('Ranking') }}</h1>
@@ -21,7 +21,7 @@
             </tr>
           </thead>
           <tbody>
-            {%- for uid in uids -%}
+            {%- for uid in payload -%}
               {% set udoc = udict[uid] %}
               <tr>
                 <td class="col--rank">{{ loop.index }}</td>

packages/ui-default/templates/partials/homepage/starred_problems.html

@@ -0,0 +1,22 @@
+{% set pdocs = payload[0] %}
+{% set psdict = payload[1] %}
+{% if pdocs.length %}
+  <div class="section side nojs--hide">
+    <div class="section__header">
+      <h1 class="section__title">{{ _('Starred Problems') }}</h1>
+    </div>
+    <div class="section__body typo no-media col--problem-name">
+      {%- for pdoc in pdocs -%}
+        <form class="form--inline" action="{{ url('problem_main') }}" method="post">
+          <input type="hidden" name="pid" value="{{ pdoc.docId }}">
+          <input type="hidden" name="operation" value="unstar">
+          <button class="star activated" type="submit">
+            <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
+            <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
+          </button>
+        </form>
+        {{ problem.render_problem_title(pdoc, show_tags=false, show_invisible_flag=false) }}<br/>
+      {%- endfor -%}
+    </div>
+  </div>
+{% endif %}

packages/ui-default/templates/partials/homepage/suggestion.html

@@ -0,0 +1,29 @@
+<div class="section side">
+  <div class="section__header">
+    <h1 class="section__title">{{ _('Recommended') }}</h1>
+  </div>
+  <div class="section__body"><ul class="group-list">
+    <li class="group-list__item">
+      <h2 class="section__title">{{ _('Chinese') }}</h2>
+      <ol class="chip-list">
+        <li class="chip-list__item"><a class="typo-a" href="https://www.cometoj.com/" target="_blank">CometOJ</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://loj.ac/" target="_blank">LibreOJ</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://www.luogu.com.cn/" target="_blank">洛谷</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://uoj.ac/" target="_blank">UOJ</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://vijos.org/" target="_blank">Vijos</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://zoj.pintia.cn/" target="_blank">ZOJ</a></li>
+      </ol>
+    </li>
+    <li class="group-list__item">
+      <h2 class="section__title">{{ _('English') }}</h2>
+      <ol class="chip-list">
+        <li class="chip-list__item"><a class="typo-a" href="https://atcoder.jp/" target="_blank">AtCoder</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://www.codechef.com/" target="_blank">CodeChef</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://codeforces.com/" target="_blank">Codeforces</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://www.spoj.com/" target="_blank">SPOJ</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://www.topcoder.com/" target="_blank">TopCoder</a></li>
+        <li class="chip-list__item"><a class="typo-a" href="https://onlinejudge.org/" target="_blank">OnlineJudge</a></li>
+      </ol>
+    </li>
+  </ul></div>
+</div>

packages/ui-default/templates/partials/homepage/training.html

@@ -1,3 +1,5 @@
+{% set tdocs = payload[0] %}
+{% set tsdict = payload[1] %}
 {% if tdocs.length %}
   <div class="section page--training_main">
     <div class="section__header">