fix: make documentation page titles distinguishable by section (#1607)

* Initial plan

* Update page titles to be more distinguishable across docs sections

Co-authored-by: teemingc <54401897+teemingc@users.noreply.github.com>

* Use get_topic_title helper instead of duplicating logic

Co-authored-by: teemingc <54401897+teemingc@users.noreply.github.com>

* Move topics logic to shared utils directory

Co-authored-by: teemingc <54401897+teemingc@users.noreply.github.com>

* doing what copilot dont

* copilot messed this up

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: teemingc <54401897+teemingc@users.noreply.github.com>
Co-authored-by: Tee Ming Chew <chew.tee.ming@nindatech.com>

Author: Copilot

apps/svelte.dev/src/lib/server/llms.ts

@@ -1,6 +1,7 @@
 import { minimatch } from 'minimatch';
 import { dev } from '$app/environment';
 import { index } from './content';
+import type { Topic } from '$lib/topics';
 
 interface GenerateLlmContentOptions {
 	ignore?: string[];
@@ -16,11 +17,6 @@ interface MinimizeOptions {
 	remove_prettier_ignore: boolean;
 }
 
-interface Topic {
-	slug: string;
-	title: string;
-}
-
 const defaults: MinimizeOptions = {
 	remove_legacy: false,
 	remove_note_blocks: false,
@@ -63,12 +59,6 @@ export function generate_llm_content(options: GenerateLlmContentOptions): string
 	return content;
 }
 
-export const topics: Topic[] = [
-	{ slug: 'svelte', title: 'Svelte' },
-	{ slug: 'kit', title: 'SvelteKit' },
-	{ slug: 'cli', title: 'the Svelte CLI' }
-];
-
 export function get_documentation_title(topic: Topic): string {
 	return `This is the developer documentation for ${topic.title}.`;
 }

apps/svelte.dev/src/lib/topics.ts

@@ -0,0 +1,19 @@
+export interface Topic {
+	slug: string;
+	title: string;
+}
+
+export const topics = [
+	{ slug: 'svelte', title: 'Svelte' },
+	{ slug: 'kit', title: 'SvelteKit' },
+	{ slug: 'cli', title: 'Svelte CLI' },
+	{ slug: 'mcp', title: 'Svelte MCP' }
+] as const satisfies Topic[];
+
+const DEFAULT_TITLE = 'Svelte';
+
+export function get_topic_title(slug: string | undefined): string {
+	if (!slug) return DEFAULT_TITLE;
+	const topic = topics.find((t) => t.slug === slug);
+	return topic?.title ?? DEFAULT_TITLE;
+}

apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte

@@ -9,6 +9,7 @@
 	import { goto } from '$app/navigation';
 	import { escape_html } from '$lib/utils/escape';
 	import { page } from '$app/state';
+	import { get_topic_title } from '$lib/topics';
 
 	let { data } = $props();
 
@@ -22,6 +23,8 @@
 		return `https://github.com/sveltejs/${name}/edit/main/documentation/${link}`;
 	});
 
+	const topic_title = $derived(get_topic_title(page.params.topic));
+
 	onMount(() => {
 		// hash was lowercase in v4 docs and varying case in v5 docs
 		const hash = location.hash.slice(1);
@@ -58,15 +61,15 @@
 </script>
 
 <svelte:head>
-	<title>{data.document.metadata.title} • Docs • Svelte</title>
+	<title>{data.document.metadata.title} • {topic_title} Docs</title>
 
-	<meta name="twitter:title" content="{data.document.metadata.title} • Docs • Svelte" />
+	<meta name="twitter:title" content="{data.document.metadata.title} • {topic_title} Docs" />
 	<meta
 		name="twitter:description"
-		content="{data.document.metadata.title} • Svelte documentation"
+		content="{data.document.metadata.title} • {topic_title} documentation"
 	/>
 	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="description" content="{data.document.metadata.title} • Svelte documentation" />
+	<meta name="description" content="{data.document.metadata.title} • {topic_title} documentation" />
 	<meta
 		name="twitter:image"
 		content="https://svelte.dev/docs/{page.params.topic}/{page.params.path}/card.png"

apps/svelte.dev/src/routes/docs/[topic]/[...path]/llms.txt/+server.ts

@@ -1,6 +1,7 @@
 import { error } from '@sveltejs/kit';
 import { docs } from '$lib/server/content.js';
-import { generate_llm_content, get_documentation_title, topics } from '$lib/server/llms';
+import { generate_llm_content, get_documentation_title } from '$lib/server/llms';
+import { topics } from '$lib/topics';
 
 export const prerender = true;
 

apps/svelte.dev/src/routes/llms-full.txt/+server.ts

@@ -1,4 +1,5 @@
-import { generate_llm_content, topics } from '$lib/server/llms';
+import { generate_llm_content } from '$lib/server/llms';
+import { topics } from '$lib/topics';
 
 export const prerender = true;
 

apps/svelte.dev/src/routes/llms-medium.txt/+server.ts

@@ -1,4 +1,5 @@
-import { generate_llm_content, topics } from '$lib/server/llms';
+import { generate_llm_content } from '$lib/server/llms';
+import { topics } from '$lib/topics';
 
 export function GET() {
 	const main_content = generate_llm_content({

apps/svelte.dev/src/routes/llms.txt/+server.ts

@@ -1,4 +1,5 @@
-import { get_documentation_title, topics } from '$lib/server/llms';
+import { get_documentation_title } from '$lib/server/llms';
+import { topics } from '$lib/topics';
 import template from './template.md?raw';
 
 const DOMAIN = `https://svelte.dev`;