Render markdown in description fields (fixes mozilla#153) (mozilla#155)

package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "just-throttle": "^1.1.0",
     "lunr": "^2.3.9",
+    "marked": "^1.2.2",
     "node-fetch": "^2.6.1",
     "postcss": "^8.1.2",
     "postcss-import": "^12.0.1",

src/components/Markdown.svelte

@@ -0,0 +1,13 @@
+<script>
+  import marked from "marked";
+
+  let markdown;
+  export let text = "";
+</script>
+
+{#if markdown}
+  {@html marked.parseInline(markdown.textContent)}
+{/if}
+<div class="raw-markdown hidden" bind:this={markdown}>
+  <slot>{text}</slot>
+</div>

src/pages/AppDetail.svelte

@@ -4,6 +4,7 @@
   import { fetchJSON } from "../state/api";
   import FilterInput from "../components/FilterInput.svelte";
   import AppAlert from "../components/AppAlert.svelte";
+  import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
   import EmailAddresses from "../components/EmailAddresses.svelte";
 
@@ -76,8 +77,10 @@
     <ul>
       {#each filteredPings as ping}
         <li>
-          <a href={`/apps/${params.app}/pings/${ping.name}`}>{ping.name}</a>
-          <i>{ping.description}</i>
+          <a href={`/apps/${app.name}/pings/${ping.name}`}>{ping.name}</a>
+          <i>
+            <Markdown>{ping.description}</Markdown>
+          </i>
         </li>
       {:else}
         <p>Your search didn't match any ping.</p>
@@ -94,7 +97,9 @@
         <li>
           <a
             href={`/apps/${params.app}/metrics/${metric.name}`}>{metric.name}</a>
-          <i>{metric.description}</i>
+          <i>
+            <Markdown>{metric.description}</Markdown>
+          </i>
         </li>
       {:else}
         <p>Your search didn't match any metric.</p>

src/pages/MetricDetail.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getMetricData } from "../state/api";
 
+  import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
 
   export let params;
@@ -59,7 +60,9 @@
 
 {#await metricDataPromise then metric}
   <h1>{metric.name}</h1>
-  <p>{metric.description}</p>
+  <p>
+    <Markdown>{metric.description}</Markdown>
+  </p>
   <p>
     <a
       href={getMetricDocumentationURI(metric.type)}

src/pages/PingDetail.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getPingData } from "../state/api";
 
+  import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
   import EmailAddresses from "../components/EmailAddresses.svelte";
 
@@ -28,7 +29,9 @@
   <table class="table-header">
     <tr>
       <td>Description</td>
-      <td>{ping.description}</td>
+      <td>
+        <Markdown>{ping.description}</Markdown>
+      </td>
     </tr>
     <tr>
       <td>Related Bugs</td>
@@ -69,7 +72,9 @@
     {#each ping.metrics as metric}
       <li>
         <a href={`/apps/${params.app}/metrics/${metric.name}`}>{metric.name}</a>
-        <i>{metric.description}</i>
+        <i>
+          <Markdown>{metric.description}</Markdown>
+        </i>
       </li>
     {/each}
   </ul>

stories/markdown.stories.js

@@ -0,0 +1,15 @@
+import { text } from "@storybook/addon-knobs";
+import Markdown from "../src/components/Markdown.svelte";
+
+const mark = "A *text* in markdown [moz](https://mozilla.org).";
+
+export default {
+  title: "Markdown",
+};
+
+export const Text = () => ({
+  Component: Markdown,
+  props: {
+    text: text("text", mark),
+  },
+});