ui: better ogp meta on problem_detail page

packages/hydrooj/src/interface.ts

@@ -1,4 +1,4 @@
-import type { AttestationFormat, CredentialDeviceType, } from '@simplewebauthn/server';
+import type { AttestationFormat, CredentialDeviceType } from '@simplewebauthn/server';
 import type { AuthenticationExtensionsAuthenticatorOutputs } from '@simplewebauthn/server/esm/helpers/decodeAuthenticatorExtensions';
 import type fs from 'fs';
 import type { Dictionary, NumericDictionary } from 'lodash';

packages/ui-default/backendlib/template.ts

@@ -1,5 +1,6 @@
 import * as status from '@hydrooj/common/status';
 import { findFileSync } from '@hydrooj/utils/lib/utils';
+import { convert } from 'html-to-text';
 import {
   avatar, Context, fs, PERM, PRIV, STATUS, yaml,
 } from 'hydrooj';
@@ -94,6 +95,14 @@ class Nunjucks extends nunjucks.Environment {
       }
       return ensureTag(html ? xss.process(s) : markdown.render(s));
     });
+    this.addFilter('problemPreview', (html) => {
+      const res = convert(html, {
+        selectors: [
+          { selector: 'math', format: 'skip' },
+        ],
+      });
+      return res.split('\n').map((i) => i.trim()).join('\n').replace(/\n+/g, '\n');
+    });
     this.addFilter('contentLang', (content) => {
       let s: any = '';
       try {

packages/ui-default/package.json

@@ -29,6 +29,7 @@
     "@sentry/webpack-plugin": "^3.1.2",
     "@simplewebauthn/browser": "13.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@types/html-to-text": "^9.0.4",
     "@types/jquery": "^3.5.32",
     "@types/jquery.transit": "^0.9.33",
     "@types/json-schema": "^7.0.15",
@@ -127,6 +128,7 @@
     "cssfilter": "^0.0.11",
     "esbuild": "0.24.0",
     "fs-extra": "^11.3.0",
+    "html-to-text": "^9.0.5",
     "js-yaml": "^4.1.0",
     "jsesc": "^3.1.0",
     "katex": "^0.16.21",

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

@@ -23,3 +23,5 @@
 </div>
 {% if UserContext and not handler.user._id %}{% include "partials/login_dialog.html" %}{% endif %}
 {% endblock %}
+{% block ogp %}
+{% endblock %}

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

@@ -19,12 +19,14 @@
   <link rel="icon" type="image/png" href="{{ UiContext.cdn_prefix }}favicon-16x16.png" sizes="16x16">
   {% if handler.context.request.url %}<link rel="canonical" href="{{ model.system.get('server.url') }}{{ handler.context.request.url.substring(1) }}">{% endif %}
   <meta name="theme-color" content="#56758f">
-  {% block ogp %}
+  {% block ogp_site %}
   <meta property="og:site_name" content="{{ (handler.domain|default({ui:[]})).ui.name|default(model.system.get('server.name')) }}" />
-  <meta property="og:title" content="{{ handler.renderTitle(page_name) }}" />
   <meta property="og:url" content="{{ model.system.get('server.url') }}{{ handler.request.path.slice(1) }}" />
   <meta property="og:image" content="{{ UiContext.cdn_prefix }}favicon-96x96.png" />
   {% endblock %}
+  {% block ogp %}
+  <meta property="og:title" content="{{ handler.renderTitle(page_name) }}" />
+  {% endblock %}
   <title>{{ handler.renderTitle(page_name) }}</title>
   <style>
     body {

packages/ui-default/templates/partials/problem_description.html

@@ -19,5 +19,9 @@
       <p>{{ _('You cannot submit for this problem because the contest is ended. You can click "Open in Problem Set" to view this problem in normal mode.') }}</p>
     </blockquote>
   {% endif %}
-  {{ pdoc.content|content(handler.request.query.lang or handler.user.viewLang or handler.session.viewLang, pdoc.html)|safe }}
+  {% if not renderredContent %}
+    {% set preferredLang = handler.request.query.lang or handler.user.viewLang or handler.session.viewLang %}
+    {% set renderredContent = pdoc.content|content(preferredLang, pdoc.html) %}
+  {% endif %}
+  {{ renderredContent|safe }}
 </div>

packages/ui-default/templates/problem_detail.html

@@ -24,6 +24,22 @@
   {{ set(UiContext, 'pretestConnUrl', "record-conn?pretest=1&uidOrName=" + handler.user._id + "&pid=" + pdoc.docId + "&domainId=" + handler.args.domainId) }}
 {% endif %}
 </script>
+{% if not tdoc %}
+  {% block ogp %}
+    {% set preferredLang = handler.request.query.lang or handler.user.viewLang or handler.session.viewLang %}
+    {% set renderredContent = pdoc.content|content(preferredLang, pdoc.html) %}
+    {% set langs = pdoc.content|contentLang %}
+    {% for k in langs %}
+      {% if k != preferredLang %}
+        <meta property="og:locale:alternate" content="{{ k }}" />
+      {% else %}
+        <meta property="og:locale" content="{{ k }}" />
+      {% endif %}
+    {% endfor %}
+    <meta property="og:title" content="{{ pdoc.pid|default(pdoc.docId) }}. {{ pdoc.title }} - {{ model.system.get('server.name') }}" />
+    <meta property="og:description" content="{{ renderredContent|problemPreview|truncate(100, true) }}" />
+  {% endblock %}
+{% endif %}
 <div class="row" data-sticky-parent>
   <div class="medium-9 columns">
     <div class="section">