fix: faster page loading with no async

README.md

@@ -21,7 +21,7 @@ bun run build
 - [x] config in sub repo
 - [x] copyright
 - [x] nav bar on top
-- [ ] date updated
+- [x] date updated
 - [ ] archive page
 - [x] about page
 - [ ] link to previous/next article

articles.example/config.json

@@ -9,5 +9,7 @@
   "about_link": "<i icon=info></i> ABOUT",
   "back_link": "<i icon=undo-2></i> Back to home",
   "published_on": "Published on",
+  "updated_on": "Updated on",
+  "authored": "By",
   "copyright": "<a style=\"text-decoration:none;color:inherit;\" target=_blank href=\"https://creativecommons.org/licenses/by-nc/4.0/\">CC BY-NC</a>"
 }

articles.example/style.scss

@@ -22,7 +22,8 @@ https://www.joshwcomeau.com/css/custom-css-reset/
     3. Allow percentage-based heights in the application
   */
 html,
-body, div#app {
+body,
+div#app {
   height: 100%;
 }
 /*
@@ -178,15 +179,9 @@ nav .nav-title {
 
 nav .nav-items {
   display: flex;
-  gap: .5em;
+  gap: 0.5em;
 }
 
-.article-published {
+.article-info {
   font-style: italic;
 }
-
-.link-home {
-    text-decoration: none;
-    float: right;
-    line-height: 2.4;
-}

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "md-blog",

package.json

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

src/App.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import PageFooter from '@components/PageFooter.vue'
+import NavBar from '@components/NavBar.vue'
+</script>
+
 <template>
+  <main>
+    <NavBar />
     <RouterView />
+    <PageFooter />
+  </main>
 </template>

src/components/BackHomeButton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BACK_LINK } from '@lib/config'
+</script>
+
+<template>
+  <template v-if="$route.fullPath != '/'">
+    <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
+  </template>
+</template>

src/interfaces.ts

@@ -7,7 +7,8 @@ export interface ArticleMetadata {
   path: string
   title: string
   date: Date
-  author: string
+  updated?: Date
+  author?: string
   thumbnail?: string
   draft?: boolean
 }

src/lib/articles.ts

@@ -28,7 +28,12 @@ function parseMetadata(
     path: pathPrefix,
     title:
       (draft ? '[DRAFT] ' : '') + decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
-    date: new Date(Date.parse((srcAttributes.date as string) ?? '')),
+    date: (srcAttributes.date as string | undefined)
+      ? new Date(Date.parse(srcAttributes.date as string))
+      : new Date(),
+    updated: (srcAttributes.updated as string | undefined)
+      ? new Date(Date.parse(srcAttributes.updated as string))
+      : undefined,
     author: decodeURIComponent((srcAttributes.author as string) ?? ''),
     thumbnail: (srcAttributes.thumbnail as string) ?? '',
     draft: draft,

src/lib/config.ts

@@ -12,5 +12,7 @@ export const BACK_LINK: string = articlesConfig['back_link']
 export const ABOUT_LINK: string = articlesConfig['about_link']
 export const HOME_COUNT: number = articlesConfig['home_count']
 export const PUBLISHED_ON: string = articlesConfig['published_on']
+export const UPDATED_ON: string = articlesConfig['updated_on']
+export const AUTHORED: string = articlesConfig['authored']
 export const BASE_URL: string = import.meta.env.BASE_URL
 export const PROD: boolean = import.meta.env.PROD

src/router/index.ts

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

src/views/AboutView.vue

@@ -1,28 +1,15 @@
 <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 { onMounted, onUpdated } from 'vue'
+import { updateDynamicContent } from '@lib/articles'
+import { html } from '@articles/about.md'
 
-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 class="article">
     <div v-html="html"></div>
-    <PageFooter />
-  </main>
+    <BackHomeButton />
+  </div>
 </template>

src/views/ArticleView.vue

@@ -3,12 +3,11 @@ import type { Article } from '@interfaces'
 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'
-import { BACK_LINK, 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'
+import NotFoundView from '@views/NotFoundView.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -30,20 +29,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">
-        <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
         <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"
@@ -54,10 +55,7 @@ onUpdated(updateDynamicContent)
       </div>
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
-      <template v-if="$route.fullPath != '/'">
-        <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
-      </template>
-      <PageFooter />
-    </main>
+      <BackHomeButton />
     </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,28 +1,12 @@
 <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 { onMounted, onUpdated } from 'vue'
+import { updateDynamicContent } from '@lib/articles'
+import { html } from '@articles/not_found.md'
 
-const html = ref<string>('')
-
-onBeforeMount(async () => {
-  window.document.title = stripHTML(TITLE)
-
-  html.value = (await import('@articles/not_found.md')).html
-
-  await updateDynamicContent()
-})
 onMounted(updateDynamicContent)
 onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main class="article">
-    <NavBar />
-    <div v-html="html"></div>
-    <PageFooter />
-  </main>
+  <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'