From 9162c149c44c279b59326dae4f4af956610fd117 Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Sat, 25 Apr 2026 19:15:41 +0200
Subject: [PATCH] feat: web based SPA

---
 README.md              |  1 +
 src/lib/articles.ts    | 12 +++++-------
 src/router/index.ts    |  6 +++---
 src/views/HomeView.vue |  2 +-
 vite.config.ts         |  1 -
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index e09dbb0..ea189ba 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ This template should help get you started developing with Vue 3 in Vite.
 - [x] link to home
 - [ ] link to previous/next article
 - [x] set page title
+- [ ] SPA and opengraph
 
 ## Recommended IDE Setup
 
diff --git a/src/lib/articles.ts b/src/lib/articles.ts
index cfff728..5876feb 100644
--- a/src/lib/articles.ts
+++ b/src/lib/articles.ts
@@ -12,9 +12,7 @@ function parseMetadata(
     title: decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
     date: date,
     author: decodeURIComponent((srcAttributes.author as string) ?? ''),
-    thumbnail: srcAttributes.thumbnail
-      ? (srcAttributes.thumbnail as string).replaceAll('./', pathPrefix + '/')
-      : pathPrefix + '/thumbnail.jpg',
+    thumbnail: (srcAttributes.thumbnail as string) ?? '',
     draft: !!srcAttributes.draft,
   }
 }
@@ -50,8 +48,8 @@ function transformMermaidBlocks(srcHtml: string): string {
   return outHtml
 }
 
-function transformHtml(srcHtml: string, pathPrefix: string): string {
-  let outHtml: string = srcHtml.replaceAll('="./', '="' + pathPrefix + '/')
+function transformHtml(srcHtml: string): string {
+  let outHtml: string = srcHtml
   outHtml = transformLatexBlocks(outHtml)
   outHtml = transformMermaidBlocks(outHtml)
   return outHtml
@@ -61,12 +59,12 @@ export async function loadArticle(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')
-  const path = `./articles/${year}/${month}/${day}`
+  const path = `./articles/${year}/${month}/${day}/`
   try {
     const data = (await import(`@articles/${year}/${month}/${day}/index.md`)) as MarkdownData
     return {
       metadata: parseMetadata(data.attributes, path, date),
-      html: transformHtml(data.html, path),
+      html: transformHtml(data.html),
     }
   } catch (ex) {
     console.error(ex)
diff --git a/src/router/index.ts b/src/router/index.ts
index 7bba770..ab20c2e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,13 +1,13 @@
 import ArticleView from '@views/ArticleView.vue'
 import HomeView from '@views/HomeView.vue'
 import NotFoundView from '@views/NotFoundView.vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes: [
     { path: '/', component: HomeView },
-    { path: '/articles/:year(\\d{4})/:month(\\d{2})/:day(\\d{2})', component: ArticleView },
+    { path: '/articles/:year(\\d{4})/:month(\\d{2})/:day(\\d{2})/', component: ArticleView },
     { path: '/:pathMatch(.*)', component: NotFoundView },
   ],
 })
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3e5c502..8694f75 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -26,7 +26,7 @@ onBeforeMount(async () => {
           <span class="time"
             ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
           >
-          <img alt="thumbnail" :src="metadata.thumbnail" />
+          <img alt="thumbnail" :src="metadata.path + metadata.thumbnail" />
         </RouterLink>
       </div>
     </template>
diff --git a/vite.config.ts b/vite.config.ts
index 91fc238..61b784d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,5 +18,4 @@ export default defineConfig({
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
     },
   },
-  assetsInclude: [/\.\/articles\/.*'/],
 })