init: basic structure

2025-11-06 04:20:50 +08:00 · 2022-04-13 22:41:22 +08:00
parent f77549b1cd
commit c355d51874
50 changed files with 7682 additions and 0 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+dist
+public
--- a/.eslintrc
+++ b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: YunYouJun
+custom: https://sponsors.yunyoujun.cn
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,51 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+.vite-ssg-dist
+.vite-ssg-temp
+*.local
+dist
+dist-ssr
+node_modules
+.idea/
+*.log
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.vite",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "johnsoncodehk.volar",
+    "lokalise.i18n-ally"
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,15 @@
+{
+  "cSpell.words": ["Vitesse", "Vite", "unocss", "vitest", "vueuse", "pinia", "demi", "antfu", "iconify", "intlify", "vitejs", "unplugin", "pnpm"],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": "locales",
+  "i18n-ally.sortKeys": true,
+  "prettier.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+  "files.associations": {
+    "*.css": "postcss",
+  },
+  "editor.formatOnSave": false,
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,17 @@
+# Cook
+
+> 好的，今天我们来做菜
+
+- 网站链接：[cook.yyj.moe](https://cook.yyj.moe)
+- 备用：[cook.yunyoujun.cn](https://cook.yunyoujun.cn)
+
+## 参与开发
+
+```bash
+# install dependencies
+pnpm install
+
+# start
+pnpm dev
+# http://localhost:3333
+```
--- a/cypress.json
+++ b/cypress.json
@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3333",
+  "chromeWebSecurity": false
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/pwa-192x192.png">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <meta name="theme-color" content="#ffffff">
+  <script>
+    (function() {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+      if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        document.documentElement.classList.toggle('dark', true)
+    })()
+  </script>
+</head>
+<body class="font-sans">
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
--- a/netlify.toml
+++ b/netlify.toml
@@ -0,0 +1,18 @@
+[build.environment]
+  # bypass npm auto install
+  NPM_FLAGS = "--version"
+  NODE_VERSION = "16"
+
+[build]
+  publish = "dist"
+  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"
--- a/package.json
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+  "private": true,
+  "packageManager": "pnpm@6.32.3",
+  "scripts": {
+    "build": "vite-ssg build",
+    "dev": "vite --port 3333 --open",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "preview-https": "serve dist",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@vueuse/core": "^8.2.5",
+    "@vueuse/head": "^0.7.6",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.13",
+    "prism-theme-vars": "^0.2.2",
+    "vue": "^3.2.32",
+    "vue-demi": "^0.12.5",
+    "vue-router": "^4.0.14"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.20.2",
+    "@iconify-json/mdi": "^1.1.9",
+    "@iconify-json/ri": "^1.1.1",
+    "@types/markdown-it-link-attributes": "^3.0.1",
+    "@types/nprogress": "^0.2.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "critters": "^0.0.16",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.13.0",
+    "https-localhost": "^4.7.1",
+    "markdown-it-link-attributes": "^4.0.0",
+    "markdown-it-prism": "^2.2.3",
+    "pnpm": "^6.32.6",
+    "typescript": "^4.6.3",
+    "unocss": "^0.31.2",
+    "unplugin-auto-import": "^0.7.1",
+    "unplugin-vue-components": "^0.19.2",
+    "vite": "^2.9.1",
+    "vite-plugin-inspect": "^0.4.3",
+    "vite-plugin-md": "^0.12.4",
+    "vite-plugin-pages": "^0.22.0",
+    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-vue-layouts": "^0.6.0",
+    "vite-ssg": "^0.19.2",
+    "vite-ssg-sitemap": "^0.2.2",
+    "vue-tsc": "^0.34.6"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/_headers
+++ b/public/_headers
@@ -0,0 +1,3 @@
+/assets/*
+  cache-control: max-age=31536000
+  cache-control: immutable
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+  <style>
+    path { fill: #222; }
+    @media (prefers-color-scheme: dark) {
+      path { fill: #ffffff; }
+    }
+  </style>
+<path d="M8 1.5a3.35 3.35 0 0 0 0 6.7h1.53c.39 0 .76.1 1.08.3h2.02c-.58-1.05-1.77-1.75-3.1-1.75H8c-1 0-1.85-.98-1.85-2S7 3 8 3V1.5m4.85.5c0 1-.85 1.85-1.85 1.85v1.5c1.92 0 3.5 1.35 3.89 3.15h1.53a5.541 5.541 0 0 0-3.07-4.12c.62-.61 1-1.45 1-2.38h-1.5M3 10v2h2v7a2 2 0 0 0 2 2h10c1.11 0 2-.89 2-2v-7h2v-2H3m4 2h10v7H7v-7Z"></path></svg>
--- a/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+<path d="M8 1.5a3.35 3.35 0 0 0 0 6.7h1.53c.39 0 .76.1 1.08.3h2.02c-.58-1.05-1.77-1.75-3.1-1.75H8c-1 0-1.85-.98-1.85-2S7 3 8 3V1.5m4.85.5c0 1-.85 1.85-1.85 1.85v1.5c1.92 0 3.5 1.35 3.89 3.15h1.53a5.541 5.541 0 0 0-3.07-4.12c.62-.61 1-1.45 1-2.38h-1.5M3 10v2h2v7a2 2 0 0 0 2 2h10c1.11 0 2-.89 2-2v-7h2v-2H3m4 2h10v7H7v-7Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// https://github.com/vueuse/head
+// you can use this to manipulate the document head in any components,
+// they will be rendered correctly in the html results with vite-ssg
+useHead({
+  title: '好的，今天我们来做菜！',
+  meta: [
+    { name: 'description', content: '好的，今天我们来做菜！' },
+  ],
+})
+</script>
+
+<template>
+  <RouterView />
+</template>
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -0,0 +1,242 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+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 asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHead: typeof import('@vueuse/head')['useHead']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+export {}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -0,0 +1,16 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    BaseFooter: typeof import('./components/BaseFooter.vue')['default']
+    Counter: typeof import('./components/Counter.vue')['default']
+    Menu: typeof import('./components/Menu.vue')['default']
+    README: typeof import('./components/README.md')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
+
+export { }
--- a/src/components/BaseFooter.vue
+++ b/src/components/BaseFooter.vue
@@ -0,0 +1,7 @@
+<template>
+  <div m="t-4" p="2" class="flex justify-center items-center" opacity="70" text="sm">
+    ©️&nbsp;<a href="https://github.com/YunYouJun/cook" target="_blank">Cook</a>
+    <div text="xs" m="x-1" i-ri-cloud-line />
+    <a href="https://www.yunyoujun.cn" target="_blank">云游君</a>
+  </div>
+</template>
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>()
+
+const { count, inc, dec } = useCounter(props.initial)
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { toggleDark } from '~/composables'
+</script>
+
+<template>
+  <nav text-xl mt-6>
+    <RouterLink class="icon-btn mx-2" to="/" title="首页">
+      <div i-ri-home-2-line />
+    </RouterLink>
+
+    <button class="icon-btn mx-2 !outline-none" title="切换" @click="toggleDark()">
+      <div i="ri-sun-line dark:ri-moon-line" />
+    </button>
+
+    <RouterLink class="icon-btn mx-2" to="/about" title="关于">
+      <div i-ri-information-line />
+    </RouterLink>
+
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
+      <div i-ri-github-line />
+    </a>
+  </nav>
+</template>
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -0,0 +1,7 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+### Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
--- a/src/composables/dark.ts
+++ b/src/composables/dark.ts
@@ -0,0 +1,3 @@
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -0,0 +1 @@
+export * from './dark'
--- a/src/data/recipe.yml
+++ b/src/data/recipe.yml
@@ -0,0 +1,6 @@
+- name: 干锅土豆片
+  link: https://www.bilibili.com/video/BV1ZZ4y1A7HK
+  stuff: ['土豆']
+  tags: ['下饭']
+  methods: ['炒']
+  tools: ['锅']
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y10" text="center green-700 dark:gray-200">
+    <div text-4xl>
+      <div i-ri-error-warning-line inline-block />
+    </div>
+    <RouterView />
+    <div>
+      <button btn text-sm m="3 t8" @click="router.back()">
+        返回
+      </button>
+    </div>
+  </main>
+</template>
--- a/src/layouts/README.md
+++ b/src/layouts/README.md
@@ -0,0 +1,14 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+With [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+
+```html
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -0,0 +1,7 @@
+<template>
+  <main class="px-4 text-center text-gray-700 dark:text-gray-200">
+    <Menu />
+    <RouterView />
+    <BaseFooter />
+  </main>
+</template>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,20 @@
+import { ViteSSG } from 'vite-ssg'
+import generatedRoutes from 'virtual:generated-pages'
+import { setupLayouts } from 'virtual:generated-layouts'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const routes = setupLayouts(generatedRoutes)
+
+// https://github.com/antfu/vite-ssg
+export const createApp = ViteSSG(
+  App,
+  { routes, base: import.meta.env.BASE_URL },
+  (ctx) => {
+    // install all modules under `modules/`
+    Object.values(import.meta.globEager('./modules/*.ts')).forEach(i => i.install?.(ctx))
+  },
+)
--- a/src/modules/README.md
+++ b/src/modules/README.md
@@ -0,0 +1,11 @@
+## Modules
+
+A custom user module system. Place a `.ts` file with the following template, it will be installed automatically.
+
+```ts
+import { type UserModule } from '~/types'
+
+export const install: UserModule = ({ app, router, isClient }) => {
+  // do something
+}
+```
--- a/src/modules/nprogress.ts
+++ b/src/modules/nprogress.ts
@@ -0,0 +1,12 @@
+import NProgress from 'nprogress'
+import { type UserModule } from '~/types'
+
+export const install: UserModule = ({ isClient, router }) => {
+  if (isClient) {
+    router.beforeEach((to, from) => {
+      if (to.path !== from.path)
+        NProgress.start()
+    })
+    router.afterEach(() => { NProgress.done() })
+  }
+}
--- a/src/modules/pinia.ts
+++ b/src/modules/pinia.ts
@@ -0,0 +1,17 @@
+import { createPinia } from 'pinia'
+import { type UserModule } from '~/types'
+
+// Setup Pinia
+// https://pinia.esm.dev/
+export const install: UserModule = ({ isClient, initialState, app }) => {
+  const pinia = createPinia()
+  app.use(pinia)
+  // Refer to
+  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
+  // for other serialization strategies.
+  if (isClient)
+    pinia.state.value = (initialState.pinia) || {}
+
+  else
+    initialState.pinia = pinia.state.value
+}
--- a/src/modules/pwa.ts
+++ b/src/modules/pwa.ts
@@ -0,0 +1,12 @@
+import { type UserModule } from '~/types'
+
+// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
+export const install: UserModule = ({ isClient, router }) => {
+  if (!isClient)
+    return
+
+  router.isReady().then(async() => {
+    const { registerSW } = await import('virtual:pwa-register')
+    registerSW({ immediate: true })
+  })
+}
--- a/src/pages/README.md
+++ b/src/pages/README.md
@@ -0,0 +1,20 @@
+## File-based Routing
+
+Routes will be auto-generated for Vue files in this dir with the same file structure.
+Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
+
+### Path Aliasing
+
+`~/` is aliased to `./src/` folder.
+
+For example, instead of having
+
+```ts
+import { isDark } from '../../../../composables'
+```
+
+now, you can use
+
+```ts
+import { isDark } from '~/composables'
+```
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    未找到页面
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -0,0 +1,13 @@
+---
+title: 关于
+---
+
+<div class="text-center">
+  <!-- You can use Vue components inside markdown -->
+  <div i-ri-information-line class="text-4xl -mb-6 m-auto" />
+  <h3>关于</h3>
+</div>
+
+**🍜 好的，今天我们来做菜！**
+
+代码请见 [YunYouJun/cook](https://github.com/YunYouJun/cook)。
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <div text-4xl m="t-4">
+      <div i-mdi-pot-steam-outline inline-block />
+    </div>
+    <p m="2">
+      好的，今天我们来做菜！
+    </p>
+  </div>
+</template>
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@@ -0,0 +1,16 @@
+declare interface Window {
+  // extend the window
+}
+
+// with vite-plugin-md, markdowns can be treat as Vue components
+declare module '*.md' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -0,0 +1,34 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  /**
+   * Current name of the user.
+   */
+  const savedName = ref('')
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value)
+      previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -0,0 +1,28 @@
+@import './markdown.css';
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #121212;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13,148,136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -0,0 +1,58 @@
+/* https://github.com/antfu/prism-theme-vars */
+@import 'prism-theme-vars/base.css';
+
+.prose {
+  --prism-font-family: 'DM Mono', monospace;
+}
+
+.prose img {
+  width: 100%;
+}
+
+html:not(.dark) .prose {
+  --prism-foreground: #393a34;
+  --prism-background: #fbfbfb;
+  --prism-comment: #a0ada0;
+  --prism-string: #b56959;
+  --prism-literal: #2f8a89;
+  --prism-number: #296aa3;
+  --prism-keyword: #1c6b48;
+  --prism-function: #6c7834;
+  --prism-boolean: #1c6b48;
+  --prism-constant: #a65e2b;
+  --prism-deleted: #a14f55;
+  --prism-class: #2993a3;
+  --prism-builtin: #ab5959;
+  --prism-property: #b58451;
+  --prism-namespace: #b05a78;
+  --prism-punctuation: #8e8f8b;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #698c96;
+}
+
+html.dark .prose {
+  --prism-foreground: #d4cfbf;
+  --prism-background: #151515;
+  --prism-comment: #758575;
+  --prism-string: #d48372;
+  --prism-literal: #429988;
+  --prism-keyword: #4d9375;
+  --prism-boolean: #1c6b48;
+  --prism-number: #6394bf;
+  --prism-variable: #c2b36e;
+  --prism-function: #a1b567;
+  --prism-deleted: #a14f55;
+  --prism-class: #54b1bf;
+  --prism-builtin: #e0a569;
+  --prism-property: #dd8e6e;
+  --prism-namespace: #db889a;
+  --prism-punctuation: #858585;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #6b8b9e;
+  --prism-line-number: #888888;
+  --prism-line-number-gutter: #eeeeee;
+  --prism-line-highlight-background: #444444;
+  --prism-selection-background: #444444;
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+import { type ViteSSGContext } from 'vite-ssg'
+
+export type UserModule = (ctx: ViteSSGContext) => void
--- a/src/types/recipe.ts
+++ b/src/types/recipe.ts
@@ -0,0 +1,28 @@
+export interface RecipeItem {
+  /**
+   * 菜名
+   */
+  name: string
+  /**
+   * 链接
+   */
+  link: string
+  /**
+   * 材料
+   */
+  stuff: string[]
+  /**
+   * 标签
+   */
+  tags: string[]
+  /**
+   * 方式
+   */
+  methods: string[]
+  /**
+   * 工具
+   */
+  tools: string[]
+}
+
+export type Recipe = RecipeItem[]
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client",
+      "vue/ref-macros",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ],
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules", "cypress"]
+}
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -0,0 +1,38 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    ['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'],
+  ],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+})
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,122 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import Pages from 'vite-plugin-pages'
+import generateSitemap from 'vite-ssg-sitemap'
+import Layouts from 'vite-plugin-vue-layouts'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Markdown from 'vite-plugin-md'
+import { VitePWA } from 'vite-plugin-pwa'
+import Inspect from 'vite-plugin-inspect'
+import Prism from 'markdown-it-prism'
+import LinkAttributes from 'markdown-it-link-attributes'
+import Unocss from 'unocss/vite'
+
+const markdownWrapperClasses = 'prose prose-sm m-auto text-left'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '~/': `${path.resolve(__dirname, 'src')}/`,
+    },
+  },
+
+  plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+      reactivityTransform: true,
+    }),
+
+    // https://github.com/hannoeru/vite-plugin-pages
+    Pages({
+      extensions: ['vue', 'md'],
+    }),
+
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
+    // https://github.com/antfu/unplugin-auto-import
+    AutoImport({
+      imports: [
+        'vue',
+        'vue-router',
+        'vue/macros',
+        '@vueuse/head',
+        '@vueuse/core',
+      ],
+      dts: 'src/auto-imports.d.ts',
+    }),
+
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/components.d.ts',
+    }),
+
+    // https://github.com/antfu/unocss
+    // see unocss.config.ts for config
+    Unocss(),
+
+    // https://github.com/antfu/vite-plugin-md
+    // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
+    Markdown({
+      wrapperClasses: markdownWrapperClasses,
+      headEnabled: true,
+      markdownItSetup(md) {
+        // https://prismjs.com/
+        md.use(Prism)
+        md.use(LinkAttributes, {
+          matcher: (link: string) => /^https?:\/\//.test(link),
+          attrs: {
+            target: '_blank',
+            rel: 'noopener',
+          },
+        })
+      },
+    }),
+
+    // https://github.com/antfu/vite-plugin-pwa
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
+      manifest: {
+        name: '今天我们来做菜',
+        short_name: '来做菜',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+    }),
+
+    // https://github.com/antfu/vite-plugin-inspect
+    // Visit http://localhost:3333/__inspect/ to see the inspector
+    Inspect(),
+  ],
+
+  // https://github.com/antfu/vite-ssg
+  ssgOptions: {
+    script: 'async',
+    formatting: 'minify',
+    onFinished() { generateSitemap() },
+  },
+})