feat: page title

src/components/PageFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { REPOSITORY, NAME, VERSION } from '@/lib/meta'
+</script>
+
+<template>
+  <template v-if="$route.fullPath != '/'">
+    <RouterLink to="/">Back to home</RouterLink>
+  </template>
+  <hr />
+  <footer>
+    <small>
+      {{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
+      {{ VERSION }}
+    </small>
+  </footer>
+</template>

src/lib/meta.ts

@@ -3,3 +3,5 @@ import packageJson from '@/../package.json'
 export const NAME = packageJson.name
 export const VERSION = packageJson.version
 export const REPOSITORY = packageJson.repository
+export const TITLE = import.meta.env.VITE_APP_TITLE
+export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE

src/views/ArticleView.vue

@@ -5,10 +5,11 @@ import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { dateFromParts, simpleDateFormat } from '@lib/dates'
-import { NAME, REPOSITORY, VERSION } from '@lib/meta'
+import { SIGNATURE, TITLE } from '@lib/meta'
+import PageFooter from '@components/PageFooter.vue'
 
 const article = ref<Article | null>(null)
-const loading = ref<Boolean>(true)
+const loading = ref<boolean>(true)
 const route = useRoute()
 
 async function loadPage(target: RouteLocation) {
@@ -20,13 +21,10 @@ async function loadPage(target: RouteLocation) {
       target.params.day as string,
     ),
   )
+  window.document.title = TITLE + ' — ' + (article.value?.metadata.title ?? 'Not Found')
   loading.value = false
 }
 
-function scrollTop() {
-  window.scrollTo(0, 0)
-}
-
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
 </script>
@@ -50,17 +48,9 @@ onBeforeRouteUpdate(loadPage)
       </div>
       <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
       <div id="text" v-html="article.html"></div>
-      <div id="signature">TODO signature</div>
+      <div id="signature" v-html="SIGNATURE"></div>
       <br />
-      <a @click.prevent="scrollTop" href="#">Go to top</a> -
-      <RouterLink to="/">Back to home</RouterLink>
-      <hr />
-      <footer>
-        <small>
-          {{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
-          {{ VERSION }}
-        </small>
-      </footer>
+      <PageFooter />
     </main>
   </template>
 </template>

src/views/HomeView.vue

@@ -2,20 +2,22 @@
 import { ref, onBeforeMount } from 'vue'
 import { listArticles } from '@lib/articles'
 import type { ArticleMetadata } from '@interfaces'
-import { simpleDateFormat } from '@/lib/dates'
+import { simpleDateFormat } from '@lib/dates'
+import { TITLE } from '@lib/meta'
+import PageFooter from '@components/PageFooter.vue'
 
 const articles = ref<ArticleMetadata[]>([])
 
 onBeforeMount(async () => {
   const newArticles = await listArticles()
-  console.log(newArticles)
   articles.value.splice(0, articles.value.length, ...newArticles)
+  window.document.title = TITLE + ' — Home'
 })
 </script>
 
 <template>
   <main>
-    <h1 class="title">Articles</h1>
+    <h1 class="title">{{ TITLE }}</h1>
     <template v-for="(metadata, index) in articles" v-bind:key="index">
       <div v-if="!metadata.draft && metadata.path" class="article">
         <RouterLink :to="metadata.path">
@@ -27,5 +29,6 @@ onBeforeMount(async () => {
         </RouterLink>
       </div>
     </template>
+    <PageFooter />
   </main>
 </template>

src/views/NotFoundView.vue

@@ -1,9 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { TITLE } from '@/lib/meta'
+import PageFooter from '@components/PageFooter.vue'
+import { onBeforeMount } from 'vue'
+
+onBeforeMount(() => {
+  window.document.title = TITLE + ' — Not Found'
+})
+</script>
 
 <template>
   <main>
     <h1>Page not found</h1>
-    <RouterLink to="/">Back to home</RouterLink>
+    <PageFooter />
   </main>
 </template>