add markdown support to descriptions.

svelte-ui/package-lock.json

@@ -2460,6 +2460,12 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "@types/marked": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-1.2.1.tgz",
+      "integrity": "sha512-d5adCgRHB+NAme23hkiTkvpfZUDqoNtL2Sr2nZBJqSj3zyHLxsfFWsGQ2sK2z9aX6L1xkJzon2c0jTPcsEjpaQ==",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.14.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.17.tgz",
@@ -3495,6 +3501,12 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "marked": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.7.tgz",
+      "integrity": "sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

svelte-ui/package.json

@@ -17,11 +17,13 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-typescript": "^6.0.0",
     "@tsconfig/svelte": "^1.0.0",
+    "@types/marked": "^1.2.1",
     "@types/node": "^14.14.17",
     "amazon-cognito-identity-js": "^4.5.6",
     "aws-amplify": "^3.3.13",
     "fa-svelte": "^3.1.0",
     "lodash-es": "^4.17.20",
+    "marked": "^1.2.7",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-dev": "^1.1.3",

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>