add markdown support to descriptions.

svelte-ui/src/components/ChildEntry.svelte

@@ -3,6 +3,7 @@
   import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
   import LinkHook from "./LinkHook.svelte";
+  import Markdown from "./Markdown.svelte";
 
   interface EntryCommon {
     id: string
@@ -50,8 +51,8 @@
         </div>
       {/if}
     </div>
-    <div class="description">
-      <p>{entry.description}</p>
+    <div class="entry-body">
+      <Markdown source={entry.description} />
       <slot></slot>
     </div>
   </div>
@@ -98,14 +99,10 @@
     padding: 0.125em 0;
   }
 
-  div.description {
+  div.entry-body {
     padding: 0.25em 1ch;
     background: #222;
     color: #aaa;
     border-bottom-right-radius: 0.5em;
   }
-  div.description p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
 </style>

svelte-ui/src/components/Markdown.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import marked from "marked";
+  export let source = "";
+
+  let outputHtml: string;
+
+  $: outputHtml = marked(source, {sanitize: true, smartypants: true});
+</script>
+
+<div class="markdown">{@html outputHtml}</div>
+
+<style>
+  div.markdown :global(p) {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+
+  div.markdown :global(code) {
+    background-color: #222;
+    color: #1cf;
+  }
+
+  div.markdown :global(pre) > :global(code) {
+    display: block;
+    background-color: #222;
+    color: #1cf;
+    padding: 0.5em;
+  }
+
+  div.markdown :global(blockquote) {
+    display: block;
+    border-left: 4px solid #333;
+    padding: 0.5em;
+    margin: 0.5em 0;
+  }
+
+  div.markdown :global(ol), div.markdown :global(ul) {
+    padding: 0.5em;
+    margin: 0.5em 0;
+    margin-left: 1ch;
+  }
+
+  div.markdown :global(ul) {
+    list-style: none;
+  }
+
+  div.markdown :global(ol) {
+    list-style: none;
+    counter-reset: li;
+  }
+
+  div.markdown :global(ul) :global(li:before) {
+    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+    color: #333; /* Change the color */
+    font-weight: bold; /* If you want it to be bold */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 1em; /* Also needed for space (tweak if needed) */
+    margin-left: -1em; /* Also needed for space (tweak if needed) */
+  }
+
+  div.markdown :global(ol) :global(li) {
+    counter-increment: li;
+  }
+
+  div.markdown :global(ol) :global(li:before) {
+    content: counter(li)'.';
+    color: #333; /* Change the color */
+    font-weight: bold; /* If you want it to be bold */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 1.75em; /* Also needed for space (tweak if needed) */
+    margin-left: -1.5em; /* Also needed for space (tweak if needed) */
+    padding-right: 0em;
+    text-align: center;
+  }
+</style>

svelte-ui/src/components/Modal.svelte

@@ -164,7 +164,7 @@ div.modal :global(input), div.modal :global(select), div.modal :global(textarea)
   color: #777;
   border: none;
   outline: none;
-  resize: none;
+  resize: vertical;
 }
 div.modal :global(select) {
   padding-left: 0.5ch;
@@ -178,6 +178,7 @@ div.modal :global(input:disabled) {
   color: #aaa;
 }
 div.modal :global(textarea) {
+  min-height: 6em;
   height: 6em;
 }
 div.modal :global(textarea:disabled) {

svelte-ui/src/components/ParentEntry.svelte

@@ -2,7 +2,8 @@
   import type { IconName } from "../external/icons";
   import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
-import LinkHook from "./LinkHook.svelte";
+  import LinkHook from "./LinkHook.svelte";
+  import Markdown from "./Markdown.svelte";
   import Progress from "./Progress.svelte";
 
   interface EntryIconHolder {
@@ -63,9 +64,7 @@ import LinkHook from "./LinkHook.svelte";
       <Progress thin green count={progressAmount} target={progressTarget} />
     {/if}
     {#if (full)}
-      <div class="description">
-        <p>{entry.description}</p>
-      </div>
+      <Markdown source={entry.description} />
     {/if}
     <slot></slot>
   </div>
@@ -112,9 +111,4 @@ import LinkHook from "./LinkHook.svelte";
     color: inherit;
     text-decoration-color: #777;
   }
-
-  div.description > p {
-    padding: 0;
-    margin: 0.25em 0;
-  }
 </style>