fix: add page title (#108)

Closes #74
fmaclen · Jul 25, 2024 · dbea36b · dbea36b
1 parent 97f20d7
commit dbea36b
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 22 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,6 +6,7 @@
 		<link rel="stylesheet" href="/fonts/inter/inter.css">
 		<link rel="stylesheet" href="/fonts/jetbrains-mono/jetbrains-mono.css">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+		<title>Hollama</title>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/lib/components/Head.svelte b/src/lib/components/Head.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let title: string | string[] | undefined = undefined;
+	const SEPARATOR = ' • ';
+	$: formattedTitle = title
+		? (Array.isArray(title) ? title.join(SEPARATOR) : title) + SEPARATOR + 'Hollama'
+		: 'Hollama';
+</script>
+
+<svelte:head>
+	<title>{formattedTitle}</title>
+</svelte:head>
diff --git a/src/lib/sessions.ts b/src/lib/sessions.ts
@@ -69,3 +69,8 @@ export function formatSessionMetadata(session: Session) {
 	subtitles.push(session.model);
 	return subtitles.join(' • ');
 }
+
+export function getSessionTitle(session: Session) {
+	const hasKnowledge = session.messages[0]?.knowledge;
+	return hasKnowledge ? session.messages[1]?.content : session.messages[0]?.content;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -37,8 +37,6 @@
 			src={env.PUBLIC_PLAUSIBLE_SRC}
 		></script>
 	{/if}
-
-	<title>Hollama</title>
 </svelte:head>
 
 <div class="layout">

diff --git a/src/routes/knowledge/+page.svelte b/src/routes/knowledge/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import EmptyMessage from '$lib/components/EmptyMessage.svelte';
+	import Head from '$lib/components/Head.svelte';
 </script>
 
+<Head title="Knowledge" />
 <EmptyMessage>Create new knowlege or choose one from the list</EmptyMessage>
diff --git a/src/routes/knowledge/[id]/+page.svelte b/src/routes/knowledge/[id]/+page.svelte
@@ -14,6 +14,7 @@
 	import FieldInput from '$lib/components/FieldInput.svelte';
 	import ButtonDelete from '$lib/components/ButtonDelete.svelte';
 	import Metadata from '$lib/components/Metadata.svelte';
+	import Head from '$lib/components/Head.svelte';
 
 	export let data: PageData;
 
@@ -37,6 +38,7 @@
 	});
 </script>
 
+<Head title={[knowledge.name ? knowledge.name : 'New knowledge', 'Knowledge']} />
 <div class="knowledge">
 	<Header confirmDeletion={$shouldConfirmDeletion}>
 		<p data-testid="knowledge-id" class="text-sm font-bold leading-none">

diff --git a/src/routes/sessions/+layout.svelte b/src/routes/sessions/+layout.svelte
@@ -5,7 +5,7 @@
 	import Section from '$lib/components/Section.svelte';
 	import SectionListItem from '$lib/components/SectionListItem.svelte';
 	import RobotsNoIndex from '$lib/components/RobotsNoIndex.svelte';
-	import { formatSessionMetadata } from '$lib/sessions';
+	import { formatSessionMetadata, getSessionTitle } from '$lib/sessions';
 </script>
 
 <RobotsNoIndex />
@@ -14,11 +14,10 @@
 	<svelte:fragment slot="list-items">
 		{#if $sessionsStore && $sessionsStore.length > 0}
 			{#each $sessionsStore as session}
-				{@const hasKnowledge = session.messages[0].knowledge}
 				<SectionListItem
 					sitemap={Sitemap.SESSIONS}
 					id={session.id}
-					title={hasKnowledge ? session.messages[1].content : session.messages[0].content}
+					title={getSessionTitle(session)}
 					subtitle={formatSessionMetadata(session)}
 				/>
 			{/each}

diff --git a/src/routes/sessions/+page.svelte b/src/routes/sessions/+page.svelte
@@ -1,5 +1,7 @@
 <script>
 	import Empty from '$lib/components/EmptyMessage.svelte';
+	import Head from '$lib/components/Head.svelte';
 </script>
 
+<Head title="Sessions" />
 <Empty>Create a new session or choose an existing one from the list</Empty>
diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte
@@ -13,9 +13,10 @@
 	import {
 		saveSession,
 		type Message,
-		type Session,
 		loadSession,
-		formatSessionMetadata
+		formatSessionMetadata,
+		getSessionTitle,
+		type Session
 	} from '$lib/sessions';
 	import { generateNewUrl } from '$lib/components/ButtonNew';
 	import { Sitemap } from '$lib/sitemap';
@@ -34,6 +35,7 @@
 	import ButtonCopy from '$lib/components/ButtonCopy.svelte';
 	import ButtonDelete from '$lib/components/ButtonDelete.svelte';
 	import Metadata from '$lib/components/Metadata.svelte';
+	import Head from '$lib/components/Head.svelte';
 
 	export let data: PageData;
 
@@ -214,6 +216,7 @@
 </script>
 
 <div class="session">
+	<Head title={[isNewSession ? 'New session' : getSessionTitle(session), 'Sessions']} />
 	<Header confirmDeletion={$shouldConfirmDeletion}>
 		<p data-testid="session-id" class="text-sm font-bold leading-none">
 			Session <Button variant="link" href={`/sessions/${session.id}`}>#{session.id}</Button>

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -11,6 +11,7 @@
 
 	import type { OllamaTagResponse } from '$lib/ollama';
 	import { LOCAL_STORAGE_PREFIX, settingsStore, StorageKey } from '$lib/store';
+	import Head from '$lib/components/Head.svelte';
 
 	export let ollamaURL: URL | null = null;
 
@@ -65,6 +66,7 @@
 	});
 </script>
 
+<Head title="Settings" />
 <section class="settings">
 	<div class="settings__container">
 		<Fieldset>
@@ -141,27 +143,17 @@
 			<p class="p"><strong>About</strong></p>
 			<p class="p">
 				<strong>Hollama</strong> is a minimalistic web interface for
-				<Button
-					variant="link"
-					href="https://github.com/jmorganca/ollama/"
-					target="_blank"
-				>
+				<Button variant="link" href="https://github.com/jmorganca/ollama/" target="_blank">
 					Ollama
 				</Button>
 				servers. Code is available on
-				<Button
-					variant="link"
-					href="https://github.com/fmaclen/hollama"
-					target="_blank"
-				>
+				<Button variant="link" href="https://github.com/fmaclen/hollama" target="_blank">
 					Github
 				</Button>
 			</p>
 			<p class="p">
 				Made by
-				<Button variant="link" href="https://fernando.is" target="_blank">
-					@fmaclen
-				</Button>
+				<Button variant="link" href="https://fernando.is" target="_blank">@fmaclen</Button>
 			</p>
 		</div>
 		<!-- <div class="version">
@@ -177,11 +169,11 @@
 
 	.settings {
 		@include base-section;
-		@apply flex border-spacing-1 flex-col p-8 bg-shade-1;
+		@apply flex border-spacing-1 flex-col bg-shade-1 p-8;
 	}
 
 	.settings__container {
-		@apply flex flex-col gap-y-4 my-auto;
+		@apply my-auto flex flex-col gap-y-4;
 	}
 
 	.about,