feat: markdown support (#165)

* initial markdown support via markdown-it

* sanitize markup

* remove pre-padding

* fix linter errors

frontend/components/global/Markdown.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+  import MarkdownIt from "markdown-it";
+  import DOMPurify from "dompurify";
+
+  type Props = {
+    source: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {});
+
+  const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: true,
+  });
+
+  const raw = computed(() => {
+    const html = md.render(props.source);
+    return DOMPurify.sanitize(html);
+  });
+</script>
+
+<template>
+  <div class="markdown" v-html="raw"></div>
+</template>
+
+<style scoped>
+  * {
+    --y-gap: 0.65rem;
+  }
+
+  .markdown > :first-child {
+    margin-top: 0px !important;
+  }
+
+  .markdown :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
+    margin-top: var(--y-gap);
+    margin-bottom: var(--y-gap);
+  }
+
+  .markdown :where(ul) {
+    list-style: disc;
+    margin-left: 2rem;
+  }
+
+  .markdown :where(ol) {
+    list-style: decimal;
+    margin-left: 2rem;
+  }
+  /* Heading Styles */
+  .markdown :where(h1) {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  .markdown :where(h2) {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  .markdown :where(h3) {
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+
+  .markdown :where(h4) {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  .markdown :where(h5) {
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  .markdown :where(h6) {
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+</style>