Add markdown support in description (#14)

Fixes #8

Co-authored-by: Tom Hubrecht <tom.hubrecht@ens.fr>
Reviewed-on: https://git.rz.ens.wtf/Klub-RZ/metis/pulls/14
Co-authored-by: tomate <tom.hubrecht@ens.fr>
Co-committed-by: tomate <tom.hubrecht@ens.fr>

package-lock.json

@@ -17,6 +17,7 @@
         "bootstrap-icons": "^1.8.1",
         "ical.js": "^1.5.0",
         "lodash": "^4.17.21",
+        "remarkable": "^2.0.1",
         "rollup-plugin-copy": "^3.4.0",
         "rrule": "^2.6.8",
         "sirv-cli": "^1.0.0",
@@ -468,6 +469,14 @@
       "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -485,6 +494,14 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/autolinker": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.15.0.tgz",
+      "integrity": "sha512-N/5Dk5AZnqL9k6kkHdFIGLm/0/rRuSnJwqYYhLCJjU7ZtiaJwCBzNTvjzy1zzJADngv/wvtHYcrPHytPnASeFA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      }
+    },
     "node_modules/avvio": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/avvio/-/avvio-7.2.2.tgz",
@@ -2977,6 +2994,21 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
+    "node_modules/remarkable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.1.tgz",
+      "integrity": "sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==",
+      "dependencies": {
+        "argparse": "^1.0.10",
+        "autolinker": "^3.11.0"
+      },
+      "bin": {
+        "remarkable": "bin/remarkable.js"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3602,6 +3634,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -4336,6 +4373,14 @@
       "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
       "dev": true
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -4347,6 +4392,14 @@
       "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
       "dev": true
     },
+    "autolinker": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.15.0.tgz",
+      "integrity": "sha512-N/5Dk5AZnqL9k6kkHdFIGLm/0/rRuSnJwqYYhLCJjU7ZtiaJwCBzNTvjzy1zzJADngv/wvtHYcrPHytPnASeFA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "avvio": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/avvio/-/avvio-7.2.2.tgz",
@@ -6190,6 +6243,15 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
+    "remarkable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.1.tgz",
+      "integrity": "sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==",
+      "requires": {
+        "argparse": "^1.0.10",
+        "autolinker": "^3.11.0"
+      }
+    },
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -6670,6 +6732,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",

package.json

@@ -39,6 +39,7 @@
     "bootstrap-icons": "^1.8.1",
     "ical.js": "^1.5.0",
     "lodash": "^4.17.21",
+    "remarkable": "^2.0.1",
     "rollup-plugin-copy": "^3.4.0",
     "rrule": "^2.6.8",
     "sirv-cli": "^1.0.0",

src/App.svelte

@@ -99,6 +99,10 @@
     cursor: pointer;
   }
 
+  :global(.modal-body p, ul) {
+    margin-bottom: 0 !important;
+  }
+
   @media (max-width: 765px) {
     :global(.fc-header-toolbar) {
       flex-direction: column;

src/EventModal.svelte

@@ -1,5 +1,8 @@
 <script>
   import { Modal, ModalHeader, ModalBody, ModalFooter, Icon, Badge } from 'sveltestrap';
+  import { Remarkable } from 'remarkable';
+
+  const md = new Remarkable({ breaks: true });
 
   export let event = undefined;
   export let open = undefined;
@@ -23,11 +26,9 @@
   </ModalHeader>
   <ModalBody>
     {#if event.extendedProps.description}
-      {#each event.extendedProps.description.split('\n') as line}
+      {@html md.render(event.extendedProps.description)}
-        <p>{line}</p>
-      {/each}
     {:else}
-      <i class="fs-6">Pas de description</i>
+      <i>Pas de description</i>
     {/if}
   </ModalBody>