From f54e1358487efca1fee84476d0c95d25547a8298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 19:48:48 +0800
Subject: [PATCH] feat: add title for pages

---
 app.vue                 | 2 +-
 pages/@[account].vue    | 6 ++++++
 pages/bookmarks.vue     | 4 ++++
 pages/conversations.vue | 4 ++++
 pages/explore.vue       | 4 ++++
 pages/favourites.vue    | 4 ++++
 pages/notifications.vue | 4 ++++
 pages/public/index.vue  | 5 ++++-
 pages/public/local.vue  | 4 ++++
 pages/tags/[tag].vue    | 4 ++++
 10 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app.vue b/app.vue
index 359c982c..796a8125 100644
--- a/app.vue
+++ b/app.vue
@@ -2,7 +2,7 @@
 import { APP_NAME } from './constants'
 
 useHead({
-  title: APP_NAME,
+  titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${import.meta.env.DEV ? ' (dev)' : ''}`,
   link: [
     {
       rel: 'icon', type: 'image/svg+png', href: '/favicon.png',
diff --git a/pages/@[account].vue b/pages/@[account].vue
index 8bc1ef27..5ab8f312 100644
--- a/pages/@[account].vue
+++ b/pages/@[account].vue
@@ -3,6 +3,12 @@ const params = useRoute().params
 const accountName = $computed(() => params.account as string)
 
 const account = await fetchAccountByName(accountName).catch(() => null)
+
+if (account) {
+  useHead({
+    title: `${account.displayName} (@${account.acct})`,
+  })
+}
 </script>
 
 <template>
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 060c97ea..a5b0c490 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.bookmarks.getIterator()
+
+useHead({
+  title: 'Bookmarks',
+})
 </script>
 
 <template>
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 51fa803d..cfd1a9d9 100644
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.conversations.getIterator()
+
+useHead({
+  title: 'Conversations',
+})
 </script>
 
 <template>
diff --git a/pages/explore.vue b/pages/explore.vue
index 5a014381..fe4d4259 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const paginator = masto.trends.getStatuses()
+
+useHead({
+  title: 'Explore',
+})
 </script>
 
 <template>
diff --git a/pages/favourites.vue b/pages/favourites.vue
index 9110c97b..41658b90 100644
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.favourites.getIterator()
+
+useHead({
+  title: 'Favourites',
+})
 </script>
 
 <template>
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 1e5663be..5661db3c 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -11,6 +11,10 @@ const tab = $(useLocalStorage<typeof tabNames[number]>(STORAGE_KEY_NOTIFY_TAB, '
 const paginator = $computed(() => {
   return masto.notifications.getIterator(tab === 'All' ? undefined : { types: ['mention'] })
 })
+
+useHead({
+  title: 'Notifications',
+})
 </script>
 
 <template>
diff --git a/pages/public/index.vue b/pages/public/index.vue
index 64fd3c98..61e6f2c7 100644
--- a/pages/public/index.vue
+++ b/pages/public/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-
 const paginator = masto.timelines.getPublicIterable()
+
+useHead({
+  title: 'Federated'
+})
 </script>
 
 <template>
diff --git a/pages/public/local.vue b/pages/public/local.vue
index 13b4239c..c5f4a3ba 100644
--- a/pages/public/local.vue
+++ b/pages/public/local.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value))
+
+useHead({
+  title: 'Local'
+})
 </script>
 
 <template>
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
index d74d5114..92d6b1cc 100644
--- a/pages/tags/[tag].vue
+++ b/pages/tags/[tag].vue
@@ -3,6 +3,10 @@ const params = useRoute().params
 const tag = $computed(() => params.tag as string)
 
 const paginator = masto.timelines.getHashtagIterable(tag)
+
+useHead({
+  title: `#${tag}`,
+})
 </script>
 
 <template>