feat: spa navigation

lib/app/index.js

@@ -6,23 +6,38 @@ import {
   inject,
   watchEffect,
   shallowRef
-} from 'vue'
+} from '/@modules/vue'
 import { Layout } from '/@theme/index.js'
 
 const PathSymbol = Symbol()
 
 const App = {
   setup() {
-    const path = ref(window.location.pathname)
+    const path = ref(location.pathname)
 
-    // window.addEventListener('click', e => {
-    //   if (e.target.tagName === 'A') {
-    //     e.preventDefault()
-    //     if (e.target.href && e.target.href.indexOf(location.host)) {
-    //       history.pushState(null, '', e.target.href)
-    //     }
-    //   }
-    // })
+    window.addEventListener(
+      'click',
+      (e) => {
+        if (e.target.tagName === 'A') {
+          const { href, target } = e.target
+          if (
+            target !== `_blank` &&
+            href.startsWith(`${location.protocol}//${location.host}`)
+          ) {
+            e.preventDefault()
+            // TODO save scroll position
+            history.pushState(null, '', href)
+            path.value = location.pathname
+          }
+        }
+      },
+      { capture: true }
+    )
+
+    window.addEventListener('popstate', (e) => {
+      // TODO restore scroll position
+      path.value = location.pathname
+    })
 
     provide(PathSymbol, path)
 
@@ -40,16 +55,15 @@ const Content = {
     watchEffect(() => {
       let pagePath = path.value.replace(/\.html$/, '')
       if (pagePath.endsWith('/')) {
-        pagePath += 'index.md'
-      } else {
-        pagePath += '.md'
+        pagePath += 'index'
       }
 
-      import(pagePath)
+      // awlays force re-fetch content in dev
+      import(`${pagePath}.md?t=${Date.now()}`)
         .then((m) => {
           comp.value = m.default
         })
-        .catch(err => {
+        .catch((err) => {
           comp.value = Default404
         })
     })