chore: import json data and display

.gitignore

@@ -1,5 +1,5 @@
 # auto generate
-public/data/recipe.json
+src/data/recipe.json
 
 .DS_Store
 .vite-ssg-dist

package.json

@@ -27,6 +27,7 @@
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^2.3.1",
+    "consola": "^2.15.3",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
     "eslint": "^8.13.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@vitejs/plugin-vue': ^2.3.1
   '@vueuse/core': ^8.2.5
   '@vueuse/head': ^0.7.6
+  consola: ^2.15.3
   critters: ^0.0.16
   cross-env: ^7.0.3
   eslint: ^8.13.0
@@ -55,6 +56,7 @@ devDependencies:
   '@types/markdown-it-link-attributes': 3.0.1
   '@types/nprogress': 0.2.0
   '@vitejs/plugin-vue': 2.3.1_vite@2.9.2+vue@3.2.32
+  consola: 2.15.3
   critters: 0.0.16
   cross-env: 7.0.3
   eslint: 8.13.0

scripts/convert.ts

@@ -1,17 +1,20 @@
 // convert csv to json
 import fs from 'fs'
 import path from 'path'
+import consola from 'consola'
 import type { Recipe } from '~/types'
 
-const recipeCsvFile = path.resolve(__dirname, '../public/data/recipe.csv')
+const recipeCsvFile = path.resolve(__dirname, '../src/data/recipe.csv')
-const recipeJsonFile = path.resolve(__dirname, '../public/data/recipe.json')
+const recipeJsonFile = path.resolve(__dirname, '../src/data/recipe.json')
 
 function run() {
   const csvData = fs.readFileSync(recipeCsvFile, 'utf-8')
   const lines = csvData.split(/\r?\n/)
 
-  if (lines[0] !== '名称,食材,链接,标签/描述,方法,工具')
+  if (lines[0].trim() !== '名称,食材,链接,标签/描述,方法,工具') {
-    console.log('Headers Changed!')
+    consola.warn(`Headers Changed: ${lines[0]}`)
+    return
+  }
 
   const recipeJson: Recipe = []
   const sep = '、'
@@ -20,12 +23,12 @@ function run() {
     if (line) {
       const attrs = line.split(',')
       recipeJson.push({
-        name: attrs[0],
+        name: attrs[0].trim(),
-        stuff: attrs[1].split(sep),
+        stuff: attrs[1].trim().split(sep),
-        link: attrs[2],
+        link: attrs[2].trim(),
-        tags: attrs[3].split(sep),
+        tags: attrs[3].trim().split(sep),
-        methods: attrs[4].split(sep),
+        methods: attrs[4].trim().split(sep),
-        tools: attrs[5].split(sep),
+        tools: attrs[5].trim().split(sep),
       })
     }
   })

src/components.d.ts

@@ -5,6 +5,7 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BaseFooter: typeof import('./components/BaseFooter.vue')['default']
+    ChooseFood: typeof import('./components/ChooseFood.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
     Menu: typeof import('./components/Menu.vue')['default']
     README: typeof import('./components/README.md')['default']

src/components/ChooseFood.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import recipeData from '~/data/recipe.json'
+import type { Recipe } from '~/types'
+const recipe = ref(recipeData as Recipe)
+</script>
+
+<template>
+  <div>
+    <span v-for="item, i in recipe" :key="i" class="tag">{{ item.name }}</span>
+  </div>
+</template>

src/main.ts

@@ -5,6 +5,8 @@ import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
+import './styles/css-vars.scss'
+import './styles/index.scss'
 import 'uno.css'
 
 const routes = setupLayouts(generatedRoutes)

src/pages/index.vue

@@ -6,5 +6,8 @@
     <p m="2">
       好的，今天我们来做菜！
     </p>
+    <p>
+      <ChooseFood />
+    </p>
   </div>
 </template>

src/styles/css-vars.scss

@@ -0,0 +1,12 @@
+:root {
+  --c-primary: #5fc178;
+  --c-text: #333;
+
+  --c-bg: #fff;
+}
+
+.dark {
+  --c-text: #fafafa;
+
+  --c-bg: #121212;
+}

src/styles/index.scss

@@ -0,0 +1,14 @@
+html {
+  color: var(--c-text);
+  background-color: var(--c-bg);
+}
+
+a {
+  color: var(--c-text);
+}
+
+.tag {
+  margin: 4px;
+  padding: 2px 4px;
+  border: 1px solid var(--c-text);
+}

unocss.config.ts

@@ -11,6 +11,7 @@ import {
 
 export default defineConfig({
   shortcuts: [
+    ['tag', 'shadow hover:shadow-md'],
     ['btn', 'px-4 py-1 rounded inline-block bg-green-600 text-white cursor-pointer hover:bg-green-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-green-600'],
   ],