update frontend with bulma css and home&404 pages

frontend/src/App.vue

@@ -1,4 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useLanguageStore } from './stores/global';
+
+const language = useLanguageStore();
+
+</script>
 
 <template>
     <nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
@@ -33,10 +38,12 @@
           </p>
 
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"></a>
+            <a v-if="language.isEnglish" class="navbar-link">English</a>
+            <a v-else-if="language.isSimplifiedChinese" 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>
+              <a @click="language.changeToEnglish()" class="navbar-item">English</a>
+              <a @click="language.changeToSimplifiedChinese()" class="navbar-item">简体中文</a>
             </div>
           </div>
         </div>

frontend/src/main.ts

@@ -4,6 +4,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import '../public/index.scss'
+
 const app = createApp(App)
 
 app.use(createPinia())

frontend/src/router/index.ts

@@ -6,7 +6,7 @@ import Calendar from '@/views/Calendar.vue'
 import Todo from '@/views/Todo.vue'
 import Admin from '@/views/Admin.vue'
 
-import Page404 from '@/views/Page404.vue'
+import NotFound from '@/views/NotFound.vue'
 
 const routes = [
   { path: '/home', component: Home },
@@ -15,7 +15,7 @@ const routes = [
   { path: '/todo', component: Todo},
   { path: '/admin', component: Admin },
 
-  { path: '/404', component: Page404 },
+  { path: '/404', component: NotFound },
 
   { path: '/', redirect: '/home' },
   { path: '/:pathMatch(.*)*', redirect: '/404' },

frontend/src/stores/counter.ts

@@ -1,12 +0,0 @@
-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/stores/global.ts

@@ -0,0 +1,26 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { Language } from '@/utils/i18n'
+
+export const useLanguageStore = defineStore('language', {
+  state: () => ({
+    language: Language.English
+  }),
+
+  getters: {
+    isEnglish: (state) => state.language === Language.English,
+    isSimplifiedChinese: (state) => state.language === Language.SimplifiedChinese,
+  },
+
+  actions: {
+    changeLanguage(lang: Language) {
+      this.language = lang;
+    },
+    changeToEnglish() {
+      this.changeLanguage(Language.English);
+    },
+    changeToSimplifiedChinese() {
+      this.changeLanguage(Language.SimplifiedChinese);
+    },
+  },
+})

frontend/src/utils/i18n.ts

@@ -0,0 +1,4 @@
+export enum Language {
+    English,
+    SimplifiedChinese,
+}

frontend/src/views/Home.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>Congratulations</h1>
-  <p>This is home.</p>
+  <div class="container">
+    <article>
+      <h1 class="title">coconut-leaf</h1>
+      <p>A light, self-host and multi-account calendar system.</p>
+      <p>The original intention of this system is served for yyc12345 personal use.</p>
+      <br />
+      <p>See our <a href="https://github.com/yyc12345/coconut-leaf">GitHub project</a> for the source code in detail.</p>
+      <p>The source code of this project is licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL v3</a>.</p>
+    </article>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div.container {
+  margin-top: 1.25rem;
+}
+</style>

frontend/src/views/NotFound.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="container">
+    <article>
+      <h1 class="title">Oops!</h1>
+      <p>You are wandering in the desert of coconut-leaf.</p>
+      <p>Please back to previous page and try again.</p>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+div.container {
+  margin-top: 1.25rem;
+}
+</style>

frontend/src/views/Page404.vue

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