#247 - refactor usePageMeta

AloisSeckar · Jul 21, 2024 · 1aec224 · 1aec224
1 parent 87e2491
commit 1aec224
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 47 deletions.
diff --git a/app.vue b/app.vue
@@ -1,28 +1,28 @@
 <template>
   <div id="top" class="flex justify-center">
     <div class="mx-2 md:w-4/5">
-      <LanguageSelector />
-      <div class="text-center">
-        <header class="mt-1 mb-2">
-          <h1 class="cursor-pointer" @click="toIndex">
-            WBSC Scoring <span class="text-red-500">Creator</span>
-          </h1>
-        </header>
-        <!-- <ClientOnly> -->
-        <div class="text-left sm:text-justify mb-16">
-          <NuxtPage />
+      <ClientOnly>
+        <LanguageSelector />
+        <div class="text-center">
+          <header class="mt-1 mb-2">
+            <h1 class="cursor-pointer" @click="toIndex">
+              WBSC Scoring <span class="text-red-500">Creator</span>
+            </h1>
+          </header>
+          <div class="text-left sm:text-justify mb-16">
+            <NuxtPage />
+          </div>
+          <footer class="fixed bottom-0 left-0 w-full p-1 bg-wbsc-blue text-black text-xs">
+            {{ $t('footer.creator') }}
+            <NuxtLink to="http://alois-seckar.cz" class="text-white hover:text-yellow-300">
+              Alois Sečkár
+            </NuxtLink>
+            (2019-{{ new Date().getFullYear() }})
+            {{ $t('footer.version') }}
+            <strong>{{ useAppConfig().fullVersion }}</strong>
+          </footer>
         </div>
-        <footer class="fixed bottom-0 left-0 w-full p-1 bg-wbsc-blue text-black text-xs">
-          {{ $t('footer.creator') }}
-          <NuxtLink to="http://alois-seckar.cz" class="text-white hover:text-yellow-300">
-            Alois Sečkár
-          </NuxtLink>
-          (2019-{{ new Date().getFullYear() }})
-          {{ $t('footer.version') }}
-          <strong>{{ useAppConfig().fullVersion }}</strong>
-        </footer>
-        <!-- </ClientOnly> -->
-      </div>
+      </ClientOnly>
     </div>
   </div>
 </template>
@@ -43,6 +43,15 @@ useHead({
   },
 })
 
+const title = ref(getPageTitle(useRoute().path))
+usePageMeta({
+  ...WBSC_PAGE_META,
+  title,
+})
+useRouter().beforeEach((to) => {
+  title.value = getPageTitle(to.path)
+})
+
 function toIndex() {
   return navigateTo('/')
 }

diff --git a/composables/usePageMeta.ts b/composables/usePageMeta.ts
@@ -5,9 +5,9 @@ export const WBSC_DSCR = 'Visualization of WBSC baseball/softball scoring system
 
 export type MetaDef = {
   type?: 'website' | 'article'
-  url?: string
-  title?: string
-  dscr?: string
+  url?: string | Ref<string>
+  title?: string | Ref<string>
+  dscr?: string | Ref<string>
 }
 
 export const WBSC_PAGE_META: MetaDef = {
@@ -29,3 +29,17 @@ export function usePageMeta(meta: MetaDef) {
     twitterCard: 'summary_large_image',
   })
 }
+
+export function getPageTitle(route: string) {
+  const title = WBSC_TITLE
+  switch (route) {
+    case '/help':
+      return title + ' - Help'
+    case '/project':
+      return title + ' - Project'
+    case '/report':
+      return title + ' - Report'
+    default:
+      return title
+  }
+}
diff --git a/pages/help.vue b/pages/help.vue
@@ -4,10 +4,3 @@
     <NavButtons />
   </div>
 </template>
-
-<script setup lang="ts">
-usePageMeta({
-  ...WBSC_PAGE_META,
-  title: WBSC_PAGE_META.title + ' - Help',
-})
-</script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -55,8 +55,6 @@ import type { WBSCToolbar } from '#components'
 
 const version = 'v' + useAppConfig().publicVersion
 
-usePageMeta(WBSC_PAGE_META)
-
 const toolbar: Ref<InstanceType<typeof WBSCToolbar> | null> = ref(null)
 onMounted(() => toolbar.value?.init())
 </script>
diff --git a/pages/project.vue b/pages/project.vue
@@ -4,10 +4,3 @@
     <NavButtons />
   </div>
 </template>
-
-<script setup lang="ts">
-usePageMeta({
-  ...WBSC_PAGE_META,
-  title: WBSC_PAGE_META.title + ' - Project',
-})
-</script>
diff --git a/pages/report.vue b/pages/report.vue
@@ -4,10 +4,3 @@
     <NavButtons />
   </div>
 </template>
-
-<script setup lang="ts">
-usePageMeta({
-  ...WBSC_PAGE_META,
-  title: WBSC_PAGE_META.title + ' - Report',
-})
-</script>