From 95fabee99d06c1048ce6c11d112a5e7af6b4451c Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Sat, 26 Jul 2025 02:01:24 +0800
Subject: [PATCH] BLOG-73 Change website title dynamically (#77)

### Description

- Use `generateTitle` to combine app name and page title.

### Package Changes

_No response_

### Screenshots

|Home|Post Overall|Post Content|
|-|-|-|
|![Screenshot From 2025-07-26 01-58-04.png](/attachments/70ed7440-bd5a-4e9d-a747-bb785c9f7e16)|![Screenshot From 2025-07-26 01-58-27.png](/attachments/58386f0d-e476-4795-8ac4-f0abc6586721)|![Screenshot From 2025-07-26 01-58-31.png](/attachments/cf7cb5a6-af5e-4dc6-907f-8cb8253f1b13)|

### Reference

Resolves #73

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: https://git.squidspirit.com/squid/blog/pulls/77
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
---
 frontend/src/lib/common/framework/ui/generateTitle.ts     | 6 ++++++
 frontend/src/lib/home/framework/ui/HomePage.svelte        | 4 ++++
 frontend/src/lib/post/framework/ui/PostContentPage.svelte | 4 ++++
 frontend/src/lib/post/framework/ui/PostOverallPage.svelte | 4 ++++
 frontend/src/lib/strings.ts                               | 3 +++
 5 files changed, 21 insertions(+)
 create mode 100644 frontend/src/lib/common/framework/ui/generateTitle.ts
 create mode 100644 frontend/src/lib/strings.ts

diff --git a/frontend/src/lib/common/framework/ui/generateTitle.ts b/frontend/src/lib/common/framework/ui/generateTitle.ts
new file mode 100644
index 0000000..b478ccc
--- /dev/null
+++ b/frontend/src/lib/common/framework/ui/generateTitle.ts
@@ -0,0 +1,6 @@
+import { Strings } from '$lib/strings';
+
+export default function generateTitle(pageTitle?: string): string {
+	if (!pageTitle) return Strings.APP_NAME;
+	return `${Strings.APP_NAME} - ${pageTitle}`;
+}
diff --git a/frontend/src/lib/home/framework/ui/HomePage.svelte b/frontend/src/lib/home/framework/ui/HomePage.svelte
index 25d6e7d..c1e08ed 100644
--- a/frontend/src/lib/home/framework/ui/HomePage.svelte
+++ b/frontend/src/lib/home/framework/ui/HomePage.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+	import generateTitle from '$lib/common/framework/ui/generateTitle';
 	import Motto from '$lib/home/framework/ui/Motto.svelte';
 	import Terminal from '$lib/home/framework/ui/Terminal.svelte';
 	import TitleScreen from '$lib/home/framework/ui/TitleScreen.svelte';
 </script>
 
+<svelte:head>
+	<title>{generateTitle()}</title>
+</svelte:head>
 <div>
 	<TitleScreen />
 	<Terminal />
diff --git a/frontend/src/lib/post/framework/ui/PostContentPage.svelte b/frontend/src/lib/post/framework/ui/PostContentPage.svelte
index d8093b8..eb3f4ca 100644
--- a/frontend/src/lib/post/framework/ui/PostContentPage.svelte
+++ b/frontend/src/lib/post/framework/ui/PostContentPage.svelte
@@ -4,6 +4,7 @@
 	import { getContext, onMount } from 'svelte';
 	import markdownit from 'markdown-it';
 	import SafeHtml from '$lib/common/framework/ui/SafeHtml.svelte';
+	import generateTitle from '$lib/common/framework/ui/generateTitle';
 
 	const { id }: { id: number } = $props();
 
@@ -16,6 +17,9 @@
 	onMount(() => postBloc.dispatch({ event: PostEventType.PostLoadedEvent, id: id }));
 </script>
 
+<svelte:head>
+	<title>{generateTitle(state.data?.info.title)}</title>
+</svelte:head>
 <article class="container prose pb-10">
 	{#if state.data}
 		<PostContentHeader postInfo={state.data.info} />
diff --git a/frontend/src/lib/post/framework/ui/PostOverallPage.svelte b/frontend/src/lib/post/framework/ui/PostOverallPage.svelte
index 1432bd0..b32a8bf 100644
--- a/frontend/src/lib/post/framework/ui/PostOverallPage.svelte
+++ b/frontend/src/lib/post/framework/ui/PostOverallPage.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import generateTitle from '$lib/common/framework/ui/generateTitle';
 	import { PostListBloc, PostListEventType } from '$lib/post/adapter/presenter/postListBloc';
 	import PostPreview from '$lib/post/framework/ui/PostPreview.svelte';
 	import { getContext, onMount } from 'svelte';
@@ -9,6 +10,9 @@
 	onMount(() => postListBloc.dispatch({ event: PostListEventType.PostListLoadedEvent }));
 </script>
 
+<svelte:head>
+	<title>{generateTitle('文章')}</title>
+</svelte:head>
 <div class="container pb-10">
 	<h1 class="py-9 text-center text-3xl font-bold text-gray-800 md:py-20 md:text-5xl">文章</h1>
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-y-8 lg:grid-cols-3">
diff --git a/frontend/src/lib/strings.ts b/frontend/src/lib/strings.ts
new file mode 100644
index 0000000..0165e6f
--- /dev/null
+++ b/frontend/src/lib/strings.ts
@@ -0,0 +1,3 @@
+export abstract class Strings {
+	static readonly APP_NAME = '魚之魷魂 SquidSpirit';
+}