feat: more twemoji and discord parsing in places

src/lib/CardsHeader.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
     import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
-    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
     import default_avatar from '../assets/default_avatar.png';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';  
 
     export let item: any;
 
-    let icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
+    let htmlName: string;
+    let nameElement: any; 
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    $: htmlName = toHTML(item.name);
+    $: if (settings && settings.appearance.twemoji) {
+        if (nameElement) twemoji.parse(nameElement);
+    }
+
+    $: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
 
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
@@ -18,7 +28,7 @@
             <div class="icon d-inline-block">
                 <slot name="icon" />
             </div>
-            <span style="vertical-align: middle;">{item.name} ({item.id})</span>
+            <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
         </div>
         <div>
         {#if loading}

src/lib/system/Body.svelte

@@ -3,24 +3,40 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import type Sys from '../../api/system';
+    import twemoji from 'twemoji';
    
     export let user: Sys;
     export let editMode: boolean;
     export let isPublic: boolean;
 
     let htmlDescription: string;
+    let htmlName: string;
     if (user.description) { 
         htmlDescription = toHTML(user.description, {embed: true});
     } else {
         htmlDescription = "(no description)";
     }
 
+    if (user.name) {
+        htmlName = toHTML(user.name);
+    }
+
     let created = moment(user.created).format("MMM D, YYYY");
 
     let bannerOpen = false;
     const toggleBannerModal = () => (bannerOpen = !bannerOpen);
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    let descriptionElement: any;
+    let nameElement: any;
+    let tagElement: any;
+
+    $: if (settings && settings.appearance.twemoji) {
+        if (descriptionElement) twemoji.parse(descriptionElement);
+        if (nameElement) twemoji.parse(nameElement);
+        if (tagElement) twemoji.parse(tagElement);
+    }
+
 </script>
 
 <Row>
@@ -31,12 +47,12 @@
     {/if}
     {#if user.name}
     <Col xs={12} lg={4} class="mb-2">
-        <b>Name:</b> {user.name}
+        <span  bind:this={nameElement}><b>Name:</b> {@html htmlName}</span>
     </Col>
     {/if}
     {#if user.tag}
     <Col xs={12} lg={4} class="mb-2">
-        <b>Tag:</b> {user.tag}
+        <span bind:this={tagElement}><b>Tag:</b> {user.tag}</span>
     </Col>
     {/if}
     {#if user.created && !isPublic}
@@ -65,7 +81,7 @@
     </Col>
     {/if}
 </Row>
-<div class="my-2 description">
+<div class="my-2 description" bind:this={descriptionElement}>
     <b>Description:</b><br />
     {@html htmlDescription}
 </div>

src/pages/Home.svelte

@@ -4,6 +4,8 @@
     import FaLockOpen from 'svelte-icons/fa/FaLockOpen.svelte';
     import { loggedIn, currentUser } from '../stores';
     import { Link } from 'svelte-navigator';
+    import twemoji from 'twemoji';
+    import { toHTML } from 'discord-markdown';
 
     import PKAPI from '../api/index';
     import type Sys from '../api/system';
@@ -61,6 +63,16 @@
         currentUser.update(() => null);
     }
 
+    let settings = JSON.parse(localStorage.getItem("settings"));
+    let welcomeElement: any;
+    let htmlName: string;
+    $: if (user && user.name) {
+        htmlName = toHTML(user.name);
+    }
+    $: if (settings && settings.appearance.twemoji) {
+        if (welcomeElement) twemoji.parse(welcomeElement);
+    }
+
 </script>
 
 <Container>
@@ -82,9 +94,9 @@
                         verifying login...
                     {:else if isLoggedIn}
                         {#if user && user.name}
-                            <p>Welcome back, <b>{user.name}</b>!</p>
+                            <p bind:this={welcomeElement}>Welcome, <b>{@html htmlName}</b>!</p>
                         {:else}
-                            <p>Welcome back!</p>
+                            <p>Welcome!</p>
                         {/if}
                         <Link to="/dash"><Button style="float: left;" color='primary'>Go to dash</Button></Link><Button style="float: right;" color='danger' on:click={logout}>Log out</Button>
                     {:else}