fix: faster page loading with no async

.github/workflows/deploy.yml

@@ -20,8 +20,7 @@ jobs:
               with:
                   ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
             - run: git clone ${{ vars.ARTICLES_REPOSITORY }} articles
-            - run: bun run build-only
-            - run: bun run post-build
+            - run: bun run build
             - uses: actions/upload-artifact@v7
               with:
                   name: production-files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",

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>

vite.d.ts

@@ -23,3 +23,5 @@ declare module '*.md' {
   // Modify below per your usage
   export { attributes, toc, html, ReactComponent, VueComponent, VueComponentWith }
 }
+
+declare module '*.vue'