From 634530ba068b2542811a5216fdceeee26bf3f7fb Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 3 Apr 2023 23:49:02 +0200
Subject: [PATCH] feat: add markdown help on edit page rather than linking out

---
 frontend/src/routes/edit/MarkdownHelp.svelte  | 47 +++++++++++++++++++
 .../src/routes/edit/member/[id]/+page.svelte  | 11 ++---
 frontend/src/routes/edit/profile/+page.svelte | 10 ++--
 3 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/routes/edit/MarkdownHelp.svelte

diff --git a/frontend/src/routes/edit/MarkdownHelp.svelte b/frontend/src/routes/edit/MarkdownHelp.svelte
new file mode 100644
index 0000000..20c058e
--- /dev/null
+++ b/frontend/src/routes/edit/MarkdownHelp.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Icon, Modal } from "sveltestrap";
+
+  let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
+</script>
+
+<Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
+<!-- svelte-ignore a11y-invalid-attribute -->
+<a class="text-reset" href="" on:click={toggle}>Markdown</a>.
+
+<Modal header="Markdown help" body {isOpen} {toggle}>
+  <p>
+    Markdown is a simple way to format text, using symbols like <code>*</code>, <code>_</code>, and
+    <code>`</code>. If you have used Discord before, formatting works the same as there, just with a
+    couple different options.
+  </p>
+  <hr />
+  <p>Type <code>*Italic*</code> or <code>_Italic_</code> to get <em>Italic</em></p>
+  <hr />
+  <p>Type <code>**Bold**</code> or <code>__Bold__</code> to get <strong>Bold</strong></p>
+  <hr />
+  <p>Use at least three dashes <code>---</code> on a separate line to add a horizontal rule:</p>
+  <hr class="m-3" />
+  <hr />
+  <p>Type <code>`Inline code`</code> to get <code>Inline code</code></p>
+  <p>Use three backticks to make a code block:</p>
+  <pre><code>```<br />print("Code here")<br />```</code></pre>
+  <hr />
+  <p>Type</p>
+  <pre><code>* List<br />* List<br />* List</code></pre>
+  <p>to get</p>
+  <ul>
+    <li>List</li>
+    <li>List</li>
+    <li>List</li>
+  </ul>
+  <hr />
+  <p>Type</p>
+  <pre><code>1. List<br />2. List<br />3. List</code></pre>
+  <p>to get</p>
+  <ol>
+    <li>List</li>
+    <li>List</li>
+    <li>List</li>
+  </ol>
+</Modal>
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 8b9cba6..b7899c4 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -39,6 +39,7 @@
   import { addToast, delToast } from "$lib/toast";
   import { memberNameRegex } from "$lib/api/regex";
   import { charCount, renderMarkdown } from "$lib/utils";
+  import MarkdownHelp from "../../MarkdownHelp.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -397,6 +398,7 @@
               static.
             </p>
             <p>
+              <!-- svelte-ignore a11y-invalid-attribute -->
               <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
             </p>
           </div>
@@ -448,15 +450,8 @@
         Using {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
       </p>
       <p class="text-muted my-2">
-        <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
-        >.
+        <MarkdownHelp />
       </p>
-      <hr />
       {#if bio}
         <hr />
         <Card>
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index 0c9be45..a1be3fd 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -35,6 +35,7 @@
   import { addToast, delToast } from "$lib/toast";
   import type { PageData } from "./$types";
   import { charCount, renderMarkdown } from "$lib/utils";
+  import MarkdownHelp from "../MarkdownHelp.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -327,6 +328,7 @@
               static.
             </p>
             <p>
+              <!-- svelte-ignore a11y-invalid-attribute -->
               <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
             </p>
           </div>
@@ -376,13 +378,7 @@
         Using {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
       </p>
       <p class="text-muted my-2">
-        <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
-        >.
+        <MarkdownHelp />
       </p>
       {#if bio}
         <hr />