fix: faster page loading with no async

.github/workflows/deploy.yml

@@ -3,6 +3,9 @@ on:
     schedule:
         - cron: "*/30 * * * *"
     push:
+        branches:
+            - "main"
+    workflow_dispatch:
 
 jobs:
     build:

README.md

@@ -19,7 +19,10 @@ bun run build
 - [x] SPA and opengraph
 - [x] build with github actions
 - [x] config in sub repo
-- [ ] nav bar on top
+- [x] copyright
+- [x] nav bar on top
+- [x] date updated
 - [ ] archive page
+- [x] about page
 - [ ] link to previous/next article
 - [ ] proper docs

articles.example/2026-01-01/index.md

@@ -0,0 +1,40 @@
+---
+title: Demo
+author: kleπek
+draft: false
+thumbnail: ./thumbnail.jpg
+date: 2026-01-01
+---
+
+## Images
+
+PNG: ![png file](./atom.png)
+
+## highlight.js
+
+```typescript
+function test(arg1: string, arg2: number): string {
+    return `${arg1}: ${arg2}`
+}
+```
+
+```text
+text/plain
+```
+
+## Mermaid
+
+```mermaid
+flowchart LR
+  A --> B
+```
+
+## LaTex
+
+$$\Large\color{Red}{\frac{\Delta K}{2}=\frac{T_{2}}{x_{2}(x_{2}-x_{1})}-\frac{T_{1}}{x_{1}(x_{2}-x_{1})}}$$
+
+Inline LaTex $$\frac{\Delta K}{2}$$ in text
+
+## Lucide Icons
+
+Icon inside <i icon="atom"></i> text

articles.example/config.json

@@ -0,0 +1,15 @@
+{
+  "base_url": "http://localhost/",
+  "title": "<i icon=notepad-text></i> My Blog",
+  "signature": "By <b>Me</b>",
+  "lang": "en",
+  "custom_head": "",
+  "home_count": 5,
+  "rss_link": "<i icon=rss></i> RSS",
+  "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

@@ -0,0 +1,187 @@
+/*
+=================================================
+https://www.joshwcomeau.com/css/custom-css-reset/
+=================================================
+*/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body,
+div#app {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+/*
+=================================================
+https://blog.koley.in/2019/339-bytes-of-responsive-css
+https://www.swyx.io/css-100-bytes
+https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
+=================================================
+*/
+
+html,
+body {
+  padding: 0;
+  max-width: 100%;
+  color: #222;
+  font-family: Verdana, serif;
+}
+
+body {
+  background-color: #eee;
+}
+
+main {
+  padding: 1.5rem;
+  margin: auto;
+  background-color: #ccc;
+  min-height: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1em 0 0.5em;
+}
+
+p,
+ul,
+ol,
+pre,
+img,
+blockquote,
+details {
+  margin-bottom: 1em;
+  color: #444;
+}
+
+hr {
+  opacity: 25%;
+  border-bottom: 0;
+  margin-bottom: 0.5em;
+}
+
+textarea,
+input,
+select,
+pre,
+.mono {
+  font-family: monospace;
+}
+
+@media only screen and (min-width: 768px) {
+  main {
+    max-width: 42rem;
+  }
+  table {
+    font-size: inherit;
+  }
+}
+
+/*
+ * MD BLOG
+ */
+
+nav {
+  display: flex;
+  align-items: flex-end;
+}
+
+.home nav {
+  margin-bottom: 1em;
+  vertical-align: text-bottom;
+}
+
+.home .nav-title {
+  font-size: xx-large;
+}
+
+nav .nav-title {
+  font-size: larger;
+  font-weight: bold;
+  color: inherit;
+  display: inline-block;
+  flex-grow: 1;
+}
+
+nav .nav-items {
+  display: flex;
+  gap: 0.5em;
+}
+
+.article-info {
+  font-style: italic;
+}

bun.lock

@@ -1,10 +1,10 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "md-blog",
       "dependencies": {
+        "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
         "highlight.js": "^11.11.1",
         "katex": "^0.16.45",
         "lucide": "^1.11.0",
@@ -210,6 +210,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@keithclark/shaderview": ["@keithclark/shaderview@github:keithclark/shaderview#fee0cf0", {}, "keithclark-shaderview-fee0cf0"],
+
     "@mermaid-js/parser": ["@mermaid-js/parser@1.1.0", "", { "dependencies": { "langium": "^4.0.0" } }, "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw=="],
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-blog",
-  "version": "1.1.0",
+  "version": "1.9.1",
   "private": true,
   "type": "module",
   "repository": "https://github.com/klemek/md-blog",
@@ -17,6 +17,7 @@
     "format": "prettier --write src/ *.ts *.json"
   },
   "dependencies": {
+    "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
     "highlight.js": "^11.11.1",
     "katex": "^0.16.45",
     "lucide": "^1.11.0",

post-build.ts

@@ -28,10 +28,6 @@ function readArticleMetadata(path: string): Record<string, string> | null {
   const metadata: Record<string, string> = {
     path: path.replaceAll('/index.md', ''),
   }
-  const dateMatch = path.match(/(\d{4}\/\d{2}\/\d{2})/)
-  if (dateMatch && dateMatch[1]) {
-    metadata['date'] = dateMatch[1].replaceAll('/', '-')
-  }
   do {
     subMatch = METADATA_REGEX.exec(match[1])
     if (subMatch && subMatch[1] && subMatch[2]) {
@@ -93,7 +89,7 @@ if (!indexContent) {
 }
 
 const metadatas = getFiles('articles')
-  .filter((path) => path.match(/\d{4}\/\d{2}\/\d{2}\/index.md$/))
+  .filter((path) => path.match(/\/index.md$/))
   .map((path) => readArticleMetadata(path))
   .filter((metadata) => !!metadata)
 

src/App.vue

@@ -1,29 +1,12 @@
 <script setup lang="ts">
-import hljs from 'highlight.js'
-import { createIcons, icons } from 'lucide'
-import { onMounted, onUpdated, nextTick } from 'vue'
-import mermaid from 'mermaid'
-
-async function update() {
-  setTimeout(async () => {
-    await nextTick()
-    hljs.highlightAll()
-    createIcons({
-      icons,
-      nameAttr: 'icon',
-      attrs: {
-        width: '1.1em',
-        height: '1.1em',
-      },
-    })
-    mermaid.run()
-  }, 100)
-}
-
-onMounted(update)
-onUpdated(update)
+import PageFooter from '@components/PageFooter.vue'
+import NavBar from '@components/NavBar.vue'
 </script>
 
 <template>
-  <RouterView @vue:mounted="update" @vue:updated="update" />
+  <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/components/NavBar.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { BASE_URL, TITLE, RSS_LINK, ABOUT_LINK } from '@lib/config'
+</script>
+
+<template>
+  <nav>
+    <RouterLink to="/" class="nav-title"><span v-html="TITLE"></span></RouterLink>
+    <span class="nav-items">
+      <RouterLink to="/about/"><span v-html="ABOUT_LINK"></span></RouterLink>
+      <a :href="BASE_URL + 'atom.xml'" v-html="RSS_LINK"></a>
+    </span>
+  </nav>
+</template>

src/components/PageFooter.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, BASE_URL } from '@/lib/meta'
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@lib/config'
+import { stripHTML } from '@lib/strings'
 </script>
 
 <template>
-  <template v-if="$route.fullPath != '/'">
-    <RouterLink to="/"><i icon="undo-2"></i> Back to home</RouterLink>
-  </template>
-  <hr />
   <footer>
-    <small>
-      {{ new Date().getFullYear() }} — Made with
-      <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a> —
-      <a :href="BASE_URL + 'atom.xml'"><i icon="rss"></i> RSS</a>
-    </small>
+    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> |
+    Made with
+    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
   </footer>
 </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

@@ -1,19 +1,42 @@
 import type { MarkdownData, Article, ArticleMetadata } from '@interfaces'
-import { dateFromParts } from './dates'
 import katex from 'katex'
+import { nextTick } from 'vue'
+import hljs from 'highlight.js'
+import mermaid from 'mermaid'
+import { createIcons, icons } from 'lucide'
+
+export async function updateDynamicContent() {
+  await nextTick()
+  hljs.highlightAll()
+  createIcons({
+    icons,
+    nameAttr: 'icon',
+    attrs: {
+      width: '1.1em',
+      height: '1.1em',
+    },
+  })
+  mermaid.run()
+}
 
 function parseMetadata(
   srcAttributes: Record<string, unknown>,
   pathPrefix: string,
-  date: Date,
 ): ArticleMetadata {
+  const draft = !!srcAttributes.draft
   return {
     path: pathPrefix,
-    title: decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
-    date: date,
+    title:
+      (draft ? '[DRAFT] ' : '') + decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
+    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: !!srcAttributes.draft,
+    draft: draft,
   }
 }
 
@@ -55,7 +78,10 @@ function transformHtml(srcHtml: string): string {
   return outHtml
 }
 
-export async function loadArticle(date: Date): Promise<Article | null> {
+/**
+ * @deprecated
+ */
+export async function loadArticleOld(date: Date): Promise<Article | null> {
   const year = date.getFullYear().toString()
   const month = (date.getMonth() + 1).toString().padStart(2, '0')
   const day = date.getDate().toString().padStart(2, '0')
@@ -63,7 +89,23 @@ export async function loadArticle(date: Date): Promise<Article | null> {
   try {
     const data = (await import(`@articles/${year}/${month}/${day}/index.md`)) as MarkdownData
     return {
-      metadata: parseMetadata(data.attributes, path, date),
+      metadata: parseMetadata(data.attributes, path),
+      html: transformHtml(data.html),
+    }
+  } catch (ex) {
+    console.error(ex)
+    return null
+  }
+}
+
+export async function loadArticle(path: string): Promise<Article | null> {
+  const raw_articles = import.meta.glob('@articles/**/index.md')
+  const key = `/articles/${path}index.md`
+  if (!raw_articles[key]) return null
+  try {
+    const data = (await raw_articles[key]()) as MarkdownData
+    return {
+      metadata: parseMetadata(data.attributes, path),
       html: transformHtml(data.html),
     }
   } catch (ex) {
@@ -79,12 +121,7 @@ export async function listArticles(): Promise<ArticleMetadata[]> {
       Object.keys(raw_articles).map(async (key) => {
         if (!raw_articles[key]) return null
         const data = (await raw_articles[key]()) as MarkdownData
-        const match = key.match(/\/(\d+)\/(\d+)\/(\d+)\//)
-        if (match === null) {
-          return null
-        }
-        const date = dateFromParts(match[1], match[2], match[3])
-        return parseMetadata(data.attributes, key.replace('index.md', ''), date)
+        return parseMetadata(data.attributes, key.replace('index.md', ''))
       }),
     )
   ).filter((item) => item !== null)

src/lib/config.ts

@@ -0,0 +1,18 @@
+import packageJson from '@/../package.json'
+import articlesConfig from '@articles/config.json'
+
+export const NAME: string = packageJson.name
+export const VERSION: string = packageJson.version
+export const REPOSITORY: string = packageJson.repository
+export const TITLE: string = articlesConfig['title']
+export const SIGNATURE: string = articlesConfig['signature']
+export const COPYRIGHT: string = articlesConfig['copyright']
+export const RSS_LINK: string = articlesConfig['rss_link']
+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/lib/dates.ts

@@ -1,11 +1,3 @@
-export function dateFromParts(
-  year: string | undefined,
-  month: string | undefined,
-  day: string | undefined,
-): Date {
-  return new Date(parseInt(year ?? ''), parseInt(month ?? '') - 1, parseInt(day ?? ''))
-}
-
 export function simpleDateFormat(date: Date): string {
   return (
     date.getFullYear() +

src/lib/meta.ts

@@ -1,8 +0,0 @@
-import packageJson from '@/../package.json'
-
-export const NAME = packageJson.name
-export const VERSION = packageJson.version
-export const REPOSITORY = packageJson.repository
-export const TITLE = import.meta.env.VITE_APP_TITLE
-export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
-export const BASE_URL = import.meta.env.BASE_URL

src/main.ts

@@ -2,6 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
+import ShaderviewElement from '@keithclark/shaderview'
+customElements.define('kc-shaderview', ShaderviewElement)
+
 const app = createApp(App)
 
 app.use(router)

src/router/index.ts

@@ -1,13 +1,15 @@
-import ArticleView from '@views/ArticleView.vue'
-import HomeView from '@views/HomeView.vue'
-import NotFoundView from '@views/NotFoundView.vue'
 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 NotFoundView from '@views/NotFoundView.vue'
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: '/', component: HomeView },
-    { path: '/articles/:year(\\d{4})/:month(\\d{2})/:day(\\d{2})/', component: ArticleView },
+    { path: '/about/', component: AboutView },
+    { path: '/articles/:pathMatch(.*)/', component: ArticleView },
     { path: '/:pathMatch(.*)', component: NotFoundView },
   ],
 })

src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { onMounted, onUpdated } from 'vue'
+import { updateDynamicContent } from '@lib/articles'
+import { html } from '@articles/about.md'
+
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
+</script>
+
+<template>
+  <div class="article">
+    <div v-html="html"></div>
+    <BackHomeButton />
+  </div>
+</template>

src/views/ArticleView.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Article } from '@interfaces'
-import { ref, onBeforeMount } from 'vue'
-import { loadArticle } from '@lib/articles'
+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 { dateFromParts, simpleDateFormat } from '@lib/dates'
-import { SIGNATURE, TITLE } from '@lib/meta'
-import PageFooter from '@components/PageFooter.vue'
-import { stripHTML } from '@/lib/strings'
+import { simpleDateFormat } from '@lib/dates'
+import { AUTHORED, PUBLISHED_ON, SIGNATURE, TITLE, UPDATED_ON } from '@lib/config'
+import { stripHTML } from '@lib/strings'
+import BackHomeButton from '@components/BackHomeButton.vue'
+import NotFoundView from '@views/NotFoundView.vue'
 
 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -15,37 +15,36 @@ const route = useRoute()
 
 async function loadPage(target: RouteLocation) {
   loading.value = true
-  article.value = await loadArticle(
-    dateFromParts(
-      target.params.year as string,
-      target.params.month as string,
-      target.params.day as string,
-    ),
-  )
+  article.value = await loadArticle(target.params.pathMatch as string)
   window.document.title =
     stripHTML(TITLE) + ' — ' + stripHTML(article.value?.metadata.title ?? 'Not Found')
   loading.value = false
+  await updateDynamicContent()
 }
 
 onBeforeMount(() => loadPage(route))
 onBeforeRouteUpdate(loadPage)
+onMounted(updateDynamicContent)
+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">
+  <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">
-          {{ article.metadata.draft ? 'Drafted on' : 'Published on' }}
-          {{ simpleDateFormat(article.metadata.date) }}
+        <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"
@@ -56,8 +55,7 @@ onBeforeRouteUpdate(loadPage)
       </div>
       <div class="article-text" v-html="article.html"></div>
       <div class="article-signature" v-html="SIGNATURE"></div>
-      <br />
-      <PageFooter />
-    </main>
-  </template>
+      <BackHomeButton />
+    </template>
+  </div>
 </template>

src/views/HomeView.vue

@@ -1,29 +1,36 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue'
-import { listArticles } from '@lib/articles'
+import { ref, onBeforeMount, onUpdated, onMounted } from 'vue'
+import { listArticles, updateDynamicContent } from '@lib/articles'
 import type { ArticleMetadata } from '@interfaces'
 import { simpleDateFormat } from '@lib/dates'
-import { TITLE } from '@lib/meta'
-import PageFooter from '@components/PageFooter.vue'
-import { stripHTML } from '@/lib/strings'
+import { HOME_COUNT, PROD, PUBLISHED_ON, TITLE } from '@lib/config'
+import { stripHTML } from '@lib/strings'
 
 const articles = ref<ArticleMetadata[]>([])
+const loading = ref<boolean>(true)
 
 onBeforeMount(async () => {
-  const newArticles = await listArticles()
+  const newArticles = (await listArticles())
+    .filter((metadata) => (!metadata.draft || !PROD) && metadata.path)
+    .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)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main>
-    <h1 class="title" v-html="TITLE"></h1>
+  <div v-if="!loading" class="home">
     <template v-for="(metadata, index) in articles" v-bind:key="index">
-      <div v-if="!metadata.draft && metadata.path" class="article-item">
+      <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">Published on {{ simpleDateFormat(metadata.date) }}</span>
+          <span class="article-info"
+            ><span v-html="PUBLISHED_ON"></span> {{ simpleDateFormat(metadata.date) }}</span
+          >
           <img
             v-if="metadata.thumbnail"
             alt="thumbnail"
@@ -32,6 +39,5 @@ onBeforeMount(async () => {
         </RouterLink>
       </div>
     </template>
-    <PageFooter />
-  </main>
+  </div>
 </template>

src/views/NotFoundView.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { TITLE } from '@/lib/meta'
-import { stripHTML } from '@/lib/strings'
-import PageFooter from '@components/PageFooter.vue'
-import { onBeforeMount } from 'vue'
+import { onMounted, onUpdated } from 'vue'
+import { updateDynamicContent } from '@lib/articles'
+import { html } from '@articles/not_found.md'
 
-onBeforeMount(() => {
-  window.document.title = stripHTML(TITLE) + ' — Not Found'
-})
+onMounted(updateDynamicContent)
+onUpdated(updateDynamicContent)
 </script>
 
 <template>
-  <main>
-    <h1>Page not found</h1>
-    <PageFooter />
-  </main>
+  <div class="article" v-html="html"></div>
 </template>

vite.config.ts

@@ -14,7 +14,6 @@ export default ({ mode }: { mode: string }) => {
   process.env.VITE_APP_TITLE = articlesConfig['title']
   process.env.VITE_APP_TITLE_NO_HTML = articlesConfig['title'].replace(/(<([^>]+)>)/gi, '').trim()
   process.env.VITE_APP_LANG = articlesConfig['lang']
-  process.env.VITE_APP_SIGNATURE = articlesConfig['signature']
   process.env.VITE_CUSTOM_HEAD = articlesConfig['custom_head']
 
   return defineConfig({

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'