liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

21
dashboard/src/components/group/Body.svelte
View File

@@ -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"/>

23
dashboard/src/components/group/CardView.svelte
View File

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

28
dashboard/src/components/member/Body.svelte
View File

@@ -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"/>

25
dashboard/src/components/member/CardView.svelte
View File

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

5
dashboard/src/components/member/GroupEdit.svelte
View File

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

28
dashboard/src/components/system/Body.svelte
View File

@@ -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;"/>