refactor: remote web font & auto generate title by frontmatter

README.md

@@ -5,6 +5,8 @@
 - 网站链接：[cook.yunyoujun.cn](https://cook.yunyoujun.cn)
 - 备用：[cook.yyj.moe](https://cook.yyj.moe)
 
+> This is a purely Chinese project, because the content of its recipes  is completely oriented towards Chinese, so the relevant content is given priority in Chinese.
+
 ## 参考
 
 - [隔离食用手册大全](https://docs.qq.com/sheet/DZUpJS0tQZm1YYWlt)

config/index.ts

@@ -1 +0,0 @@
-export const markdownWrapperClasses = 'markdown-body max-w-900px m-auto text-left'

package.json

@@ -16,44 +16,44 @@
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "^1.4.0",
-    "@vueuse/core": "^8.2.6",
+    "@vueuse/core": "^8.4.2",
     "@vueuse/head": "^0.7.6",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.13",
+    "pinia": "^2.0.14",
     "prism-theme-vars": "^0.2.2",
     "vue": "^3.2.33",
     "vue-about-me": "^1.2.7",
     "vue-demi": "^0.12.5",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.15"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.0",
     "@iconify-json/fe": "^1.1.1",
     "@iconify-json/gg": "^1.1.1",
     "@iconify-json/ic": "^1.1.3",
-    "@iconify-json/mdi": "^1.1.10",
+    "@iconify-json/mdi": "^1.1.11",
     "@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",
+    "@vitejs/plugin-vue": "^2.3.2",
     "consola": "^2.15.3",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "eslint": "^8.14.0",
+    "eslint": "^8.15.0",
     "esno": "^0.14.1",
     "https-localhost": "^4.7.1",
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-prism": "^2.2.4",
-    "pnpm": "^7.0.0",
+    "pnpm": "^7.0.1",
     "sass": "^1.51.0",
     "star-markdown-css": "^0.3.3",
     "typescript": "^4.6.4",
-    "unocss": "^0.32.9",
+    "unocss": "^0.33.1",
     "unplugin-auto-import": "^0.7.1",
     "unplugin-vue-components": "^0.19.3",
-    "vite": "^2.9.7",
+    "vite": "^2.9.8",
     "vite-plugin-inspect": "^0.5.0",
-    "vite-plugin-md": "^0.13.0",
+    "vite-plugin-md": "^0.13.1",
     "vite-plugin-pages": "^0.23.0",
     "vite-plugin-pwa": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.6.0",

src/auto-imports.d.ts

@@ -119,6 +119,7 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
@@ -188,6 +189,7 @@ declare global {
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']

src/components.d.ts

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     ToggleMode: typeof import('./components/ToggleMode.vue')['default']
     ToolTag: typeof import('./components/tags/ToolTag.vue')['default']
     VegetableTag: typeof import('./components/tags/VegetableTag.vue')['default']
+    WrapperMd: typeof import('./components/WrapperMd.vue')['default']
   }
 }
 

src/components/WrapperMd.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  frontmatter: {
+    title: string
+  }
+}>()
+</script>
+
+<template>
+  <div m="t-4" class="max-w-900px m-auto text-left">
+    <h3 text="center 3xl" font="serif !black">
+      {{ frontmatter?.title }}
+    </h3>
+    <slot class="markdown-body" />
+  </div>
+</template>

src/pages/about.md

@@ -2,10 +2,6 @@
 title: 关于
 ---
 
-<div class="text-center">
-  <h3 font="serif black">关于</h3>
-</div>
-
 ### **🍜 好的，今天我们来做菜！**
 
 > 希望大家吃的开心！
@@ -61,8 +57,6 @@ Hello，我是云游君。
 
 我会将其公开在[账簿](https://sponsors.yunyoujun.cn/account)中，并投入在周边的服务器、域名、CDN 等费用上。
 
-<p align="center">
+<a href="https://sponsors.yunyoujun.cn" target="_blank">
-  <a href="https://sponsors.yunyoujun.cn">
   <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
-  </a>
+</a>
-</p>

src/pages/help.md

@@ -2,10 +2,6 @@
 title: 帮助
 ---
 
-<h3 text="center" font="serif black">
-使用帮助
-</h3>
-
 - [菜谱数据](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS)
   - [新菜谱反馈](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic)
   - [晒晒你的菜](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=dmeahc)

unocss.config.ts

@@ -4,15 +4,14 @@ import {
   presetIcons,
   presetTypography,
   presetUno,
-  presetWebFonts,
+  // presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import { markdownWrapperClasses } from './config'
 
 import { tools } from './src/data/food'
 
-const safelist = markdownWrapperClasses.split(' ')
+const safelist: string[] = []
 
 tools.forEach((item) => {
   if (item.icon)
@@ -33,16 +32,17 @@ export default defineConfig({
       warn: true,
     }),
     presetTypography(),
-    presetWebFonts({
+    // simplify size
-      fonts: {
+    // presetWebFonts({
-        serif: [
+    //   fonts: {
-          {
+    //     serif: [
-            name: 'Noto Serif SC',
+    //       {
-            weights: [900],
+    //         name: 'Noto Serif SC',
-          },
+    //         weights: [900],
-        ],
+    //       },
-      },
+    //     ],
-    }),
+    //   },
+    // }),
   ],
   transformers: [
     transformerDirectives(),

vite.config.ts

@@ -13,8 +13,6 @@ import Prism from 'markdown-it-prism'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
 
-import { markdownWrapperClasses } from './config'
-
 export default defineConfig({
   resolve: {
     alias: {
@@ -64,7 +62,7 @@ export default defineConfig({
     // https://github.com/antfu/vite-plugin-md
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
     Markdown({
-      wrapperClasses: markdownWrapperClasses,
+      wrapperComponent: 'WrapperMd',
       headEnabled: true,
       markdownItSetup(md) {
         // https://prismjs.com/