chore: update deps

package.json

@@ -10,16 +10,16 @@
     "nprogress": "^0.2.0",
     "prism-theme-vars": "^0.1.4",
     "vue": "^3.0.5",
-    "vue-i18n": "^9.0.0-rc.5",
+    "vue-i18n": "^9.0.0-rc.6",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.4.3",
-    "@iconify/json": "^1.1.298",
-    "@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.15",
+    "@iconify/json": "^1.1.301",
+    "@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.16",
     "@tailwindcss/typography": "^0.4.0",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@vitejs/plugin-vue": "^1.1.4",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/server-renderer": "^3.0.5",
@@ -27,18 +27,18 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.19.0",
     "markdown-it-prism": "^2.1.4",
-    "pnpm": "^5.16.1",
-    "postcss": "^8.2.4",
+    "pnpm": "^5.17.1",
+    "postcss": "^8.2.6",
     "postcss-nested": "^5.0.3",
-    "tailwindcss": "^2.0.2",
-    "typescript": "^4.1.3",
-    "vite": "^2.0.0-beta.65",
+    "tailwindcss": "^2.0.3",
+    "typescript": "^4.1.5",
+    "vite": "^2.0.0-beta.67",
     "vite-plugin-components": "^0.6.6",
     "vite-plugin-icons": "^0.2.1",
     "vite-plugin-md": "^0.4.2",
-    "vite-plugin-pages": "^0.2.3",
+    "vite-plugin-pages": "^0.3.0",
     "vite-plugin-pwa": "^0.4.6",
-    "vite-ssg": "^0.8.0"
+    "vite-ssg": "^0.8.4"
   },
   "eslintConfig": {
     "extends": "@antfu/eslint-config",

src/components/Footer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { isDark } from '~/logics'
+import { isDark, toggleDark } from '~/logics'
 
 const { t, availableLocales, locale } = useI18n()
 
@@ -17,7 +17,7 @@ const toggleLocales = () => {
       <carbon-campsite />
     </router-link>
 
-    <a class="icon-btn mx-2" :title="t('button.toggle_dark')" @click="isDark = !isDark">
+    <a class="icon-btn mx-2" :title="t('button.toggle_dark')" @click="toggleDark">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </a>

src/logics/dark.ts

@@ -1,5 +1,5 @@
 import { watch, computed } from 'vue'
-import { usePreferredDark } from '@vueuse/core'
+import { usePreferredDark, useToggle } from '@vueuse/core'
 import { colorSchema } from './store'
 
 const preferredDark = usePreferredDark()
@@ -16,6 +16,8 @@ export const isDark = computed({
   },
 })
 
+export const toggleDark = useToggle(isDark)
+
 watch(
   isDark,
   v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),

src/logics/index.ts

@@ -1,2 +1 @@
 export * from './dark'
-export * from './store'

src/pages/about.md

@@ -2,14 +2,13 @@
 title: About
 ---
 
-<div class="text-4xl text-center -mb-4">
+<div class="text-center">
   <!-- You can use Vue components inside markdown -->
-  <carbon-dicom-overlay class="inline-block" />
+  <carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <h3>About</h3>
 </div>
 
-### About
-
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
 
 ```js
 // syntax highlighting example

vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
 
     // https://github.com/antfu/vite-plugin-md
     Markdown({
-      wrapperClasses: 'prose prose-sm m-auto',
+      wrapperClasses: 'prose prose-sm m-auto text-left',
       headEnabled: true,
       markdownItSetup(md) {
         // https://prismjs.com/