mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 37c9f23952 | |||
| cb704eed88 | |||
| 75fece7aab | |||
| 3966175a39 | |||
| 0c03059cde | |||
| efae1dc846 | |||
| 4132a13a96 | |||
| bd082908d8 | |||
| dd8a3cb26d | |||
| 6d0801a9da | |||
| 6290b9eae0 | |||
| 9479626194 | |||
| ad4b2e9119 | |||
| d48341cecb | |||
| 5aec989c14 | |||
| 13492fe556 | |||
| d145aaa0b0 | |||
| 531c01d62e | |||
| 0a160d22d8 |
15
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
15
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
@ -5,21 +5,16 @@ title: '备忘清单 请求: '
|
|||||||
labels: request
|
labels: request
|
||||||
assignees: jaywcjlove
|
assignees: jaywcjlove
|
||||||
---
|
---
|
||||||
备忘清单标题 备忘清单
|
【备忘清单标题】 备忘清单
|
||||||
===
|
===
|
||||||
|
|
||||||
这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】
|
这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】
|
||||||
|
|
||||||
入门
|
|
||||||
---
|
|
||||||
|
|
||||||
### 卡片 1
|
如果有一张备忘单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
|
||||||
|
|
||||||
### 卡片 2
|
提供参考资料地址
|
||||||
|
|
||||||
### 卡片 3
|
|
||||||
|
|
||||||
另见
|
|
||||||
----
|
----
|
||||||
|
|
||||||
- [参考地址](https://xxx.com)
|
- [参考地址 1](https://xxx.com)
|
||||||
|
- [官网地址](https://xxx.com)
|
||||||
4
.husky/pre-commit
Executable file
4
.husky/pre-commit
Executable file
@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx --no-install lint-staged
|
||||||
3
.lintstagedrc
Normal file
3
.lintstagedrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"**/*.{mjs,css,json,prettierrc,lintstagedrc}": ["prettier --write"]
|
||||||
|
}
|
||||||
5
.prettierignore
Normal file
5
.prettierignore
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
package.json
|
||||||
|
coverage
|
||||||
|
dist
|
||||||
|
build
|
||||||
|
docs
|
||||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"printWidth": 120,
|
||||||
|
"overrides": [
|
||||||
|
{ "files": ".prettierrc", "options": { "parser": "json" } },
|
||||||
|
{ "files": ".lintstagedrc", "options": { "parser": "json" } }
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -16,6 +16,26 @@ Contributing 贡献
|
|||||||
|
|
||||||
只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。
|
只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```bash
|
||||||
|
.
|
||||||
|
├── CONTRIBUTING.md # 贡献说明
|
||||||
|
├── Dockerfile
|
||||||
|
├── LICENSE
|
||||||
|
├── README.md # Home(首页) 内容
|
||||||
|
├── dist # 编译后的静态资源目录
|
||||||
|
├── docs # Markdown 文档（快速参考备忘清单【速查表】）
|
||||||
|
│ ├── bash.md
|
||||||
|
│ ├── ....
|
||||||
|
│ └── yaml.md
|
||||||
|
├── package.json
|
||||||
|
└── scripts # MD 转 HTML 的编译脚本
|
||||||
|
├── assets # 存放首页 svg 图标文件资源，与 `dosc` 文件名对应
|
||||||
|
├── ....
|
||||||
|
└── watch.mjs
|
||||||
|
```
|
||||||
|
|
||||||
## CSS 类注释
|
## CSS 类注释
|
||||||
|
|
||||||
[`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
|
[`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
|
||||||
@ -34,6 +54,13 @@ Contributing 贡献
|
|||||||
<!--rehype:class=home-card-->
|
<!--rehype:class=home-card-->
|
||||||
```
|
```
|
||||||
|
|
||||||
|
首页导航图标存放在 `scripts/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `scripts/assets` 目录中，重新编译首页当行菜单就拥有了图标。
|
||||||
|
|
||||||
|
- 图标存放在 [`scripts/assets`](https://github.com/jaywcjlove/reference/blob/main/scripts/assets) 目录中
|
||||||
|
- 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写)
|
||||||
|
- SVG 图标尺寸 `<svg height="1em" width="1em"`
|
||||||
|
- SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
|
||||||
|
|
||||||
## 本地开发
|
## 本地开发
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
10
README.md
10
README.md
@ -9,10 +9,10 @@ Quick Reference
|
|||||||
<!--rehype:ignore:end-->
|
<!--rehype:ignore:end-->
|
||||||
|
|
||||||
<!--rehype:ignore:start-->
|
<!--rehype:ignore:start-->
|
||||||
[](https://jaywcjlove.github.io/reference)
|
[](https://jaywcjlove.github.io/reference)
|
||||||
<!--rehype:ignore:end-->
|
<!--rehype:ignore:end-->
|
||||||
|
|
||||||
为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
|
为开发人员分享快速参考备忘清单【速查表】 _(主要是方便自己)_，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
|
||||||
|
|
||||||
## 编程
|
## 编程
|
||||||
|
|
||||||
@ -24,6 +24,7 @@ Quick Reference
|
|||||||
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||||
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||||
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||||
|
[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||||
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
|
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
|
||||||
[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
|
[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
|
||||||
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
||||||
@ -49,6 +50,7 @@ Quick Reference
|
|||||||
[RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
|
[RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
|
||||||
[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
|
[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
|
||||||
[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
||||||
|
[Vue 3 (努力中...)](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
||||||
<!--rehype:class=home-card-->
|
<!--rehype:class=home-card-->
|
||||||
|
|
||||||
## Nodejs
|
## Nodejs
|
||||||
@ -102,8 +104,8 @@ Quick Reference
|
|||||||
|
|
||||||
上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！
|
上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！
|
||||||
|
|
||||||
[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
[`请求添加备忘单(速查表)`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
||||||
[`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
|
[`我有一张备忘单(速查表)`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
|
||||||
<!--rehype:style=margin-top:3rem-->
|
<!--rehype:style=margin-top:3rem-->
|
||||||
|
|
||||||
<!--rehype:ignore:start-->
|
<!--rehype:ignore:start-->
|
||||||
|
|||||||
@ -34,11 +34,9 @@ NAME = "John" # => Error (关于空间)
|
|||||||
|
|
||||||
### 注释
|
### 注释
|
||||||
|
|
||||||
```bash
|
|
||||||
# 这是一个内联 Bash 注释。
|
|
||||||
```
|
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
|
# 这是一个内联 Bash 注释。
|
||||||
|
|
||||||
: '
|
: '
|
||||||
这是一个
|
这是一个
|
||||||
非常整洁的评论
|
非常整洁的评论
|
||||||
|
|||||||
@ -340,7 +340,7 @@ env:
|
|||||||
myHexNumber: ${{ 0xff }}
|
myHexNumber: ${{ 0xff }}
|
||||||
myExponentialNumber: ${{ -2.99e-2 }}
|
myExponentialNumber: ${{ -2.99e-2 }}
|
||||||
myString: Mona the Octocat
|
myString: Mona the Octocat
|
||||||
myStringInBraces: ${{ 'It''s open source!' }}
|
myStringInBraces: ${{ 'It''s source!' }}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 函数 contains
|
### 函数 contains
|
||||||
@ -375,6 +375,7 @@ startsWith('Hello world', 'He') // 返回 true
|
|||||||
format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
|
format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
|
||||||
// 返回 '{Hello Mona the Octocat!}'.
|
// 返回 '{Hello Mona the Octocat!}'.
|
||||||
```
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)
|
另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)
|
||||||
|
|
||||||
@ -815,6 +816,24 @@ steps:
|
|||||||
|
|
||||||
您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
|
您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
|
||||||
|
|
||||||
|
### 一些 actions 推荐
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
[`create-tag-action`](https://github.com/jaywcjlove/create-tag-action) | 根据 package.json 创建 `Tag` / `Release`
|
||||||
|
[`changelog-generator`](https://github.com/jaywcjlove/changelog-generator) | 生成 `changelog` 日志
|
||||||
|
[`github-action-modify-file-content`](https://github.com/jaywcjlove/github-action-modify-file-content) | 修改仓库文件内容
|
||||||
|
[`github-action-contributors`](https://github.com/jaywcjlove/github-action-contributors) | 生成贡献(contributors.svg)图片
|
||||||
|
[`generated-badges`](https://github.com/jaywcjlove/generated-badges) | 生成徽章(Badges)图片
|
||||||
|
[`coverage-badges-cli`](https://github.com/jaywcjlove/coverage-badges-cli) | 生成覆盖率徽章(Badges)图片
|
||||||
|
[`action-ejs`](https://github.com/jaywcjlove/action-ejs) | 基于 ejs 生成 HTML
|
||||||
|
[`github-action-package`](https://github.com/jaywcjlove/github-action-package) | 修改 JSON 文件内容
|
||||||
|
[`markdown-to-html-cli`](https://github.com/jaywcjlove/markdown-to-html-cli) | Markdown 转换成 HTML
|
||||||
|
[`ncipollo/release-action`](https://github.com/ncipollo/release-action) | 创建 `Release`
|
||||||
|
[`peaceiris/actions-gh-pages`](https://github.com/peaceiris/actions-gh-pages) | 将文件或文件夹内容提交到 `gh-pages` 分支
|
||||||
|
<!--rehype:className=style-list-->
|
||||||
|
|
||||||
另见
|
另见
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@ -38,6 +38,7 @@ export HOMEBREW_INSTALL_FROM_API=1
|
|||||||
命令 | 说明
|
命令 | 说明
|
||||||
:--- :---
|
:--- :---
|
||||||
`brew install git` | `安装`一个包
|
`brew install git` | `安装`一个包
|
||||||
|
`brew reinstall git` | 重新`安装`一个包
|
||||||
`brew uninstall git` | `删除`/`卸载`软件包
|
`brew uninstall git` | `删除`/`卸载`软件包
|
||||||
`brew upgrade git` | 升级包
|
`brew upgrade git` | 升级包
|
||||||
:--- :---
|
:--- :---
|
||||||
@ -46,9 +47,6 @@ export HOMEBREW_INSTALL_FROM_API=1
|
|||||||
`brew switch git 2.5.0` | 更改版本
|
`brew switch git 2.5.0` | 更改版本
|
||||||
:--- :---
|
:--- :---
|
||||||
`brew list --versions git` | 看看你有什么版本
|
`brew list --versions git` | 看看你有什么版本
|
||||||
:--- :---
|
|
||||||
`brew help` | 打印帮助信息
|
|
||||||
`brew help <sub-command>` | 打印子命令的帮助信息
|
|
||||||
|
|
||||||
### 更多包命令
|
### 更多包命令
|
||||||
|
|
||||||
@ -119,6 +117,13 @@ $ brew search <text>
|
|||||||
$ brew info <formula>
|
$ brew info <formula>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 帮助命令
|
||||||
|
|
||||||
|
命令 | 说明
|
||||||
|
:--- :---
|
||||||
|
`brew help` | 打印帮助信息
|
||||||
|
`brew help <sub-command>` | 打印子命令的帮助信息
|
||||||
|
|
||||||
另见
|
另见
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@ -8,11 +8,11 @@ HTTP 状态码
|
|||||||
|
|
||||||
### Means
|
### Means
|
||||||
|
|
||||||
- [1xx: Informational](#1xx-information) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
|
- [1xx: Informational](#1xx-信息) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
|
||||||
- [2xx: Success](#2xx-successful) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
|
- [2xx: Success](#2xx-成功的) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
|
||||||
- [3xx: Redirection](#3xx-redirection) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
|
- [3xx: Redirection](#3xx-重定向) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
|
||||||
- [4xx: Client Error](#4xx-client-error) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
|
- [4xx: Client Error](#4xx-客户端错误) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
|
||||||
- [5xx: Server Error](#5xx-server-error) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
|
- [5xx: Server Error](#5xx-服务器错误) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
|
||||||
|
|
||||||
### 2xx. 成功的
|
### 2xx. 成功的
|
||||||
<!--rehype:wrap-class=row-span-2-->
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
@ -58,8 +58,8 @@ HTTP 状态码
|
|||||||
### 3xx. 重定向
|
### 3xx. 重定向
|
||||||
|
|
||||||
* [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址_<!--rehype:tooltips-->
|
* [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址_<!--rehype:tooltips-->
|
||||||
* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url _<!--rehype:tooltips-->
|
* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url_<!--rehype:tooltips-->
|
||||||
* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url _<!--rehype:tooltips-->
|
* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url_<!--rehype:tooltips-->
|
||||||
* [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到_<!--rehype:tooltips-->
|
* [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到_<!--rehype:tooltips-->
|
||||||
* [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改_<!--rehype:tooltips-->
|
* [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改_<!--rehype:tooltips-->
|
||||||
* [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问_<!--rehype:tooltips-->
|
* [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问_<!--rehype:tooltips-->
|
||||||
|
|||||||
605
docs/mysql.md
Normal file
605
docs/mysql.md
Normal file
@ -0,0 +1,605 @@
|
|||||||
|
MySQL 备忘清单
|
||||||
|
===
|
||||||
|
|
||||||
|
本备忘单旨在快速理解 [MySQL](https://mysql.com) 所涉及的主要概念，提供了最常用的SQL语句，供您参考。
|
||||||
|
|
||||||
|
|
||||||
|
入门
|
||||||
|
---
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
MySQL 为关系型数据库(Relational Database Management System)，一个关系型数据库由一个或数个表格组成，如下所示的一个表格
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
```bash
|
||||||
|
name ▼ 键 ▼ 列(col)
|
||||||
|
┌┈┈┈┈┬┈┈┈┈┈┈┈┈┬┈┈┈┈┈┈┬┈┈┈┈┈┈┈┐
|
||||||
|
┆ id ┆ name ┆ uid ┆ level ┆ ◀ 表头header
|
||||||
|
├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
|
||||||
|
┆ 1 ┆ mysql ┆ 0 ┆ 3 ┆
|
||||||
|
├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
|
||||||
|
┆ 2 ┆ redis ┆ 12 ┆ 1 ┆ ◀ 行 row
|
||||||
|
└┈┈┈┈┴┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┴┈┈┈┈┈┈┈┘
|
||||||
|
redis ▲ 值
|
||||||
|
```
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
- `表头(header)` 每一列的名称
|
||||||
|
- `列(col)` 具有相同数据类型的数据的集合
|
||||||
|
- `行(row)` 每一行用来描述某个人/物的具体信息
|
||||||
|
- `值(value)` 行的具体信息，每个值与该列数据类型相同
|
||||||
|
- `键(key)` 用来识别某个特定的人/物的方法，有唯一性
|
||||||
|
|
||||||
|
### 登录MySQL
|
||||||
|
|
||||||
|
```shell
|
||||||
|
# 默认用户名<root>，-p 是密码，
|
||||||
|
# ⚠️参数后面不需要空格
|
||||||
|
mysql -h 127.0.0.1 -u <用户名> -p<密码>
|
||||||
|
mysql -D 数据库名 -h 主机名 -u 用户名 -p
|
||||||
|
mysql -h <host> -P <端口号> -u <user> -p [db_name]
|
||||||
|
mysql -h <host> -u <user> -p [db_name]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 常用的
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
#### 数据库 Database
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`CREATE DATABASE` db `;` | `创建`数据库
|
||||||
|
`SHOW DATABASES;` | `列出`数据库
|
||||||
|
`USE` db`;` | `切换`到数据库
|
||||||
|
`CONNECT` db `;` | `切换`到数据库
|
||||||
|
`DROP DATABASE` db`;` | `删除`数据库
|
||||||
|
|
||||||
|
#### 表 Table
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`SHOW TABLES;` | 列出当前数据库的表
|
||||||
|
`SHOW FIELDS FROM` t`;` | 表的列表字段
|
||||||
|
`DESC` t`;` | 显示表格结构
|
||||||
|
`SHOW CREATE TABLE `t`;` | 显示创建表sql
|
||||||
|
`TRUNCATE TABLE `t`;` | 删除表中的所有数据
|
||||||
|
`DROP TABLE `t`;` | 删除表格
|
||||||
|
|
||||||
|
#### Proccess
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`show processlist;` | 列出进程
|
||||||
|
`kill` pid`;` | 杀死进程
|
||||||
|
|
||||||
|
### 查看 MySQL 信息
|
||||||
|
|
||||||
|
```shell
|
||||||
|
# 显示当前mysql的version的各种信息
|
||||||
|
mysql> status;
|
||||||
|
# 显示当前mysql的version信息
|
||||||
|
mysql> select version();
|
||||||
|
# 查看 MySQL 端口号
|
||||||
|
mysql> show global variables like 'port';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 退出MySQL会话
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mysql> exit
|
||||||
|
```
|
||||||
|
|
||||||
|
退出 `quit;` 或 `\q;` 一样的效果
|
||||||
|
|
||||||
|
### 备份
|
||||||
|
|
||||||
|
创建备份
|
||||||
|
|
||||||
|
```sql
|
||||||
|
mysqldump -u user -p db_name > db.sql
|
||||||
|
```
|
||||||
|
|
||||||
|
导出不带架构的数据库
|
||||||
|
|
||||||
|
```shell
|
||||||
|
mysqldump -u user -p db_name --no-data=true --add-drop-table=false > db.sql
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
恢复备份
|
||||||
|
|
||||||
|
```shell
|
||||||
|
mysql -u user -p db_name < db.sql
|
||||||
|
```
|
||||||
|
|
||||||
|
MySQL 示例
|
||||||
|
------
|
||||||
|
|
||||||
|
### 管理表格
|
||||||
|
|
||||||
|
创建一个包含三列的新表
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t (
|
||||||
|
id INT,
|
||||||
|
name VARCHAR DEFAULT NOT NULL,
|
||||||
|
price INT DEFAULT 0
|
||||||
|
PRIMARY KEY(id)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
从数据库中删除表
|
||||||
|
|
||||||
|
```sql
|
||||||
|
DROP TABLE t ;
|
||||||
|
```
|
||||||
|
|
||||||
|
向表中添加新列
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t ADD column;
|
||||||
|
```
|
||||||
|
|
||||||
|
从表中删除列c
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t DROP COLUMN c ;
|
||||||
|
```
|
||||||
|
|
||||||
|
添加约束
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t ADD constraint;
|
||||||
|
```
|
||||||
|
|
||||||
|
删除约束
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t DROP constraint;
|
||||||
|
```
|
||||||
|
|
||||||
|
将表从t1重命名为t2
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t1 RENAME TO t2;
|
||||||
|
```
|
||||||
|
|
||||||
|
将列c1重命名为c2
|
||||||
|
|
||||||
|
```sql
|
||||||
|
ALTER TABLE t1 RENAME c1 TO c2 ;
|
||||||
|
```
|
||||||
|
|
||||||
|
删除表中的所有数据
|
||||||
|
|
||||||
|
```sql
|
||||||
|
TRUNCATE TABLE t;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 从表中查询数据
|
||||||
|
|
||||||
|
从表中查询列c1、c2中的数据
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
```
|
||||||
|
|
||||||
|
查询表中的所有行和列
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT * FROM t
|
||||||
|
```
|
||||||
|
|
||||||
|
查询数据并使用条件筛选行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
WHERE condition
|
||||||
|
```
|
||||||
|
|
||||||
|
查询表中的不同行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT DISTINCT c1 FROM t
|
||||||
|
WHERE condition
|
||||||
|
```
|
||||||
|
|
||||||
|
按升序或降序对结果集排序
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
ORDER BY c1 ASC [DESC]
|
||||||
|
```
|
||||||
|
|
||||||
|
跳过行的偏移并返回下n行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
ORDER BY c1
|
||||||
|
LIMIT n OFFSET offset
|
||||||
|
```
|
||||||
|
|
||||||
|
使用聚合函数对行进行分组
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, aggregate(c2)
|
||||||
|
FROM t
|
||||||
|
GROUP BY c1
|
||||||
|
```
|
||||||
|
|
||||||
|
使用HAVING子句筛选组
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, aggregate(c2)
|
||||||
|
FROM t
|
||||||
|
GROUP BY c1
|
||||||
|
HAVING condition
|
||||||
|
```
|
||||||
|
|
||||||
|
### 从多个表查询
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
内部连接 t1 和 t2
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1
|
||||||
|
INNER JOIN t2 ON condition
|
||||||
|
```
|
||||||
|
|
||||||
|
左连接t1和t1
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1
|
||||||
|
LEFT JOIN t2 ON condition
|
||||||
|
```
|
||||||
|
|
||||||
|
右连接t1和t2
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1
|
||||||
|
RIGHT JOIN t2 ON condition
|
||||||
|
```
|
||||||
|
|
||||||
|
执行完全外部连接
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1
|
||||||
|
FULL OUTER JOIN t2 ON condition
|
||||||
|
```
|
||||||
|
|
||||||
|
生成表中行的笛卡尔积
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1
|
||||||
|
CROSS JOIN t2
|
||||||
|
```
|
||||||
|
|
||||||
|
执行交叉连接的另一种方法
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1, t2
|
||||||
|
```
|
||||||
|
|
||||||
|
使用INNER Join子句将t1连接到自身
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t1 A
|
||||||
|
INNER JOIN t1 B ON condition
|
||||||
|
```
|
||||||
|
|
||||||
|
使用SQL运算符，合并两个查询中的行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t1
|
||||||
|
UNION [ALL]
|
||||||
|
SELECT c1, c2 FROM t2
|
||||||
|
```
|
||||||
|
|
||||||
|
返回两个查询的交集
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t1
|
||||||
|
INTERSECT
|
||||||
|
SELECT c1, c2 FROM t2
|
||||||
|
```
|
||||||
|
|
||||||
|
从另一个结果集中减去一个结果集
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t1
|
||||||
|
MINUS
|
||||||
|
SELECT c1, c2 FROM t2
|
||||||
|
```
|
||||||
|
|
||||||
|
使用模式匹配%查询行_
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t1
|
||||||
|
WHERE c1 [NOT] LIKE pattern
|
||||||
|
```
|
||||||
|
|
||||||
|
查询列表中的行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
WHERE c1 [NOT] IN value_list
|
||||||
|
```
|
||||||
|
|
||||||
|
查询两个值之间的行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
WHERE c1 BETWEEN low AND high
|
||||||
|
```
|
||||||
|
|
||||||
|
检查表中的值是否为NULL
|
||||||
|
|
||||||
|
```sql
|
||||||
|
SELECT c1, c2 FROM t
|
||||||
|
WHERE c1 IS [NOT] NULL
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用 SQL 约束
|
||||||
|
|
||||||
|
将c1和c2设置为主键
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t(
|
||||||
|
c1 INT, c2 INT, c3 VARCHAR,
|
||||||
|
PRIMARY KEY (c1,c2)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
将c2列设置为外键
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t1(
|
||||||
|
c1 INT PRIMARY KEY,
|
||||||
|
c2 INT,
|
||||||
|
FOREIGN KEY (c2) REFERENCES t2(c2)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
使c1和c2中的值唯一
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t(
|
||||||
|
c1 INT, c1 INT,
|
||||||
|
UNIQUE(c2,c3)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
确保c1>0和c1>=c2中的值
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t(
|
||||||
|
c1 INT, c2 INT,
|
||||||
|
CHECK(c1> 0 AND c1 >= c2)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
c2列中的设置值不为NULL
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE t(
|
||||||
|
c1 INT PRIMARY KEY,
|
||||||
|
c2 VARCHAR NOT NULL
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改数据
|
||||||
|
|
||||||
|
在表格中插入一行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
INSERT INTO t(column_list)
|
||||||
|
VALUES(value_list);
|
||||||
|
```
|
||||||
|
|
||||||
|
在表格中插入多行
|
||||||
|
|
||||||
|
```sql
|
||||||
|
INSERT INTO t(column_list)
|
||||||
|
VALUES (value_list),
|
||||||
|
(value_list), …;
|
||||||
|
```
|
||||||
|
|
||||||
|
将行从t2插入t1
|
||||||
|
|
||||||
|
```sql
|
||||||
|
INSERT INTO t1(column_list)
|
||||||
|
SELECT column_list
|
||||||
|
FROM t2;
|
||||||
|
```
|
||||||
|
|
||||||
|
更新列c1中所有行的新值
|
||||||
|
|
||||||
|
```sql
|
||||||
|
UPDATE t
|
||||||
|
SET c1 = new_value;
|
||||||
|
```
|
||||||
|
|
||||||
|
更新列c1、c2中与条件匹配的值
|
||||||
|
|
||||||
|
```sql
|
||||||
|
UPDATE t
|
||||||
|
SET c1 = new_value,
|
||||||
|
c2 = new_value
|
||||||
|
WHERE condition;
|
||||||
|
```
|
||||||
|
|
||||||
|
删除表中的所有数据
|
||||||
|
|
||||||
|
```sql
|
||||||
|
DELETE FROM t;
|
||||||
|
```
|
||||||
|
|
||||||
|
删除表中的行子集
|
||||||
|
|
||||||
|
```sql
|
||||||
|
DELETE FROM t
|
||||||
|
WHERE condition;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 管理视图
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
创建由c1和c2组成的新视图
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE VIEW v(c1,c2)
|
||||||
|
AS
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t;
|
||||||
|
```
|
||||||
|
|
||||||
|
使用选中选项创建新视图
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE VIEW v(c1,c2)
|
||||||
|
AS
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t;
|
||||||
|
WITH [CASCADED | LOCAL] CHECK OPTION;
|
||||||
|
```
|
||||||
|
|
||||||
|
创建递归视图
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE RECURSIVE VIEW v
|
||||||
|
AS
|
||||||
|
select-statement -- anchor part
|
||||||
|
UNION [ALL]
|
||||||
|
select-statement; -- recursive part
|
||||||
|
```
|
||||||
|
|
||||||
|
创建临时视图
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TEMPORARY VIEW v
|
||||||
|
AS
|
||||||
|
SELECT c1, c2
|
||||||
|
FROM t;
|
||||||
|
```
|
||||||
|
|
||||||
|
删除视图
|
||||||
|
|
||||||
|
```sql
|
||||||
|
DROP VIEW view_name;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 管理触发器
|
||||||
|
|
||||||
|
创建或修改触发器
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE OR MODIFY TRIGGER trigger_name
|
||||||
|
WHEN EVENT
|
||||||
|
ON table_name TRIGGER_TYPE
|
||||||
|
EXECUTE stored_procedure;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### WHEN
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`BEFORE` | 在事件发生前调用
|
||||||
|
`AFTER` | 事件发生后调用
|
||||||
|
|
||||||
|
#### EVENT
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`INSERT` | 为INSERT调用
|
||||||
|
`UPDATE` | 调用UPDATE
|
||||||
|
`DELETE` | 调用DELETE
|
||||||
|
|
||||||
|
#### TRIGGER_TYPE
|
||||||
|
|
||||||
|
:-|:-
|
||||||
|
:-|:-
|
||||||
|
`FOR EACH ROW` | -
|
||||||
|
`FOR EACH STATEMENT` | -
|
||||||
|
|
||||||
|
### 管理索引
|
||||||
|
|
||||||
|
在t表的c1和c2上创建索引
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE INDEX idx_name
|
||||||
|
ON t(c1,c2);
|
||||||
|
```
|
||||||
|
|
||||||
|
在t表的c3、c4上创建唯一索引
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE UNIQUE INDEX idx_name
|
||||||
|
ON t(c3,c4)
|
||||||
|
```
|
||||||
|
|
||||||
|
删除索引
|
||||||
|
|
||||||
|
```sql
|
||||||
|
DROP INDEX idx_name;
|
||||||
|
```
|
||||||
|
|
||||||
|
MySQL 数据类型
|
||||||
|
---------
|
||||||
|
|
||||||
|
|
||||||
|
### Strings
|
||||||
|
|
||||||
|
| - | - |
|
||||||
|
|--------------|-----------------------------|
|
||||||
|
| `CHAR` | String (0 - 255) |
|
||||||
|
| `VARCHAR` | String (0 - 255) |
|
||||||
|
| `TINYTEXT` | String (0 - 255) |
|
||||||
|
| `TEXT` | String (0 - 65535) |
|
||||||
|
| `BLOB` | String (0 - 65535) |
|
||||||
|
| `MEDIUMTEXT` | String (0 - 16777215) |
|
||||||
|
| `MEDIUMBLOB` | String (0 - 16777215) |
|
||||||
|
| `LONGTEXT` | String (0 - 4294967295) |
|
||||||
|
| `LONGBLOB` | String (0 - 4294967295) |
|
||||||
|
| `ENUM` | One of preset options |
|
||||||
|
| `SET` | Selection of preset options |
|
||||||
|
|
||||||
|
|
||||||
|
### Date & time
|
||||||
|
| Data Type | Format |
|
||||||
|
|-------------|---------------------|
|
||||||
|
| `DATE ` | yyyy-MM-dd |
|
||||||
|
| `TIME ` | hh:mm:ss |
|
||||||
|
| `DATETIME ` | yyyy-MM-dd hh:mm:ss |
|
||||||
|
| `TIMESTAMP` | yyyy-MM-dd hh:mm:ss |
|
||||||
|
| `YEAR ` | yyyy |
|
||||||
|
|
||||||
|
|
||||||
|
### Numeric
|
||||||
|
|
||||||
|
| - | - |
|
||||||
|
|---------------|---------------------------------------------------------------|
|
||||||
|
| `TINYINT x` | Integer (-128 to 127) |
|
||||||
|
| `SMALLINT x` | Integer (-32768 to 32767) |
|
||||||
|
| `MEDIUMINT x` | Integer (-8388608 to 8388607) |
|
||||||
|
| `INT x` | Integer (-2147483648 to 2147483647) |
|
||||||
|
| `BIGINT x` | Integer (-9223372036854775808 to 9223372036854775807) |
|
||||||
|
| `FLOAT` | Decimal (precise to 23 digits) |
|
||||||
|
| `DOUBLE` | Decimal (24 to 53 digits) |
|
||||||
|
| `DECIMAL` | "DOUBLE" stored as string |
|
||||||
|
|
||||||
|
另见
|
||||||
|
---
|
||||||
|
|
||||||
|
- [SQL 基础教程](http://www.w3school.com.cn/sql/index.asp) _(w3school.com.cn)_
|
||||||
|
- [SQL 语句教程](http://www.1keydata.com/cn/sql/sql-count.php) _(1keydata.com)_
|
||||||
|
- [21分钟 MySQL 基础入门](https://jaywcjlove.github.io/mysql-tutorial/21-minutes-MySQL-basic-entry.html) _(jaywcjlove.github.io)_
|
||||||
45
docs/npm.md
45
docs/npm.md
@ -108,7 +108,7 @@ npm access restricted <package-name>
|
|||||||
公开私有包
|
公开私有包
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm access restricted <package-name>
|
npm access public <package-name>
|
||||||
```
|
```
|
||||||
|
|
||||||
授予私有包访问权限
|
授予私有包访问权限
|
||||||
@ -170,7 +170,7 @@ npm publish --access public
|
|||||||
```ini
|
```ini
|
||||||
# last modified: 01 Jan 2016
|
# last modified: 01 Jan 2016
|
||||||
; Set a new registry for a scoped package
|
; Set a new registry for a scoped package
|
||||||
@myscope:registry=https://mycustomregistry.example.org
|
@myscope:registry=https://registry.npmmirror.com
|
||||||
```
|
```
|
||||||
|
|
||||||
注释使用 `#`, `;` 放置到一行的开头。`.npmrc` 文件由指定此注释语法的 [`npm/ini`](https://github.com/npm/ini) 解析
|
注释使用 `#`, `;` 放置到一行的开头。`.npmrc` 文件由指定此注释语法的 [`npm/ini`](https://github.com/npm/ini) 解析
|
||||||
@ -193,19 +193,21 @@ npm publish --access public
|
|||||||
`.npmignore` 文件就像 [`.gitignore`](./git.md#忽略文件) 一样工作。它不能覆盖 `package.json#files` 字段。
|
`.npmignore` 文件就像 [`.gitignore`](./git.md#忽略文件) 一样工作。它不能覆盖 `package.json#files` 字段。
|
||||||
|
|
||||||
### 中国镜像站安装
|
### 中国镜像站安装
|
||||||
<!--rehype:wrap-class=col-span-2-->
|
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
# 临时使用
|
||||||
$ npm install -g <package-name> --registry=https://registry.npmmirror.com
|
$ npm install -g <package-name> --registry=https://registry.npmmirror.com
|
||||||
```
|
```
|
||||||
|
|
||||||
将配置放置在 `.npmrc` 配置文件中。
|
将配置放置在 `.npmrc` 全局配置文件中，或者在项目的根目录中。
|
||||||
|
|
||||||
```ini
|
```ini
|
||||||
|
; registry=https://registry.npmjs.org/
|
||||||
registry=https://registry.npmmirror.com
|
registry=https://registry.npmmirror.com
|
||||||
```
|
```
|
||||||
|
|
||||||
或者配置到 `package.json#publishConfig` 字段上
|
或者配置到 [`package.json#publishConfig`](./package.json.md#publishconfig) 字段上
|
||||||
|
|
||||||
```json
|
```json
|
||||||
"publishConfig":{
|
"publishConfig":{
|
||||||
@ -213,4 +215,37 @@ registry=https://registry.npmmirror.com
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
替换 npm 仓库地址为 npmmirror(淘宝) 镜像地址
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm config set registry https://registry.npmmirror.com
|
||||||
|
```
|
||||||
|
|
||||||
请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
|
请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
|
||||||
|
|
||||||
|
#### electronjs 镜像和缓存
|
||||||
|
|
||||||
|
```ini
|
||||||
|
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
|
||||||
|
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
|
||||||
|
; ELECTRON_CUSTOM_DIR="{{ version }}"
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
### 身份验证相关配置
|
||||||
|
|
||||||
|
```ini
|
||||||
|
//registry.npmjs.org/:_authToken=MYTOKEN
|
||||||
|
; 将适用于 @myorg 和 @another
|
||||||
|
//somewhere.com/:_authToken=MYTOKEN
|
||||||
|
; 将适用于 @myorg
|
||||||
|
//somewhere.com/myorg/:_authToken=MYTOKEN1
|
||||||
|
; 将适用于 @another
|
||||||
|
//somewhere.com/another/:_authToken=MYTOKEN2
|
||||||
|
```
|
||||||
|
|
||||||
|
另见
|
||||||
|
----
|
||||||
|
|
||||||
|
- [npm 仓库、网站和命令行界面的文档](https://docs.npmjs.com/) _(npmjs.com)_
|
||||||
|
- [npmmirror 中国镜像站](https://npmmirror.com/) _(npmmirror.com)_
|
||||||
@ -54,7 +54,6 @@ Semver 备忘清单
|
|||||||
<!--rehype:className=shortcuts-->
|
<!--rehype:className=shortcuts-->
|
||||||
|
|
||||||
### 连字符范围
|
### 连字符范围
|
||||||
<!--rehype:wrap-class=row-span-3-->
|
|
||||||
|
|
||||||
| 范围 | 描述 |
|
| 范围 | 描述 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@ -80,6 +79,43 @@ Semver 备忘清单
|
|||||||
|
|
||||||
如果左边是部分的（例如，`1.2`），则假定缺少的部分为`0`（例如，` 1.2.0`）。
|
如果左边是部分的（例如，`1.2`），则假定缺少的部分为`0`（例如，` 1.2.0`）。
|
||||||
|
|
||||||
|
### 有效的语义版本
|
||||||
|
<!--rehype:wrap-class=row-span-4-->
|
||||||
|
|
||||||
|
```js
|
||||||
|
0.0.4
|
||||||
|
1.2.3
|
||||||
|
10.20.30
|
||||||
|
1.1.2-prerelease+meta
|
||||||
|
1.1.2+meta
|
||||||
|
1.1.2+meta-valid
|
||||||
|
1.0.0-alpha
|
||||||
|
1.0.0-beta
|
||||||
|
1.0.0-alpha.beta
|
||||||
|
1.0.0-alpha.beta.1
|
||||||
|
1.0.0-alpha.1
|
||||||
|
1.0.0-alpha0.valid
|
||||||
|
1.0.0-alpha.0valid
|
||||||
|
1.0.0-alpha-a.b-c-somethinglong+build.1-aef.1-its-okay
|
||||||
|
1.0.0-rc.1+build.1
|
||||||
|
2.0.0-rc.1+build.123
|
||||||
|
1.2.3-beta
|
||||||
|
10.2.3-DEV-SNAPSHOT
|
||||||
|
1.2.3-SNAPSHOT-123
|
||||||
|
1.0.0
|
||||||
|
2.0.0
|
||||||
|
1.1.7
|
||||||
|
2.0.0+build.1848
|
||||||
|
2.0.1-alpha.1227
|
||||||
|
1.0.0-alpha+beta
|
||||||
|
1.2.3----RC-SNAPSHOT.12.9.1--.12+788
|
||||||
|
1.2.3----R-S.12.9.1--.12+meta
|
||||||
|
1.2.3----RC-SNAPSHOT.12.9.1--.12
|
||||||
|
1.0.0+0.build.1-rc.10000aaa-kk-0.1
|
||||||
|
99999999999999999999999.999999999999999999.99999999999999999
|
||||||
|
1.0.0-0A.is.legal
|
||||||
|
```
|
||||||
|
|
||||||
### 组合范围
|
### 组合范围
|
||||||
|
|
||||||
| 范围 | 描述 |
|
| 范围 | 描述 |
|
||||||
@ -88,13 +124,8 @@ Semver 备忘清单
|
|||||||
| `0.14.x \|\| 15.x.x` | 或 (双竖线分隔) |
|
| `0.14.x \|\| 15.x.x` | 或 (双竖线分隔) |
|
||||||
<!--rehype:className=shortcuts show-header-->
|
<!--rehype:className=shortcuts show-header-->
|
||||||
|
|
||||||
### 预发布
|
|
||||||
|
|
||||||
```
|
|
||||||
1.2.3-prerelease+build
|
|
||||||
```
|
|
||||||
|
|
||||||
### 解释
|
### 解释
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
| 范围 | 描述 |
|
| 范围 | 描述 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@ -104,6 +135,13 @@ Semver 备忘清单
|
|||||||
| `1.x.x` | 表示定义了公共 API |
|
| `1.x.x` | 表示定义了公共 API |
|
||||||
<!--rehype:className=shortcuts-->
|
<!--rehype:className=shortcuts-->
|
||||||
|
|
||||||
|
### 预发布
|
||||||
|
|
||||||
|
```
|
||||||
|
1.2.3-prerelease+build
|
||||||
|
1.1.2-prerelease+meta
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
另见
|
另见
|
||||||
----
|
----
|
||||||
|
|||||||
271
docs/vue.md
Normal file
271
docs/vue.md
Normal file
@ -0,0 +1,271 @@
|
|||||||
|
Vue 3 备忘清单
|
||||||
|
===
|
||||||
|
|
||||||
|
渐进式 JavaScript 框架 [Vue 3](https://cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。
|
||||||
|
|
||||||
|
|
||||||
|
入门
|
||||||
|
---
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
Vue 是一套用于构建用户界面的渐进式框架
|
||||||
|
|
||||||
|
- [Vue 3.x 官方文档](https://cn.vuejs.org/)
|
||||||
|
- [Vue Router 4.x 官方文档](https://router.vuejs.org/zh/)
|
||||||
|
<!--rehype:className=style-round-->
|
||||||
|
|
||||||
|
注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本
|
||||||
|
|
||||||
|
### 创建应用
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
已安装 `16.0` 或更高版本的 Node.js
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ npm init vue@latest
|
||||||
|
```
|
||||||
|
|
||||||
|
指令将会安装并执行 [create-vue](https://www.npmjs.com/package/create-vue)，它是 Vue 官方的项目脚手架工具
|
||||||
|
|
||||||
|
```bash
|
||||||
|
✔ Project name: … <your-project-name>
|
||||||
|
✔ Add TypeScript? … No/Yes
|
||||||
|
✔ Add JSX Support? … No/Yes
|
||||||
|
✔ Add Vue Router for Single Page Application development? … No/Yes
|
||||||
|
✔ Add Pinia for state management? … No/Yes
|
||||||
|
✔ Add Vitest for Unit testing? … No/Yes
|
||||||
|
✔ Add Cypress for both Unit and End-to-End testing? … No/Yes
|
||||||
|
✔ Add ESLint for code quality? … No/Yes
|
||||||
|
✔ Add Prettier for code formatting? … No/Yes
|
||||||
|
|
||||||
|
Scaffolding project in ./<your-project-name>...
|
||||||
|
Done.
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
安装依赖并启动开发服务器
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ cd <your-project-name>
|
||||||
|
$ npm install
|
||||||
|
$ npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
当你准备将应用发布到生产环境时，请运行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
|
||||||
|
|
||||||
|
### 应用实例
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
const app = createApp({
|
||||||
|
data() {
|
||||||
|
return { count: 0 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
app.mount('#app')
|
||||||
|
```
|
||||||
|
|
||||||
|
挂载应用
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app">
|
||||||
|
<button @click="count++">
|
||||||
|
{{ count }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 通过 CDN 使用 Vue
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
<div id="app">{{ message }}</div>
|
||||||
|
<script>
|
||||||
|
const { createApp } = Vue
|
||||||
|
createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'Hello Vue!'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).mount('#app')
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
### 使用 ES 模块构建版本
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app">{{ message }}</div>
|
||||||
|
<script type="module">
|
||||||
|
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
|
||||||
|
createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'Hello Vue!'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).mount('#app')
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
模板语法
|
||||||
|
---
|
||||||
|
|
||||||
|
### 文本插值
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span>Message: {{ msg }}</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
使用的是 `Mustache` 语法 (即双大括号)，每次 `msg` 属性更改时它也会同步更新
|
||||||
|
|
||||||
|
### 原始 HTML
|
||||||
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>Using text interpolation: {{ rawHtml }}</p>
|
||||||
|
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
|
||||||
|
```
|
||||||
|
|
||||||
|
双大括号`{{}}`会将数据解释为纯文本，使用 `v-html` 指令，将插入 HTML
|
||||||
|
|
||||||
|
### Attribute 绑定
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div v-bind:id="dynamicId"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
简写
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div :id="dynamicId"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 布尔型 Attribute
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button :disabled="isButtonDisabled">
|
||||||
|
Button
|
||||||
|
</button>
|
||||||
|
```
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
|
||||||
|
### 动态绑定多个值
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```js
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
objectOfAttrs: {
|
||||||
|
id: 'container',
|
||||||
|
class: 'wrapper'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div v-bind="objectOfAttrs"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用 JavaScript 表达式
|
||||||
|
|
||||||
|
```html
|
||||||
|
{{ number + 1 }}
|
||||||
|
{{ ok ? 'YES' : 'NO' }}
|
||||||
|
{{ message.split('').reverse().join('') }}
|
||||||
|
|
||||||
|
<div :id="`list-${id}`"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 仅支持表达式(例子都是无效)
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 这是一个语句，而非表达式 -->
|
||||||
|
{{ var a = 1 }}
|
||||||
|
<!-- 条件控制也不支持，请使用三元表达式 -->
|
||||||
|
{{ if (ok) { return message } }}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 调用函数
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span :title="toTitleDate(date)">
|
||||||
|
{{ formatDate(date) }}
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 指令 Directives
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p v-if="seen">Now you see me</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 参数 Arguments
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a v-bind:href="url"> ... </a>
|
||||||
|
<!-- 简写 -->
|
||||||
|
<a :href="url"> ... </a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 绑定事件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a v-on:click="doSomething"> ... </a>
|
||||||
|
<!-- 简写 -->
|
||||||
|
<a @click="doSomething"> ... </a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 动态参数
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a v-bind:[attributeName]="url"> ... </a>
|
||||||
|
<!-- 简写 -->
|
||||||
|
<a :[attributeName]="url"> ... </a>
|
||||||
|
```
|
||||||
|
|
||||||
|
这里的 `attributeName` 会作为一个 JS 表达式被动态执行
|
||||||
|
|
||||||
|
### 动态的事件名称
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a v-on:[eventName]="doSomething"> ... </a>
|
||||||
|
<!-- 简写 -->
|
||||||
|
<a @[eventName]="doSomething">
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修饰符 Modifiers
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form @submit.prevent="onSubmit">
|
||||||
|
...
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
`.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()`
|
||||||
|
|
||||||
|
### 指令语法
|
||||||
|
|
||||||
|
```bash
|
||||||
|
v-on:submit.prevent="onSubmit"
|
||||||
|
──┬─ ─┬──── ─┬───── ─┬──────
|
||||||
|
┆ ┆ ┆ ╰─ Value 解释为JS表达式
|
||||||
|
┆ ┆ ╰─ Modifiers 由前导点表示
|
||||||
|
┆ ╰─ Argument 跟随冒号或速记符号
|
||||||
|
╰─ Name 以 v- 开头使用速记时可以省略
|
||||||
|
```
|
||||||
@ -1,7 +1,7 @@
|
|||||||
Vue2 备忘清单
|
Vue2 备忘清单
|
||||||
===
|
===
|
||||||
|
|
||||||
渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
|
渐进式 JavaScript 框架 [Vue 2](https://v2.cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。
|
||||||
|
|
||||||
入门
|
入门
|
||||||
---
|
---
|
||||||
@ -14,6 +14,8 @@ Vue 是一套用于构建用户界面的渐进式框架
|
|||||||
- [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/)
|
- [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/)
|
||||||
<!--rehype:className=style-round-->
|
<!--rehype:className=style-round-->
|
||||||
|
|
||||||
|
注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本
|
||||||
|
|
||||||
#### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html))
|
#### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html))
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
12
package.json
12
package.json
@ -1,14 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "@wcj/reference",
|
"name": "@wcj/reference",
|
||||||
"version": "1.10.0",
|
"version": "1.11.1",
|
||||||
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
||||||
"author": "jaywcjlove",
|
"author": "jaywcjlove",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"homepage": "https://jaywcjlove.github.io/reference",
|
"homepage": "https://jaywcjlove.github.io/reference",
|
||||||
"private": false,
|
"private": false,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"prepare": "husky install",
|
||||||
"build": "node scripts/build.mjs",
|
"build": "node scripts/build.mjs",
|
||||||
"start": "node scripts/watch.mjs"
|
"start": "node scripts/watch.mjs",
|
||||||
|
"prettier": "prettier --write '**/*.{mjs,css,json,prettierrc,lintstagedrc}'"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -22,10 +24,16 @@
|
|||||||
"@wcj/markdown-to-html": "^2.1.1",
|
"@wcj/markdown-to-html": "^2.1.1",
|
||||||
"chokidar": "^3.5.3",
|
"chokidar": "^3.5.3",
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
|
"husky": "^8.0.1",
|
||||||
|
"lint-staged": "^13.0.3",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
"recursive-readdir-files": "^2.3.0",
|
"recursive-readdir-files": "^2.3.0",
|
||||||
"rehype-autolink-headings": "^6.1.1",
|
"rehype-autolink-headings": "^6.1.1",
|
||||||
"rehype-document": "^6.1.0",
|
"rehype-document": "^6.1.0",
|
||||||
"rehype-slug": "^5.0.1",
|
"rehype-slug": "^5.0.1",
|
||||||
"remark-gemoji": "^7.0.1"
|
"remark-gemoji": "^7.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
scripts/assets/menu.svg
Normal file
3
scripts/assets/menu.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||||||
|
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
2
scripts/assets/mysql.svg
Normal file
2
scripts/assets/mysql.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
4
scripts/assets/vue.svg
Normal file
4
scripts/assets/vue.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
|
||||||
|
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"/>
|
||||||
|
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 269 B |
@ -1,3 +1,3 @@
|
|||||||
import { run } from './index.mjs';
|
import { run } from './index.mjs';
|
||||||
|
|
||||||
run()
|
run();
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import markdown from '@wcj/markdown-to-html';
|
import markdown from '@wcj/markdown-to-html';
|
||||||
import rehypeDocument from 'rehype-document';
|
import rehypeDocument from 'rehype-document';
|
||||||
import remarkGemoji from 'remark-gemoji';
|
import remarkGemoji from 'remark-gemoji';
|
||||||
|
import rehypeRaw from 'rehype-raw';
|
||||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
||||||
import rehypeSlug from 'rehype-slug';
|
import rehypeSlug from 'rehype-slug';
|
||||||
import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
|
import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
|
||||||
@ -9,7 +10,7 @@ import { header } from './nodes/header.mjs';
|
|||||||
import { rehypeUrls } from './utils/rehypeUrls.mjs';
|
import { rehypeUrls } from './utils/rehypeUrls.mjs';
|
||||||
import { tooltips } from './utils/tooltips.mjs';
|
import { tooltips } from './utils/tooltips.mjs';
|
||||||
import { homeCardIcons } from './utils/homeCardIcons.mjs';
|
import { homeCardIcons } from './utils/homeCardIcons.mjs';
|
||||||
import { getTocsTree } from './utils/getTocsTree.mjs';
|
import { getTocsTree, getTocsTitleNode, getTocsTitleNodeWarpper, addTocsInWarp } from './utils/getTocsTree.mjs';
|
||||||
import { rehypeTitle } from './utils/rehypeTitle.mjs';
|
import { rehypeTitle } from './utils/rehypeTitle.mjs';
|
||||||
import { anchorPoint } from './utils/anchorPoint.mjs';
|
import { anchorPoint } from './utils/anchorPoint.mjs';
|
||||||
import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
|
import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
|
||||||
@ -20,8 +21,11 @@ export function create(str = '', options = {}) {
|
|||||||
let title = str.match(/[^===]+(?=[===])/g) || [];
|
let title = str.match(/[^===]+(?=[===])/g) || [];
|
||||||
let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g) || [];
|
let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g) || [];
|
||||||
title = title[0] || '';
|
title = title[0] || '';
|
||||||
description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, '');
|
description = (description[0] || '')
|
||||||
const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: ''
|
.replace(/^\n[=\n]+/, '')
|
||||||
|
.replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1')
|
||||||
|
.replace(/\n/, '');
|
||||||
|
const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & ` : '';
|
||||||
const mdOptions = {
|
const mdOptions = {
|
||||||
showLineNumbers: false,
|
showLineNumbers: false,
|
||||||
hastNode: false,
|
hastNode: false,
|
||||||
@ -29,34 +33,53 @@ export function create(str = '', options = {}) {
|
|||||||
rehypePlugins: [
|
rehypePlugins: [
|
||||||
rehypeSlug,
|
rehypeSlug,
|
||||||
rehypeAutolinkHeadings,
|
rehypeAutolinkHeadings,
|
||||||
[rehypeDocument, {
|
[
|
||||||
|
rehypeDocument,
|
||||||
|
{
|
||||||
title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
|
title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
|
||||||
css: [ ...options.css ],
|
css: [...options.css],
|
||||||
link: [
|
link: [{ rel: 'icon', href: favicon, type: 'image/svg+xml' }],
|
||||||
{rel: 'icon', href: favicon, type: 'image/svg+xml'}
|
|
||||||
],
|
|
||||||
meta: [
|
meta: [
|
||||||
{ description: `${description}为开发人员分享快速参考备忘单。` },
|
{ description: `${description}为开发人员分享快速参考备忘单。` },
|
||||||
{ keywords: `Quick,Reference,cheatsheet,${!options.isHome && options.filename || ''}` }
|
{ keywords: `Quick,Reference,cheatsheet,${(!options.isHome && options.filename) || ''}` },
|
||||||
]
|
|
||||||
}],
|
|
||||||
],
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
filterPlugins: (type, plugins = []) => {
|
||||||
|
if (type === 'rehype') {
|
||||||
|
const dt = plugins.filter((plug) => {
|
||||||
|
return /(rehypeRaw)/.test(plug.name) ? false : true;
|
||||||
|
});
|
||||||
|
// 放在 rehypeDocument 前面
|
||||||
|
dt.unshift(rehypeRaw);
|
||||||
|
dt.unshift(rehypePreviewHTML);
|
||||||
|
return dt;
|
||||||
|
}
|
||||||
|
return plugins;
|
||||||
|
},
|
||||||
rewrite: (node, index, parent) => {
|
rewrite: (node, index, parent) => {
|
||||||
rehypePreviewHTML(node, parent);
|
|
||||||
rehypeTitle(node, options.filename);
|
rehypeTitle(node, options.filename);
|
||||||
homeCardIcons(node, parent, options.isHome);
|
homeCardIcons(node, parent, options.isHome);
|
||||||
tooltips(node, index, parent);
|
tooltips(node, index, parent);
|
||||||
htmlTagAddAttri(node, options);
|
htmlTagAddAttri(node, options);
|
||||||
rehypeUrls(node);
|
rehypeUrls(node);
|
||||||
|
if (node.children) {
|
||||||
if (node.type === 'element' && node.tagName === 'body') {
|
if (node.type === 'element' && node.tagName === 'body') {
|
||||||
node.children = getTocsTree([ ...node.children ]);
|
const tocsData = getTocsTree([...node.children]);
|
||||||
|
if (!options.isHome) {
|
||||||
|
const tocsMenus = getTocsTitleNode([...tocsData]);
|
||||||
|
node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus));
|
||||||
|
} else {
|
||||||
|
node.children = tocsData;
|
||||||
|
}
|
||||||
node.children.unshift(header(options));
|
node.children.unshift(header(options));
|
||||||
node.children.push(footer());
|
node.children.push(footer());
|
||||||
node.children.push(anchorPoint());
|
node.children.push(anchorPoint());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return markdown(str, mdOptions);
|
return markdown(str, mdOptions);
|
||||||
}
|
}
|
||||||
@ -11,15 +11,20 @@ export const CSS_OUTPUT_PATH = path.resolve(OUTOUT, 'style/style.css');
|
|||||||
export async function createHTML(files = [], num = 0) {
|
export async function createHTML(files = [], num = 0) {
|
||||||
const dataFile = files[num];
|
const dataFile = files[num];
|
||||||
if (!dataFile) {
|
if (!dataFile) {
|
||||||
console.log(' \n done!\n')
|
console.log(' \n done!\n');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
++num;
|
++num;
|
||||||
const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path.relative(process.cwd(), dataFile.path).replace(path.sep, '/')}`;
|
const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path
|
||||||
|
.relative(process.cwd(), dataFile.path)
|
||||||
|
.replace(path.sep, '/')}`;
|
||||||
|
|
||||||
const mdstr = await fs.readFile(dataFile.path);
|
const mdstr = await fs.readFile(dataFile.path);
|
||||||
const htmlPath = path.relative(DOCS, dataFile.path);
|
const htmlPath = path.relative(DOCS, dataFile.path);
|
||||||
const outputHTMLPath = path.resolve(OUTOUT, 'docs', htmlPath).replace(/README.md$/i, 'index.html').replace(/.md$/, '.html');
|
const outputHTMLPath = path
|
||||||
|
.resolve(OUTOUT, 'docs', htmlPath)
|
||||||
|
.replace(/README.md$/i, 'index.html')
|
||||||
|
.replace(/.md$/, '.html');
|
||||||
|
|
||||||
await fs.ensureDir(path.dirname(outputHTMLPath));
|
await fs.ensureDir(path.dirname(outputHTMLPath));
|
||||||
|
|
||||||
@ -28,18 +33,18 @@ export async function createHTML(files = [], num = 0) {
|
|||||||
isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
|
isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
|
||||||
githubURL,
|
githubURL,
|
||||||
homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')),
|
homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')),
|
||||||
css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)]
|
css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)],
|
||||||
});
|
});
|
||||||
await fs.writeFile(outputHTMLPath, html);
|
await fs.writeFile(outputHTMLPath, html);
|
||||||
console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`)
|
console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`);
|
||||||
createHTML(files, num)
|
createHTML(files, num);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function run() {
|
export async function run() {
|
||||||
await fs.ensureDir(OUTOUT);
|
await fs.ensureDir(OUTOUT);
|
||||||
await fs.emptyDir(OUTOUT);
|
await fs.emptyDir(OUTOUT);
|
||||||
await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH));
|
await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH));
|
||||||
await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH)
|
await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH);
|
||||||
const files = await recursiveReaddirFiles(process.cwd(), {
|
const files = await recursiveReaddirFiles(process.cwd(), {
|
||||||
ignored: /\/(node_modules|\.git)/,
|
ignored: /\/(node_modules|\.git)/,
|
||||||
exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
|
exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
|
||||||
|
|||||||
@ -3,25 +3,25 @@ import { github, editor } from './logo.mjs';
|
|||||||
import { getSVGNode } from '../utils/getSVGNode.mjs';
|
import { getSVGNode } from '../utils/getSVGNode.mjs';
|
||||||
import { darkMode } from '../utils/darkMode.mjs';
|
import { darkMode } from '../utils/darkMode.mjs';
|
||||||
|
|
||||||
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg')
|
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
|
||||||
export function header({ homePath, githubURL = '' }) {
|
export function header({ homePath, githubURL = '' }) {
|
||||||
const svgNode = getSVGNode(ICONS_PATH)
|
const svgNode = getSVGNode(ICONS_PATH);
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
menu: true,
|
menu: true,
|
||||||
href: githubURL,
|
href: githubURL,
|
||||||
target: '__blank',
|
target: '__blank',
|
||||||
label: '编辑',
|
label: '编辑',
|
||||||
children: [editor]
|
children: [editor],
|
||||||
},
|
},
|
||||||
...darkMode(),
|
...darkMode(),
|
||||||
{
|
{
|
||||||
menu: true,
|
menu: true,
|
||||||
href: 'https://github.com/jaywcjlove/reference',
|
href: 'https://github.com/jaywcjlove/reference',
|
||||||
target: '__blank',
|
target: '__blank',
|
||||||
children: [github]
|
children: [github],
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
return {
|
return {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'nav',
|
tagName: 'nav',
|
||||||
@ -51,10 +51,8 @@ export function header({ homePath, githubURL = '' }) {
|
|||||||
properties: {
|
properties: {
|
||||||
class: ['title'],
|
class: ['title'],
|
||||||
},
|
},
|
||||||
children: [
|
children: [{ type: 'text', value: 'Quick Reference' }],
|
||||||
{ type: 'text', value: 'Quick Reference' }
|
},
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -75,29 +73,28 @@ export function header({ homePath, githubURL = '' }) {
|
|||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'span',
|
tagName: 'span',
|
||||||
properties: {},
|
properties: {},
|
||||||
children: label ? [
|
children: label ? [{ type: 'text', value: label }] : [],
|
||||||
{ type: 'text', value: label }
|
},
|
||||||
] : []
|
],
|
||||||
}
|
};
|
||||||
]
|
|
||||||
}
|
|
||||||
if (label) {
|
if (label) {
|
||||||
childs.children = [...children, {
|
childs.children = [
|
||||||
|
...children,
|
||||||
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'span',
|
tagName: 'span',
|
||||||
properties: {},
|
properties: {},
|
||||||
children: [
|
children: [{ type: 'text', value: label }],
|
||||||
{ type: 'text', value: label }
|
},
|
||||||
]
|
];
|
||||||
}];
|
|
||||||
} else {
|
} else {
|
||||||
childs.children = children;
|
childs.children = children;
|
||||||
}
|
}
|
||||||
return childs
|
return childs;
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -3,38 +3,38 @@ export const logo = [
|
|||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'svg',
|
tagName: 'svg',
|
||||||
properties: {
|
properties: {
|
||||||
viewBox: "0 0 24 24",
|
viewBox: '0 0 24 24',
|
||||||
fill: "none",
|
fill: 'none',
|
||||||
xmlns: "http://www.w3.org/2000/svg",
|
xmlns: 'http://www.w3.org/2000/svg',
|
||||||
height: "1em",
|
height: '1em',
|
||||||
width: "1em"
|
width: '1em',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
opacity: ".5",
|
opacity: '.5',
|
||||||
d: "m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z",
|
d: 'm21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z',
|
||||||
fill: "white"
|
fill: 'white',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
d: "M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" ,
|
d: 'M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z',
|
||||||
fill: "#cbd5e1"
|
fill: '#cbd5e1',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
d: "M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z",
|
d: 'M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z',
|
||||||
fill: "#292D32"
|
fill: '#292D32',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -43,48 +43,45 @@ export const logo = [
|
|||||||
properties: {
|
properties: {
|
||||||
class: ['title'],
|
class: ['title'],
|
||||||
},
|
},
|
||||||
children: [
|
children: [{ type: 'text', value: 'Quick Reference' }],
|
||||||
{ type: 'text', value: 'Quick Reference' }
|
},
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export const github = {
|
export const github = {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'svg',
|
tagName: 'svg',
|
||||||
properties: {
|
properties: {
|
||||||
viewBox: "0 0 16 16",
|
viewBox: '0 0 16 16',
|
||||||
fill: "currentColor",
|
fill: 'currentColor',
|
||||||
height: "1em",
|
height: '1em',
|
||||||
width: "1em"
|
width: '1em',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z",
|
d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
export const editor = {
|
export const editor = {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'svg',
|
tagName: 'svg',
|
||||||
properties: {
|
properties: {
|
||||||
viewBox: "0 0 36 36",
|
viewBox: '0 0 36 36',
|
||||||
fill: "currentColor",
|
fill: 'currentColor',
|
||||||
height: "1em",
|
height: '1em',
|
||||||
width: "1em"
|
width: '1em',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
d: "m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z",
|
d: 'm33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -92,8 +89,8 @@ export const editor = {
|
|||||||
tagName: 'path',
|
tagName: 'path',
|
||||||
properties: {
|
properties: {
|
||||||
fill: 'none',
|
fill: 'none',
|
||||||
d: "M0 0h36v36H0z",
|
d: 'M0 0h36v36H0z',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|||||||
@ -6,7 +6,8 @@ body {
|
|||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji';
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color-mode*='dark'] body .dark {
|
[data-color-mode*='dark'] body .dark {
|
||||||
@ -22,7 +23,8 @@ body {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color-mode*='light'], [data-color-mode*='light'] body {
|
[data-color-mode*='light'],
|
||||||
|
[data-color-mode*='light'] body {
|
||||||
--color-prettylights-syntax-comment: #b1bac3;
|
--color-prettylights-syntax-comment: #b1bac3;
|
||||||
--color-prettylights-syntax-constant: #0550ae;
|
--color-prettylights-syntax-constant: #0550ae;
|
||||||
--color-prettylights-syntax-entity: #8250df;
|
--color-prettylights-syntax-entity: #8250df;
|
||||||
@ -42,7 +44,7 @@ body {
|
|||||||
--color-prettylights-syntax-markup-italic: #24292f;
|
--color-prettylights-syntax-markup-italic: #24292f;
|
||||||
--color-prettylights-syntax-markup-bold: #24292f;
|
--color-prettylights-syntax-markup-bold: #24292f;
|
||||||
--color-prettylights-syntax-markup-deleted-text: #82071e;
|
--color-prettylights-syntax-markup-deleted-text: #82071e;
|
||||||
--color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
|
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
|
||||||
--color-prettylights-syntax-markup-inserted-text: #116329;
|
--color-prettylights-syntax-markup-inserted-text: #116329;
|
||||||
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
|
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
|
||||||
--color-prettylights-syntax-markup-changed-text: #953800;
|
--color-prettylights-syntax-markup-changed-text: #953800;
|
||||||
@ -61,14 +63,16 @@ body {
|
|||||||
--color-bg-subtle: #f8f9fa;
|
--color-bg-subtle: #f8f9fa;
|
||||||
--color-border-default: #d0d7de;
|
--color-border-default: #d0d7de;
|
||||||
--color-border-muted: #ececec94;
|
--color-border-muted: #ececec94;
|
||||||
--color-neutral-muted: rgba(175,184,193,0.2);
|
--color-neutral-muted: rgba(175, 184, 193, 0.2);
|
||||||
--color-accent-fg: #0969da;
|
--color-accent-fg: #0969da;
|
||||||
--color-accent-emphasis: #0969da;
|
--color-accent-emphasis: #0969da;
|
||||||
--color-attention-subtle: #fff8c5;
|
--color-attention-subtle: #fff8c5;
|
||||||
--color-danger-fg: #cf222e;
|
--color-danger-fg: #cf222e;
|
||||||
|
--box-shadow: 109 109 109;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color-mode*='dark'], [data-color-mode*='dark'] body {
|
[data-color-mode*='dark'],
|
||||||
|
[data-color-mode*='dark'] body {
|
||||||
--color-prettylights-syntax-comment: #8b949e;
|
--color-prettylights-syntax-comment: #8b949e;
|
||||||
--color-prettylights-syntax-constant: #79c0ff;
|
--color-prettylights-syntax-constant: #79c0ff;
|
||||||
--color-prettylights-syntax-entity: #d2a8ff;
|
--color-prettylights-syntax-entity: #d2a8ff;
|
||||||
@ -110,8 +114,9 @@ body {
|
|||||||
--color-neutral-muted: rgb(51 65 85/0.3);
|
--color-neutral-muted: rgb(51 65 85/0.3);
|
||||||
--color-accent-fg: #58a6ff;
|
--color-accent-fg: #58a6ff;
|
||||||
--color-accent-emphasis: #1f6feb;
|
--color-accent-emphasis: #1f6feb;
|
||||||
--color-attention-subtle: rgba(187,128,9,0.15);
|
--color-attention-subtle: rgba(187, 128, 9, 0.15);
|
||||||
--color-danger-fg: #f85149;
|
--color-danger-fg: #f85149;
|
||||||
|
--box-shadow: 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -119,18 +124,39 @@ body {
|
|||||||
background-color: var(--color-canvas-default);
|
background-color: var(--color-canvas-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
*, ::before, ::after {
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dd,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
hr,
|
||||||
|
figure,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: inherit
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
ol, ul, menu {
|
ol,
|
||||||
|
ul,
|
||||||
|
menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -143,12 +169,16 @@ pur {
|
|||||||
color: var(--color-prettylights-syntax-entity);
|
color: var(--color-prettylights-syntax-entity);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-body > p > code, .wrap-body > ul li > code, .wrap-body tbody td code {
|
.wrap-body > p > code,
|
||||||
|
.wrap-body > ul li > code,
|
||||||
|
.wrap-body tbody td code {
|
||||||
--text-opacity: 1;
|
--text-opacity: 1;
|
||||||
color: rgb(5 150 105/var(--text-opacity));
|
color: rgb(5 150 105 / var(--text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-body em, .wrap-body sup, .wrap-body sub {
|
.wrap-body em,
|
||||||
|
.wrap-body sup,
|
||||||
|
.wrap-body sub {
|
||||||
color: var(--color-fg-subtle);
|
color: var(--color-fg-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -156,13 +186,16 @@ table {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
border-collapse: collapse
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
table td:first-child {
|
table td:first-child {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>del>code, ul.shortcuts li > code, kbd {
|
table.shortcuts td:not(:last-child) > code,
|
||||||
|
table.shortcuts td:not(:last-child) > del > code,
|
||||||
|
ul.shortcuts li > code,
|
||||||
|
kbd {
|
||||||
background-color: var(--color-neutral-muted);
|
background-color: var(--color-neutral-muted);
|
||||||
color: var(--color-fg-subtle);
|
color: var(--color-fg-subtle);
|
||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
|
||||||
@ -171,21 +204,23 @@ table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>de
|
|||||||
border: 1px solid var(--color-border-muted);
|
border: 1px solid var(--color-border-muted);
|
||||||
border-color: var(--color-border-default);
|
border-color: var(--color-border-default);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-family: Arial,Helvetica,sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr+tr {
|
table tr + tr {
|
||||||
border-top: solid 1px #ececec94;
|
border-top: solid 1px #ececec94;
|
||||||
border-color: var(--color-border-muted);
|
border-color: var(--color-border-muted);
|
||||||
}
|
}
|
||||||
table td, table th {
|
table td,
|
||||||
|
table th {
|
||||||
padding: 9px 14px;
|
padding: 9px 14px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
table tr th:last-child, table tr td:last-child {
|
table tr th:last-child,
|
||||||
|
table tr td:last-child {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -197,13 +232,15 @@ table thead th {
|
|||||||
|
|
||||||
table thead {
|
table thead {
|
||||||
display: none;
|
display: none;
|
||||||
border-bottom: solid 1px rgba(85,102,119,0.3);
|
border-bottom: solid 1px rgba(85, 102, 119, 0.3);
|
||||||
}
|
}
|
||||||
table td:first-child>code {
|
table td:first-child > code {
|
||||||
--text-opacity: 1;
|
--text-opacity: 1;
|
||||||
color: rgb(5 150 105/var(--text-opacity));
|
color: rgb(5 150 105 / var(--text-opacity));
|
||||||
}
|
}
|
||||||
table td > del, table td:first-child > del > code, .wrap-body p > del > code {
|
table td > del,
|
||||||
|
table td:first-child > del > code,
|
||||||
|
.wrap-body p > del > code {
|
||||||
color: var(--color-danger-fg);
|
color: var(--color-danger-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -211,16 +248,19 @@ table.show-header thead {
|
|||||||
display: table-header-group;
|
display: table-header-group;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.style-list td + td, table.style-list-arrow td + td {
|
table.style-list td + td,
|
||||||
|
table.style-list-arrow td + td {
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.style-list td, table.style-list-arrow td {
|
table.style-list td,
|
||||||
|
table.style-list-arrow td {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
|
table.style-list-arrow td:first-child::before,
|
||||||
|
ul.style-arrow li:before {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
@ -231,8 +271,9 @@ table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
|
|||||||
border-bottom: 5px solid transparent;
|
border-bottom: 5px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
tt, code {
|
tt,
|
||||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
code {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
pre:only-child {
|
pre:only-child {
|
||||||
@ -242,7 +283,7 @@ pre:only-child {
|
|||||||
pre {
|
pre {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -252,8 +293,9 @@ pre {
|
|||||||
.max-container a {
|
.max-container a {
|
||||||
color: rgb(2 132 199/1);
|
color: rgb(2 132 199/1);
|
||||||
}
|
}
|
||||||
.max-container a, .max-container a:visited {
|
.max-container a,
|
||||||
background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e);
|
.max-container a:visited {
|
||||||
|
background-image: linear-gradient(transparent, transparent 6px, #34495e 6px, #34495e);
|
||||||
background-position: bottom;
|
background-position: bottom;
|
||||||
background-size: 100% 6px;
|
background-size: 100% 6px;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
@ -263,7 +305,8 @@ pre {
|
|||||||
text-decoration-color: transparent;
|
text-decoration-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-container a:hover, .max-container a:visited:hover{
|
.max-container a:hover,
|
||||||
|
.max-container a:visited:hover {
|
||||||
text-decoration-color: #10b981;
|
text-decoration-color: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -274,7 +317,8 @@ pre {
|
|||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.home .h1wrap-body, body.home .h1wrap .wrap-body {
|
body.home .h1wrap-body,
|
||||||
|
body.home .h1wrap .wrap-body {
|
||||||
max-width: 940px;
|
max-width: 940px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
@ -292,7 +336,7 @@ body.home .h2wrap > h2::after {
|
|||||||
width: 110%;
|
width: 110%;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
--bg-opacity: 1;
|
--bg-opacity: 1;
|
||||||
background-color: rgb(30 41 59/var(--bg-opacity));
|
background-color: rgb(30 41 59 / var(--bg-opacity));
|
||||||
}
|
}
|
||||||
body.home .h1wrap .wrap-body p + p {
|
body.home .h1wrap .wrap-body p + p {
|
||||||
margin-top: 1.6rem;
|
margin-top: 1.6rem;
|
||||||
@ -309,8 +353,9 @@ body:not(.home) .h2wrap > .wrap-body > ul {
|
|||||||
body.home .h1wrap p {
|
body.home .h1wrap p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
body.home .max-container a.home-button:hover, body.home .max-container a.home-button:visited:hover {
|
body.home .max-container a.home-button:hover,
|
||||||
transition: all .3s;
|
body.home .max-container a.home-button:visited:hover {
|
||||||
|
transition: all 0.3s;
|
||||||
text-decoration-color: #fff;
|
text-decoration-color: #fff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@ -318,16 +363,16 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu
|
|||||||
.home-card {
|
.home-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color-mode*='light'] body .home-card a {
|
[data-color-mode*='light'] body .home-card a {
|
||||||
--text-opacity: 0.75;
|
--text-opacity: 0.75;
|
||||||
color: rgb(15 19 24/var(--text-opacity));
|
color: rgb(15 19 24 / var(--text-opacity));
|
||||||
}
|
}
|
||||||
[data-color-mode*='light'] body .home-card a:hover {
|
[data-color-mode*='light'] body .home-card a:hover {
|
||||||
--text-opacity: 0.85;
|
--text-opacity: 0.85;
|
||||||
color: rgb(241 245 249/var(--text-opacity)) !important;
|
color: rgb(241 245 249 / var(--text-opacity)) !important;
|
||||||
}
|
}
|
||||||
.home-card a {
|
.home-card a {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -337,13 +382,13 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu
|
|||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
padding: 0rem 1rem;
|
padding: 0rem 1rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
color: var(--color-fg-default);
|
color: var(--color-fg-default);
|
||||||
--text-opacity: 0.75;
|
--text-opacity: 0.75;
|
||||||
color: rgb(241 245 249/var(--text-opacity));
|
color: rgb(241 245 249 / var(--text-opacity));
|
||||||
--bg-opacity: 0.5;
|
--bg-opacity: 0.5;
|
||||||
background-color: rgb(62 69 72/var(--bg-opacity));
|
background-color: rgb(62 69 72 / var(--bg-opacity));
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.home-card a:hover {
|
.home-card a:hover {
|
||||||
@ -372,23 +417,26 @@ a.home-button {
|
|||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
--bg-opacity: 1;
|
--bg-opacity: 1;
|
||||||
background-color: rgb(10 147 102/var(--bg-opacity));
|
background-color: rgb(10 147 102 / var(--bg-opacity));
|
||||||
--text-opacity: 1;
|
--text-opacity: 1;
|
||||||
color: rgb(203 213 225/var(--text-opacity));
|
color: rgb(203 213 225 / var(--text-opacity));
|
||||||
}
|
}
|
||||||
a.home-button:hover {
|
a.home-button:hover {
|
||||||
--bg-opacity: 0.5;
|
--bg-opacity: 0.5;
|
||||||
}
|
}
|
||||||
a.text-grey {
|
a.text-grey {
|
||||||
--bg-opacity: 1;
|
--bg-opacity: 1;
|
||||||
background-color: rgb(56 76 109/var(--bg-opacity));
|
background-color: rgb(56 76 109 / var(--bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav .max-container {
|
.header-nav .max-container {
|
||||||
padding: 1.8rem 1.8rem 0;
|
padding: 1.8rem 1.8rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a {
|
.header-nav .max-container,
|
||||||
|
.header-nav .logo,
|
||||||
|
.header-nav .menu,
|
||||||
|
.header-nav .menu a {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -409,17 +457,19 @@ a.text-grey {
|
|||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav .menu a:hover, .header-nav .menu button:hover {
|
.header-nav .menu a:hover,
|
||||||
|
.header-nav .menu button:hover {
|
||||||
background-color: var(--color-neutral-muted);
|
background-color: var(--color-neutral-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav .menu a, .header-nav .menu button {
|
.header-nav .menu a,
|
||||||
|
.header-nav .menu button {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.75rem;
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -441,7 +491,8 @@ a.text-grey {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav a, .header-nav a:visited {
|
.header-nav a,
|
||||||
|
.header-nav a:visited {
|
||||||
color: var(--color-fg-default);
|
color: var(--color-fg-default);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
@ -474,6 +525,66 @@ a.text-grey {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.menu-tocs {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 88;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.menu-tocs:hover > .menu-modal {
|
||||||
|
display: block;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.3rem;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: var(--color-canvas-subtle);
|
||||||
|
box-shadow: 0 8px 24px rgba(var(--box-shadow) / 0.2);
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-btn {
|
||||||
|
border: 1px solid var(--color-border-default);
|
||||||
|
display: flex;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-left: -3rem;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal {
|
||||||
|
width: 260px;
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal a + a {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal a:hover {
|
||||||
|
background-color: var(--color-neutral-muted);
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal a.is-active-link {
|
||||||
|
background-color: var(--color-border-muted);
|
||||||
|
text-decoration-color: #10b981;
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal a {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.3rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-tocs > .menu-modal a.leve2 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-tocs > .menu-modal a.leve3 {
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
}
|
||||||
|
.menu-tocs > .menu-modal a.leve4,
|
||||||
|
.menu-tocs > .menu-modal a.leve5,
|
||||||
|
.menu-tocs > .menu-modal a.leve6 {
|
||||||
|
padding-left: 2.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-header.h2wrap > h2 {
|
.wrap-header.h2wrap > h2 {
|
||||||
@ -484,7 +595,8 @@ a.text-grey {
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||||
|
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -495,7 +607,8 @@ a.text-grey {
|
|||||||
color: rgb(148 163 184/1);
|
color: rgb(148 163 184/1);
|
||||||
}
|
}
|
||||||
|
|
||||||
body:not(.home) .h2wrap > h2 a::after, body:not(.home) .h3wrap > h3 a::after {
|
body:not(.home) .h2wrap > h2 a::after,
|
||||||
|
body:not(.home) .h3wrap > h3 a::after {
|
||||||
content: '#';
|
content: '#';
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
color: rgb(16 185 129/1);
|
color: rgb(16 185 129/1);
|
||||||
@ -535,7 +648,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p {
|
.wrap-header.h3wrap > .wrap-body p,
|
||||||
|
.wrap-header.h4wrap > .wrap-body p {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
@ -550,7 +664,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
background-color: var(--color-bg-subtle);
|
background-color: var(--color-bg-subtle);
|
||||||
color: rgb(30 41 59/0);
|
color: rgb(30 41 59/0);
|
||||||
content: '-';
|
content: '-';
|
||||||
line-height: 1.50rem;
|
line-height: 1.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
@ -588,7 +702,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
.h4wrap > .wrap-body ul,
|
.h4wrap > .wrap-body ul,
|
||||||
.h4wrap > .wrap-body ol,
|
.h4wrap > .wrap-body ol,
|
||||||
.h4wrap > .wrap-body dl,
|
.h4wrap > .wrap-body dl,
|
||||||
|
|
||||||
.h3wrap > .wrap-body ul,
|
.h3wrap > .wrap-body ul,
|
||||||
.h3wrap > .wrap-body ol,
|
.h3wrap > .wrap-body ol,
|
||||||
.h3wrap > .wrap-body dl {
|
.h3wrap > .wrap-body dl {
|
||||||
@ -596,7 +709,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
list-style-position: outside;
|
list-style-position: outside;
|
||||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4wrap > .wrap-body ul + hr {
|
.h4wrap > .wrap-body ul + hr {
|
||||||
@ -618,7 +731,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
border-bottom: solid 1px var(--color-border-muted);
|
border-bottom: solid 1px var(--color-border-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2wrap-body ul:not(.style-none)>li::before {
|
.h2wrap-body ul:not(.style-none) > li::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -654,13 +767,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
line-height: 1.30rem;
|
line-height: 1.3rem;
|
||||||
border: 2px solid #228e6c;
|
border: 2px solid #228e6c;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
left: -14px;
|
left: -14px;
|
||||||
}
|
}
|
||||||
.h2wrap-body ul.style-timeline li:last-child {
|
.h2wrap-body ul.style-timeline li:last-child {
|
||||||
border-image: linear-gradient(to bottom,#46c69e96,rgba(0,0,0,0)) 1 100%;
|
border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
|
||||||
}
|
}
|
||||||
.h2wrap-body ul.style-timeline li {
|
.h2wrap-body ul.style-timeline li {
|
||||||
border-bottom: 0 !important;
|
border-bottom: 0 !important;
|
||||||
@ -703,7 +816,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3wrap hr, .h3wrap-body hr {
|
.h3wrap hr,
|
||||||
|
.h3wrap-body hr {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #e5e7eb;
|
border-color: #e5e7eb;
|
||||||
@ -712,7 +826,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
|
|
||||||
.h2wrap-body {
|
.h2wrap-body {
|
||||||
font-size: 0.925rem;
|
font-size: 0.925rem;
|
||||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -724,7 +838,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2wrap-body > .wrap .wrap-body > *:last-child {
|
.h2wrap-body > .wrap .wrap-body > *:last-child {
|
||||||
@ -741,33 +855,87 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; }
|
.cols-1 {
|
||||||
.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
|
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||||||
.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
|
}
|
||||||
.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
|
.cols-2 {
|
||||||
.cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||||
.cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
|
}
|
||||||
.cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) !important; }
|
.cols-3 {
|
||||||
.cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
|
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||||
.cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) !important; }
|
}
|
||||||
.col-span-2 { grid-column: span 2/span 2; }
|
.cols-4 {
|
||||||
.col-span-3 { grid-column: span 3/span 3; }
|
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||||
.col-span-4 { grid-column: span 4/span 4; }
|
}
|
||||||
.col-span-5 { grid-column: span 5/span 5; }
|
.cols-5 {
|
||||||
.col-span-6 { grid-column: span 6/span 6; }
|
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
||||||
.col-span-7 { grid-column: span 7/span 7; }
|
}
|
||||||
.col-span-8 { grid-column: span 8/span 8; }
|
.cols-6 {
|
||||||
.col-span-9 { grid-column: span 9/span 9; }
|
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
|
||||||
.col-span-10 { grid-column: span 10/span 10; }
|
}
|
||||||
.row-span-2 { grid-row: span 2/span 2; }
|
.cols-7 {
|
||||||
.row-span-3 { grid-row: span 3/span 3; }
|
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
|
||||||
.row-span-4 { grid-row: span 4/span 4; }
|
}
|
||||||
.row-span-5 { grid-row: span 5/span 5; }
|
.cols-8 {
|
||||||
.row-span-6 { grid-row: span 6/span 6; }
|
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
|
||||||
.row-span-7 { grid-row: span 7/span 7; }
|
}
|
||||||
.row-span-8 { grid-row: span 8/span 8; }
|
.cols-9 {
|
||||||
.row-span-9 { grid-row: span 9/span 9; }
|
grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
|
||||||
.row-span-10 { grid-row: span 10/span 10; }
|
}
|
||||||
|
.col-span-2 {
|
||||||
|
grid-column: span 2 / span 2;
|
||||||
|
}
|
||||||
|
.col-span-3 {
|
||||||
|
grid-column: span 3 / span 3;
|
||||||
|
}
|
||||||
|
.col-span-4 {
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.col-span-5 {
|
||||||
|
grid-column: span 5 / span 5;
|
||||||
|
}
|
||||||
|
.col-span-6 {
|
||||||
|
grid-column: span 6 / span 6;
|
||||||
|
}
|
||||||
|
.col-span-7 {
|
||||||
|
grid-column: span 7 / span 7;
|
||||||
|
}
|
||||||
|
.col-span-8 {
|
||||||
|
grid-column: span 8 / span 8;
|
||||||
|
}
|
||||||
|
.col-span-9 {
|
||||||
|
grid-column: span 9 / span 9;
|
||||||
|
}
|
||||||
|
.col-span-10 {
|
||||||
|
grid-column: span 10 / span 10;
|
||||||
|
}
|
||||||
|
.row-span-2 {
|
||||||
|
grid-row: span 2 / span 2;
|
||||||
|
}
|
||||||
|
.row-span-3 {
|
||||||
|
grid-row: span 3 / span 3;
|
||||||
|
}
|
||||||
|
.row-span-4 {
|
||||||
|
grid-row: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.row-span-5 {
|
||||||
|
grid-row: span 5 / span 5;
|
||||||
|
}
|
||||||
|
.row-span-6 {
|
||||||
|
grid-row: span 6 / span 6;
|
||||||
|
}
|
||||||
|
.row-span-7 {
|
||||||
|
grid-row: span 7 / span 7;
|
||||||
|
}
|
||||||
|
.row-span-8 {
|
||||||
|
grid-row: span 8 / span 8;
|
||||||
|
}
|
||||||
|
.row-span-9 {
|
||||||
|
grid-row: span 9 / span 9;
|
||||||
|
}
|
||||||
|
.row-span-10 {
|
||||||
|
grid-row: span 10 / span 10;
|
||||||
|
}
|
||||||
|
|
||||||
.wrap-text {
|
.wrap-text {
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
@ -790,7 +958,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: opacity .6s;
|
transition: opacity 0.6s;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
||||||
width: 220px;
|
width: 220px;
|
||||||
@ -799,7 +967,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
margin-left: -110px;
|
margin-left: -110px;
|
||||||
}
|
}
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip .tooltiptext::after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -815,17 +983,34 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 代码高亮 Start */
|
/* 代码高亮 Start */
|
||||||
.token.comment, .token.prolog, .token.doctype, .token.cdata {
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
color: var(--color-prettylights-syntax-comment);
|
color: var(--color-prettylights-syntax-comment);
|
||||||
}
|
}
|
||||||
.token.namespace { opacity: 0.7; }
|
.token.namespace {
|
||||||
.token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted {
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.token.tag,
|
||||||
|
.token.selector,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
color: var(--color-prettylights-syntax-entity-tag);
|
color: var(--color-prettylights-syntax-entity-tag);
|
||||||
}
|
}
|
||||||
.token.maybe-class-name {
|
.token.maybe-class-name {
|
||||||
color: var(--color-prettylights-syntax-entity);
|
color: var(--color-prettylights-syntax-entity);
|
||||||
}
|
}
|
||||||
.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin {
|
.token.property-access,
|
||||||
|
.token.operator,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.selector .token.class,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin {
|
||||||
color: var(--color-prettylights-syntax-constant);
|
color: var(--color-prettylights-syntax-constant);
|
||||||
}
|
}
|
||||||
.token.deleted {
|
.token.deleted {
|
||||||
@ -850,13 +1035,23 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
.token.variable {
|
.token.variable {
|
||||||
color: var(--color-prettylights-syntax-constant);
|
color: var(--color-prettylights-syntax-constant);
|
||||||
}
|
}
|
||||||
.token.entity, .token.url, .language-css .token.string, .style .token.string {
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
color: var(--color-prettylights-syntax-string);
|
color: var(--color-prettylights-syntax-string);
|
||||||
}
|
}
|
||||||
.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name {
|
.token.color,
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
color: var(--color-prettylights-syntax-string);
|
color: var(--color-prettylights-syntax-string);
|
||||||
}
|
}
|
||||||
.token.rule, .token.regex, .token.important, .token.keyword {
|
.token.rule,
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.keyword {
|
||||||
color: var(--color-prettylights-syntax-keyword);
|
color: var(--color-prettylights-syntax-keyword);
|
||||||
}
|
}
|
||||||
.token.module {
|
.token.module {
|
||||||
@ -881,9 +1076,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
color: var(--color-prettylights-syntax-variable);
|
color: var(--color-prettylights-syntax-variable);
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.important, .token.bold { font-weight: bold; }
|
.token.important,
|
||||||
.token.italic { font-style: italic; }
|
.token.bold {
|
||||||
.token.entity { cursor: help; }
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
.highlight-line {
|
.highlight-line {
|
||||||
background-color: var(--color-neutral-muted);
|
background-color: var(--color-neutral-muted);
|
||||||
@ -923,7 +1125,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
.header-nav .max-container {
|
.header-nav .max-container {
|
||||||
padding-top: 0.85rem;
|
padding-top: 0.85rem;
|
||||||
}
|
}
|
||||||
.header-nav .menu a, .header-nav .menu button {
|
.header-nav .menu a,
|
||||||
|
.header-nav .menu button {
|
||||||
padding: 0.2rem 0.3rem;
|
padding: 0.2rem 0.3rem;
|
||||||
}
|
}
|
||||||
.wrap-header.h1wrap > h1 {
|
.wrap-header.h1wrap > h1 {
|
||||||
@ -966,11 +1169,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
table.auto-wrap thead {
|
table.auto-wrap thead {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
table.auto-wrap td, table.auto-wrap th {
|
table.auto-wrap td,
|
||||||
|
table.auto-wrap th {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
table td + td, table th + th {
|
table td + td,
|
||||||
|
table th + th {
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
}
|
}
|
||||||
table td:first-child {
|
table td:first-child {
|
||||||
@ -983,6 +1188,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.home-card {
|
.home-card {
|
||||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
|
|
||||||
const scripts = `
|
const scripts = `
|
||||||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||||||
window.onhashchange = function () {
|
window.onhashchange = function () {
|
||||||
anchorPoint()
|
anchorPoint()
|
||||||
|
updateAnchor()
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
function anchorPoint() {
|
function anchorPoint() {
|
||||||
@ -16,15 +16,37 @@ function anchorPoint() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
anchorPoint();
|
anchorPoint();
|
||||||
|
|
||||||
|
function updateAnchor(element) {
|
||||||
|
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||||
|
anchorContainer.forEach((tocanchor) => {
|
||||||
|
tocanchor.classList.remove('is-active-link');
|
||||||
|
});
|
||||||
|
const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
|
||||||
|
console.log('anchor', anchor)
|
||||||
|
if (anchor) {
|
||||||
|
anchor.classList.add('is-active-link');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// toc 定位
|
||||||
|
updateAnchor()
|
||||||
|
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||||
|
anchor.forEach((item) => {
|
||||||
|
item.addEventListener('click', (e) => {
|
||||||
|
updateAnchor()
|
||||||
|
})
|
||||||
|
})
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export function anchorPoint() {
|
export function anchorPoint() {
|
||||||
return {
|
return {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'script',
|
tagName: 'script',
|
||||||
children: [{
|
children: [
|
||||||
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
value: scripts,
|
value: scripts,
|
||||||
}]
|
},
|
||||||
}
|
],
|
||||||
|
};
|
||||||
}
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
export function getChilds(data = [], level, result = []) {
|
export function getChilds(data = [], level, result = []) {
|
||||||
for (let i = 1; i <= data.length; i++) {
|
for (let i = 1; i <= data.length; i++) {
|
||||||
const titleNum = Number(data[i]?.tagName?.replace(/^h/, ''));
|
const titleNum = Number(data[i]?.tagName?.replace(/^h/, ''));
|
||||||
|
|||||||
@ -21,27 +21,27 @@ const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
|
|||||||
export function darkMode() {
|
export function darkMode() {
|
||||||
const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
|
const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
|
||||||
const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
|
const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
|
||||||
const sunNode = getSVGNode(iconSunPath)
|
const sunNode = getSVGNode(iconSunPath);
|
||||||
const moonNode = getSVGNode(iconMoonPath)
|
const moonNode = getSVGNode(iconMoonPath);
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'button',
|
tagName: 'button',
|
||||||
properties: {
|
properties: {
|
||||||
id: 'darkMode',
|
id: 'darkMode',
|
||||||
type: 'button'
|
type: 'button',
|
||||||
},
|
},
|
||||||
children: [
|
children: [...sunNode, ...moonNode],
|
||||||
...sunNode,
|
},
|
||||||
...moonNode
|
{
|
||||||
]
|
|
||||||
}, {
|
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'script',
|
tagName: 'script',
|
||||||
children: [{
|
children: [
|
||||||
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
value: scripts,
|
value: scripts,
|
||||||
}]
|
},
|
||||||
}
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,21 +1,24 @@
|
|||||||
import fs from 'fs-extra';
|
import fs from 'fs-extra';
|
||||||
|
import path from 'path';
|
||||||
import rehypeParse from 'rehype-parse';
|
import rehypeParse from 'rehype-parse';
|
||||||
import {unified} from 'unified';
|
import { unified } from 'unified';
|
||||||
import { VFile } from 'vfile';
|
import { VFile } from 'vfile';
|
||||||
|
|
||||||
|
export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
|
||||||
|
|
||||||
export function getSVGNode(iconPath, space = 'svg') {
|
export function getSVGNode(iconPath, space = 'svg') {
|
||||||
const svgStr = fs.readFileSync(iconPath);
|
const svgStr = fs.readFileSync(iconPath);
|
||||||
const processor = unified().use(rehypeParse,{ fragment: true, space })
|
const processor = unified().use(rehypeParse, { fragment: true, space });
|
||||||
const file = new VFile();
|
const file = new VFile();
|
||||||
file.value = svgStr.toString();
|
file.value = svgStr.toString();
|
||||||
const hastNode = processor.runSync(processor.parse(file), file);
|
const hastNode = processor.runSync(processor.parse(file), file);
|
||||||
return hastNode.children || []
|
return hastNode.children || [];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getVNode(str = '', space = 'html') {
|
export function getVNode(str = '', space = 'html') {
|
||||||
const processor = unified().use(rehypeParse,{ fragment: true, space })
|
const processor = unified().use(rehypeParse, { fragment: true, space });
|
||||||
const file = new VFile();
|
const file = new VFile();
|
||||||
file.value = str.toString();
|
file.value = str.toString();
|
||||||
const hastNode = processor.runSync(processor.parse(file), file);
|
const hastNode = processor.runSync(processor.parse(file), file);
|
||||||
return hastNode.children || []
|
return hastNode.children || [];
|
||||||
}
|
}
|
||||||
@ -1,5 +1,70 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import { getCodeString } from 'rehype-rewrite';
|
||||||
import { panelAddNumber } from './panelAddNumber.mjs';
|
import { panelAddNumber } from './panelAddNumber.mjs';
|
||||||
import { getChilds, getHeader } from './childs.mjs';
|
import { getChilds, getHeader } from './childs.mjs';
|
||||||
|
import { ICONS_PATH, getSVGNode } from './getSVGNode.mjs';
|
||||||
|
|
||||||
|
export const titleNum = (tagName = '') => Number(tagName.replace(/^h/, ''));
|
||||||
|
|
||||||
|
export function getTocsTitleNode(arr = [], result = []) {
|
||||||
|
arr.forEach(({ tagName, type, properties, children }) => {
|
||||||
|
if (/^h[23456]/.test(tagName)) {
|
||||||
|
const num = titleNum(tagName);
|
||||||
|
const props = { 'aria-hidden': 'true', class: `leve${num} tocs-link`, href: '#' + (properties.id || '') };
|
||||||
|
const title = getCodeString(children || []);
|
||||||
|
result.push({ tagName: 'a', type, properties: props, children: [{ type: 'text', value: title || ' ' }] });
|
||||||
|
} else if (children?.length > 0) {
|
||||||
|
result = result.concat(getTocsTitleNode(children));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
|
||||||
|
const childs = tocsData.map((item) => {
|
||||||
|
if (item.properties?.class?.includes('h1wrap-body')) {
|
||||||
|
isDone = true;
|
||||||
|
}
|
||||||
|
if (!isDone && item.children) {
|
||||||
|
item.children = addTocsInWarp([...item.children], menuData, isDone);
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
if (isDone) {
|
||||||
|
childs.splice(1, 0, menuData);
|
||||||
|
}
|
||||||
|
return childs;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getTocsTitleNodeWarpper = (children = []) => {
|
||||||
|
const iconPath = path.resolve(ICONS_PATH, `menu.svg`);
|
||||||
|
const svgNode = getSVGNode(iconPath);
|
||||||
|
return {
|
||||||
|
type: 'element',
|
||||||
|
tagName: 'div',
|
||||||
|
properties: {
|
||||||
|
class: 'menu-tocs',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'element',
|
||||||
|
tagName: 'div',
|
||||||
|
properties: {
|
||||||
|
class: 'menu-btn',
|
||||||
|
},
|
||||||
|
children: [...svgNode],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'element',
|
||||||
|
tagName: 'div',
|
||||||
|
properties: {
|
||||||
|
class: 'menu-modal',
|
||||||
|
},
|
||||||
|
children: children,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
/** Markdown 文档转成树形结构 */
|
/** Markdown 文档转成树形结构 */
|
||||||
export function getTocsTree(arr = [], result = []) {
|
export function getTocsTree(arr = [], result = []) {
|
||||||
@ -14,16 +79,14 @@ export function getTocsTree(arr = [], result = []) {
|
|||||||
if (level === -1) {
|
if (level === -1) {
|
||||||
level = toc.number;
|
level = toc.number;
|
||||||
}
|
}
|
||||||
const titleNum = Number(toc.tagName?.replace(/^h/, ''));
|
if (toc.number === level && titleNum(toc.tagName) === level) {
|
||||||
|
|
||||||
if (toc.number === level && titleNum === level) {
|
|
||||||
const header = getHeader(data.slice(n), level);
|
const header = getHeader(data.slice(n), level);
|
||||||
const wrapCls = ['wrap'];
|
const wrapCls = ['wrap'];
|
||||||
const headerCls = ['wrap-header', `h${level}wrap`];
|
const headerCls = ['wrap-header', `h${level}wrap`];
|
||||||
|
|
||||||
if (level === 1) wrapCls.push('max-container');
|
if (level === 1) wrapCls.push('max-container');
|
||||||
const wrapStyle = toc.properties['wrap-style'];
|
const wrapStyle = toc.properties['wrap-style'];
|
||||||
delete toc.properties['wrap-style']
|
delete toc.properties['wrap-style'];
|
||||||
const wrapClass = toc.properties['wrap-class'];
|
const wrapClass = toc.properties['wrap-class'];
|
||||||
if (wrapClass) wrapCls.push(wrapClass);
|
if (wrapClass) wrapCls.push(wrapClass);
|
||||||
delete toc.properties['wrap-class'];
|
delete toc.properties['wrap-class'];
|
||||||
@ -42,26 +105,24 @@ export function getTocsTree(arr = [], result = []) {
|
|||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
properties: { class: 'wrap-body' },
|
properties: { class: 'wrap-body' },
|
||||||
children: [
|
children: [...header],
|
||||||
...header
|
},
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
],
|
|
||||||
}
|
|
||||||
const childs = getChilds([...data.slice(n + 1)], level);
|
const childs = getChilds([...data.slice(n + 1)], level);
|
||||||
const resultChilds = getTocsTree(childs);
|
const resultChilds = getTocsTree(childs);
|
||||||
if (resultChilds.length > 0) {
|
if (resultChilds.length > 0) {
|
||||||
const bodyStyle = toc.properties['body-style'];
|
const bodyStyle = toc.properties['body-style'];
|
||||||
delete toc.properties['body-style']
|
delete toc.properties['body-style'];
|
||||||
const bodyClass = toc.properties['body-class'];
|
const bodyClass = toc.properties['body-class'];
|
||||||
delete toc.properties['body-class']
|
delete toc.properties['body-class'];
|
||||||
panle.children = panle.children.concat({
|
panle.children = panle.children.concat({
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
||||||
children: [...resultChilds]
|
children: [...resultChilds],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
result.push(panle);
|
result.push(panle);
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import fs from 'fs-extra';
|
import fs from 'fs-extra';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { getSVGNode } from './getSVGNode.mjs';
|
import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
|
||||||
|
|
||||||
export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
|
|
||||||
|
|
||||||
export function homeCardIcons(node, parent, isHome) {
|
export function homeCardIcons(node, parent, isHome) {
|
||||||
if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
|
if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
|
||||||
@ -17,16 +15,16 @@ export function homeCardIcons(node, parent, isHome) {
|
|||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'span',
|
tagName: 'span',
|
||||||
children: child.children,
|
children: child.children,
|
||||||
}
|
};
|
||||||
if (iconExist) {
|
if (iconExist) {
|
||||||
const svgNode = getSVGNode(iconPath);
|
const svgNode = getSVGNode(iconPath);
|
||||||
child.children = [ ...svgNode, labelNode ];
|
child.children = [...svgNode, labelNode];
|
||||||
} else {
|
} else {
|
||||||
const svgNode = getSVGNode(iconDefaultPath);
|
const svgNode = getSVGNode(iconDefaultPath);
|
||||||
child.children = [ ...svgNode, labelNode ];
|
child.children = [...svgNode, labelNode];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return child
|
return child;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
/** 标记 Number */
|
/** 标记 Number */
|
||||||
export function panelAddNumber(arr = [], result = []) {
|
export function panelAddNumber(arr = [], result = []) {
|
||||||
let n = 0;
|
let n = 0;
|
||||||
@ -10,9 +9,9 @@ export function panelAddNumber(arr = [], result = []) {
|
|||||||
level = titleNum;
|
level = titleNum;
|
||||||
}
|
}
|
||||||
if (toc) {
|
if (toc) {
|
||||||
result.push({ ...toc, number: level })
|
result.push({ ...toc, number: level });
|
||||||
}
|
}
|
||||||
n++;
|
n++;
|
||||||
}
|
}
|
||||||
return result
|
return result;
|
||||||
}
|
}
|
||||||
@ -1,14 +1,22 @@
|
|||||||
|
import { visit } from 'unist-util-visit';
|
||||||
import { getCodeString } from 'rehype-rewrite';
|
import { getCodeString } from 'rehype-rewrite';
|
||||||
import { getVNode } from './getSVGNode.mjs';
|
import { getVNode } from './getSVGNode.mjs';
|
||||||
|
|
||||||
export function rehypePreviewHTML(node, parent) {
|
export function rehypePreviewHTML() {
|
||||||
if (node.type === 'element' && node.tagName === 'pre' && node.properties?.className?.includes('language-html')) {
|
return (tree) => {
|
||||||
|
visit(tree, (node, index, parent) => {
|
||||||
|
if (node.type === 'element' && node.tagName === 'pre') {
|
||||||
const child = node.children[0];
|
const child = node.children[0];
|
||||||
if (child?.tagName === 'code' && child.data?.meta === 'preview') {
|
if (
|
||||||
const code = getCodeString(node.children)
|
child.properties?.className?.includes('language-html') &&
|
||||||
const vnode = getVNode(code || '')
|
child?.tagName === 'code' &&
|
||||||
node.children = vnode
|
child.data?.meta === 'preview'
|
||||||
|
) {
|
||||||
|
const code = getCodeString(child.children);
|
||||||
|
const vnode = getVNode(code || '');
|
||||||
|
node.children = vnode;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
}
|
}
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import fs from 'fs-extra';
|
import fs from 'fs-extra';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { getSVGNode } from './getSVGNode.mjs';
|
import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
|
||||||
import { ICONS_PATH } from './homeCardIcons.mjs';
|
|
||||||
|
|
||||||
export function rehypeTitle(node, iconName) {
|
export function rehypeTitle(node, iconName) {
|
||||||
if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {
|
if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {
|
||||||
@ -10,10 +9,10 @@ export function rehypeTitle(node, iconName) {
|
|||||||
const iconExist = fs.existsSync(iconPath);
|
const iconExist = fs.existsSync(iconPath);
|
||||||
if (iconExist) {
|
if (iconExist) {
|
||||||
const svgNode = getSVGNode(iconPath);
|
const svgNode = getSVGNode(iconPath);
|
||||||
node.children = [ ...svgNode, ...node.children ];
|
node.children = [...svgNode, ...node.children];
|
||||||
} else {
|
} else {
|
||||||
const svgNode = getSVGNode(iconDefaultPath);
|
const svgNode = getSVGNode(iconDefaultPath);
|
||||||
node.children = [ ...svgNode, ...node.children ];
|
node.children = [...svgNode, ...node.children];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,10 @@
|
|||||||
export function rehypeUrls(node) {
|
export function rehypeUrls(node) {
|
||||||
if (node.type === 'element' && node.properties?.href && /.md/.test(node.properties.href) && !/^(https?:\/\/)/.test(node.properties.href)) {
|
if (
|
||||||
|
node.type === 'element' &&
|
||||||
|
node.properties?.href &&
|
||||||
|
/.md/.test(node.properties.href) &&
|
||||||
|
!/^(https?:\/\/)/.test(node.properties.href)
|
||||||
|
) {
|
||||||
let href = node.properties.href;
|
let href = node.properties.href;
|
||||||
node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html');
|
node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,12 +17,12 @@ export function tooltips(node, index, parent) {
|
|||||||
const result = [];
|
const result = [];
|
||||||
let recordPos = false; // 记录位置
|
let recordPos = false; // 记录位置
|
||||||
let tooltipNode = null;
|
let tooltipNode = null;
|
||||||
for(let i = childs.length; i > -1; i--) {
|
for (let i = childs.length; i > -1; i--) {
|
||||||
const node = childs[i];
|
const node = childs[i];
|
||||||
// 记录 tooltip 的开始位置
|
// 记录 tooltip 的开始位置
|
||||||
if (node?.type === 'comment' && node?.value === 'rehype:tooltips') {
|
if (node?.type === 'comment' && node?.value === 'rehype:tooltips') {
|
||||||
recordPos = true;
|
recordPos = true;
|
||||||
continue
|
continue;
|
||||||
}
|
}
|
||||||
// 记录 tooltip 的 node
|
// 记录 tooltip 的 node
|
||||||
if (recordPos && !tooltipNode) {
|
if (recordPos && !tooltipNode) {
|
||||||
@ -33,24 +33,24 @@ export function tooltips(node, index, parent) {
|
|||||||
tooltipNode = node;
|
tooltipNode = node;
|
||||||
tooltipNode.properties['class'] = 'tooltiptext';
|
tooltipNode.properties['class'] = 'tooltiptext';
|
||||||
delete tooltipNode.position;
|
delete tooltipNode.position;
|
||||||
continue
|
continue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 将 tooltip 节点，插入到下一个 element 节点的子节点中
|
// 将 tooltip 节点，插入到下一个 element 节点的子节点中
|
||||||
if (tooltipNode) {
|
if (tooltipNode) {
|
||||||
if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
|
if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
|
||||||
recordPos = false;
|
recordPos = false;
|
||||||
tooltipNode = null
|
tooltipNode = null;
|
||||||
}
|
}
|
||||||
if (tooltipNode && node?.type === 'element') {
|
if (tooltipNode && node?.type === 'element') {
|
||||||
recordPos = false;
|
recordPos = false;
|
||||||
node.properties['class'] = 'tooltip';
|
node.properties['class'] = 'tooltip';
|
||||||
node.children.push(tooltipNode);
|
node.children.push(tooltipNode);
|
||||||
tooltipNode = null
|
tooltipNode = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!recordPos && node) {
|
if (!recordPos && node) {
|
||||||
result.push(node)
|
result.push(node);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (parent) {
|
if (parent) {
|
||||||
@ -59,6 +59,4 @@ export function tooltips(node, index, parent) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getPreviewNode() {
|
export function getPreviewNode() {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@ -3,17 +3,18 @@ import chokidar from 'chokidar';
|
|||||||
import { getStat } from 'recursive-readdir-files';
|
import { getStat } from 'recursive-readdir-files';
|
||||||
import { run, DOCS, createHTML } from './index.mjs';
|
import { run, DOCS, createHTML } from './index.mjs';
|
||||||
|
|
||||||
;(async () => {
|
(async () => {
|
||||||
await run();
|
await run();
|
||||||
const homeMdPath = path.relative(process.cwd(), 'README.md')
|
const homeMdPath = path.relative(process.cwd(), 'README.md');
|
||||||
const watcher = chokidar.watch([DOCS, homeMdPath], {
|
const watcher = chokidar.watch([DOCS, homeMdPath], {
|
||||||
ignored: /(^|[\/\\])\../, // ignore dotfiles
|
ignored: /(^|[\/\\])\../, // ignore dotfiles
|
||||||
persistent: true
|
persistent: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
watcher.on('change', async (path) => {
|
watcher
|
||||||
const stats = await getStat(path)
|
.on('change', async (path) => {
|
||||||
|
const stats = await getStat(path);
|
||||||
createHTML([stats]);
|
createHTML([stats]);
|
||||||
})
|
})
|
||||||
.on('error', error => console.log(`Watcher error: ${error}`))
|
.on('error', (error) => console.log(`Watcher error: ${error}`));
|
||||||
})();
|
})();
|
||||||
Reference in New Issue
Block a user