refactor: use nuxt compatiable 4 folder

app/components/common/SearchRecipe.vue

@@ -25,7 +25,7 @@ const filteredRecipes = computedAsync(async () => {
 
 <template>
   <YlfIconButton
-    absolute right-3 top-5
+    absolute right-4 top-4
     class="icon-btn hover:text-yellow-400 !outline-none"
     text-xl
     title="切换" @click="openModal"

app/components/layout/CurrentVersion.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import pkg from '~/package.json'
+import pkg from '~/../package.json'
 
 const commitSha = (import.meta.env.VITE_COMMIT_REF || '').slice(0, 7)
 const now = import.meta.env.VITE_APP_BUILD_TIME

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="cook-main text-center text-gray-700 dark:text-gray-200" p="t-8 b-$cook-bottom-menu-height">
     <slot />
-    <DarkToggle absolute left-3 top-5 />
+    <DarkToggle absolute left-4 top-4 />
     <SearchRecipe />
     <TheBottomMenu fixed bottom-0 left-0 right-0 />
   </main>

nuxt.config.ts

@@ -1,6 +1,6 @@
 import process from 'node:process'
-import { pwa } from './config/pwa'
+import { pwa } from './app/config/pwa'
-import { appDescription } from './constants/index'
+import { appDescription } from './app/constants/index'
 
 Object.assign(process.env, {
   VITE_COMMIT_REF: process.env.CF_PAGES_COMMIT_SHA || '',
@@ -33,7 +33,6 @@ export default defineNuxtConfig({
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed
     payloadExtraction: false,
-    // inlineSSRStyles: false,
     renderJsonPayloads: true,
     typedPages: true,
   },
@@ -72,6 +71,8 @@ export default defineNuxtConfig({
         { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no' },
         { name: 'description', content: appDescription },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
+        { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
       ],
     },
   },
@@ -89,4 +90,21 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
+
+  features: {
+    // For UnoCSS
+    inlineStyles: false,
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  compatibilityDate: '2024-08-14',
 })

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "build": "npm run convert && nuxt build",
     "build:static": "npm run convert && nuxt generate",
-    "convert": "tsx scripts/convert.ts",
+    "convert": "pnpm -C scripts run convert",
     "dev": "nuxt dev --host",
     "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
     "generate": "nuxt generate",
@@ -28,46 +28,46 @@
     "vue-about-me": "^1.2.7"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.26.1",
+    "@antfu/eslint-config": "^2.27.3",
-    "@headlessui/vue": "^1.7.22",
+    "@headlessui/vue": "^1.7.23",
-    "@iconify-json/carbon": "^1.1.37",
+    "@iconify-json/carbon": "^1.2.1",
-    "@iconify-json/fe": "^1.1.11",
+    "@iconify-json/fe": "^1.2.0",
-    "@iconify-json/gg": "^1.1.10",
+    "@iconify-json/gg": "^1.2.0",
-    "@iconify-json/ic": "^1.1.18",
+    "@iconify-json/ic": "^1.2.0",
-    "@iconify-json/mdi": "^1.1.68",
+    "@iconify-json/mdi": "^1.2.0",
-    "@iconify-json/ri": "^1.1.22",
+    "@iconify-json/ri": "^1.2.0",
-    "@iconify-json/twemoji": "^1.1.16",
+    "@iconify-json/twemoji": "^1.2.0",
-    "@nuxt/devtools": "^1.3.14",
+    "@nuxt/devtools": "^1.4.2",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/test-utils": "^3.14.2",
-    "@nuxtjs/color-mode": "^3.4.4",
+    "@nuxtjs/color-mode": "^3.5.1",
-    "@pinia/nuxt": "^0.5.3",
+    "@pinia/nuxt": "^0.5.4",
     "@pinia/testing": "^0.1.5",
-    "@unocss/eslint-config": "^0.62.2",
+    "@unocss/eslint-config": "^0.62.3",
-    "@unocss/nuxt": "^0.62.2",
+    "@unocss/nuxt": "^0.62.3",
-    "@vite-pwa/nuxt": "^0.10.0",
+    "@vite-pwa/nuxt": "^0.10.5",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/nuxt": "^11.0.1",
+    "@vueuse/nuxt": "^11.0.3",
     "@yunlefun/vue": "^0.1.1",
     "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
-    "bumpp": "^9.5.1",
+    "bumpp": "^9.5.2",
     "consola": "^3.2.3",
     "dexie": "^4.0.8",
-    "eslint": "^9.9.0",
+    "eslint": "^9.10.0",
     "eslint-plugin-format": "^0.1.2",
     "fake-indexeddb": "^6.0.0",
     "happy-dom": "^14.12.3",
-    "jsdom": "^24.1.1",
+    "jsdom": "^24.1.3",
-    "nuxt": "3.11.2",
+    "nuxt": "3.13.1",
     "nuxt-fix-ofetch": "^0.0.14",
     "nuxt-vitest": "^0.11.5",
     "pinia": "^2.2.2",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "serve": "^14.2.3",
-    "star-markdown-css": "^0.4.2",
+    "star-markdown-css": "^0.5.1",
-    "tsx": "^4.17.0",
+    "tsx": "^4.19.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
-    "unocss": "^0.62.2",
+    "unocss": "^0.62.3",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.1",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.6"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - scripts

scripts/config.ts

@@ -0,0 +1,11 @@
+import path from 'node:path'
+import url from 'node:url'
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+const recipeCsvFile = path.resolve(__dirname, '../app/data/recipe.csv')
+const recipeJsonFile = path.resolve(__dirname, '../app/data/recipe.json')
+
+export const config = {
+  recipeCsvFile,
+  recipeJsonFile,
+}

scripts/convert.ts

@@ -1,16 +1,12 @@
 // convert csv to json
 import fs from 'node:fs'
-import path from 'node:path'
-import url from 'node:url'
 import consola from 'consola'
-import type { RecipeItem, Recipes } from '../types'
+import type { RecipeItem, Recipes } from '../app/types'
 
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+import { config } from './config'
-const recipeCsvFile = path.resolve(__dirname, '../data/recipe.csv')
-const recipeJsonFile = path.resolve(__dirname, '../data/recipe.json')
 
 function run() {
-  const csvData = fs.readFileSync(recipeCsvFile, 'utf-8')
+  const csvData = fs.readFileSync(config.recipeCsvFile, 'utf-8')
   const lines = csvData.split(/\r?\n/)
 
   const headers = 'name,stuff,bv,difficulty,tags,methods,tools,'
@@ -40,8 +36,8 @@ function run() {
     }
   })
 
-  fs.writeFileSync(recipeJsonFile, JSON.stringify(recipeJson))
+  fs.writeFileSync(config.recipeJsonFile, JSON.stringify(recipeJson))
-  consola.success(`Generate file: ${recipeJsonFile}`)
+  consola.success(`Generate file: ${config.recipeJsonFile}`)
 }
 
 run()

scripts/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@cook/scripts",
+  "version": "0.0.1",
+  "scripts": {
+    "convert": "tsx convert.ts"
+  }
+}

uno.config.ts

@@ -8,7 +8,7 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 
-import { tools } from './data/food'
+import { tools } from './app/data/food'
 
 const safelist: string[] = ['text-left']