Added markdown to html converter

package.json

@@ -33,11 +33,20 @@
 		"@msgpack/msgpack": "^3.0.0",
 		"axios": "^1.7.9",
 		"dayjs": "^1.11.13",
+		"flowbite": "^3.1.2",
+		"flowbite-svelte": "^0.47.4",
 		"fuse.js": "^7.1.0",
 		"mode-watcher": "^0.5.0",
 		"msgpackr": "^1.11.2",
 		"pako": "^2.1.0",
+		"rehype-sanitize": "^6.0.0",
+		"rehype-stringify": "^10.0.1",
+		"remark-gfm": "^4.0.0",
+		"remark-lint": "^10.0.1",
+		"remark-parse": "^11.0.0",
+		"remark-rehype": "^11.1.1",
 		"svelte-meta-tags": "^4.1.0",
-		"tone": "^15.0.4"
+		"tone": "^15.0.4",
+		"unified": "^11.0.5"
 	}
 }

src/routes/(normal)/+layout.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+
+let { children } = $props();
+</script>
+
+{@render children()}

src/routes/(normal)/markdown-to-html/+page.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import {
+		Textarea,
+		Label,
+		Button,
+		Dropdown,
+		DropdownItem,
+		Checkbox,
+		Toast
+	} from 'flowbite-svelte';
+	import { fly } from 'svelte/transition';
+
+	import rehypeSanitize from 'rehype-sanitize';
+	import rehypeStringify from 'rehype-stringify';
+	import remarkParse from 'remark-parse';
+	import remarkRehype from 'remark-rehype';
+	import remarkGfm from 'remark-gfm';
+	import { unified } from 'unified';
+
+	let alerts = [];
+
+	let conversionOptions = $state({
+		gfm: true,
+		sanitize: false
+	});
+
+	let inputValue = $state('');
+	let outputValue = $state('');
+
+	function convert() {
+		try {
+			let u = unified().use(remarkParse).use(remarkRehype).use(rehypeStringify);
+			if (conversionOptions.gfm) {
+				u.use(remarkGfm);
+			}
+			if (conversionOptions.sanitize) {
+				u.use(rehypeSanitize);
+			}
+
+			outputValue = u.processSync(inputValue).toString();
+
+		} catch (e) {
+			outputValue = e
+			alerts.push({ text: e, color: 'red' });
+		}
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-between gap-4 px-4">
+	<!-- Left Section -->
+	<div class="flex flex-1 flex-col items-center justify-center space-y-2">
+		<Label for="markdown-input">Markdown</Label>
+		<Textarea
+			id="markdown-input"
+			rows={8}
+			name="markdown"
+			class="max-h-[70vh] w-full resize-none overflow-auto p-4"
+			bind:value={inputValue}
+		/>
+	</div>
+
+	<!-- Center Section -->
+	<div class="flex flex-col items-center justify-center gap-2">
+		<Button on:click={convert}>Convert</Button>
+		<Button>Settings</Button>
+		<Dropdown class="w-44 space-y-3 p-3 text-sm">
+			<li>
+				<Checkbox bind:checked={conversionOptions.gfm}>Github flavored markdown</Checkbox>
+			</li>
+			<li>
+				<Checkbox bind:checked={conversionOptions.sanitize}>Clean output HTML</Checkbox>
+			</li>
+		</Dropdown>
+	</div>
+
+	<!-- Right Section -->
+	<div class="flex flex-1 flex-col items-center justify-center space-y-2">
+		<Label for="html-output">HTML</Label>
+		<Textarea
+			id="html-output"
+			rows={8}
+			name="html"
+			class="max-h-[70vh] w-full resize-none overflow-auto p-4"
+			readonly={true}
+			bind:value={outputValue}
+		/>
+	</div>
+	{#each alerts as alert}
+		<Toast transition={fly} params={{ x: 200 }} color={alert.color} class="mb-4">
+			{alert.text}
+		</Toast>
+	{/each}
+</div>

tailwind.config.ts

@@ -1,10 +1,27 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
+import flowbitePlugin from 'flowbite/plugin'
 
 export default {
-  // darkMode: "selector",
-  darkMode: ['variant', ['&:where(.dark, .dark *)', '&:where(:global(.dark), :global(.dark) *)']], // Fix for dark mode after upgrade to svelte 5
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-  plugins: [
-	require('@tailwindcss/typography'),
-  ]
-} satisfies Config
+	// darkMode: "selector",
+	darkMode: ['variant', ['&:where(.dark, .dark *)', '&:where(:global(.dark), :global(.dark) *)']], // Fix for dark mode after upgrade to svelte 5
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {
+			colors: {
+				primary: {
+					'50': '#eff6ff',
+					'100': '#dbeafe',
+					'200': '#bfdbfe',
+					'300': '#93c5fd',
+					'400': '#60a5fa',
+					'500': '#3b82f6',
+					'600': '#2563eb',
+					'700': '#1d4ed8',
+					'800': '#1e40af',
+					'900': '#1e3a8a'
+				}
+			}
+		}
+	},
+	plugins: [require('@tailwindcss/typography'), flowbitePlugin]
+} satisfies Config;