重新整理文档笔记

Author: muyaCode

.github/workflows/algolia.yml

@@ -0,0 +1,19 @@
+name: algolia
+on:
+  push:
+    branches:
+      - main
+jobs:
+  algolia:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Get the content of algolia.json as config
+        id: algolia_config
+        run: echo "config=$(cat crawlerConfig.json | jq -r tostring)" >> $GITHUB_OUTPUT
+      - name: Push indices to Algolia
+        uses: signcl/docsearch-scraper-action@master
+        env:
+          APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
+          API_KEY: ${{ secrets.API_KEY }}
+          CONFIG: ${{ steps.algolia_config.outputs.config }}

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+
+scripts/docsearch-scraper
+
+# 缓存
+docs/.vitepress/cache
+docs/.vitepress/.temp
+docs/.vitepress/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 muyaCode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,30 @@
+# FrontEndLearnNotes/前端学习笔记
+
+**vitepress 框架的 markdown 写作相关文档**：<https://vitepress.vuejs.org/guide/markdown>
+
+## 解决 Node 项目打包内存溢出报错：JS stacktrace
+
+安装依赖后，运行或打包项目报错：vitepress 内存溢出(JS stacktrace)，是因为内存设置不足
+
+需要在 `node_modules/.bin/vitepress` 文件 和 `node_modules/.bin/vitepress.CMD` 文件修改增加运行内存：
+
+**vitepress** 文件
+
+```bash
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  " --max_old_space_size=49152 $basedir/../vitepress/bin/vitepress.js" "$@"
+else
+  exec node --max_old_space_size=49152  "$basedir/../vitepress/bin/vitepress.js" "$@"
+fi
+```
+
+**vitepress.CMD** 文件
+
+```bash
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe --max_old_space_size=49152"  "%~dp0\..\vitepress\bin\vitepress.js" %*
+) ELSE (
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node --max_old_space_size=49152  "%~dp0\..\vitepress\bin\vitepress.js" %*
+)
+```

crawlerConfig.json

@@ -0,0 +1,25 @@
+{
+  "index_name": "FrontEndLearnNotes",
+  "start_urls": ["https://muyacode.github.io/FrontEndLearnNotes/"],
+  "rateLimit": 8,
+  "maxDepth": 10,
+  "selectors": {
+    "lvl0": {
+      "selector": "",
+      "defaultValue": "Documentation"
+    },
+    "lvl1": ".content h1",
+    "lvl2": ".content h2",
+    "lvl3": ".content h3",
+    "lvl4": ".content h4",
+    "lvl5": ".content h5",
+    "content": ".content p, .content li"
+  },
+  "selectors_exclude": [
+    "aside",
+    ".page-footer",
+    ".next-and-prev-link",
+    ".table-of-contents"
+  ],
+  "js_render": true
+}

deploy.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 打包生成静态文件
+pnpm run docs:build
+
+# 进入生成的文件夹
+cd docs/.vitepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+time=$(date "+%Y-%m-%d %H:%M:%S") 
+
+git init
+git add -A
+git commit -m "GitHub Action 自动部署：$time"
+
+# # 如果发布到 https://<USERNAME>.github.io   -f 强制推送
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
+git push -f [email protected]:muyaCode/FrontEndLearnNotes.git master:gh-pages # 发布到Gitee
+# git push -f [email protected]:muyaCode/FrontEndLearnNotes.git master:gh-pages # 发布到GitHub
+
+
+# 退出到本项目根目录
+cd -
+# 删除 打包成的dist文件目录
+rm -rf docs/.vitepress/dist
+
+
+# 输出仓库和文档地址
+# echo "仓库地址：https://github.com/muyaCode/FrontEndLearnNotes"
+# echo "文档地址：https://muyacode.github.io/FrontEndLearnNotes/"
+
+# 格式化输出带颜色配置：https://www.shuzhiduo.com/A/D854N3mVzE/
+echo -e "Gitee仓库地址：\033[44;37m https://gitee.com/muyaCode/FrontEndLearnNotes/ \033[0m"
+echo -e "GiteePages文档地址：\033[47;30m https://muyacode.gitee.io/FrontEndLearnNotes/ \033[0m"
+echo -e "————————————————————————————————————————————————————————————————————————————————————————"
+echo -e "GitHub仓库地址：\033[44;37m https://github.com/muyaCode/FrontEndLearnNotes/ \033[0m"
+echo -e "GitHubPages文档地址：\033[47;30m https://muyacode.github.io/FrontEndLearnNotes/ \033[0m"

docs/.vitepress/config.js

@@ -0,0 +1,109 @@
+import { defineConfig } from "vitepress";
+import config from "genji-theme-vitepress/config";
+
+import socialLinks from "./config/socialLinks";
+import nav from "./config/nav";
+// import algolia from "./config/algolia";
+import sidebar from "./config/sidebar";
+import search from "./config/search";
+
+// 配置文档：https://vitepress.dev/reference/site-config
+export default defineConfig({
+  // 报错：SyntaxError: Invalid end tag.    会输出报错所在的目录：https://vitepress.dev/zh/reference/site-config#transformpagedata
+  // async transformPageData(pageData, { siteConfig }) {
+  //   pageData.contributors = await getPageContributors(pageData.relativePath)
+  // },
+
+  // 代码块运行插件文档：https://genji-md.dev/getting-started
+  extends: config,
+
+  lang: "zh", // 中文，英文设置en-US
+  title: "牡涯前端学习笔记", // 浏览器标签标题
+  description: "记录前端学习过的笔记",
+  base: '/FrontEndLearnNotes/', // url默认前缀
+  appearance: true, // 暗黑模式
+  ignoreDeadLinks: true, // 不会因死链接而使构建失败
+  lastUpdated: true, // 使用 git 提交获取时间戳，使默认主题能够显示页面的上次更新时间
+  // markdown主题
+  markdown: {
+    // 主题选择：https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+    // 主题预览：https://vscodethemes.com/
+    // 添加自定义的主题(加载主题)：https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+    theme: "one-dark-pro",
+    lineNumbers: true, // 显示代码行数
+    // markdown-it-attrs 插件忽略
+    attrs: {
+      leftDelimiter: '[[',
+      rightDelimiter: ']]'
+    }
+  },
+  // outDir: "../dist", // 打包输出的目录
+  // titleTemplate: '牧涯前端学习笔记', // 标题后缀
+  cleanUrls: true, // url是否带.html后缀
+  // 浏览器标签图标设置
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: 'https://avatars.githubusercontent.com/u/48587992?v=4'
+      }
+    ]
+    // ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+  ],
+
+  // ***** 主题设置 *****
+  // 文档：https://vitepress.vuejs.org/config/theme-configs
+  themeConfig: {
+    logo: "/img/buding.svg",
+    siteTitle: "牧涯前端学习笔记", // 网站左上角标题
+    outlineTitle: '⚡️文档内容大纲', // 大纲标题
+    outline: 'deep', // 大纲显示层级：number：只显示 | [number, number]：指定层级范围显示 | 'deep'：全部显示 | false：不显示
+
+    // 使用浏览器内置索引进行模糊全文搜索
+    search,
+    
+    // 使用 algolia 搜索框
+    // search: {
+    //   provider: 'algolia',
+    //   options: algolia,
+    // },
+    // 右上角导航
+    nav,
+    // 右上角导航中显示带有图标的社交帐户链接
+    socialLinks,
+    // *****左边侧栏导航*****
+    sidebar,
+
+
+    // 编辑
+    editLink: {
+      pattern: 'https://github.com/muyaCode/FrontEndLearnNotes/edit/main/docs/:path',
+      text: '在 GitHub 上编辑此页'
+    },
+    // 自定义上次更新的文本和日期格式
+    lastUpdated: {
+      text: '上次更新：',
+      formatOptions: {
+        dateStyle: 'full',
+        timeStyle: 'medium'
+      }
+    },
+    docFooter: {
+      prev: '上一篇',
+      next: '下一篇'
+    },
+
+    // 右边文档大纲下面的-卡片广告
+    // carbonAds: {
+    //   code: '卡片广告 code',
+    //   placement: '卡片广告布置'
+    // },
+    
+    // 首页页脚配置。您可以添加消息和版权。仅当页面由于设计原因不包含边栏时，才会显示页脚。
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2022-2023  MuYa'
+    },
+  },
+});

docs/.vitepress/config/algolia.js

@@ -0,0 +1,11 @@
+// 展示 algolia 搜索框
+export default {
+  appId: '1L6FRXPKEM',
+  apiKey: '934b4c2e67a08d72d379c9af236c5859',
+  indexName: 'FrontEndLearnNotes',
+  placeholder: '请输入关键词',
+  buttonText: '搜索',
+  searchParameters: {
+    faeFilters: ['tags:guide,api']
+  }
+}

docs/.vitepress/config/nav.js

@@ -0,0 +1,38 @@
+// 右上角导航
+const nav = [
+	{
+		text: "🌍我的个人网站",
+		link: "",
+	},
+	{
+		text: "✨掘金文章",
+		link: "",
+	},
+	{
+		text: "🔧设置",
+		link: "/order/setting",
+	},
+	{
+		text: "👇下拉选择",
+		items: [
+			{
+				text: "选择1",
+				link: "/order/items/item1",
+			},
+			{
+				text: "选择2",
+				link: "/order/items/item2",
+			},
+			{
+				text: "选择3",
+				link: "/order/items/item3",
+			},
+			{
+				text: "选择4",
+				link: "/order/items/item4",
+			},
+		],
+	},
+];
+
+export default nav;

docs/.vitepress/config/search.js

@@ -0,0 +1,59 @@
+const search = {
+  provider: 'local',
+  options: {
+    locales: {
+      root: {
+        translations: {
+          button: {
+            buttonText: '搜索文档',
+            buttonAriaLabel: '搜索文档'
+          },
+          modal: {
+            noResultsText: '无法找到相关结果',
+            displayDetails: '显示详细信息',
+            resetButtonTitle: '清除查询条件',
+            backButtonTitle: '返回搜索结果',
+            footer: {
+              selectText: '选择',
+              selectKeyAriaLabel: 'enter',
+              navigateText: '切换',
+              navigateUpKeyAriaLabel: 'up arrow',
+              navigateDownKeyAriaLabel: 'down arrow',
+              closeText: '关闭',
+              closeKeyAriaLabel: 'escape'
+            }
+          }
+        }
+      }
+    },
+    
+    _render(src, env, md) {
+      const html = md.render(src, env)
+      if (env.frontmatter?.search === false) return ''
+      // 从搜索中排除页面
+      if (env.relativePath.startsWith('some/path')) return ''
+      // 转换内容——添加锚点
+      if (env.frontmatter?.title) return md.render(`# ${env.frontmatter.title}`) + html
+      return html
+    },
+    // 搜索配置
+    miniSearch: {
+      /**
+       * @type {Pick<import('minisearch').Options, 'extractField' | 'tokenize' | 'processTerm'>}
+       */
+      options: {
+        /* ... */
+      },
+      /**
+       * @type {import('minisearch').SearchOptions}
+       * @default
+       * { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } }
+       */
+      searchOptions: {
+        /* ... */
+      }
+    },
+  }
+}
+
+export default search;