refactor: introduce modern frontend

frontend/src/App.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts"></script>
+
+<template>
+    <nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <router-link class="navbar-item" to="/">
+          <img src="/public/favicon.ico"><b style="margin:0 0 0 14px;">coconut-leaf</b>
+        </router-link>
+
+        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+          data-target="coleaf-navbar">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div id="coleaf-navbar" class="navbar-menu">
+        <div class="navbar-start">
+          <router-link class="navbar-item" to="/home">Home</router-link>
+          <router-link class="navbar-item" to="/collection">Collection</router-link>
+          <router-link class="navbar-item" to="/calendar">Calendar</router-link>
+          <router-link class="navbar-item" to="/todo">Todo</router-link>
+          <router-link class="navbar-item" to="/admin">Admin</router-link>
+        </div>
+
+        <div class="navbar-end">
+          <p class="navbar-item">
+            <a class="button is-primary" href="/login">Login</a>
+          </p>
+          <p class="navbar-item">
+            <a class="button is-primary">Logout</a>
+          </p>
+
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link"></a>
+            <div class="navbar-dropdown">
+              <a language="en-US" class="navbar-item">English</a>
+              <a language="zh-CN" class="navbar-item">简体中文</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <!-- The output result of router -->
+    <router-view></router-view>
+</template>
+
+<style scoped></style>

frontend/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

frontend/src/router/index.ts

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from '../views/Home.vue'
+import Collection from '@/views/Collection.vue'
+import Calendar from '@/views/Calendar.vue'
+import Todo from '@/views/Todo.vue'
+import Admin from '@/views/Admin.vue'
+
+import Page404 from '@/views/Page404.vue'
+
+const routes = [
+  { path: '/home', component: Home },
+  { path: '/collection', component: Collection },
+  { path: '/calendar', component: Calendar},
+  { path: '/todo', component: Todo},
+  { path: '/admin', component: Admin },
+
+  { path: '/404', component: Page404 },
+
+  { path: '/', redirect: '/home' },
+  { path: '/:pathMatch(.*)*', redirect: '/404' },
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes,
+});
+
+export default router

frontend/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

frontend/src/views/Admin.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is admin.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Calendar.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is calendar.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Collection.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is collection.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Home.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is home.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Page404.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>404 Not Found</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Todo.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is todo.</p>
+</template>
+
+<style scoped></style>