mirrors/pronouns.cc
1
0
Fork 1
mirror of https://codeberg.org/pronounscc/pronouns.cc.git synced 2024-11-20 10:09:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: add markdown help on edit page rather than linking out

Browse source
This commit is contained in:
Sam 2023-04-03 23:49:02 +02:00
parent 033b9b5904
commit 634530ba06
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
3 changed files with 53 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/routes/edit/MarkdownHelp.svelte Normal file
View file

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

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

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

10
frontend/src/routes/edit/profile/+page.svelte
View file

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