callout

webapp/src/lib/marked/renderers/Blockquote.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import Callout from './Callout.svelte';
+
 	export let raw: string;
 
-	let isCallout = raw.split('\n')[0].match(/>\s?\[!(.+)\]\s(.*) /) != null;
+	let isCallout: boolean = raw.split('\n')[0].match(/>\s?\[!(.+)\](\s.*)?/) != null;
 </script>
 
 {#if isCallout}
-	<p>IS CALLOUT!!</p>
+	<Callout>
+		<slot />
+	</Callout>
 {:else}
 	<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4">
 		<slot />

webapp/src/lib/marked/renderers/Callout.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let title: string;
+	let type = '???';
+
+	let color = '#448aff';
+
+	let content: HTMLElement;
+
+	$: if (content) {
+		const titleElement = content.getElementsByTagName('p')[0];
+		console.log(titleElement.innerText.split('\n')[0]);
+		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](\s([\w\s]+))?/);
+		console.log(match);
+		if (match) {
+			console.log(match.length);
+			type = match[1];
+			title = match[2] ?? '';
+			console.log(title);
+		}
+	}
+
+	// onMount(() => {
+	// 	console.log('mounted');
+	// });
+</script>
+
+<div class="border-l-4 border-l-[#448aff] bg-neutral-100 my-4">
+	<div class="p-[10px] bg-[{color}]/10">
+		<span class="font-bold text-md">[{type}]</span>
+		<span class="font-bold text-md">{title}</span>
+	</div>
+	<div bind:this={content} class="prose-p:my-0 prose-p:mx-0 py-4 px-3">
+		<slot />
+	</div>
+</div>