chore: update deps

2023-04-06 10:31:51 +02:00
21 changed files with 751 additions and 795 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,48 +0,0 @@
-kind: pipeline
-type: docker
-name: ci
-
-steps:
-  - name: install & build # 流水线名称
-    image: node # 定义创建容器的Docker镜像
-    commands: # 定义在Docker容器中执行的shell命令
-      - npm config set registry http://mirrors.cloud.tencent.com/npm/
-      - npm i -g pnpm
-      - pnpm i
-      - pnpm run build
-
-  - name: upload
-    image: appleboy/drone-scp # 上传插件
-    settings:
-      host:
-        from_secret: host # 作为环境变量传进来
-      username:
-        from_secret: username
-      password:
-        from_secret: password
-      port: 22
-      command_timeout: 2m
-      target: /home/hxx/app/NginxProxyManager/data/access/myIndex/${DRONE_REPO_NAME}_new # 这里的${DRONE_REPO_NAME}是vitesse
-      source:
-        - ./dist # 相对路径, 绝对路径是/app/dist
-
-  - name: deploy # 部署
-    image: appleboy/drone-ssh # ssh插件
-    settings:
-        host:
-            from_secret: host
-        username:
-            from_secret: username
-        password:
-            from_secret: password
-        port: 22
-        command_timeout: 2m
-        envs: [DEPLOY_PATH] # 给 script 用
-        script:
-            - cd /home/hxx/app/NginxProxyManager/data/access/myIndex/
-            - rm -rf vitesse_old
-            - mv vitesse vitesse_old
-            - mv vitesse_new vitesse
-            - cd vitesse
-            - mv ./dist/* ./
-            - rm -rf ./dist
--- a/.eslintrc
+++ b/.eslintrc
@ -1,6 +1,3 @@
 {
-  "extends": [
-    "@antfu",
-    "@unocss"
-  ]
+  "extends": "@antfu"
 }
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -47,7 +47,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [16.x, 18.x]
+        node-version: [14.x, 16.x]
        os: [ubuntu-latest]
      fail-fast: false

--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -11,5 +11,6 @@
  "files.associations": {
    "*.css": "postcss"
  },
-  "editor.formatOnSave": false
+  "editor.formatOnSave": false,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
--- a/README.md
+++ b/README.md
@ -48,6 +48,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>

 - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)

+- 🤙🏻 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled
+
 - 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly

 - 🖨 Static-site generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -45,6 +45,8 @@

 - 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)

+- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html)
+
 - 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入

 - 🖨 使用 [vite-ssg](https://github.com/antfu/vite-ssg) 进行服务端生成 (SSG)
--- a/index.html
+++ b/index.html
@ -18,6 +18,5 @@
 <body class="font-sans">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
-  <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "type": "module",
  "private": true,
-  "packageManager": "pnpm@8.3.0",
+  "packageManager": "pnpm@8.1.1",
  "scripts": {
    "build": "vite-ssg build",
    "dev": "vite --port 3333 --open",
@ -17,59 +17,58 @@
    "sizecheck": "npx vite-bundle-visualizer"
  },
  "dependencies": {
-    "@unocss/reset": "^0.51.4",
-    "@vueuse/core": "^10.0.2",
-    "@vueuse/head": "^1.1.26",
+    "@unocss/reset": "^0.50.6",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/head": "^1.1.23",
    "nprogress": "^0.2.0",
-    "pinia": "^2.0.34",
+    "pinia": "^2.0.33",
    "vue": "^3.2.47",
-    "vue-demi": "^0.14.0",
+    "vue-demi": "^0.13.11",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.38.5",
+    "@antfu/eslint-config": "^0.38.4",
    "@iconify-json/carbon": "^1.1.16",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@types/markdown-it-link-attributes": "^3.0.1",
    "@types/nprogress": "^0.2.0",
-    "@unocss/eslint-config": "^0.51.4",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vue-macros/volar": "^0.9.5",
    "@vue/test-utils": "^2.3.2",
    "critters": "^0.0.16",
    "cross-env": "^7.0.3",
-    "cypress": "^12.10.0",
-    "cypress-vite": "^1.3.2",
-    "eslint": "^8.38.0",
+    "cypress": "^12.9.0",
+    "cypress-vite": "^1.3.1",
+    "eslint": "^8.37.0",
    "eslint-plugin-cypress": "^2.13.2",
    "https-localhost": "^4.7.1",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^13.2.0",
    "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-shiki": "^0.8.1",
-    "pnpm": "^8.3.0",
+    "markdown-it-shiki": "^0.8.0",
+    "pnpm": "^8.1.1",
    "shiki": "^0.14.1",
    "simple-git-hooks": "^2.8.1",
    "taze": "^0.9.1",
-    "typescript": "^5.0.4",
-    "unocss": "^0.51.4",
-    "unplugin-auto-import": "^0.15.3",
+    "typescript": "^4.9.3",
+    "unocss": "^0.50.6",
+    "unplugin-auto-import": "^0.15.2",
    "unplugin-vue-components": "^0.24.1",
    "unplugin-vue-macros": "^2.0.0",
-    "vite": "^4.2.2",
+    "vite": "^4.2.1",
    "vite-bundle-visualizer": "^0.6.0",
-    "vite-plugin-inspect": "^0.7.22",
+    "vite-plugin-inspect": "^0.7.19",
    "vite-plugin-pages": "^0.29.0",
    "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-vue-component-preview": "^1.1.6",
+    "vite-plugin-vue-component-preview": "^1.1.5",
    "vite-plugin-vue-inspector": "^3.4.0",
    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-vue-markdown": "^0.22.6",
-    "vite-plugin-webfont-dl": "^3.7.3",
-    "vite-ssg": "^0.22.2",
+    "vite-plugin-vue-markdown": "^0.22.4",
+    "vite-plugin-webfont-dl": "^3.7.0",
+    "vite-ssg": "^0.22.1",
    "vite-ssg-sitemap": "^0.4.3",
-    "vitest": "^0.30.1",
-    "vue-tsc": "^1.2.0"
+    "vitest": "^0.29.8",
+    "vue-tsc": "^1.3.8"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -8,14 +8,14 @@ useHead({
    { name: 'description', content: 'Opinionated Vite Starter Template' },
    {
      name: 'theme-color',
-      content: () => isDark.value ? '#00aba9' : '#ffffff',
+      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
-      href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
+      href: computed(() => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg'),
    },
  ],
 })
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -4,6 +4,13 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
  const EffectScope: typeof import('vue')['EffectScope']
  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@ -19,9 +26,7 @@ declare global {
  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
  const customRef: typeof import('vue')['customRef']
  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@ -106,14 +111,11 @@ declare global {
  const unrefElement: typeof import('@vueuse/core')['unrefElement']
  const until: typeof import('@vueuse/core')['until']
  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAnimate: typeof import('@vueuse/core')['useAnimate']
-  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@ -202,8 +204,6 @@ declare global {
  const useOnline: typeof import('@vueuse/core')['useOnline']
  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const useParentElement: typeof import('@vueuse/core')['useParentElement']
-  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
  const usePermission: typeof import('@vueuse/core')['usePermission']
  const usePointer: typeof import('@vueuse/core')['usePointer']
  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@ -224,7 +224,6 @@ declare global {
  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
  const useScroll: typeof import('@vueuse/core')['useScroll']
  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
  const useShare: typeof import('@vueuse/core')['useShare']
  const useSlots: typeof import('vue')['useSlots']
@ -273,10 +272,8 @@ declare global {
  const watchArray: typeof import('@vueuse/core')['watchArray']
  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchDeep: typeof import('@vueuse/core')['watchDeep']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
  const watchOnce: typeof import('@vueuse/core')['watchOnce']
  const watchPausable: typeof import('@vueuse/core')['watchPausable']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
@ -295,6 +292,13 @@ declare global {
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
  interface ComponentCustomProperties {
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
@ -310,9 +314,7 @@ declare module 'vue' {
    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@ -397,14 +399,11 @@ declare module 'vue' {
    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
@ -493,8 +492,6 @@ declare module 'vue' {
    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
@ -515,7 +512,6 @@ declare module 'vue' {
    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
@ -564,10 +560,8 @@ declare module 'vue' {
    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@ -13,24 +13,24 @@ async function toggleLocales() {
 </script>

 <template>
-  <nav flex="~ gap-4" mt-6 justify-center text-xl>
-    <RouterLink icon-btn to="/" :title="t('button.home')">
-      <div i-carbon-campsite />
+  <nav text-xl mt-6>
+    <RouterLink class="icon-btn mx-2" to="/">
+      <div i-carbon-campsite :title="t('button.home')" />
    </RouterLink>

-    <button icon-btn :title="t('button.toggle_dark')" @click="toggleDark()">
+    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
      <div i="carbon-sun dark:carbon-moon" />
    </button>

-    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
+    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
      <div i-carbon-language />
    </a>

-    <RouterLink icon-btn to="/about" :title="t('button.about')">
-      <div i-carbon-dicom-overlay />
+    <RouterLink class="icon-btn mx-2" to="/about">
+      <div i-carbon-dicom-overlay :title="t('button.about')" />
    </RouterLink>

-    <a icon-btn rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
      <div i-carbon-logo-github />
    </a>
  </nav>
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@ -10,7 +10,7 @@ const { t } = useI18n()
    </div>
    <RouterView />
    <div>
-      <button text-sm btn m="3 t8" @click="router.back()">
+      <button btn text-sm m="3 t8" @click="router.back()">
        {{ t('button.back') }}
      </button>
    </div>
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@ -1,11 +1,8 @@
 <template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <RouterView />
    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
      [Default Layout]
    </div>
  </main>
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@ -1,11 +1,8 @@
 <template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <RouterView />
    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
      [Home Layout]
    </div>
  </main>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,5 @@
 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
-
 // import Previewer from 'virtual:vue-component-preview'
 import App from './App.vue'
 import type { UserModule } from './types'
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@ -23,7 +23,7 @@ watchEffect(() => {
    </p>

    <template v-if="user.otherNames.length">
-      <p mt-4 text-sm>
+      <p text-sm mt-4>
        <span opacity-75>{{ t('intro.aka') }}:</span>
        <ul>
          <li v-for="otherName in user.otherNames" :key="otherName">
@ -37,7 +37,7 @@ watchEffect(() => {

    <div>
      <button
-        m="3 t6" text-sm btn
+        btn m="3 t6" text-sm
        @click="router.back()"
      >
        {{ t('button.back') }}
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -7,7 +7,7 @@ const name = ref(user.savedName)

 const router = useRouter()
 function go() {
-  if (name.value)
+  if (name)
    router.push(`/hi/${encodeURIComponent(name.value)}`)
 }

@ -40,7 +40,7 @@ const { t } = useI18n()

    <div>
      <button
-        m-3 text-sm btn
+        btn m-3 text-sm
        :disabled="!name"
        @click="go"
      >
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@ -31,4 +31,4 @@ export const useUserStore = defineStore('user', () => {
 })

 if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(useUserStore as any, import.meta.hot))
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -11,7 +11,7 @@ import {

 export default defineConfig({
  shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
@ -34,5 +34,5 @@ export default defineConfig({
    transformerDirectives(),
    transformerVariantGroup(),
  ],
-  safelist: 'prose m-auto text-left'.split(' '),
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
 })
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,5 +1,6 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
+// import Preview from 'vite-plugin-vue-component-preview'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import generateSitemap from 'vite-ssg-sitemap'
@ -14,8 +15,6 @@ import Inspector from 'vite-plugin-vue-inspector'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
 import Shiki from 'markdown-it-shiki'
-
-// @ts-expect-error failed to resolve types
 import VueMacros from 'unplugin-vue-macros/vite'
 import WebfontDownload from 'vite-plugin-webfont-dl'

@ -27,10 +26,13 @@ export default defineConfig({
  },

  plugins: [
+    // Preview(),
+
    VueMacros({
      plugins: {
        vue: Vue({
          include: [/\.vue$/, /\.md$/],
+          reactivityTransform: true,
        }),
      },
    }),
@ -49,6 +51,7 @@ export default defineConfig({
        'vue',
        'vue-router',
        'vue-i18n',
+        'vue/macros',
        '@vueuse/head',
        '@vueuse/core',
      ],