better rendering

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -6,6 +6,10 @@
 	export let plaintext: string;
 </script>
 
-<div id="md-box" class="space-y-6">
+<div
+	id="md-box"
+	class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
+prose-strong:font-bold"
+>
 	<SvelteMarkdown renderers={{ heading: Heading, list: List }} source={plaintext} />
 </div>

webapp/src/lib/renderers/Heading.svelte

@@ -12,18 +12,19 @@
 	// $: id = options.headerIds ? options.headerPrefix + slug(text) : undefined;
 </script>
 
+<!-- h1-h4 is taken care of by Tailwind Typography plugin. -->
 {#if depth === 1}
-	<h1 {id} class="text-3xl font-bold"><slot /></h1>
+	<h1 {id}><slot /></h1>
 {:else if depth === 2}
-	<h2 {id} class="text-2xl font-bold"><slot /></h2>
+	<h2 {id}><slot /></h2>
 {:else if depth === 3}
-	<h3 {id} class="text-xl font-bold"><slot /></h3>
+	<h3 {id}><slot /></h3>
 {:else if depth === 4}
 	<h4 {id}><slot /></h4>
 {:else if depth === 5}
-	<h5 {id}><slot /></h5>
+	<h5 {id} class="font-semibold"><slot /></h5>
 {:else if depth === 6}
-	<h6 {id}><slot /></h6>
+	<h6 {id} class="font-semibold"><slot /></h6>
 {:else}
 	{raw}
 {/if}

webapp/src/routes/note/[id].svelte

@@ -40,7 +40,7 @@
 
 <div class="max-w-2xl mx-auto">
 	<p class="mb-4 text-sm flex justify-between text-neutral-500">
-		<span class="uppercase">Shared 7 days ago</span>
+		<span class="uppercase">Shared ?? days ago</span>
 		<button class="flex gap-2 uppercase items-center">
 			<span>Raw Markdown</span>
 			<span class="h-6"><LogoMarkdown /></span>