feat: web based SPA

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
 

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)

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 },
   ],
 })

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>

vite.config.ts

@@ -18,5 +18,4 @@ export default defineConfig({
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
     },
   },
-  assetsInclude: [/\.\/articles\/.*'/],
 })