feat: updated on and better vue layout

src/views/AboutView.vue

@@ -1,19 +1,17 @@
 <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'
-import BackHomeButton from '@/components/BackHomeButton.vue'
+import { updateDynamicContent } from '@lib/articles'
+import BackHomeButton from '@components/BackHomeButton.vue'
 
+const loading = ref<boolean>(true)
 const html = ref<string>('')
 
 onBeforeMount(async () => {
   window.document.title = stripHTML(TITLE) + ' — ' + stripHTML(ABOUT_LINK)
-
   html.value = (await import('@articles/about.md')).html
-
+  loading.value = false
   await updateDynamicContent()
 })
 onMounted(updateDynamicContent)
@@ -21,10 +19,8 @@ onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main class="article">
-    <NavBar />
+  <div v-if="!loading" class="article">
     <div v-html="html"></div>
     <BackHomeButton />
-    <PageFooter />
-  </main>
+  </div>
 </template>

src/views/ArticleView.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { ref, onBeforeMount, onUpdated, onMounted, defineAsyncComponent } 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'
-import { PUBLISHED_ON, SIGNATURE, TITLE } from '@lib/config'
-import PageFooter from '@components/PageFooter.vue'
+import { AUTHORED, PUBLISHED_ON, SIGNATURE, TITLE, UPDATED_ON } from '@lib/config'
 import { stripHTML } from '@lib/strings'
-import NavBar from '@components/NavBar.vue'
-import BackHomeButton from '@/components/BackHomeButton.vue'
+
+const BackHomeButton = defineAsyncComponent(() => import('@components/BackHomeButton.vue'))
+const NotFoundView = defineAsyncComponent(() => import('@views/NotFoundView.vue'))
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -31,19 +30,22 @@ onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <template v-if="loading">
-    <main></main>
-  </template>
-  <template v-else-if="!article">
+  <template v-if="!loading && !article">
     <NotFoundView />
   </template>
-  <template v-else>
-    <main class="article">
-      <NavBar />
+  <div v-if="!loading" class="article">
+    <template v-if="!loading && article">
       <div class="article-header">
         <h1 class="article-title" v-html="article.metadata.title"></h1>
-        <div class="article-published">
+        <div class="article-info">
+          <span v-if="article.metadata.author"
+            ><span v-html="AUTHORED"></span> <span v-html="article.metadata.author"></span> —
+          </span>
           <span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(article.metadata.date) }}
+          <span v-if="article.metadata.updated"
+            >— <span v-html="UPDATED_ON"></span>
+            {{ simpleDateFormat(article.metadata.updated) }}</span
+          >
         </div>
         <img
           v-if="article.metadata.thumbnail"
@@ -55,7 +57,6 @@ onUpdated(updateDynamicContent)
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
       <BackHomeButton />
-      <PageFooter />
-    </main>
-  </template>
+    </template>
+  </div>
 </template>

src/views/HomeView.vue

@@ -4,11 +4,10 @@ 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'
-import PageFooter from '@components/PageFooter.vue'
-import { stripHTML } from '@/lib/strings'
-import NavBar from '@components/NavBar.vue'
+import { stripHTML } from '@lib/strings'
 
 const articles = ref<ArticleMetadata[]>([])
+const loading = ref<boolean>(true)
 
 onBeforeMount(async () => {
   const newArticles = (await listArticles())
@@ -16,6 +15,7 @@ onBeforeMount(async () => {
     .slice(0, HOME_COUNT)
   articles.value.splice(0, articles.value.length, ...newArticles)
   window.document.title = stripHTML(TITLE) + ' — Home'
+  loading.value = false
   await updateDynamicContent()
 })
 onMounted(updateDynamicContent)
@@ -23,13 +23,12 @@ onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main class="home">
-    <NavBar />
+  <div v-if="!loading" class="home">
     <template v-for="(metadata, index) in articles" v-bind:key="index">
       <div v-if="(!metadata.draft || !PROD) && metadata.path" class="article-item">
         <RouterLink :to="metadata.path">
           <h2 v-html="metadata.title"></h2>
-          <span class="article-published"
+          <span class="article-info"
             ><span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(metadata.date) }}</span
           >
           <img
@@ -40,6 +39,5 @@ onUpdated(updateDynamicContent)
         </RouterLink>
       </div>
     </template>
-    <PageFooter />
-  </main>
+  </div>
 </template>

src/views/NotFoundView.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { 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'
+import { updateDynamicContent } from '@lib/articles'
 
+const loading = ref<boolean>(true)
 const html = ref<string>('')
 
 onBeforeMount(async () => {
   window.document.title = stripHTML(TITLE)
-
   html.value = (await import('@articles/not_found.md')).html
-
+  loading.value = false
   await updateDynamicContent()
 })
 onMounted(updateDynamicContent)
@@ -20,9 +18,5 @@ onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main class="article">
-    <NavBar />
-    <div v-html="html"></div>
-    <PageFooter />
-  </main>
+  <div v-if="!loading" class="article" v-html="html"></div>
 </template>