callouts done

webapp/src/app.css

@@ -6,7 +6,7 @@
     --callout-note: 68, 138, 255;
     --callout-summary: 0, 176, 255;
     --callout-info: 0, 184, 212;
-    --callout-hint: 0, 184, 212;
+    --callout-hint: 0, 191, 165;
     --callout-success: 0, 200, 83;
     --callout-question: 100, 221, 23;
     --callout-warning: 255, 145, 0;

webapp/src/lib/components/Callout.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { getCalloutColor, getCalloutIcon } from '$lib/util/callout';
+	import CalloutIcon from '$lib/components/CalloutIcon.svelte';
+
+	let title = '';
+	let type = 'note';
+	let color = '--callout-warning';
+	let icon = 'note';
+	let init = false;
+
+	let content: HTMLElement;
+
+	$: if (content) {
+		const titleElement = content.getElementsByTagName('p')[0];
+		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](\s([\w\s]+))?/);
+		if (match) {
+			type = match[1]?.trim();
+			title = match[2]?.trim() ?? type[0].toUpperCase() + type.substring(1).toLowerCase();
+		}
+
+		color = `--${getCalloutColor(type)}`;
+		icon = getCalloutIcon(type);
+
+		// Remove title from content
+		const pos = titleElement.innerHTML.indexOf('<br>');
+		if (pos >= 0) {
+			titleElement.innerHTML = titleElement.innerHTML.substring(pos + 4);
+		} else {
+			titleElement.innerHTML = '';
+		}
+		init = true;
+	}
+</script>
+
+<div style="--callout-color: var({color})" class="border-l-4 border-l-callout bg-neutral-100 my-4">
+	<div class="p-[10px] bg-callout-bg flex items-center gap-2">
+		<span class="font-bold text-md text-callout h-5"><CalloutIcon {icon} /></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>

webapp/src/lib/components/CalloutIcon.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import NoteIcon from 'svelte-icons/md/MdCreate.svelte';
+	import SummaryIcon from 'svelte-icons/md/MdFormatListBulleted.svelte';
+	import InfoIcon from 'svelte-icons/md/MdInfoOutline.svelte';
+	import TodoIcon from 'svelte-icons/md/MdPlaylistAddCheck.svelte';
+	// import HintIcon from 'svelte-icons/md/MdLightbulbOutline.svelte';
+	import HintIcon from 'svelte-icons/md/MdWhatshot.svelte';
+	import CheckIcon from 'svelte-icons/md/MdCheck.svelte';
+	import QuestionIcon from 'svelte-icons/md/MdHelpOutline.svelte';
+	import WarningIcon from 'svelte-icons/md/MdWarning.svelte';
+	import FailIcon from 'svelte-icons/md/MdClose.svelte';
+	import ErrorIcon from 'svelte-icons/md/MdErrorOutline.svelte';
+	import BugIcon from 'svelte-icons/md/MdBugReport.svelte';
+	import QuoteIcon from 'svelte-icons/md/MdFormatQuote.svelte';
+	export let icon: string;
+
+	console.log(icon);
+</script>
+
+{#if icon == 'note'}
+	<NoteIcon />
+{:else if icon == 'summary'}
+	<SummaryIcon />
+{:else if icon == 'info'}
+	<InfoIcon />
+{:else if icon == 'todo'}
+	<TodoIcon />
+{:else if icon == 'hint'}
+	<HintIcon />
+{:else if icon == 'success'}
+	<CheckIcon />
+{:else if icon == 'question'}
+	<QuestionIcon />
+{:else if icon == 'warning'}
+	<WarningIcon />
+{:else if icon == 'fail'}
+	<FailIcon />
+{:else if icon == 'error'}
+	<ErrorIcon />
+{:else if icon == 'bug'}
+	<BugIcon />
+{:else if icon == 'example'}
+	<SummaryIcon />
+{:else if icon == 'quote'}
+	<QuoteIcon />
+{:else}
+	<NoteIcon />
+{/if}

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

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import Callout from './Callout.svelte';
+	import Callout from '../../components/Callout.svelte';
 
 	export let raw: string;
 
 	let isCallout: boolean = raw.split('\n')[0].match(/>\s?\[!(.+)\](\s.*|$)/) != null;
-
-	console.log(raw.split('\n')[0]);
 </script>
 
 {#if isCallout}

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

@@ -1,36 +0,0 @@
-<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];
-		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](\s([\w\s]+))?/);
-		if (match) {
-			type = match[1]?.trim();
-			title = match[2]?.trim() ?? '';
-		}
-		// Remove title from content
-		const pos = titleElement.innerHTML.indexOf('<br>');
-		if (pos >= 0) {
-			titleElement.innerHTML = titleElement.innerHTML.substring(pos + 4);
-		} else {
-			titleElement.innerHTML = '';
-		}
-	}
-</script>
-
-<div class="border-l-4 border-l-callout bg-neutral-100 my-4">
-	<div class="p-[10px] bg-callout-bg">
-		<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>

webapp/src/lib/util/callout.ts

@@ -6,118 +6,120 @@ type calloutType = {
 const calloutTypes = {
 	note: {
 		color: 'callout-note',
-		icon: ''
+		icon: 'note'
 	},
 	abstract: {
 		color: 'callout-summary',
-		icon: ''
+		icon: 'summary'
 	},
 	summary: {
 		color: 'callout-summary',
-		icon: ''
+		icon: 'summary'
 	},
 	tldr: {
 		color: 'callout-summary',
-		icon: ''
+		icon: 'summary'
 	},
 	info: {
 		color: 'callout-info',
-		icon: ''
+		icon: 'info'
 	},
 	todo: {
 		color: 'callout-info',
-		icon: ''
+		icon: 'todo'
 	},
 	tip: {
 		color: 'callout-hint',
-		icon: ''
+		icon: 'hint'
 	},
 	hint: {
 		color: 'callout-hint',
-		icon: ''
+		icon: 'hint'
 	},
 	important: {
 		color: 'callout-hint',
-		icon: ''
+		icon: 'hint'
 	},
 	success: {
 		color: 'callout-success',
-		icon: ''
+		icon: 'success'
 	},
 	check: {
 		color: 'callout-success',
-		icon: ''
+		icon: 'success'
 	},
 	done: {
 		color: 'callout-success',
-		icon: ''
+		icon: 'success'
 	},
 	question: {
 		color: 'callout-question',
-		icon: ''
+		icon: 'question'
 	},
 	help: {
 		color: 'callout-question',
-		icon: ''
+		icon: 'question'
 	},
 	faq: {
 		color: 'callout-question',
-		icon: ''
+		icon: 'question'
 	},
 	warning: {
 		color: 'callout-warning',
-		icon: ''
+		icon: 'warning'
 	},
 	caution: {
 		color: 'callout-warning',
-		icon: ''
+		icon: 'warning'
 	},
 	attention: {
 		color: 'callout-warning',
-		icon: ''
+		icon: 'warning'
 	},
 	failure: {
 		color: 'callout-fail',
-		icon: ''
+		icon: 'fail'
 	},
 	fail: {
 		color: 'callout-fail',
-		icon: ''
+		icon: 'fail'
 	},
 	missing: {
 		color: 'callout-fail',
-		icon: ''
+		icon: 'fail'
 	},
 	danger: {
 		color: 'callout-error',
-		icon: ''
+		icon: 'error'
 	},
 	error: {
 		color: 'callout-error',
-		icon: ''
+		icon: 'error'
 	},
 	bug: {
 		color: 'callout-bug',
-		icon: ''
+		icon: 'bug'
 	},
 	example: {
 		color: 'callout-example',
-		icon: ''
+		icon: 'example'
 	},
 	quote: {
 		color: 'callout-quote',
-		icon: ''
+		icon: 'quote'
 	},
 	cite: {
 		color: 'callout-quote',
-		icon: ''
+		icon: 'quote'
 	}
 };
 
-export function getCalloutType(typeString: string): calloutType {
+export function getCalloutColor(typeString: string): string {
-	return 'note';
+	// @ts-expect-error
+	return calloutTypes[typeString.toLowerCase()]?.color ?? 'callout-note';
 }
 
-export function getCalloutColor(): string {
+export function getCalloutIcon(typeString: string): string {
-	return '';
+	// @ts-expect-error
+	return calloutTypes[typeString.toLowerCase()]?.icon ?? 'note';
 }