reduce dashboard bundle size by lazy loading highlight.js languages (#533)

* lazyload hl.js languages

* pin repository/discord-markdown

dashboard/package.json

@@ -26,8 +26,9 @@
     "bootstrap": "^5.1.3",
     "bootstrap-dark-5": "^1.1.3",
     "core-js-pure": "^3.23.4",
-    "discord-markdown": "^2.5.1",
+    "discord-markdown": "https://github.com/repository/discord-markdown#b9608feef6856c9baa68f96c932a25c1d2bc55c2",
     "gh-pages": "^3.2.3",
+    "highlight.js": "^11.7.0",
     "import": "^0.0.6",
     "moment": "^2.29.1",
     "sass": "^1.52.2",

dashboard/src/api/parse-markdown.ts

@@ -0,0 +1,421 @@
+import { toHTML } from 'discord-markdown';
+import hljs from 'highlight.js/lib/core';
+import parseTimestamps from './parse-timestamps';
+
+const languages: Record<string, () => Promise<typeof import("highlight.js/lib/languages/*")>> = {
+    "1c": () => import("highlight.js/lib/languages/1c"),
+    "abnf": () => import("highlight.js/lib/languages/abnf"),
+    "accesslog": () => import("highlight.js/lib/languages/accesslog"),
+    "actionscript": () => import("highlight.js/lib/languages/actionscript"),
+    "ada": () => import("highlight.js/lib/languages/ada"),
+    "angelscript": () => import("highlight.js/lib/languages/angelscript"),
+    "apache": () => import("highlight.js/lib/languages/apache"),
+    "applescript": () => import("highlight.js/lib/languages/applescript"),
+    "arcade": () => import("highlight.js/lib/languages/arcade"),
+    "arduino": () => import("highlight.js/lib/languages/arduino"),
+    "armasm": () => import("highlight.js/lib/languages/armasm"),
+    "xml": () => import("highlight.js/lib/languages/xml"),
+    "asciidoc": () => import("highlight.js/lib/languages/asciidoc"),
+    "aspectj": () => import("highlight.js/lib/languages/aspectj"),
+    "autohotkey": () => import("highlight.js/lib/languages/autohotkey"),
+    "autoit": () => import("highlight.js/lib/languages/autoit"),
+    "avrasm": () => import("highlight.js/lib/languages/avrasm"),
+    "awk": () => import("highlight.js/lib/languages/awk"),
+    "axapta": () => import("highlight.js/lib/languages/axapta"),
+    "bash": () => import("highlight.js/lib/languages/bash"),
+    "basic": () => import("highlight.js/lib/languages/basic"),
+    "bnf": () => import("highlight.js/lib/languages/bnf"),
+    "brainfuck": () => import("highlight.js/lib/languages/brainfuck"),
+    "c": () => import("highlight.js/lib/languages/c"),
+    "cal": () => import("highlight.js/lib/languages/cal"),
+    "capnproto": () => import("highlight.js/lib/languages/capnproto"),
+    "ceylon": () => import("highlight.js/lib/languages/ceylon"),
+    "clean": () => import("highlight.js/lib/languages/clean"),
+    "clojure": () => import("highlight.js/lib/languages/clojure"),
+    "clojure-repl": () => import("highlight.js/lib/languages/clojure-repl"),
+    "cmake": () => import("highlight.js/lib/languages/cmake"),
+    "coffeescript": () => import("highlight.js/lib/languages/coffeescript"),
+    "coq": () => import("highlight.js/lib/languages/coq"),
+    "cos": () => import("highlight.js/lib/languages/cos"),
+    "cpp": () => import("highlight.js/lib/languages/cpp"),
+    "crmsh": () => import("highlight.js/lib/languages/crmsh"),
+    "crystal": () => import("highlight.js/lib/languages/crystal"),
+    "csharp": () => import("highlight.js/lib/languages/csharp"),
+    "csp": () => import("highlight.js/lib/languages/csp"),
+    "css": () => import("highlight.js/lib/languages/css"),
+    "d": () => import("highlight.js/lib/languages/d"),
+    "markdown": () => import("highlight.js/lib/languages/markdown"),
+    "dart": () => import("highlight.js/lib/languages/dart"),
+    "delphi": () => import("highlight.js/lib/languages/delphi"),
+    "diff": () => import("highlight.js/lib/languages/diff"),
+    "django": () => import("highlight.js/lib/languages/django"),
+    "dns": () => import("highlight.js/lib/languages/dns"),
+    "dockerfile": () => import("highlight.js/lib/languages/dockerfile"),
+    "dos": () => import("highlight.js/lib/languages/dos"),
+    "dsconfig": () => import("highlight.js/lib/languages/dsconfig"),
+    "dts": () => import("highlight.js/lib/languages/dts"),
+    "dust": () => import("highlight.js/lib/languages/dust"),
+    "ebnf": () => import("highlight.js/lib/languages/ebnf"),
+    "elixir": () => import("highlight.js/lib/languages/elixir"),
+    "elm": () => import("highlight.js/lib/languages/elm"),
+    "ruby": () => import("highlight.js/lib/languages/ruby"),
+    "erb": () => import("highlight.js/lib/languages/erb"),
+    "erlang-repl": () => import("highlight.js/lib/languages/erlang-repl"),
+    "erlang": () => import("highlight.js/lib/languages/erlang"),
+    "excel": () => import("highlight.js/lib/languages/excel"),
+    "fix": () => import("highlight.js/lib/languages/fix"),
+    "flix": () => import("highlight.js/lib/languages/flix"),
+    "fortran": () => import("highlight.js/lib/languages/fortran"),
+    "fsharp": () => import("highlight.js/lib/languages/fsharp"),
+    "gams": () => import("highlight.js/lib/languages/gams"),
+    "gauss": () => import("highlight.js/lib/languages/gauss"),
+    "gcode": () => import("highlight.js/lib/languages/gcode"),
+    "gherkin": () => import("highlight.js/lib/languages/gherkin"),
+    "glsl": () => import("highlight.js/lib/languages/glsl"),
+    "gml": () => import("highlight.js/lib/languages/gml"),
+    "go": () => import("highlight.js/lib/languages/go"),
+    "golo": () => import("highlight.js/lib/languages/golo"),
+    "gradle": () => import("highlight.js/lib/languages/gradle"),
+    "graphql": () => import("highlight.js/lib/languages/graphql"),
+    "groovy": () => import("highlight.js/lib/languages/groovy"),
+    "haml": () => import("highlight.js/lib/languages/haml"),
+    "handlebars": () => import("highlight.js/lib/languages/handlebars"),
+    "haskell": () => import("highlight.js/lib/languages/haskell"),
+    "haxe": () => import("highlight.js/lib/languages/haxe"),
+    "hsp": () => import("highlight.js/lib/languages/hsp"),
+    "http": () => import("highlight.js/lib/languages/http"),
+    "hy": () => import("highlight.js/lib/languages/hy"),
+    "inform7": () => import("highlight.js/lib/languages/inform7"),
+    "ini": () => import("highlight.js/lib/languages/ini"),
+    "irpf90": () => import("highlight.js/lib/languages/irpf90"),
+    "isbl": () => import("highlight.js/lib/languages/isbl"),
+    "java": () => import("highlight.js/lib/languages/java"),
+    "javascript": () => import("highlight.js/lib/languages/javascript"),
+    "jboss-cli": () => import("highlight.js/lib/languages/jboss-cli"),
+    "json": () => import("highlight.js/lib/languages/json"),
+    "julia": () => import("highlight.js/lib/languages/julia"),
+    "julia-repl": () => import("highlight.js/lib/languages/julia-repl"),
+    "kotlin": () => import("highlight.js/lib/languages/kotlin"),
+    "lasso": () => import("highlight.js/lib/languages/lasso"),
+    "latex": () => import("highlight.js/lib/languages/latex"),
+    "ldif": () => import("highlight.js/lib/languages/ldif"),
+    "leaf": () => import("highlight.js/lib/languages/leaf"),
+    "less": () => import("highlight.js/lib/languages/less"),
+    "lisp": () => import("highlight.js/lib/languages/lisp"),
+    "livecodeserver": () => import("highlight.js/lib/languages/livecodeserver"),
+    "livescript": () => import("highlight.js/lib/languages/livescript"),
+    "llvm": () => import("highlight.js/lib/languages/llvm"),
+    "lsl": () => import("highlight.js/lib/languages/lsl"),
+    "lua": () => import("highlight.js/lib/languages/lua"),
+    "makefile": () => import("highlight.js/lib/languages/makefile"),
+    "mathematica": () => import("highlight.js/lib/languages/mathematica"),
+    "matlab": () => import("highlight.js/lib/languages/matlab"),
+    "maxima": () => import("highlight.js/lib/languages/maxima"),
+    "mel": () => import("highlight.js/lib/languages/mel"),
+    "mercury": () => import("highlight.js/lib/languages/mercury"),
+    "mipsasm": () => import("highlight.js/lib/languages/mipsasm"),
+    "mizar": () => import("highlight.js/lib/languages/mizar"),
+    "perl": () => import("highlight.js/lib/languages/perl"),
+    "mojolicious": () => import("highlight.js/lib/languages/mojolicious"),
+    "monkey": () => import("highlight.js/lib/languages/monkey"),
+    "moonscript": () => import("highlight.js/lib/languages/moonscript"),
+    "n1ql": () => import("highlight.js/lib/languages/n1ql"),
+    "nestedtext": () => import("highlight.js/lib/languages/nestedtext"),
+    "nginx": () => import("highlight.js/lib/languages/nginx"),
+    "nim": () => import("highlight.js/lib/languages/nim"),
+    "nix": () => import("highlight.js/lib/languages/nix"),
+    "node-repl": () => import("highlight.js/lib/languages/node-repl"),
+    "nsis": () => import("highlight.js/lib/languages/nsis"),
+    "objectivec": () => import("highlight.js/lib/languages/objectivec"),
+    "ocaml": () => import("highlight.js/lib/languages/ocaml"),
+    "openscad": () => import("highlight.js/lib/languages/openscad"),
+    "oxygene": () => import("highlight.js/lib/languages/oxygene"),
+    "parser3": () => import("highlight.js/lib/languages/parser3"),
+    "pf": () => import("highlight.js/lib/languages/pf"),
+    "pgsql": () => import("highlight.js/lib/languages/pgsql"),
+    "php": () => import("highlight.js/lib/languages/php"),
+    "php-template": () => import("highlight.js/lib/languages/php-template"),
+    "plaintext": () => import("highlight.js/lib/languages/plaintext"),
+    "pony": () => import("highlight.js/lib/languages/pony"),
+    "powershell": () => import("highlight.js/lib/languages/powershell"),
+    "processing": () => import("highlight.js/lib/languages/processing"),
+    "profile": () => import("highlight.js/lib/languages/profile"),
+    "prolog": () => import("highlight.js/lib/languages/prolog"),
+    "properties": () => import("highlight.js/lib/languages/properties"),
+    "protobuf": () => import("highlight.js/lib/languages/protobuf"),
+    "puppet": () => import("highlight.js/lib/languages/puppet"),
+    "purebasic": () => import("highlight.js/lib/languages/purebasic"),
+    "python": () => import("highlight.js/lib/languages/python"),
+    "python-repl": () => import("highlight.js/lib/languages/python-repl"),
+    "q": () => import("highlight.js/lib/languages/q"),
+    "qml": () => import("highlight.js/lib/languages/qml"),
+    "r": () => import("highlight.js/lib/languages/r"),
+    "reasonml": () => import("highlight.js/lib/languages/reasonml"),
+    "rib": () => import("highlight.js/lib/languages/rib"),
+    "roboconf": () => import("highlight.js/lib/languages/roboconf"),
+    "routeros": () => import("highlight.js/lib/languages/routeros"),
+    "rsl": () => import("highlight.js/lib/languages/rsl"),
+    "ruleslanguage": () => import("highlight.js/lib/languages/ruleslanguage"),
+    "rust": () => import("highlight.js/lib/languages/rust"),
+    "sas": () => import("highlight.js/lib/languages/sas"),
+    "scala": () => import("highlight.js/lib/languages/scala"),
+    "scheme": () => import("highlight.js/lib/languages/scheme"),
+    "scilab": () => import("highlight.js/lib/languages/scilab"),
+    "scss": () => import("highlight.js/lib/languages/scss"),
+    "shell": () => import("highlight.js/lib/languages/shell"),
+    "smali": () => import("highlight.js/lib/languages/smali"),
+    "smalltalk": () => import("highlight.js/lib/languages/smalltalk"),
+    "sml": () => import("highlight.js/lib/languages/sml"),
+    "sqf": () => import("highlight.js/lib/languages/sqf"),
+    "sql": () => import("highlight.js/lib/languages/sql"),
+    "stan": () => import("highlight.js/lib/languages/stan"),
+    "stata": () => import("highlight.js/lib/languages/stata"),
+    "step21": () => import("highlight.js/lib/languages/step21"),
+    "stylus": () => import("highlight.js/lib/languages/stylus"),
+    "subunit": () => import("highlight.js/lib/languages/subunit"),
+    "swift": () => import("highlight.js/lib/languages/swift"),
+    "taggerscript": () => import("highlight.js/lib/languages/taggerscript"),
+    "yaml": () => import("highlight.js/lib/languages/yaml"),
+    "tap": () => import("highlight.js/lib/languages/tap"),
+    "tcl": () => import("highlight.js/lib/languages/tcl"),
+    "thrift": () => import("highlight.js/lib/languages/thrift"),
+    "tp": () => import("highlight.js/lib/languages/tp"),
+    "twig": () => import("highlight.js/lib/languages/twig"),
+    "typescript": () => import("highlight.js/lib/languages/typescript"),
+    "vala": () => import("highlight.js/lib/languages/vala"),
+    "vbnet": () => import("highlight.js/lib/languages/vbnet"),
+    "vbscript": () => import("highlight.js/lib/languages/vbscript"),
+    "vbscript-html": () => import("highlight.js/lib/languages/vbscript-html"),
+    "verilog": () => import("highlight.js/lib/languages/verilog"),
+    "vhdl": () => import("highlight.js/lib/languages/vhdl"),
+    "vim": () => import("highlight.js/lib/languages/vim"),
+    "wasm": () => import("highlight.js/lib/languages/wasm"),
+    "wren": () => import("highlight.js/lib/languages/wren"),
+    "x86asm": () => import("highlight.js/lib/languages/x86asm"),
+    "xl": () => import("highlight.js/lib/languages/xl"),
+    "xquery": () => import("highlight.js/lib/languages/xquery"),
+    "zephir": () => import("highlight.js/lib/languages/zephir"),
+}
+
+// hljs.listLanguages().map(l => ([l, hljs.getLanguage(l).aliases])).filter(([, b]) => b).map(([n, a]) => a.map(al => ([al, n]))).flat().map(([a, n]) => `"${a}": languages["${n}"]`).join(",\n")
+const aliases:  Record<string, typeof languages[keyof typeof languages]> = {
+    "as": languages["actionscript"],
+    "asc": languages["angelscript"],
+    "apacheconf": languages["apache"],
+    "osascript": languages["applescript"],
+    "ino": languages["arduino"],
+    "arm": languages["armasm"],
+    "html": languages["xml"],
+    "xhtml": languages["xml"],
+    "rss": languages["xml"],
+    "atom": languages["xml"],
+    "xjb": languages["xml"],
+    "xsd": languages["xml"],
+    "xsl": languages["xml"],
+    "plist": languages["xml"],
+    "wsf": languages["xml"],
+    "svg": languages["xml"],
+    "adoc": languages["asciidoc"],
+    "ahk": languages["autohotkey"],
+    "x++": languages["axapta"],
+    "sh": languages["bash"],
+    "bf": languages["brainfuck"],
+    "h": languages["c"],
+    "capnp": languages["capnproto"],
+    "icl": languages["clean"],
+    "dcl": languages["clean"],
+    "clj": languages["clojure"],
+    "edn": languages["clojure"],
+    "cmake.in": languages["cmake"],
+    "coffee": languages["coffeescript"],
+    "cson": languages["coffeescript"],
+    "iced": languages["coffeescript"],
+    "cls": languages["cos"],
+    "cc": languages["cpp"],
+    "c++": languages["cpp"],
+    "h++": languages["cpp"],
+    "hpp": languages["cpp"],
+    "hh": languages["cpp"],
+    "hxx": languages["cpp"],
+    "cxx": languages["cpp"],
+    "crm": languages["crmsh"],
+    "pcmk": languages["crmsh"],
+    "cr": languages["crystal"],
+    "cs": languages["csharp"],
+    "c#": languages["csharp"],
+    "md": languages["markdown"],
+    "mkdown": languages["markdown"],
+    "mkd": languages["markdown"],
+    "dpr": languages["delphi"],
+    "dfm": languages["delphi"],
+    "pas": languages["delphi"],
+    "pascal": languages["delphi"],
+    "patch": languages["diff"],
+    "jinja": languages["django"],
+    "bind": languages["dns"],
+    "zone": languages["dns"],
+    "docker": languages["dockerfile"],
+    "bat": languages["dos"],
+    "cmd": languages["dos"],
+    "dst": languages["dust"],
+    "ex": languages["elixir"],
+    "exs": languages["elixir"],
+    "rb": languages["ruby"],
+    "gemspec": languages["ruby"],
+    "podspec": languages["ruby"],
+    "thor": languages["ruby"],
+    "irb": languages["ruby"],
+    "erl": languages["erlang"],
+    "xlsx": languages["excel"],
+    "xls": languages["excel"],
+    "f90": languages["fortran"],
+    "f95": languages["fortran"],
+    "fs": languages["fsharp"],
+    "f#": languages["fsharp"],
+    "gms": languages["gams"],
+    "gss": languages["gauss"],
+    "nc": languages["gcode"],
+    "feature": languages["gherkin"],
+    "golang": languages["go"],
+    "gql": languages["graphql"],
+    "hbs": languages["handlebars"],
+    "html.hbs": languages["handlebars"],
+    "html.handlebars": languages["handlebars"],
+    "htmlbars": languages["handlebars"],
+    "hs": languages["haskell"],
+    "hx": languages["haxe"],
+    "https": languages["http"],
+    "hylang": languages["hy"],
+    "i7": languages["inform7"],
+    "toml": languages["ini"],
+    "jsp": languages["java"],
+    "js": languages["javascript"],
+    "jsx": languages["javascript"],
+    "mjs": languages["javascript"],
+    "cjs": languages["javascript"],
+    "wildfly-cli": languages["jboss-cli"],
+    "jldoctest": languages["julia-repl"],
+    "kt": languages["kotlin"],
+    "kts": languages["kotlin"],
+    "ls": languages["lasso"],
+    "lassoscript": languages["lasso"],
+    "tex": languages["latex"],
+    "mk": languages["makefile"],
+    "mak": languages["makefile"],
+    "make": languages["makefile"],
+    "mma": languages["mathematica"],
+    "wl": languages["mathematica"],
+    "m": languages["mercury"],
+    "moo": languages["mercury"],
+    "mips": languages["mipsasm"],
+    "pl": languages["perl"],
+    "pm": languages["perl"],
+    "moon": languages["moonscript"],
+    "nt": languages["nestedtext"],
+    "nginxconf": languages["nginx"],
+    "nixos": languages["nix"],
+    "mm": languages["objectivec"],
+    "objc": languages["objectivec"],
+    "obj-c": languages["objectivec"],
+    "obj-c++": languages["objectivec"],
+    "objective-c++": languages["objectivec"],
+    "ml": languages["ocaml"],
+    "scad": languages["openscad"],
+    "pf.conf": languages["pf"],
+    "postgres": languages["pgsql"],
+    "postgresql": languages["pgsql"],
+    "text": languages["plaintext"],
+    "txt": languages["plaintext"],
+    "pwsh": languages["powershell"],
+    "ps": languages["powershell"],
+    "ps1": languages["powershell"],
+    "pde": languages["processing"],
+    "pp": languages["puppet"],
+    "pb": languages["purebasic"],
+    "pbi": languages["purebasic"],
+    "py": languages["python"],
+    "gyp": languages["python"],
+    "ipython": languages["python"],
+    "pycon": languages["python-repl"],
+    "k": languages["q"],
+    "kdb": languages["q"],
+    "qt": languages["qml"],
+    "re": languages["reasonml"],
+    "graph": languages["roboconf"],
+    "instances": languages["roboconf"],
+    "mikrotik": languages["routeros"],
+    "rs": languages["rust"],
+    "scm": languages["scheme"],
+    "sci": languages["scilab"],
+    "console": languages["shell"],
+    "shellsession": languages["shell"],
+    "st": languages["smalltalk"],
+    "stanfuncs": languages["stan"],
+    "do": languages["stata"],
+    "ado": languages["stata"],
+    "p21": languages["step21"],
+    "step": languages["step21"],
+    "stp": languages["step21"],
+    "styl": languages["stylus"],
+    "yml": languages["yaml"],
+    "tk": languages["tcl"],
+    "craftcms": languages["twig"],
+    "ts": languages["typescript"],
+    "tsx": languages["typescript"],
+    "vb": languages["vbnet"],
+    "vbs": languages["vbscript"],
+    "v": languages["verilog"],
+    "sv": languages["verilog"],
+    "svh": languages["verilog"],
+    "tao": languages["xl"],
+    "xpath": languages["xquery"],
+    "xq": languages["xquery"],
+    "zep": languages["zephir"]
+}
+
+interface ParseMarkdownOptions {
+    parseTimestamps?: boolean;
+    embed?: boolean;
+}
+
+const parseMarkdown = async (raw: string, opts?: ParseMarkdownOptions) => {
+    if (opts?.parseTimestamps) {
+        raw = parseTimestamps(raw);
+    }
+
+    const markdownUnparsed = toHTML(raw, { embed: opts?.embed });
+    const markdownUnparsedDom = new DOMParser().parseFromString(markdownUnparsed, "text/html");
+
+    const codeBlocks = markdownUnparsedDom.querySelectorAll("pre code[data-code]");
+
+    const promies = Array.from(codeBlocks).map(async (codeBlock) => {
+        let code: string = window.atob(codeBlock.getAttribute("data-code"));
+
+        codeBlock.classList.add("hljs");
+
+        const specifiedLanguage = codeBlock.getAttribute("data-code-language");
+        const languageImportFn = languages[specifiedLanguage] ?? aliases[specifiedLanguage];
+
+        if (languageImportFn) {
+            if (!hljs.getLanguage(specifiedLanguage)) {
+                const languageImport = await languageImportFn();
+
+                hljs.registerLanguage(specifiedLanguage, languageImport.default);
+            }
+
+            codeBlock.classList.add(specifiedLanguage);
+            codeBlock.innerHTML = hljs.highlight(code, {language: specifiedLanguage}).value;
+        } else {
+            codeBlock.textContent = code;
+        }
+
+        codeBlock.removeAttribute("data-code");
+        codeBlock.removeAttribute("data-code-language");
+    });
+
+    await Promise.all(promies);
+
+    return markdownUnparsedDom.body.innerHTML;
+}
+
+export default parseMarkdown;

dashboard/src/components/common/AwaitHtml.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let htmlPromise: Promise<string> = Promise.resolve("");
+</script>
+
+{#await htmlPromise}
+    (loading...)
+{:then html}
+    {@html html ?? ""}
+{:catch error}
+    (failed to parse: {error?.message ?? String(error)})
+{/await}

dashboard/src/components/common/CardsHeader.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
     import { tick } from 'svelte';
     import { Modal, CardTitle} from 'sveltestrap';
+    import AwaitHtml from './AwaitHtml.svelte';
     import default_avatar from '../../assets/default_avatar.png';
     import resizeMedia from '../../api/resize-media';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../../api/parse-markdown';
     import twemoji from 'twemoji';
 
     export let item: any;
     export let searchBy: string = null;
     export let sortBy: string = null;
 
-    let htmlName: string;
+    let htmlNamePromise: Promise<string>;
     let nameElement: any;
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
     $: if (item.name) {
-        if ((searchBy === "display_name" || sortBy === "display_name") && item.display_name) htmlName = toHTML(item.display_name);
+        if ((searchBy === "display_name" || sortBy === "display_name") && item.display_name) htmlNamePromise = parseMarkdown(item.display_name);
-        else htmlName = toHTML(item.name);
+        else htmlNamePromise = parseMarkdown(item.name);
-    } else htmlName = "";
+    }
 
     $: if (settings && settings.appearance.twemoji) {
         if (nameElement) twemoji.parse(nameElement, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' });
@@ -47,7 +48,7 @@
             <div class="icon d-inline-block">
                 <slot name="icon" />
             </div>
-            <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
+            <span bind:this={nameElement} style="vertical-align: middle;"><AwaitHtml htmlPromise={htmlNamePromise} /> ({item.id})</span>
         </div>
         <div style="margin-left: auto;">
         {#if item && (item.avatar_url || item.icon)}

dashboard/src/components/group/Body.svelte

@@ -2,8 +2,7 @@
     import { tick } from 'svelte';
     import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
     import moment from 'moment';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../../api/parse-markdown';
-    import parseTimestamps from '../../api/parse-timestamps';
     import resizeMedia from '../../api/resize-media';
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
@@ -12,6 +11,7 @@
     import { Link, useLocation } from 'svelte-navigator';
 
     import type { Member, Group } from '../../api/types';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
    
     export let group: Group;
     let editMode: boolean = false;
@@ -21,14 +21,13 @@
     export let isMainDash = true;
     export let isPage = false;
 
-    let htmlDescription: string;
+    let htmlDescriptionPromise: Promise<string>;
     $: if (group.description) {
-        htmlDescription = toHTML(parseTimestamps(group.description), {embed: true});
+        htmlDescriptionPromise = parseMarkdown(group.description, { parseTimestamps: true, embed: true });
-    } else {
-        htmlDescription = "(no description)";
     }
-    let htmlDisplayName: string;
+
-    $: if (group.display_name) htmlDisplayName = toHTML(group.display_name)
+    let htmlDisplayNamePromise: Promise<string>;
+    $: if (group.display_name) htmlDisplayNamePromise = parseMarkdown(group.display_name, { parseTimestamps: true, embed: true });
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
     let descriptionElement: any;
@@ -83,7 +82,7 @@
     {/if}
     {#if group.display_name}
     <Col xs={12} lg={4} class="mb-2">
-        <b>Display Name:</b> <span bind:this={displayNameElement}>{@html htmlDisplayName}</span>
+        <b>Display Name:</b> <span bind:this={displayNameElement}><AwaitHtml htmlPromise={htmlDisplayNamePromise} /></span>
     </Col>
     {/if}
     {#if group.created && !isPublic}
@@ -122,7 +121,7 @@
 </Row>
 <div class="mt-2 mb-3 description" bind:this={descriptionElement}>
     <b>Description:</b><br />
-    {@html htmlDescription && htmlDescription}
+    <AwaitHtml htmlPromise={htmlDescriptionPromise} />
 </div>
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
 <img on:click={toggleBannerModal} src={resizeMedia(group.banner, [1200, 480])} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover; cursor: pointer"/>

dashboard/src/components/group/CardView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
     import { Card, CardHeader, CardTitle, Modal, Button, ListGroup, ListGroupItem, Label, Input, Alert, Tooltip, Row, Col } from 'sveltestrap';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../../api/parse-markdown';
     import twemoji from 'twemoji';
     import { Link } from 'svelte-navigator';
     import { autoresize } from 'svelte-textarea-autoresize';
@@ -16,6 +16,7 @@
     import api from '../../api';
     import default_avatar from '../../assets/default_avatar.png';
     import resizeMedia from '../../api/resize-media';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
 
     export let group: Group;
     export let searchBy: string;
@@ -33,17 +34,17 @@
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
-    let htmlName: string;
+    let htmlNamePromise: Promise<string>;
-    $: htmlDesc = group.description && toHTML(group.description, { embed: true}) || "(no description)";
+    $: htmlDescPromise = group.description ? parseMarkdown(group.description, { embed: true }) : Promise.resolve("(no description)");
-    $: htmlDisplayName = group.display_name && toHTML(group.display_name);
+    $: htmlDisplayNamePromise = group.display_name ? parseMarkdown(group.display_name, { embed: true }) : undefined;
 
     let nameElement: any;
     let descElement: any;
     let dnElement: any;
 
     $: if (group.name) {
-        if ((searchBy === "display name" || sortBy === "display name") && group.display_name) htmlName = toHTML(group.display_name);
+        if ((searchBy === "display name" || sortBy === "display name") && group.display_name) htmlNamePromise = parseMarkdown(group.display_name);
-        else htmlName = toHTML(group.name);
+        else htmlNamePromise = parseMarkdown(group.name);
     }
     if (settings && settings.appearance.twemoji) {
         if (nameElement) twemoji.parse(nameElement, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' });
@@ -111,7 +112,7 @@
             <div class="icon d-inline-block">
                 <slot name="icon" />
             </div>
-            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlName} ({group.id})</span>
+            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlNamePromise} ({group.id})</span>
         </CardTitle>
     </CardHeader>
     <div class="card-body d-block hide-scrollbar" style="flex: 1; overflow: auto;">
@@ -123,11 +124,11 @@
             </div>
         </Modal>
         {#if group.display_name}
-        <div class="text-center" bind:this={dnElement}><b>{@html htmlDisplayName}</b></div>
+        <div class="text-center" bind:this={dnElement}><b><AwaitHtml htmlPromise={htmlDisplayNamePromise} /></b></div>
         {/if}
         <hr style="min-height: 1px;"/>
         <div bind:this={descElement}>
-            {@html htmlDesc}
+            <AwaitHtml htmlPromise={htmlDescPromise} />
         </div>
         <hr style="min-height: 1px;"/>
         <Row>
@@ -150,7 +151,7 @@
             <hr style="min-height: 1px"/>
             <ListGroup>
                 {#each memberList as member, index (member.id)}
-                <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b>{@html toHTML(member.name)}</b> (<code>{member.id}</code>)</span></ListGroupItem>
+                <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b><AwaitHtml htmlPromise={parseMarkdown(member.name)} /></b> (<code>{member.id}</code>)</span></ListGroupItem>
                 {/each}
             </ListGroup>
             {:else}

dashboard/src/components/member/Body.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
     import { tick } from 'svelte';
-    import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody } from 'sveltestrap';
+    import { Row, Col, Modal, Button, CardBody, ModalHeader, ModalBody } from 'sveltestrap';
     import moment from 'moment';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../../api/parse-markdown';
-    import parseTimestamps from '../../api/parse-timestamps';
     import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
@@ -14,6 +13,7 @@
 
     import type { Member, Group } from '../../api/types';
     import { Link, useLocation } from 'svelte-navigator';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
 
     export let groups: Group[] = [];
     export let member: Member;
@@ -24,16 +24,14 @@
     let editMode: boolean = false;
     let groupMode: boolean = false;
 
-    let htmlDescription: string;
+    let htmlDescriptionPromise: Promise<string> = Promise.resolve("(no description)");
     $: if (member.description) {
-        htmlDescription = toHTML(parseTimestamps(member.description), {embed: true});
+        htmlDescriptionPromise = parseMarkdown(member.description, { parseTimestamps: true, embed: true });
-    } else {
-        htmlDescription = "(no description)";
     }
 
-    let htmlPronouns: string;
+    let htmlPronounsPromise: Promise<string>;
     $: if (member.pronouns) {
-        htmlPronouns = toHTML(parseTimestamps(member.pronouns), {embed: true});
+        htmlPronounsPromise = parseMarkdown(member.pronouns, { parseTimestamps: true, embed: true });
     }
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
@@ -115,7 +113,7 @@
         {/if}
         {#if member.pronouns}
         <Col xs={12} lg={4} class="mb-2">
-            <b>Pronouns:</b> <span bind:this={pronounElement}>{@html htmlPronouns}</span>
+            <b>Pronouns:</b> <span bind:this={pronounElement}><AwaitHtml htmlPromise={htmlPronounsPromise} /></span>
         </Col>
         {/if}
         {#if member.birthday}
@@ -172,7 +170,7 @@
     </Row>
     <div class="my-2 mb-3 description" bind:this={descriptionElement}>
         <b>Description:</b><br />
-        {@html htmlDescription && htmlDescription}
+        <AwaitHtml htmlPromise={htmlDescriptionPromise} />
     </div>
     {#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
     <img on:click={toggleBannerModal} src={resizeMedia(member.banner, [1200, 480])} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover; cursor: pointer"/>

dashboard/src/components/member/CardView.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
     import { Card, CardHeader, CardTitle, Modal, Button, ListGroup, ListGroupItem, Input, Alert, Label, Spinner, Row, Col, Tooltip } from 'sveltestrap';
-    import { toHTML } from 'discord-markdown';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
+    import parseMarkdown from '../../api/parse-markdown';
     import twemoji from 'twemoji';
     import { Link } from 'svelte-navigator';
     import { autoresize } from 'svelte-textarea-autoresize';
@@ -34,10 +35,10 @@
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
     
-    let htmlName: string;
+    let htmlNamePromise: Promise<string>;
-    $: htmlDesc = member.description && toHTML(member.description, { embed: true}) || "(no description)";
+    $: htmlDescPromise = member.description ? parseMarkdown(member.description, { embed: true }) : Promise.resolve("(no description)");
-    $: htmlDisplayName = member.display_name && toHTML(member.display_name);
+    $: htmlDisplayNamePromise = member.display_name ? parseMarkdown(member.display_name) : undefined;
-    $: htmlPronouns = member.pronouns && toHTML(member.pronouns, {embed: true});
+    $: htmlPronounsPromise = member.pronouns ? parseMarkdown(member.pronouns, {embed: true}) : undefined;
 
     let nameElement: any;
     let descElement: any;
@@ -45,8 +46,8 @@
     let prnsElement: any;
 
     $: if (member.name) {
-        if ((searchBy === "display name" || sortBy === "display name") && member.display_name) htmlName = toHTML(member.display_name);
+        if ((searchBy === "display name" || sortBy === "display name") && member.display_name) htmlNamePromise = parseMarkdown(member.display_name);
-        else htmlName = toHTML(member.name);
+        else htmlNamePromise = parseMarkdown(member.name);
     }
     if (settings && settings.appearance.twemoji) {
         if (nameElement) twemoji.parse(nameElement, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' });
@@ -117,7 +118,7 @@
             <div class="icon d-inline-block">
                 <slot name="icon" />
             </div>
-            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlName} ({member.id})</span>
+            <span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;"><AwaitHtml htmlPromise={htmlNamePromise} /> ({member.id})</span>
         </CardTitle>
     </CardHeader>
     <div class="card-body d-block hide-scrollbar" style="flex: 1; overflow: auto;">
@@ -129,14 +130,14 @@
             </div>
         </Modal>
         {#if member.display_name}
-        <div class="text-center" bind:this={dnElement}><b>{@html htmlDisplayName}</b></div>
+        <div class="text-center" bind:this={dnElement}><b><AwaitHtml htmlPromise={htmlDisplayNamePromise} /></b></div>
         {/if}
         {#if member.pronouns}
-        <div class="text-center" bind:this={prnsElement}>{@html htmlPronouns}</div>
+        <div class="text-center" bind:this={prnsElement}><AwaitHtml htmlPromise={htmlPronounsPromise} /></div>
         {/if}
         <hr style="min-height: 1px;"/>
         <div bind:this={descElement}>
-            {@html htmlDesc}
+            <AwaitHtml htmlPromise={htmlDescPromise} />
         </div>
         <hr style="min-height: 1px;"/>
         <Row>
@@ -159,7 +160,7 @@
         <hr style="min-height: 1px"/>
         <ListGroup>
             {#each groupList as group, index (group.id)}
-            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b>{@html toHTML(group.name)}</b> (<code>{group.id}</code>)</span></ListGroupItem>
+            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b><AwaitHtml htmlPromise={parseMarkdown(group.name)} /></b> (<code>{group.id}</code>)</span></ListGroupItem>
             {/each}
         </ListGroup>
         {:else}

dashboard/src/components/member/GroupEdit.svelte

@@ -3,7 +3,8 @@
     import ListPagination from "../common/ListPagination.svelte";
     import twemoji from "twemoji";
     import Svelecte, { addFormatter } from 'svelecte';
-    import { toHTML } from 'discord-markdown';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
+    import parseMarkdown from '../../api/parse-markdown';
 
     import FaFolderOpen from 'svelte-icons/fa/FaFolderOpen.svelte'
     import FaFolderPlus from 'svelte-icons/fa/FaFolderPlus.svelte'
@@ -115,7 +116,7 @@
         {#if finalGroupsList && finalGroupsList.length > 0}
         <ListGroup>
             {#each finalGroupsList as group, index (group.id)}
-            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{group.name}</b> (<code>{group.id}</code>)</span> <span>{@html group.display_name ? `${toHTML(group.display_name)}` : ""}</span></span></ListGroupItem>
+            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{group.name}</b> (<code>{group.id}</code>)</span> <span><AwaitHtml htmlPromise={parseMarkdown(group.display_name)} /></span></span></ListGroupItem>
             {/each}
         </ListGroup>
         {:else}

dashboard/src/components/system/Body.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
     import { Row, Col, Modal, Image, Button } from 'sveltestrap';
     import moment from 'moment';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../../api/parse-markdown';
-    import parseTimestamps from '../../api/parse-timestamps';
     import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
     import type { System } from '../../api/types';
+    import AwaitHtml from '../common/AwaitHtml.svelte';
 
     export let user: System;
     export let editMode: boolean;
     export let isPublic: boolean;
 
-    let htmlDescription: string;
+    let htmlDescriptionPromise: Promise<string>;
-    let htmlName: string;
+    let htmlNamePromise: Promise<string>;
-    let htmlPronouns: string;
+    let htmlPronounsPromise: Promise<string>;
 
     if (user.description) {
-        htmlDescription = toHTML(parseTimestamps(user.description), {embed: true});
+        htmlDescriptionPromise = parseMarkdown(user.description, { embed: true, parseTimestamps: true });
     } else {
-        htmlDescription = "(no description)";
+        htmlDescriptionPromise = Promise.resolve("(no description)");
     }
 
     if (user.name) {
-        htmlName = toHTML(user.name);
+        htmlNamePromise = parseMarkdown(user.name);
     }
 
     if (user.pronouns) {
-        htmlPronouns = toHTML(user.pronouns);
+        htmlPronounsPromise = parseMarkdown(user.pronouns);
     }
 
     let created = moment(user.created).format("MMM D, YYYY");
@@ -58,7 +58,7 @@
     {/if}
     {#if user.name}
     <Col xs={12} lg={4} class="mb-2">
-        <span  bind:this={nameElement}><b>Name:</b> {@html htmlName}</span>
+        <span  bind:this={nameElement}><b>Name:</b> <AwaitHtml htmlPromise={htmlNamePromise} /></span>
     </Col>
     {/if}
     {#if user.tag}
@@ -68,7 +68,7 @@
     {/if}
     {#if user.pronouns}
     <Col xs={12} lg={4} class="mb-2">
-        <span bind:this={pronounElement}><b>Pronouns:</b> {@html htmlPronouns}</span>
+        <span bind:this={pronounElement}><b>Pronouns:</b> <AwaitHtml htmlPromise={htmlPronounsPromise} /></span>
     </Col>
     {/if}
     {#if user.created && !isPublic}
@@ -99,7 +99,7 @@
 </Row>
 <div class="my-2 description" bind:this={descriptionElement}>
     <b>Description:</b><br />
-    {@html htmlDescription}
+    <AwaitHtml htmlPromise={htmlDescriptionPromise} />
 </div>
 {#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
 <img on:click={toggleBannerModal} src={resizeMedia(user.banner, [1200, 480])} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover; cursor: pointer;"/>

dashboard/src/routes/Home.svelte

@@ -6,10 +6,11 @@
     import { loggedIn, currentUser } from '../stores';
     import { Link } from 'svelte-navigator';
     import twemoji from 'twemoji';
-    import { toHTML } from 'discord-markdown';
+    import parseMarkdown from '../api/parse-markdown';
 
     import type { System } from '../api/types';
     import api from '../api';
+    import AwaitHtml from '../components/common/AwaitHtml.svelte';
 
     let loading = false;
     let err: string;
@@ -70,9 +71,9 @@
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
     let welcomeElement: any;
-    let htmlName: string;
+    let htmlNamePromise: Promise<string>;
     $: if (user && user.name) {
-        htmlName = toHTML(user.name);
+        htmlNamePromise = parseMarkdown(user.name);
     }
     $: if (settings && settings.appearance.twemoji) {
         if (welcomeElement) twemoji.parse(welcomeElement, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' });
@@ -103,7 +104,7 @@
                         verifying login...
                     {:else if isLoggedIn}
                         {#if user && user.name}
-                            <p bind:this={welcomeElement}>Welcome, <b>{@html htmlName}</b>!</p>
+                            <p bind:this={welcomeElement}>Welcome, <b><AwaitHtml htmlPromise={htmlNamePromise} /></b>!</p>
                         {:else}
                             <p>Welcome!</p>
                         {/if}

dashboard/vite.config.js

@@ -15,8 +15,11 @@ export default defineConfig({
         if (filename.length < 2) return 'index';
         else filename = filename[1];
 
-        // this is really big and makes the map size go over the sentry file cache limit
+        if (filename.startsWith("/highlight.js/es/languages/")) {
-        if (filename.includes("highlight.js")) return 'vendor-0';
+            const lang = filename.split("/").pop().split(".").shift();
+
+            return `vendor_hljs-${lang}`;
+        }
 
         return 'vendor-1';
         // return `vendor-${filename.charCodeAt(1) % 2}`;

dashboard/yarn.lock

@@ -225,6 +225,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base-64@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a"
+  integrity sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -341,12 +346,11 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
-discord-markdown@^2.5.1:
+"discord-markdown@https://github.com/repository/discord-markdown#b9608feef6856c9baa68f96c932a25c1d2bc55c2":
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/discord-markdown/-/discord-markdown-2.5.1.tgz#d18773c6e3cff8df90f305654ecbbc5e38c507eb"
+  resolved "https://github.com/repository/discord-markdown#b9608feef6856c9baa68f96c932a25c1d2bc55c2"
-  integrity sha512-SGNlL1Y8NYjY2MA5Vj1SI5+Ue5GUW2HkkDAq5jPQ6fI5j/rwOB814lFNhfs2AJMT72Jij8usTEqWZfdU8C3uag==
   dependencies:
-    highlight.js "^11.2.0"
+    base-64 "^1.0.0"
     simple-markdown "^0.7.3"
 
 email-addresses@^3.0.1:
@@ -653,10 +657,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-highlight.js@^11.2.0:
+highlight.js@^11.7.0:
-  version "11.3.1"
+  version "11.7.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
-  integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
+  integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
 
 immutable@^4.0.0:
   version "4.1.0"