feat: use markdown-it instead of marked for descriptions

frontend/src/lib/api/markdown.ts

@@ -0,0 +1,11 @@
+import MarkdownIt from "markdown-it";
+import sanitize from "sanitize-html";
+
+const md = new MarkdownIt({
+  html: false,
+  breaks: true,
+}).disable(["heading", "link", "table"]);
+
+export default function renderMarkdown(src: string | null) {
+  return src ? sanitize(md.render(src)) : null;
+}

frontend/src/routes/@[username]/+page.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import { marked } from "marked";
-  import sanitizeHtml from "sanitize-html";
-
   import type { PageData } from "./$types";
 
   import {
@@ -33,11 +30,12 @@
   import { apiFetchClient } from "$lib/api/fetch";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { goto } from "$app/navigation";
+  import renderMarkdown from "$lib/api/markdown";
 
   export let data: PageData;
 
   let bio: string | null;
-  $: bio = data.bio ? sanitizeHtml(marked.parse(data.bio, { breaks: true })) : null;
+  $: bio = renderMarkdown(data.bio);
 
   let memberPage: number = 0;
   let memberSlice: PartialMember[] = [];

frontend/src/routes/@[username]/[memberName]/+page.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import { marked } from "marked";
-  import sanitizeHtml from "sanitize-html";
-
   import FieldCard from "$lib/components/FieldCard.svelte";
 
   import type { PageData } from "./$types";
@@ -12,11 +9,12 @@
   import { memberAvatars, pronounDisplay, WordStatus } from "$lib/api/entities";
   import { PUBLIC_BASE_URL } from "$env/static/public";
   import { userStore } from "$lib/store";
+  import renderMarkdown from "$lib/api/markdown";
 
   export let data: PageData;
 
   let bio: string | null;
-  $: bio = data.bio ? sanitizeHtml(marked.parse(data.bio, { breaks: true })) : null;
+  $: bio = renderMarkdown(data.bio);
 
   const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
   const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);

frontend/src/routes/edit/member/[id]/+page.svelte

@@ -335,8 +335,8 @@
               accept="image/png, image/jpeg, image/gif, image/webp"
             />
             <p class="text-muted mt-3">
-              <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP can be used as avatars.
-              Avatars cannot be larger than 1 MB, and animated avatars will be made static.
+              <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP can be used
+              as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static.
             </p>
             <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
           </div>
@@ -357,6 +357,15 @@
           <FormGroup floating label="Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})">
             <textarea style="min-height: 100px;" class="form-control" bind:value={bio} />
           </FormGroup>
+          <p class="text-muted mt-3">
+            <Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
+            <a
+              class="text-reset"
+              href="https://commonmark.org/help/"
+              target="_blank"
+              rel="noopener noreferrer">Markdown</a
+            >.
+          </p>
         </div>
       </div>
     </div>

frontend/src/routes/edit/profile/+page.svelte

@@ -282,8 +282,9 @@
               accept="image/png, image/jpeg, image/gif, image/webp"
             />
             <p class="text-muted mt-3">
-              <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP images can be used as avatars.
-              Avatars cannot be larger than 1 MB, and animated avatars will be made static.
+              <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP images can be
+              used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made
+              static.
             </p>
             <p>
               <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
@@ -299,6 +300,15 @@
           <FormGroup floating label="Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})">
             <textarea style="min-height: 100px;" class="form-control" bind:value={bio} />
           </FormGroup>
+          <p class="text-muted mt-3">
+            <Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
+            <a
+              class="text-reset"
+              href="https://commonmark.org/help/"
+              target="_blank"
+              rel="noopener noreferrer">Markdown</a
+            >.
+          </p>
         </div>
       </div>
     </div>