chore(deps): update deps & configs

.github/workflows/deploy-docs.yml

@@ -3,28 +3,16 @@ name: Deploy Docs
 on:
   push:
     branches:
-      # make sure this is the branch you are using
       - main
 
 jobs:
-  create-diagram:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Update diagram
-        uses: githubocto/repo-visualizer@main
-        with:
-          excluded_paths: ".github,.vscode"
   deploy-gh-pages:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          # if your docs needs submodules, uncomment the following line
-          # submodules: true
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -33,7 +21,7 @@ jobs:
           run_install: true
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: pnpm
@@ -48,7 +36,5 @@ jobs:
       - name: Deploy Docs
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          # This is the branch where the docs are deployed to
           branch: gh-pages
           folder: docs/.vuepress/dist
-

.markdownlint.yaml

@@ -1,16 +1,8 @@
 default: true
 
-# unordered-list-indent (default: 2)
-MD007:
-  indent: 4
-
 # line-length (default: 80)
 MD013: false
 
-# MD025: single-title (allow title in frontmatter)
-MD025:
-  front_matter_title: ''
-
 # no-inline-html (allow only AutoCatalog)
 MD033:
   allowed_elements:

.vscode/extensions.json

@@ -1,9 +1,9 @@
 {
-    "recommendations": [
-        "DavidAnson.vscode-markdownlint",
-        "yzhang.markdown-all-in-one",
-        "vstirbu.vscode-mermaid-preview",
-        "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
-        "bierner.markdown-mermaid"
-    ]
+  "recommendations": [
+    "yzhang.markdown-all-in-one",
+    "vstirbu.vscode-mermaid-preview",
+    "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
+    "bierner.markdown-mermaid",
+    "DavidAnson.vscode-markdownlint"
+  ]
 }

Dockerfile

@@ -1,5 +1,5 @@
 # Builder
-FROM node:18.17.0-bullseye-slim as builder
+FROM node:20.9.0-bookworm as builder
 
 WORKDIR /app
 
@@ -16,7 +16,7 @@ RUN npm -v \
     && pnpm build
 
 # Nginx Server
-FROM nginx:1.25.2-alpine3.18-slim
+FROM nginx:1.25.3-alpine3.18-slim
 
 WORKDIR /usr/share/nginx/html/vuepress-frontend-notes/
 

README.md

@@ -1,40 +1,36 @@
-# VuePress Frontend Notes | 前端笔记
+# VuePress Frontend Notes
 
 ![actions status](https://img.shields.io/github/actions/workflow/status/Sun-ZhenXing/vuepress-frontend-notes/deploy-docs.yml?branch=main)
 
-🚀 [Online Reading | 在线阅读](https://blog.alexsun.top/vuepress-frontend-notes/).
+🌐 [中文文档](./README.zh.md) | 🚀 [Online Reading (Chinese)](https://blog.alexsun.top/vuepress-frontend-notes/)
 
-![project diagram](./diagram.svg)
+## 📖 Introduction
 
-## 📖 Introduction | 介绍
+Frontend notes, including various frontend learning notes, as well as some practices of frontend projects.
 
-Frontend notes, including various frontend learning notes, and some frontend project practices. | 前端笔记，包含各种前端学习笔记，以及一些前端项目的实践。
+It is recommended to install the [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) plugin to format the MarkDown file.
 
-It is recommended to install the **markdownlint** plugin to format the MarkDown file. | 建议安装插件 **markdownlint** 来格式化 MarkDown 文件。
+## 🛠️ Build Docs
 
-This project uses the project structure diagram generated by [Repo Visualization](https://githubnext.com/projects/repo-visualization/). | 本项目使用 [Repo Visualization](https://githubnext.com/projects/repo-visualization/) 生成的项目结构图。
-
-## 🛠️ Build Docs | 构建文档
-
-Build with `pnpm`, the content will be generated in `docs/.vuepress/dist`. | 使用 `pnpm` 构建， 内容将生成在 `docs/.vuepress/dist` 下:
+Build with `pnpm`, the content will be generated in `docs/.vuepress/dist`:
 
 ```bash
 pnpm i
 pnpm build
 ```
 
-Build with Docker | 使用 Docker 构建:
+Build with Docker:
 
 ```bash
 docker build -t vuepress-frontend-notes .
 docker run -itd -p 80:80 vuepress-frontend-notes
 ```
 
-Now you can visit <http://localhost> to see your docs. | 现在你可以访问 <http://localhost> 来查看你的文档。
+Now you can visit <http://localhost> to see your docs.
 
-## 📜 License | 开源协议
+## 📜 License
 
-- All files except `/docs/*` are licensed under [MIT License](https://mit-license.org/) | 除了文档外的其他文件（除了 `/docs/` 文件夹），使用 [MIT 协议](https://mit-license.org/) 开源
-- `/docs/*` are licensed under [CC-BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) | 文档（即 `/docs/` 下的文件）使用 [CC-BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 共享
+- All files except `/docs/*` are licensed under [MIT License](https://mit-license.org/)
+- `/docs/*` are licensed under [CC-BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
 
-For more details, please read [this series of documents license](https://github.com/Sun-ZhenXing/Sun-ZhenXing.github.io#%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE). | 详情请阅读 [此系列文档开源协议](https://github.com/Sun-ZhenXing/Sun-ZhenXing.github.io#%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE)。
+For more details, please read [this series of documents license](https://github.com/Sun-ZhenXing/Sun-ZhenXing.github.io#%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE).

README.zh.md

@@ -0,0 +1,36 @@
+# VuePress 前端笔记
+
+![actions status](https://img.shields.io/github/actions/workflow/status/Sun-ZhenXing/vuepress-frontend-notes/deploy-docs.yml?branch=main)
+
+🚀 [在线阅读（中文）](https://blog.alexsun.top/vuepress-opencv-notes/)
+
+## 📖 介绍
+
+前端笔记，包含各种前端学习笔记，以及一些前端项目的实践。
+
+建议安装插件 [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) 来格式化 MarkDown 文件。
+
+## 🛠️ 构建文档
+
+使用 `pnpm` 构建， 内容将生成在 `docs/.vuepress/dist` 下:
+
+```bash
+pnpm i
+pnpm build
+```
+
+使用 Docker 构建:
+
+```bash
+docker build -t vuepress-frontend-notes .
+docker run -itd -p 80:80 vuepress-frontend-notes
+```
+
+现在你可以访问 <http://localhost> 来查看你的文档。
+
+## 📜 License | 开源协议
+
+- 除了文档外的其他文件（除了 `/docs/` 文件夹），使用 [MIT 协议](https://mit-license.org/) 开源
+- 文档（即 `/docs/` 下的文件）使用 [CC-BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 共享
+
+详情请阅读 [此系列文档开源协议](https://github.com/Sun-ZhenXing/Sun-ZhenXing.github.io#%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE)。

docs/.vuepress/config.ts

@@ -6,6 +6,7 @@ import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { autoCatalogPlugin } from 'vuepress-plugin-auto-catalog'
 import { shikiPlugin } from '@vuepress/plugin-shiki'
+import { slug as slugify } from 'github-slugger'
 
 const __dirname = getDirname(import.meta.url)
 const isProd = process.env.NODE_ENV === 'production'
@@ -29,7 +30,11 @@ export default defineUserConfig({
     importCode: {
       handleImportPath: str => str
         .replace(/^\//, ROOT_PATH.replace(/(?:|\\|\/)$/, '/'))
-        .replace(/^@/, CURRENT_PATH),
+        .replace(/^@\//, CURRENT_PATH.replace(/(?:|\\|\/)$/, '/')),
+    },
+    anchor: {
+      level: [1, 2, 3, 4, 5, 6],
+      slugify,
     },
   },
   theme: defaultTheme({
@@ -71,9 +76,9 @@ export default defineUserConfig({
       card: true,
       codetabs: true,
       include: {
-        resolvePath: (file) => {
-          if (file.startsWith('@'))
-            return file.replace('@', CURRENT_PATH)
+        resolvePath: file => {
+          if (file.startsWith('@/'))
+            return file.replace(/^@\//, CURRENT_PATH)
           if (file.startsWith('/'))
             return file.replace(/^\//, ROOT_PATH.replace(/(?:|\\|\/)$/, '/'))
           return file
@@ -87,7 +92,6 @@ export default defineUserConfig({
       mark: true,
       imgLazyload: true,
       tasklist: true,
-      linkify: false,
       katex: {
         copy: true,
       },

docs/.vuepress/styles/index.scss

@@ -11,17 +11,6 @@
     }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    padding-top: 0;
-  }
-
   // optimize: code
   code {
     padding: 0.25rem 0.15rem;
@@ -58,4 +47,15 @@
   }
 }
 
+// fix: copy katex code when selected
+.katex {
+  * {
+    user-select: none;
+  }
+
+  annotation {
+    user-select: all;
+  }
+}
+
 @import 'print.scss';

docs/README.md

@@ -14,6 +14,4 @@ footer: '前端笔记合集，由 <a href="https://github.com/Sun-ZhenXing/" tar
 
 # 前端笔记合集
 
-<!-- markdownlint-disable MD033 -->
-
 <AutoCatalog />

docs/notebook/css/sass/chapter01/index.md

@@ -9,6 +9,7 @@ Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加
 [^1]: Sass 中文文档，www.sass.hk，<https://www.sass.hk/docs/>
 
 Sass 的特点：
+
 - 完全兼容 CSS3
 - 在 CSS 基础上增加变量、嵌套、混合等功能
 - 通过函数进行颜色值与属性值的运算
@@ -324,7 +325,6 @@ $sizes: 40px, 50px, 80px;
 
 :::
 
-
 后续我们将学习函数指令 `@function`，这就像写 JavaScript 程序一样能够控制变量的值。
 
 ::: code-tabs

docs/notebook/other/nuxt-errors/get-started.md

@@ -120,5 +120,5 @@ Nuxt 的文档显然是 Nuxt 做的，但是官方 GitHub 里面没有一个配
 - 使用 `process.env.NODE_ENV === 'development'` 判断是否为开发环境
 - 使用 `process.env.NODE_ENV === 'production'` 判断是否为生产环境
 - 可以在 `nuxt.config.ts` 中使用 `runtimeConfig.public` 指定特殊变量
-    - 如 `buildTime: Date.now()` 表示打包时间
-    - 如 `version: require('./package.json').version` 表示版本号
+  - 如 `buildTime: Date.now()` 表示打包时间
+  - 如 `version: require('./package.json').version` 表示版本号

docs/nuxt/dependency-config/icon.md

@@ -0,0 +1,3 @@
+# 图标库
+
+[[TOC]]

docs/nuxt/dependency-config/index.md

@@ -0,0 +1,3 @@
+# Nuxt 依赖配置
+
+<AutoCatalog />