chore: update readme

config/index.ts

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

package.json

@@ -41,6 +41,7 @@
     "markdown-it-prism": "^2.2.3",
     "pnpm": "^6.32.7",
     "sass": "^1.50.0",
+    "star-markdown-css": "^0.3.3",
     "typescript": "^4.6.3",
     "unocss": "^0.31.3",
     "unplugin-auto-import": "^0.7.1",

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   pnpm: ^6.32.7
   prism-theme-vars: ^0.2.2
   sass: ^1.50.0
+  star-markdown-css: ^0.3.3
   typescript: ^4.6.3
   unocss: ^0.31.3
   unplugin-auto-import: ^0.7.1
@@ -74,6 +75,7 @@ devDependencies:
   markdown-it-prism: 2.2.3
   pnpm: 6.32.7
   sass: 1.50.0
+  star-markdown-css: 0.3.3
   typescript: 4.6.3
   unocss: 0.31.3_vite@2.9.5
   unplugin-auto-import: 0.7.1_@vueuse+core@8.2.6+vite@2.9.5
@@ -4563,7 +4565,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
     dev: true
 
   /jsonpointer/5.0.0:
@@ -5734,6 +5736,10 @@ packages:
     resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
     dev: true
 
+  /star-markdown-css/0.3.3:
+    resolution: {integrity: sha512-F8hrbZQIM4CryGJbNGkbUfLTgnDF0+bTuo7Omtw0+OOjf5JGPWWj0rVqcKFCuypZwuyraDh3CZ46Yhf5LDj8SA==}
+    dev: true
+
   /statuses/1.5.0:
     resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=}
     engines: {node: '>= 0.6'}

src/components/BaseFooter.vue

@@ -1,6 +1,16 @@
+<script lang="ts" setup>
+import { isClient } from '@vueuse/core'
+const displayICP = ref(true)
+
+onBeforeMount(() => {
+  if (isClient)
+    displayICP.value = ['www.yunyoujun.cn', 'localhost'].includes(window.location.hostname)
+})
+</script>
+
 <template>
   <div p="4" class="flex flex-col justify-center items-center" opacity="70" text="sm">
-    <a class="flex" m="1 b-2" href="https://beian.miit.gov.cn/" target="_blank">
+    <a v-if="displayICP" class="flex" m="1 b-2" href="https://beian.miit.gov.cn/" target="_blank">
       苏ICP备17038157号
     </a>
     <div class="flex justify-center items-center">

src/pages/about.md

@@ -8,13 +8,13 @@ title: 关于
 
 ### **🍜 好的，今天我们来做菜！**
 
-<br />
+> 希望大家吃的开心！
 
 <div class="inline-flex justify-center items-center">
-代码请见 <div inline-flex i-ri-github-line /><a href="https://github.com/YunYouJun/cook" target="_blank">YunYouJun/cook</a>
+代码请见：<a class="inline-flex items-center justify-center" href="https://github.com/YunYouJun/cook" target="_blank">
+<div m="r-1" inline-flex i-ri-github-line />YunYouJun/cook</a>
 </div>
 
-<br />
 <br />
 
 <div class="inline-flex justify-center items-center">

src/styles/index.scss

@@ -1,3 +1,5 @@
+@import './markdown.scss';
+
 html {
   color: var(--c-text);
   background-color: var(--c-bg);

src/styles/main.css

@@ -1,5 +1,3 @@
-@import './markdown.css';
-
 html,
 body,
 #app {

src/styles/markdown.scss

@@ -1,15 +1,8 @@
 /* https://github.com/antfu/prism-theme-vars */
-@import 'prism-theme-vars/base.css';
+@use 'prism-theme-vars/base.css';
+@use 'star-markdown-css/src/scss/theme/yun.scss';
 
-.prose {
-  --prism-font-family: 'DM Mono', monospace;
-}
-
-.prose img {
-  width: 100%;
-}
-
-html:not(.dark) .prose {
+html:not(.dark) .markdown-body {
   --prism-foreground: #393a34;
   --prism-background: #fbfbfb;
   --prism-comment: #a0ada0;
@@ -31,7 +24,7 @@ html:not(.dark) .prose {
   --prism-json-property: #698c96;
 }
 
-html.dark .prose {
+html.dark .markdown-body {
   --prism-foreground: #d4cfbf;
   --prism-background: #151515;
   --prism-comment: #758575;

unocss.config.ts

@@ -8,10 +8,11 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { markdownWrapperClasses } from './config'
 
 import { tools } from './src/data/food'
 
-const safelist = 'prose prose-sm m-auto text-left'.split(' ')
+const safelist = markdownWrapperClasses.split(' ')
 
 tools.forEach((item) => {
   if (item.icon)

vite.config.ts

@@ -13,7 +13,7 @@ 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'
+import { markdownWrapperClasses } from './config'
 
 export default defineConfig({
   resolve: {