ec9e4fd Support front-matter in markdown — radicle-explorer

modified package-lock.json

@@ -25,6 +25,7 @@

         "ethereum-blockies": "^0.1.1",
         "ethers": "^5.0.31",
         "eventemitter3": "4.0.7",
         "front-matter": "4.0.2",
         "marked": "^4.0.12",
         "multibase": "^4.0.4",
         "multihashes": "^4.0.2",

@@ -3942,7 +3943,6 @@

       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
       "dev": true,
       "dependencies": {
         "sprintf-js": "~1.0.2"
       }

@@ -6307,7 +6307,6 @@

       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"

@@ -6850,6 +6849,14 @@

         }
       ]
     },
     "node_modules/front-matter": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
       "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
       "dependencies": {
         "js-yaml": "^3.13.1"
       }
     },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",

@@ -7941,7 +7948,6 @@

       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
       "dev": true,
       "dependencies": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"

@@ -10297,8 +10303,7 @@

     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "node_modules/sshpk": {
       "version": "1.17.0",

@@ -14375,7 +14380,6 @@

       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
       "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }

@@ -16235,8 +16239,7 @@

     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.4.0",

@@ -16649,6 +16652,14 @@

       "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==",
       "dev": true
     },
     "front-matter": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
       "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
       "requires": {
         "js-yaml": "^3.13.1"
       }
     },
     "fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",

@@ -17432,7 +17443,6 @@

       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"

@@ -19255,8 +19265,7 @@

     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.17.0",

modified package.json

@@ -50,6 +50,7 @@

     "ethereum-blockies": "^0.1.1",
     "ethers": "^5.0.31",
     "eventemitter3": "4.0.7",
     "front-matter": "4.0.2",
     "marked": "^4.0.12",
     "multibase": "^4.0.4",
     "multihashes": "^4.0.2",

modified src/Markdown.svelte

@@ -1,9 +1,12 @@

 <script lang="ts">
   import { onMount } from "svelte";
   import { marked } from "marked";
   import fm from "front-matter";
   import type { FrontMatterResult } from "front-matter";
   import sanitizeHtml from 'sanitize-html';
   export let content: string;
   export let doc: FrontMatterResult<Record<string, string>> = fm(content);
   let container: HTMLElement;

@@ -36,6 +39,24 @@

 </script>
 <style>
   .front-matter {
     font-size: 0.75rem;
     font-family: var(--font-family-monospace);
     color: var(--color-foreground-90);
     border: 1px dashed var(--color-foreground-subtle);
     padding: 0.5rem;
     margin-bottom: 1.5rem;
   }
   .front-matter table {
     border-collapse: collapse;
   }
   .front-matter table td {
     padding: 0.125rem 1rem;
   }
   .front-matter table td:first-child {
     padding-left: 0.5rem;
   }
   .markdown :global(h1), .markdown :global(h2), .markdown :global(h3),
   .markdown :global(h4), .markdown :global(h5), .markdown :global(h6) {
     color: var(--color-foreground);

@@ -178,7 +199,20 @@

 </style>
 {#if content}
   {#if doc.frontmatter}
     <div class="front-matter">
       <table>
         {#each Object.entries(doc.attributes) as [key, val]}
           <tr>
             <td><strong>{key}</strong></td>
             <td>{val}</td>
           </tr>
         {/each}
       </table>
     </div>
   {/if}
   <div class="markdown" bind:this={container}>
     {@html marked(sanitize(content))}
     {@html marked(sanitize(doc.body))}
   </div>
 {/if}