reduce dashboard bundle size by lazy loading highlight.js languages (#533)
* lazyload hl.js languages * pin repository/discord-markdown
This commit is contained in:
repository
GitHub
parent
97be223173
commit
5a248e26a2
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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}
|
||||
|
|
@ -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 nameElement: any;
|
||||
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);
|
||||
else htmlName = toHTML(item.name);
|
||||
} else htmlName = "";
|
||||
if ((searchBy === "display_name" || sortBy === "display_name") && item.display_name) htmlNamePromise = parseMarkdown(item.display_name);
|
||||
else htmlNamePromise = parseMarkdown(item.name);
|
||||
}
|
||||
|
||||
$: 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)}
|
||||
|
|
|
|||
|
|
@ -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 parseTimestamps from '../../api/parse-timestamps';
|
||||
import parseMarkdown from '../../api/parse-markdown';
|
||||
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;
|
||||
$: if (group.description) {
|
||||
htmlDescription = toHTML(parseTimestamps(group.description), {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
let htmlDescriptionPromise: Promise<string>;
|
||||
$: if (group.description) {
|
||||
htmlDescriptionPromise = parseMarkdown(group.description, { parseTimestamps: true, embed: true });
|
||||
}
|
||||
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"/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -32,18 +33,18 @@
|
|||
let success = false;
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let htmlName: string;
|
||||
$: htmlDesc = group.description && toHTML(group.description, { embed: true}) || "(no description)";
|
||||
$: htmlDisplayName = group.display_name && toHTML(group.display_name);
|
||||
|
||||
let htmlNamePromise: Promise<string>;
|
||||
$: htmlDescPromise = group.description ? parseMarkdown(group.description, { embed: true }) : Promise.resolve("(no description)");
|
||||
$: 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);
|
||||
else htmlName = toHTML(group.name);
|
||||
if ((searchBy === "display name" || sortBy === "display name") && group.display_name) htmlNamePromise = parseMarkdown(group.display_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}
|
||||
|
|
|
|||
|
|
@ -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 parseTimestamps from '../../api/parse-timestamps';
|
||||
import parseMarkdown from '../../api/parse-markdown';
|
||||
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;
|
||||
$: if (member.description) {
|
||||
htmlDescription = toHTML(parseTimestamps(member.description), {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
let htmlDescriptionPromise: Promise<string> = Promise.resolve("(no description)");
|
||||
$: if (member.description) {
|
||||
htmlDescriptionPromise = parseMarkdown(member.description, { parseTimestamps: true, embed: true });
|
||||
}
|
||||
|
||||
let htmlPronouns: string;
|
||||
$: if (member.pronouns) {
|
||||
htmlPronouns = toHTML(parseTimestamps(member.pronouns), {embed: true});
|
||||
let htmlPronounsPromise: Promise<string>;
|
||||
$: if (member.pronouns) {
|
||||
htmlPronounsPromise = parseMarkdown(member.pronouns, { parseTimestamps: true, embed: true });
|
||||
}
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
|
@ -58,12 +56,12 @@
|
|||
|
||||
let created = moment(member.created).format("MMM D, YYYY");
|
||||
let birthday: string;
|
||||
$: {member.birthday;
|
||||
$: {member.birthday;
|
||||
if (member.birthday) birthday = moment(member.birthday, "YYYY-MM-DD").format("MMM D, YYYY");
|
||||
}
|
||||
|
||||
$: trimmedBirthday = birthday && birthday.endsWith(', 0004') ? trimmedBirthday = birthday.replace(', 0004', '') : birthday;
|
||||
|
||||
|
||||
async function focus(el) {
|
||||
await tick();
|
||||
el.focus();
|
||||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$: htmlDesc = member.description && toHTML(member.description, { embed: true}) || "(no description)";
|
||||
$: htmlDisplayName = member.display_name && toHTML(member.display_name);
|
||||
$: htmlPronouns = member.pronouns && toHTML(member.pronouns, {embed: true});
|
||||
let htmlNamePromise: Promise<string>;
|
||||
$: htmlDescPromise = member.description ? parseMarkdown(member.description, { embed: true }) : Promise.resolve("(no description)");
|
||||
$: htmlDisplayNamePromise = member.display_name ? parseMarkdown(member.display_name) : undefined;
|
||||
$: 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);
|
||||
else htmlName = toHTML(member.name);
|
||||
if ((searchBy === "display name" || sortBy === "display name") && member.display_name) htmlNamePromise = parseMarkdown(member.display_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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 parseTimestamps from '../../api/parse-timestamps';
|
||||
import parseMarkdown from '../../api/parse-markdown';
|
||||
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 htmlName: string;
|
||||
let htmlPronouns: string;
|
||||
let htmlDescriptionPromise: Promise<string>;
|
||||
let htmlNamePromise: Promise<string>;
|
||||
let htmlPronounsPromise: Promise<string>;
|
||||
|
||||
if (user.description) {
|
||||
htmlDescription = toHTML(parseTimestamps(user.description), {embed: true});
|
||||
if (user.description) {
|
||||
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;"/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,15 @@ 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.includes("highlight.js")) return 'vendor-0';
|
||||
if (filename.startsWith("/highlight.js/es/languages/")) {
|
||||
const lang = filename.split("/").pop().split(".").shift();
|
||||
|
||||
return `vendor_hljs-${lang}`;
|
||||
}
|
||||
|
||||
return 'vendor-1';
|
||||
// return `vendor-${filename.charCodeAt(1) % 2}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
integrity sha512-SGNlL1Y8NYjY2MA5Vj1SI5+Ue5GUW2HkkDAq5jPQ6fI5j/rwOB814lFNhfs2AJMT72Jij8usTEqWZfdU8C3uag==
|
||||
resolved "https://github.com/repository/discord-markdown#b9608feef6856c9baa68f96c932a25c1d2bc55c2"
|
||||
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:
|
||||
version "11.3.1"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
|
||||
integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
|
||||
highlight.js@^11.7.0:
|
||||
version "11.7.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
|
||||
integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
|
||||
|
||||
immutable@^4.0.0:
|
||||
version "4.1.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue