feat: updated on and better vue layout

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>