fix: faster page loading with no async

src/App.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-
-const NavBar = defineAsyncComponent(() => import('@components/NavBar.vue'))
-const PageFooter = defineAsyncComponent(() => import('@components/PageFooter.vue'))
+import PageFooter from '@components/PageFooter.vue'
+import NavBar from '@components/NavBar.vue'
 </script>
 
 <template>

src/router/index.ts

@@ -1,10 +1,8 @@
-import { defineAsyncComponent } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-
-const AboutView = defineAsyncComponent(() => import('@views/AboutView.vue'))
-const ArticleView = defineAsyncComponent(() => import('@views/ArticleView.vue'))
-const HomeView = defineAsyncComponent(() => import('@views/HomeView.vue'))
-const NotFoundView = defineAsyncComponent(() => import('@views/NotFoundView.vue'))
+import HomeView from '@views/HomeView.vue'
+import AboutView from '@views/AboutView.vue'
+import ArticleView from '@views/ArticleView.vue'
+import NotFoundView from '@views/NotFoundView.vue'
 
 const router = createRouter({
   history: createWebHistory(),

src/views/AboutView.vue

@@ -1,25 +1,14 @@
 <script setup lang="ts">
-import { ABOUT_LINK, TITLE } from '@lib/config'
-import { stripHTML } from '@lib/strings'
-import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 import { updateDynamicContent } from '@lib/articles'
-import BackHomeButton from '@components/BackHomeButton.vue'
+import { html } from '@articles/about.md'
 
-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)
 onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <div v-if="!loading" class="article">
+  <div class="article">
     <div v-html="html"></div>
     <BackHomeButton />
   </div>

src/views/ArticleView.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount, onUpdated, onMounted, defineAsyncComponent } from 'vue'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
 import { loadArticle, updateDynamicContent } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import { simpleDateFormat } from '@lib/dates'
 import { AUTHORED, PUBLISHED_ON, SIGNATURE, TITLE, UPDATED_ON } from '@lib/config'
 import { stripHTML } from '@lib/strings'
-
-const BackHomeButton = defineAsyncComponent(() => import('@components/BackHomeButton.vue'))
-const NotFoundView = defineAsyncComponent(() => import('@views/NotFoundView.vue'))
+import BackHomeButton from '@components/BackHomeButton.vue'
+import NotFoundView from '@views/NotFoundView.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)

src/views/NotFoundView.vue

@@ -1,22 +1,12 @@
 <script setup lang="ts">
-import { TITLE } from '@lib/config'
-import { stripHTML } from '@lib/strings'
-import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 import { updateDynamicContent } from '@lib/articles'
+import { html } from '@articles/not_found.md'
 
-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)
 onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <div v-if="!loading" class="article" v-html="html"></div>
+  <div class="article" v-html="html"></div>
 </template>