eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-09 23:37:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
* lazyload hl.js languages

* pin repository/discord-markdown
This commit is contained in:
repository 2023-03-13 09:13:09 -07:00 • committed by GitHub
parent 97be223173
commit 5a248e26a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 530 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

11
dashboard/src/components/common/AwaitHtml.svelte Normal file
View file

@ -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}

15
dashboard/src/components/common/CardsHeader.svelte
View file

@ -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)}