From b05faddfc08b0154ba36c10391fa2ac21e6ab0d6 Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Sat, 4 Oct 2025 11:03:21 +0800
Subject: [PATCH] feat(seo): implement dynamic page titles

This commit enhances SEO and user experience by setting dynamic page titles for detail pages and updating the global title configuration.

- Event, Hall of Fame, and News detail pages now use the specific item's title as the page title.
- The global `titleTemplate` and default `title` in `nuxt.config.ts` have been updated for better branding.
- These changes ensure each page has a unique, descriptive title, which is beneficial for search engine ranking and browser tab clarity.
---
 .gitignore                         |  2 ++
 app/pages/events/[slug].vue        |  4 ++++
 app/pages/hall-of-fames/[slug].vue |  7 ++++++-
 app/pages/news/[slug].vue          |  4 ++++
 nuxt.config.ts                     |  4 ++--
 public/Logo.svg                    | 15 ++-------------
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4a7f73a..99b3c47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+repomix-output.xml
\ No newline at end of file
diff --git a/app/pages/events/[slug].vue b/app/pages/events/[slug].vue
index 0472026..5b12802 100644
--- a/app/pages/events/[slug].vue
+++ b/app/pages/events/[slug].vue
@@ -56,6 +56,10 @@ const { data: event } = await useAsyncData('event-detail', () =>
     .path(`/events/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: event.value?.title
+})
 </script>
 
 <style scoped></style>
diff --git a/app/pages/hall-of-fames/[slug].vue b/app/pages/hall-of-fames/[slug].vue
index 9e20ee2..5e3ed35 100644
--- a/app/pages/hall-of-fames/[slug].vue
+++ b/app/pages/hall-of-fames/[slug].vue
@@ -24,7 +24,8 @@
               class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" />
             <div
               class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
-              <Icon name="mdi:like" class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
+              <Icon name="mdi:like"
+                class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
             </div>
           </div>
         </div>
@@ -40,6 +41,10 @@ const { data: person } = await useAsyncData('hall-of-fames-detail', () =>
     .path(`/hall-of-fames/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: person.value?.name
+})
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/app/pages/news/[slug].vue b/app/pages/news/[slug].vue
index d477493..6799bde 100644
--- a/app/pages/news/[slug].vue
+++ b/app/pages/news/[slug].vue
@@ -24,6 +24,10 @@ const { data: n } = await useAsyncData('new-detail', () =>
     .path(`/news/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: n.value?.title
+})
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8c26776..299667e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,8 +19,8 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
-      titleTemplate: "%s - 永平中学校友会",
-      title: "永平中学校友会",
+      titleTemplate: "%s | 永中校友会",
+      title: "永中校友圈",
       script: [
         {
           src: "/analytics.js",
diff --git a/public/Logo.svg b/public/Logo.svg
index dac7d9c..b0bceb8 100644
--- a/public/Logo.svg
+++ b/public/Logo.svg
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
+	 viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve"
+	 width="200" height="200">
 <style type="text/css">
 	.st0{fill:#FFCC00;stroke:#000000;stroke-width:8.0717;stroke-miterlimit:10;}
 	.st1{fill:#C51A1B;}
@@ -16,18 +17,6 @@
 	.st10{fill:#FFFFFF;}
 	.st11{fill:none;stroke:#FFFFFF;stroke-width:1.9665;stroke-miterlimit:10;}
 </style>
-<g id="Border">
-</g>
-<g id="Red_Circle">
-</g>
-<g id="Blue_Cirle">
-</g>
-<g id="Sun">
-</g>
-<g id="Triangle">
-</g>
-<g id="Decorations">
-</g>
 <g id="Text">
 	<g>
 		<g>