feat(user): markdown biography

2 files changed, 29 insertions, 1 deletions

diff --git a/src/lib/MarkdownLink.svelte b/src/lib/MarkdownLink.svelte
new file mode 100644
index 00000000..d6fdefe0
--- /dev/null
+++ b/src/lib/MarkdownLink.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let href: string;
+	export let text: string;
+
+	try {
+		let url = new URL(href);
+
+		switch (url.protocol) {
+			case 'javascript:':
+				href = '#';
+				break;
+
+			default:
+				break;
+		}
+	} catch (error) {
+		href = '#';
+	}
+</script>
+
+<a {href} target="_blank">{text}</a>
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 992af2ab..7cffd647 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -16,6 +16,8 @@
 	import proxy from '$lib/Utility/proxy';
 	import { parseScheduleHtml } from '$lib/Data/hololive';
 	import type { UserPreferences } from '$lib/Database/userPreferences.js';
+	import SvelteMarkdown from 'svelte-markdown';
+	import MarkdownLink from '$lib/MarkdownLink.svelte';
 
 	export let data;
 
@@ -123,7 +125,12 @@
 						</p>
 
 						{#if schedule && preferences && preferences.biography && preferences.biography.length > 0}
-							<p>{preferences.biography}</p>
+							<SvelteMarkdown
+								source={preferences.biography}
+								renderers={{
+									link: MarkdownLink
+								}}
+							/>
 						{/if}
 
 						{$locale({