feat: ✨ Support for filename as title (plugin v1.2)

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -19,6 +19,8 @@
 	import Footnote from '$lib/marked/renderers/Footnote.svelte';
 
 	export let plaintext: string;
+	export let fileTitle: string | undefined;
+
 	let ref: HTMLDivElement;
 	let footnotes: HTMLDivElement[];
 	let footnoteContainer: HTMLDivElement;
@@ -29,10 +31,14 @@
 	const options = { ...marked.defaults, breaks: true };
 
 	function onParsed() {
-		setTitle();
+		!fileTitle && setTitle();
 		parseFootnotes();
 	}
 
+	$: if (fileTitle) {
+		document.title = fileTitle.trim();
+	}
+
 	/**
 	 * Searches for the first major header in the document to use as page title.
 	 */
@@ -68,6 +74,9 @@
 prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
 prose-blockquote:first:before:content-[''] prose-hr:transition-colors prose-code:before:content-[''] prose-code:after:content-['']"
 >
+	{#if fileTitle}
+		<h1>{fileTitle}</h1>
+	{/if}
 	<SvelteMarkdown
 		on:parsed={onParsed}
 		renderers={{

webapp/src/routes/+error.svelte

@@ -12,6 +12,15 @@
 			Notes are stored for a limited amount of time. The note at this link was either set to expire,
 			or deleted due to inactivity. Sorry!
 		</p>
+	{:else}
+		<h1>Something went wrong 🤔</h1>
+		<p class="prose-xl">
+			{#if import.meta.env.DEV}
+				<pre class="prose-xl">{JSON.stringify($page.error, null, 2)}</pre>
+			{:else}
+				<p class="prose-xl">An error occurred while loading this page. Please try again later.</p>
+			{/if}
+		</p>
 	{/if}
 
 	<div class="not-prose w-full flex justify-center mt-16">

webapp/src/routes/note/[id]/+page.server.ts

@@ -25,9 +25,9 @@ export const load: PageServerLoad = async ({ request, params, setHeaders, getCli
 			});
 			return { note };
 		} catch {
-			error(500, response.statusText);
+			throw error(500, response.statusText);
 		}
 	} else {
-		error(response.status, response.statusText);
+		throw error(response.status, response.statusText);
 	}
 };

webapp/src/routes/note/[id]/+page.svelte

@@ -17,20 +17,7 @@
 	let timeString: string;
 	let decryptFailed = false;
 	let showRaw = false;
-
-	onMount(() => {
-		if (browser && note) {
-			const key = location.hash.slice(1);
-			decrypt({ ...note, key }, note.crypto_version)
-				.then((value) => (plaintext = value))
-				.catch(() => (decryptFailed = true));
-		}
-	});
-
-	$: if (note?.insert_time) {
-		const diff_ms = new Date().valueOf() - new Date(note.insert_time).valueOf();
-		timeString = msToString(diff_ms);
-	}
+	let fileTitle: string | undefined;
 
 	function toggleRaw() {
 		showRaw = !showRaw;
@@ -52,6 +39,33 @@
 		const months = days / 30.42;
 		return `${Math.floor(months)} month${months >= 2 ? 's' : ''}`;
 	}
+
+	function parsePayload(payload: string): { body: string; title?: string } {
+		try {
+			const parsed = JSON.parse(payload);
+			return { body: parsed?.body, title: parsed?.title };
+		} catch (e) {
+			return { body: payload, title: undefined };
+		}
+	}
+
+	onMount(() => {
+		if (browser && note) {
+			const key = location.hash.slice(1);
+			decrypt({ ...note, key }, note.crypto_version)
+				.then((value) => {
+					const { body, title } = parsePayload(value);
+					plaintext = body;
+					fileTitle = title;
+				})
+				.catch(() => (decryptFailed = true));
+		}
+	});
+
+	$: if (note?.insert_time) {
+		const diff_ms = new Date().valueOf() - new Date(note.insert_time).valueOf();
+		timeString = msToString(diff_ms);
+	}
 </script>
 
 <svelte:head>
@@ -88,7 +102,7 @@
 		{#if showRaw}
 			<RawRenderer>{plaintext}</RawRenderer>
 		{:else}
-			<MarkdownRenderer {plaintext} />
+			<MarkdownRenderer {plaintext} {fileTitle} />
 		{/if}
 	</div>
 {/if}