more page titles

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -22,6 +22,9 @@
 
 	const options = { ...marked.defaults, breaks: true };
 
+	/**
+	 * Searches for the first major header in the document to use as page title.
+	 */
 	function setTitle() {
 		const tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 		for (const tag of tags) {

webapp/src/routes/__layout.svelte

@@ -29,6 +29,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>{import.meta.env.VITE_BRANDING}</title>
+</svelte:head>
+
 <div class=" h-full {dark !== undefined ? '' : 'hidden'} {dark ? darkTheme : ''}">
 	<div class="bg-white dark:bg-background-dark min-h-full transition-colors">
 		<div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark transition-colors">

webapp/src/routes/about.svelte

@@ -1,4 +1,8 @@
-<div class="prose">
+<svelte:head>
+	<title>About | {import.meta.env.VITE_BRANDING}</title>
+</svelte:head>
+
+<div class="prose dark:prose-invert">
 	<h2>About</h2>
 
 	<p>

webapp/src/routes/index.svelte

@@ -1 +1,14 @@
-<p>Homepage.</p>
+<svelte:head>
+	<title>{import.meta.env.VITE_BRANDING} | Create share links for Obsidian in one click</title>
+</svelte:head>
+
+<div class="prose dark:prose-invert">
+	<h1>{import.meta.env.VITE_BRANDING}</h1>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	</p>
+</div>

webapp/src/routes/install.svelte

@@ -1,4 +1,8 @@
-<div class="prose">
+<svelte:head>
+	<title>Get the plugin | {import.meta.env.VITE_BRANDING}</title>
+</svelte:head>
+
+<div class="prose dark:prose-invert">
 	<h2>Installing the plugin</h2>
 
 	<p>