feat: about page and better config

src/views/AboutView.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ABOUT_LINK, TITLE } from '@lib/config'
+import { stripHTML } from '@lib/strings'
+import PageFooter from '@components/PageFooter.vue'
+import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
+import NavBar from '@components/NavBar.vue'
+import { updateDynamicContent } from '@/lib/articles'
+
+const html = ref<string>('')
+
+onBeforeMount(async () => {
+  window.document.title = stripHTML(TITLE) + ' — ' + stripHTML(ABOUT_LINK)
+
+  html.value = (await import('@articles/about.md')).html
+
+  await updateDynamicContent()
+})
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
+</script>
+
+<template>
+  <main class="article">
+    <NavBar />
+    <div v-html="html"></div>
+    <PageFooter />
+  </main>
+</template>

src/views/ArticleView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount } from 'vue'
-import { loadArticle } from '@lib/articles'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { loadArticle, updateDynamicContent } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
 import { simpleDateFormat } from '@lib/dates'
@@ -20,10 +20,13 @@ async function loadPage(target: RouteLocation) {
   window.document.title =
     stripHTML(TITLE) + ' — ' + stripHTML(article.value?.metadata.title ?? 'Not Found')
   loading.value = false
+  await updateDynamicContent()
 }
 
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue'
-import { listArticles } from '@lib/articles'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { listArticles, updateDynamicContent } from '@lib/articles'
 import type { ArticleMetadata } from '@interfaces'
 import { simpleDateFormat } from '@lib/dates'
 import { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
@@ -16,7 +16,10 @@ onBeforeMount(async () => {
     .slice(0, HOME_COUNT)
   articles.value.splice(0, articles.value.length, ...newArticles)
   window.document.title = stripHTML(TITLE) + ' — Home'
+  await updateDynamicContent()
 })
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>

src/views/NotFoundView.vue

@@ -2,8 +2,9 @@
 import { TITLE } from '@lib/config'
 import { stripHTML } from '@lib/strings'
 import PageFooter from '@components/PageFooter.vue'
-import { onBeforeMount, ref } from 'vue'
+import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
 import NavBar from '@components/NavBar.vue'
+import { updateDynamicContent } from '@/lib/articles'
 
 const html = ref<string>('')
 
@@ -11,7 +12,11 @@ onBeforeMount(async () => {
   window.document.title = stripHTML(TITLE)
 
   html.value = (await import('@articles/not_found.md')).html
+
+  await updateDynamicContent()
 })
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>