feat: 升级依赖，更新eslint

.eslintignore

@@ -0,0 +1,10 @@
+/lambda/
+/scripts
+/config
+.history
+public
+dist
+.umi
+mock
+node_modules
+coverage

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🔀 Checkout Git Source
+        uses: actions/checkout@v4
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: 🚀 Use Node.js lts/*
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: 📦 Install Dependencies
+        run: pnpm i
+
+      - name: ✅ Lint
+        run: pnpm lint
+
+  buildWeb:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🔀 Checkout Git Source
+        uses: actions/checkout@v4
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: 🚀 Use Node.js lts/*
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: 📦 Install Dependencies
+        run: pnpm i
+
+      - name: 🚧 Set up project
+        run: pnpm postinstall
+
+      - name: 🚧 Build
+        run: pnpm build
+
+      - name: 💪 Typecheck
+        run: pnpm typecheck

.github/workflows/release.yml

@@ -0,0 +1,32 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [lts/*]
+    steps:
+      - name: 🔀 Checkout Git Source
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: 🚀 Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: 🔖 Release
+        run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.nvmrc

@@ -1 +1 @@
-v18.17.1
+v20.11.0

.vscode/settings.json

@@ -1,10 +1,42 @@
 {
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
   },
-  "files.associations": {
-    "*.css": "postcss"
-  },
-  "editor.formatOnSave": false
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

app.vue

@@ -3,9 +3,9 @@ useHead({
   title: 'Ding Xiao Hui',
   link: [
     {
-      rel: 'icon', type: 'image/png', href: '/nuxt.png',
-    },
-  ],
+      rel: 'icon', type: 'image/png', href: '/nuxt.png'
+    }
+  ]
 })
 </script>
 
@@ -18,7 +18,9 @@ useHead({
 </template>
 
 <style>
-html, body , #__nuxt{
+html,
+body,
+#__nuxt {
   height: 100vh;
   margin: 0;
   padding: 0;

components/DarkToggle.vue

@@ -5,8 +5,8 @@ useHead({
   meta: [{
     id: 'theme-color',
     name: 'theme-color',
-    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
-  }],
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff'
+  }]
 })
 
 function toggleDark() {
@@ -16,6 +16,6 @@ function toggleDark() {
 
 <template>
   <button class="!outline-none" @click="toggleDark">
-    <div class="dark:i-carbon-moon i-carbon-sun" />
+    <div class="i-carbon-sun dark:i-carbon-moon" />
   </button>
 </template>

components/Footer.vue

@@ -1,4 +1,13 @@
+<script setup lang="ts">
+const year = computed(() => new Date().getFullYear())
+</script>
+
 <template>
+  <div mt4 text-center text-gray:80>
+    <span text="base" mr-2>
+      Dxh.me © {{ year }}
+    </span>
+  </div>
   <div
     text="xl gray4"
     m-5

composables/user.ts

@@ -26,7 +26,7 @@ export const useUserStore = defineStore('user', () => {
   return {
     setNewName,
     otherNames,
-    savedName,
+    savedName
   }
 })
 

config/pwa.ts

@@ -18,20 +18,20 @@ export const pwa: ModuleOptions = {
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
-        type: 'image/png',
+        type: 'image/png'
       },
       {
         src: 'pwa-512x512.png',
         sizes: '512x512',
-        type: 'image/png',
+        type: 'image/png'
       },
       {
         src: 'maskable-icon.png',
         sizes: '512x512',
         type: 'image/png',
-        purpose: 'any maskable',
-      },
-    ],
+        purpose: 'any maskable'
+      }
+    ]
   },
   workbox: {
     globPatterns: ['**/*.{js,css,html,txt,png,ico,svg}'],
@@ -46,12 +46,12 @@ export const pwa: ModuleOptions = {
           cacheName: 'google-fonts-cache',
           expiration: {
             maxEntries: 10,
-            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
           },
           cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
+            statuses: [0, 200]
+          }
+        }
       },
       {
         urlPattern: /^https:\/\/fonts.gstatic.com\/.*/i,
@@ -60,19 +60,19 @@ export const pwa: ModuleOptions = {
           cacheName: 'gstatic-fonts-cache',
           expiration: {
             maxEntries: 10,
-            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+            maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
           },
           cacheableResponse: {
-            statuses: [0, 200],
-          },
-        },
-      },
-    ],
+            statuses: [0, 200]
+          }
+        }
+      }
+    ]
   },
   registerWebManifestInRouteRules: true,
   writePlugin: true,
   devOptions: {
     enabled: process.env.VITE_PLUGIN_PWA === 'true',
-    navigateFallback: scope,
-  },
+    navigateFallback: scope
+  }
 }

error.vue

@@ -1,6 +1,6 @@
 <script setup>
 const props = defineProps({
-  error: Object,
+  error: Object
 })
 
 const message = computed(() => String(props.error?.message || ''))
@@ -14,15 +14,15 @@ function handleError() {
 
 <template>
   <NuxtLayout>
-    <div flex="~ col" h-screen text-center items-center justify-center gap4>
+    <div flex="~ col" h-screen items-center justify-center gap4 text-center>
       <div text-3xl>
         {{ is404 ? 'This page could not be found' : 'An error occurred' }}
       </div>
       <div text-xl op50>
         Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
       </div>
       <pre v-if="isDev">{{ error }}</pre>
-      <button n-link border px4 py1 rounded @click="handleError">
+      <button n-link border rounded px4 py1 @click="handleError">
         Go Back
       </button>
     </div>

eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+import dxhuii from '@dxhuii/eslint-config'
+import antfu from '@antfu/eslint-config'
+
+export default antfu({ unocss: true, formatters: true }, dxhuii())

layouts/README.md

@@ -6,10 +6,10 @@ By default, `default.vue` will be used unless an alternative is specified in the
 
 ```html
 <script setup lang="ts">
-definePageMeta({
-  layout: 'home',
-})
+  definePageMeta({
+    layout: 'home',
+  })
 </script>
 ```
 
-Learn more on https://v3.nuxtjs.org/guide/directory-structure/layouts
+Learn more on https://v3.nuxtjs.org/guide/directory-structure/layouts

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="py-20 px-10 w-4xl m-auto">
+  <main class="m-auto w-4xl px-10 py-20">
     <slot />
     <Footer />
   </main>

layouts/home.vue

@@ -1,8 +1,8 @@
 <template>
-  <main class="py-20 px-10 text-center">
+  <main class="px-10 py-20 text-center">
     <slot />
     <Footer />
-    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+    <div class="mx-auto mt-5 text-center text-sm opacity-25">
       [Home Layout]
     </div>
   </main>