feat: working SPA

src/views/ArticleView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MarkdownData } from '@interfaces'
+import { ref, onBeforeMount } from 'vue'
+import { loadArticle } from '@lib/articles'
+import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
+import NotFoundView from './NotFoundView.vue'
+
+const markdownData = ref<MarkdownData | null>(null)
+const route = useRoute()
+const articleDate = ref<Date>(new Date())
+
+async function loadPage(target: RouteLocation) {
+  articleDate.value = new Date(
+    parseInt(target.params.year),
+    parseInt(target.params.month) - 1,
+    parseInt(target.params.day),
+  )
+  markdownData.value = await loadArticle(
+    articleDate.value.getFullYear(),
+    articleDate.value.getMonth() + 1,
+    articleDate.value.getDate(),
+  )
+}
+
+onBeforeMount(() => loadPage(route))
+onBeforeRouteUpdate(loadPage)
+</script>
+
+<template>
+  <template v-if="!markdownData">
+    <NotFoundView />
+  </template>
+  <template v-else>
+    <h1>ArticleView - {{ articleDate }}</h1>
+    <div v-html="markdownData.html"></div>
+  </template>
+</template>
+
+<style scoped></style>

src/views/HomeView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from 'vue'
+import { listArticles } from '@/lib/articles'
+import type { MarkdownAttributes } from '@/interfaces'
+
+const articles = ref<MarkdownAttributes[]>([])
+
+onBeforeMount(async () => {
+  const newArticles = await listArticles()
+  console.log(newArticles)
+  articles.value.splice(0, articles.value.length, ...newArticles)
+})
+</script>
+
+<template>
+  <h1>Home View</h1>
+  <div v-for="(attr, index) in articles" v-bind:key="index">
+    <RouterLink :to="attr.path ?? ''">{{ attr.title }}</RouterLink>
+  </div>
+</template>
+
+<style scoped></style>

src/views/NotFoundView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Not found</h1>
+</template>
+
+<style scoped></style>