feat: use async markdown parsing (#210)

Update +page.svelte

Author: baseplate-admin

…c/frontend/src/lib/functions/markdown.ts src/frontend/src/lib/markdown/markdown.tssrc/frontend/src/lib/functions/markdown.ts renamed to src/frontend/src/lib/markdown/markdown.ts src/frontend/src/lib/functions/markdown.ts renamed to src/frontend/src/lib/markdown/markdown.ts

@@ -3,13 +3,15 @@ import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import { unified } from 'unified';
+import rehypeEmailMangle from './plugins/email-obfuscate';
 
-export function html_to_markdown(markdown: string) {
-	const result = unified()
+export async function html_to_markdown(markdown: string) {
+	const result = await unified()
 		.use(remarkParse)
 		.use(remarkRehype) // Markdown → HTML AST
+		.use(rehypeEmailMangle) // Obfuscate email addresses
 		.use(rehypeSanitize) // Sanitize HTML AST
 		.use(rehypeStringify) // HTML AST → string
-		.processSync(markdown);
+		.process(markdown);
 	return result.toString();
 }

src/frontend/src/lib/markdown/plugins/email-obfuscate.ts

@@ -0,0 +1,39 @@
+// Inspired by : https://github.com/markedjs/marked-mangle/blob/9484ff1fe551b8b8bef497a360890225943ace82/src/index.js
+import type { Element, Root, Text } from 'hast';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Rehype plugin to obfuscate email addresses
+ */
+const rehypeEmailMangle: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		// Visit text nodes only
+		visit(tree, 'text', (node: Text) => {
+			node.value = node.value.replace(/([A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,})/gi, (email) =>
+				email
+					.split('')
+					.map((c) => `&#${c.charCodeAt(0)};`)
+					.join('')
+			);
+		});
+
+		// Visit element nodes only
+		visit(tree, 'element', (node: Element) => {
+			if (node.tagName === 'a' && node.properties?.href) {
+				const href = node.properties.href;
+				if (typeof href === 'string' && href.startsWith('mailto:')) {
+					const email = href.slice(7);
+					node.properties.href = `mailto:${email
+						.split('')
+						.map((c) => `&#${c.charCodeAt(0)};`)
+						.join('')}`;
+				}
+			}
+		});
+
+		return tree;
+	};
+};
+
+export default rehypeEmailMangle;

src/frontend/src/routes/(needs_onboarding)/(login_required)/admin/config/+page.svelte

@@ -14,19 +14,16 @@
 	import { formatSeconds, secondsToNumber, T_UNITS, type TimeUnit } from '#functions/times';
 	import { sanitizeExt } from '#functions/sanitize';
 	import { Separator } from '$lib/components/ui/separator';
-	import { html_to_markdown } from '#functions/markdown';
+	import { html_to_markdown } from '$lib/markdown/markdown';
 
 	// Query hook
 	const { config: configQuery, update_config } = useConfigQuery();
 
 	// Derived state
 	let configData = $derived(configQuery.data);
 	let descDraft = $state('');
-	let previewHtml = $derived(
-		descDraft
-			? String(html_to_markdown(descDraft))
-			: html_to_markdown(configData?.site_description ?? '')
-	);
+	let previewMarkdown = $derived(descDraft? String(descDraft): configData.site_description ?? "")
+
 
 	// UI state
 	let editing = $state<
@@ -652,7 +649,9 @@
 						in:fade
 						class="prose max-w-none p-8 text-sm leading-relaxed prose-zinc dark:prose-invert"
 					>
-						{@html previewHtml}
+						{#await html_to_markdown(previewMarkdown) then html}
+							{@html html}
+						{/await}
 					</div>
 				{/if}
 			</Card.Content>

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/+page.svelte

@@ -32,7 +32,7 @@
 	import { cn } from '$lib/utils';
 	import { toast } from 'svelte-sonner';
 	import { dev } from '$app/environment';
-	import { html_to_markdown } from '#functions/markdown';
+	import { html_to_markdown } from '$lib/markdown/markdown';
 
 	const { config: configData } = useConfigQuery();
 
@@ -63,7 +63,7 @@
 	// Encryption progress states
 	let encryptionProgress = $state(0);
 	let isEncrypting = $state(false);
-	let renderedDetails = $derived(html_to_markdown(configData.data?.site_description ?? ''));
+	let detailsMarkdown = $derived(configData.data?.site_description ?? '');
 
 	$effect(() => {
 		const total = files.reduce((sum, file) => sum + file.size, 0);
@@ -869,7 +869,9 @@
 						<div
 							class="prose w-full max-w-none prose-zinc md:text-sm lg:text-lg lg:leading-relaxed dark:prose-invert"
 						>
-							{@html renderedDetails}
+						{#await html_to_markdown(detailsMarkdown) then html}
+							{@html html}
+						{/await}
 						</div>
 					</ScrollArea>
 				</div>