chore: add about link

package.json

@@ -19,6 +19,7 @@
     "pinia": "^2.0.13",
     "prism-theme-vars": "^0.2.2",
     "vue": "^3.2.33",
+    "vue-about-me": "^1.2.6",
     "vue-demi": "^0.12.5",
     "vue-router": "^4.0.14"
   },
@@ -40,18 +41,18 @@
     "https-localhost": "^4.7.1",
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-prism": "^2.2.4",
-    "pnpm": "^6.32.8",
-    "sass": "^1.50.0",
+    "pnpm": "^6.32.9",
+    "sass": "^1.50.1",
     "star-markdown-css": "^0.3.3",
     "typescript": "^4.6.3",
-    "unocss": "^0.31.5",
+    "unocss": "^0.31.6",
     "unplugin-auto-import": "^0.7.1",
     "unplugin-vue-components": "^0.19.3",
     "vite": "^2.9.5",
     "vite-plugin-inspect": "^0.5.0",
     "vite-plugin-md": "^0.12.4",
     "vite-plugin-pages": "^0.23.0",
-    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-pwa": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.6.0",
     "vite-ssg": "^0.19.2",
     "vite-ssg-sitemap": "^0.2.3",

src/components.d.ts

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

src/components/AboutMe.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import VueAboutMe from 'vue-about-me'
+import 'vue-about-me/style.css'
+import { isDark } from '~/composables'
+
+const copyright = {
+  name: 'Cook',
+  repo: 'YunYouJun/cook',
+  color: '#0078E7',
+  iconUrl: 'https://sponsors.yunyoujun.cn',
+  author: '云游君',
+  authorUrl: 'https://www.yunyoujun.cn',
+}
+</script>
+
+<template>
+  <vue-about-me :is-dark="isDark" :copyright="copyright" />
+</template>

src/components/BaseFooter.vue

@@ -13,17 +13,22 @@ onBeforeMount(() => {
     <a v-if="displayICP" opacity="80" class="flex" href="https://beian.miit.gov.cn/" target="_blank">
       苏ICP备17038157号
     </a>
-    <div m="y-2" class="inline-flex justify-center items-center" text="xs">
+    <div m="t-2" class="inline-flex justify-center items-center" text="xs">
       <a class="inline-flex justify-center items-center" style="color: #ea7b99" href="https://www.bilibili.com/blackboard/dynamic/306882" target="_blank">
         <span inline-flex>菜谱视频来源：</span>
         <div class="inline-flex" i-ri-bilibili-line />
         <span m="l-1" class="inline-flex" style="margin-top: 1px;">B 站</span>
       </a>
     </div>
-    <div opacity="80" class="flex justify-center items-center">
+    <div m="t-2" opacity="80" class="flex justify-center items-center">
       ©️&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>
+    <div m="t-2" opacity="80" class="footer-support flex justify-center items-center">
+      <span>本网站由</span><a class="footer-support-logo" href="https://www.upyun.com" target="blank" title="又拍云">
+        <img m="x-1" width="50" src="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/logo/upyun-logo.png" alt="又拍云">
+      </a><span>提供 CDN 加速</span>
+    </div>
   </div>
 </template>

src/components/Menu.vue

@@ -16,6 +16,10 @@ import { toggleDark } from '~/composables'
       <div i-ri-information-line />
     </RouterLink>
 
+    <a class="icon-btn mx-2 hover:text-green-400" rel="noreferrer" href="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/about/white-qrcode-and-search.jpg" target="_blank" title="BiliBili">
+      <div i-ri-wechat-2-line />
+    </a>
+
     <a class="icon-btn mx-2 hover:text-pink-400" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili">
       <div i-ri-bilibili-line />
     </a>

src/pages/about.md

@@ -3,7 +3,7 @@ title: 关于
 ---
 
 <div class="text-center">
-  <h3>关于</h3>
+  <h3 font="serif black">关于</h3>
 </div>
 
 ### **🍜 好的，今天我们来做菜！**
@@ -42,7 +42,4 @@ title: 关于
 
 点击首页最上方的大锅图标，可以清空所选食材和工具。（本来想当作彩蛋，但是感觉还挺实用的。）
 
-<div class="flex justify-center items-center">
-Made by
-<a m="l-2" class="inline-flex" href="https://www.yunyoujun.cn" target="_blank">云游君</a>
-</div>
+<AboutMe />