From efa51c0a06a8955cde339a7ae145ad2f1f896937 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Thu, 29 Sep 2022 02:40:26 +0800 Subject: [PATCH] feat: add `CONTRIBUTING.md` document. --- CONTRIBUTING.md | 42 +++++ docs/cron.md | 6 +- docs/docker.md | 16 -- docs/git.md | 2 - docs/javascript.md | 20 -- docs/jest.md | 7 - docs/json.md | 27 +-- docs/markdown.md | 9 +- docs/package.json.md | 12 -- docs/quickreference.md | 409 +++++++++++++++++++++++++++++++++++++++++ docs/semver.md | 9 +- docs/sketch.md | 11 +- docs/toml.md | 3 - docs/typescript.md | 11 -- docs/vscode.md | 13 +- package.json | 2 +- scripts/create.mjs | 9 +- scripts/index.mjs | 2 +- scripts/style.css | 177 ++++++++++-------- 19 files changed, 573 insertions(+), 214 deletions(-) create mode 100644 CONTRIBUTING.md create mode 100644 docs/quickreference.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..b8961e9 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,42 @@ +Contributing 贡献 +==== + +感谢您对**备忘清单**贡献的兴趣👍👍，是像您这样的人使 [`Quick Reference`](https://jaywcjlove.github.io/reference) 成为如此出色的网站 🎉🎉。随时提交问题和增强请求。 + +`docs/{filename}.md` 文件将被处理成备忘清单，让我们创建或编辑一个 `markdown` 文件： + +## 前沿问题 + +```markdown +备忘清单 标题 +=== + +这是您可以在 Quick Reference 备忘清单上使用的样式参考！【备忘清单介绍】 +``` + +只需要 `标题

` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。 + +## CSS 类注释 + +[`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html + +最后，参考现有备忘清单的源代码是一个好习惯！ + +## 首页导航 + +[`Quick Reference`](https://jaywcjlove.github.io/reference) 的首页存放在仓库的根目录 `README.md`，[`Quick Reference`](https://jaywcjlove.github.io/reference) 是通过这个 `README.md` 自动生成首页导航，下面是导航实例： + +```markdown +## Linux 命令 + +[Cron](./docs/cron.md) +[Git](./docs/git.md) + +``` + +## 本地开发 + +```bash +npm i # 安装依赖 +npm run build # 编译生成静态页面 +``` \ No newline at end of file diff --git a/docs/cron.md b/docs/cron.md index bd65cbb..0f0a49e 100644 --- a/docs/cron.md +++ b/docs/cron.md @@ -36,6 +36,7 @@ Min Hour Day Mon Weekday | 月份中的某天 | 1 - 31 | , - * ? / L W | | 月 Month | 1 - 12 | , - * / | | 星期几 | 0 - 6 | , - * ? / L # | + ### 示例 @@ -54,7 +55,6 @@ Min Hour Day Mon Weekday | `0 0 0 1 * *` | 每个月的 1 日（每月） | | `0 0 0 1 1 *` | 每年 1 月 1 日（每年） | | `@reboot` | 每次重启 _(非标准)_ | - ### 特殊字符串 @@ -69,6 +69,7 @@ Min Hour Day Mon Weekday | @daily | 每天运行一次，“0 0 * * *” _（非标准）_ | | @midnight | （与@daily 相同）_（非标准）_ | | @hourly | 每小时运行一次，“0 * * * *” _（非标准）_ | + ### Crontab 命令 @@ -80,13 +81,11 @@ Min Hour Day Mon Weekday | `crontab -r` | 删除 crontab 文件。 | | `crontab -v` | 显示您上次编辑 crontab 文件的时间。 _（非标准）_ | | `echo "@reboot echo hi" | crontab` | 轻松添加任务 | - ### 特殊字符 - | 特殊字符 | 说明 | |---------------------|------------| `星号(*)` | 匹配字段中的所有值或任何可能的值。 @@ -96,6 +95,7 @@ Min Hour Day Mon Weekday `L` | 仅允许用于 `月份中的某天` 或 `星期几` 字段，`星期几` 中的 `2L` 表示每个月的最后一个星期二 `井号 (#)` | 仅允许用于 `星期几` 字段，后面必须在 1 到 5 的范围内。例如，`4#1` 表示给定月份的“第一个星期四”。 `问号(?)` | 可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 `月份中的某天` 或 `星期几`。 + ## Also see diff --git a/docs/docker.md b/docs/docker.md index 434ba4b..32d0d34 100644 --- a/docs/docker.md +++ b/docs/docker.md @@ -51,7 +51,6 @@ $ docker run -it -p 8001:8080 --name my-nginx nginx | `docker port ` | 显示容器的端口映射 | | `docker top ` | 列出进程 | | `docker kill ` | 杀死一个容器 | - 参数 `` 可以是容器 id 或名称 @@ -71,7 +70,6 @@ Docker 容器 `docker wait nginx-server` | 阻塞容器 `docker kill nginx-server` | 发送 SIGKILL `docker attach nginx-server` | 连接到现有容器 - ### 说明 @@ -86,7 +84,6 @@ Docker 容器 `docker top nginx-server` | 运行进程 `docker stats nginx-server` | 容器资源使用 `docker diff nginx-server` | 列出对容器所做的更改 - ### 创建容器 @@ -131,9 +128,6 @@ docker rm nginx-server docker update --cpu-shares 512 -m 300M nginx-server ``` - - - Docker Images ---- @@ -151,8 +145,6 @@ Docker Images `docker commit nginx` | 将容器另存为镜像。 `docker tag nginx eon01/nginx` | 标记镜像 `docker push eon01/nginx` | 推送镜像 - - ### 构建镜像 @@ -166,8 +158,6 @@ $ docker build -f myOtherDockerfile . $ curl example.com/remote/Dockerfile | docker build -f - . ``` - - Docker 联网 ---- @@ -228,9 +218,6 @@ docker network create -d overlay \ MyOverlayNetwork ``` - - - 各种各样的 ---- @@ -243,7 +230,6 @@ docker network create -d overlay \ `docker pull user/image ` | 从 docker hub 下载镜像。 `docker login ` | 向 docker hub 进行身份验证 `docker push user/image ` | 将镜像上传到 docker hub。 - ### 注册表命令 @@ -290,8 +276,6 @@ $ docker push eon01/nginx localhost:5000/myadmin/nginx `docker stop -f $(docker ps -a -q)` | 停止所有容器 `docker rm -f $(docker ps -a -q)` | 删除所有容器 `docker rmi -f $(docker images -q)` | 删除所有图像 - - ### 卷 volume diff --git a/docs/git.md b/docs/git.md index 896c046..6ed8905 100644 --- a/docs/git.md +++ b/docs/git.md @@ -29,7 +29,6 @@ $ git clone git_url 指定目录 ### 做出改变 - 在工作目录中**显示**修改后的文件，为您的下一次提交暂存 ```shell @@ -444,7 +443,6 @@ $ git rm -r --cached <目录/文件> ### 修改远程 Commit 记录 - ```shell $ git rebase -i HEAD~3 # 表示要修改当前版本的倒数第三次状态 diff --git a/docs/javascript.md b/docs/javascript.md index d2a1341..4b79676 100644 --- a/docs/javascript.md +++ b/docs/javascript.md @@ -129,7 +129,6 @@ let age = 7; ### 字符串 - ```js var abc = "abcdefghijklmnopqrstuvwxyz"; var esc = 'I don\'t \n know'; // \n 换行 @@ -156,7 +155,6 @@ abc.split(""); ### 数字 - ```js var pi = 3.141; pi.toFixed(0); // 返回 3 @@ -213,7 +211,6 @@ Math.floor(Math.random() * 5) + 1; ### 全局函数 - ```js // 像脚本代码一样执行字符串 eval(); @@ -249,7 +246,6 @@ JavaScript 条件 ### 操作符 - ```javascript true || false; // true 10 > 5 || 10 > 20; // true @@ -403,7 +399,6 @@ const rocketToMars = function() { ### 箭头函数 (ES6) - #### 有两个参数 ```javascript @@ -496,7 +491,6 @@ JavaScript 范围 ### 范围 - ```javascript function myFunction() { var pizzaName = "Margarita"; @@ -795,7 +789,6 @@ for (let index in fruits) { ### label 语句 - ```js var num = 0; @@ -829,7 +822,6 @@ for (let fruit of fruits) { ### for await...of - ```javascript async function* asyncGenerator() { var i = 0; @@ -865,7 +857,6 @@ JavaScript 迭代器(Iterators) ---- - ### 分配给变量的函数 ```javascript @@ -936,7 +927,6 @@ JavaScript 对象(Objects) ---- - ### 访问属性 ```javascript @@ -974,7 +964,6 @@ console.log(classElection.place); // undefined ### 可变的 - ```javascript const student = { name: 'Sheldon', @@ -1043,7 +1032,6 @@ console.log(origObj.color); ### 工厂函数 - ```javascript // 一个接受 'name'，'age' 和 'breed' 的工厂函数， // 参数返回一个自定义的 dog 对象。 @@ -1121,7 +1109,6 @@ JavaScript Classes ### 静态方法/字段 - ```javascript class Dog { constructor(name) { @@ -1313,7 +1300,6 @@ JavaScript Promises ### Promise - 创建 promises ```javascript @@ -1418,7 +1404,6 @@ promise.catch((err) => { ### Promise.all() - ```javascript const promise1 = new Promise((resolve, reject) => { setTimeout(() => { @@ -1459,7 +1444,6 @@ promise.then(res => { ### 避免嵌套的 Promise 和 .then() - ```javascript const promise = new Promise((resolve, reject) => { setTimeout(() => { @@ -1486,7 +1470,6 @@ JavaScript Async-Await ### 异步 - ```javascript function helloWorld() { return new Promise(resolve => { @@ -1613,7 +1596,6 @@ req.send(); ### POST - ```javascript const data = { weight: '1.5 KG' }; const xhr = new XMLHttpRequest(); @@ -1636,7 +1618,6 @@ xhr.onerror = () => { ### fetch api - ```javascript fetch(url, { method: 'POST', @@ -1697,7 +1678,6 @@ fetch('https://api-xxx.com/endpoint', { ### async await 语法 - ```javascript const getSuggestions = async () => { const wordQuery = inputField.value; diff --git a/docs/jest.md b/docs/jest.md index 2b95e98..4fc93b3 100644 --- a/docs/jest.md +++ b/docs/jest.md @@ -19,7 +19,6 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。 ### 测试结构 - ```js describe('makePoniesPink', () => { beforeAll(() => { @@ -152,7 +151,6 @@ expect([{ a: 1 }, { b: 2 }]).toEqual([ ### 模拟函数 - ```js // const fn = jest.fn() // const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+ @@ -295,7 +293,6 @@ expect(fn).toThrowErrorMatchingSnapshot() ### 实例 - 请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。 在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。 @@ -332,7 +329,6 @@ test('async test', async () => { ### done() 回调 - ```js test('async test', (done) => { expect.assertions(1) @@ -373,7 +369,6 @@ test('async test', () => { ### 模拟函数 - ```js test('call the callback', () => { const callback = jest.fn() @@ -506,7 +501,6 @@ const setTitle = jest ### 定时器模拟 - 为使用本机计时器函数（`setTimeout`、`setInterval`、`clearTimeout`、`clearInterval`）的代码编写同步测试。 ```js @@ -558,7 +552,6 @@ Object.defineProperty(location, 'title', { ### 清除和恢复模拟 - 对于一个模拟 ```js diff --git a/docs/json.md b/docs/json.md index d5d80fb..bffd4c2 100644 --- a/docs/json.md +++ b/docs/json.md @@ -44,12 +44,10 @@ JSON 备忘清单 | `Value` | 字符串、数字、布尔值、空值等 | | `Object` | 键/值对的无序集合 | | `null` | Null 或 Empty | - ### 字符串 - + - | | | |------|----------------------------| | `\"` | 双引号 Double quote | @@ -61,7 +59,6 @@ JSON 备忘清单 | `\r` | 回车 Carriage return | | `\t` | 标签 Tab | | `\u` | 后跟四个十六进制数字 | - #### 示例 @@ -84,12 +81,12 @@ Have to be delimited by double quotes ### 数字 - -| Type | Description | -|------------|----------------------------------------| -| `Integer` | Digits 1-9, 0 and positive or negative | -| `Fraction` | Fractions like 0.3, 3.9 | -| `Exponent` | Exponent like e, e+, e-, E, E+, E | + 类型 | 说明 +-----|------ +`Integer` | 数字 1-9、0 和正数或负数 +`Fraction` | 0.3、3.9 等分数 +`Exponent` | 指数，如 e、e+、e-、E、E+、E + #### 示例 @@ -226,12 +223,10 @@ let myObject = { | `myObject.age` | 39 | | `myObject.other` | undefined | | `myObject[0]` | undefined | - ### 访问嵌套 - + - ```javascript let myObject = { "ref": { @@ -270,12 +265,10 @@ let myObject = { | `myObject.jdoe` | ["Jason", "Doe", 39 ...] | | `myObject.jsmith[3]` | "F" | | `myObject[1]` | undefined | - ### 访问对象数组 - + - ```javascript let myArray = [ { @@ -313,7 +306,6 @@ let myArray = [ | `myArray[1][2]` | 42 | | `myArray[3]` | undefined | | `myArray[3].gender` | TypeError: Cannot read... | - ### 访问阵列 @@ -335,7 +327,6 @@ let myArray = [ | `myArray[1]` | "Doe" | | `myArray[5]` | true | | `myArray[6]` | undefined | - 另见 diff --git a/docs/markdown.md b/docs/markdown.md index 2bf40d2..e77500f 100644 --- a/docs/markdown.md +++ b/docs/markdown.md @@ -42,9 +42,8 @@ Header 2 ``` ### 无序列表 - + - ```markdown * Item 1 * Item 2 @@ -166,9 +165,8 @@ console.log("This is a block code") ``` ### 表格 - + - ```markdown | 左栏 | 中间栏 | 右栏 | |:------------|:-------------:|-------------:| @@ -188,9 +186,8 @@ console.log("This is a block code") Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/) ### 图片 - + - ```markdown ![GitHub Logo](/images/logo.png) diff --git a/docs/package.json.md b/docs/package.json.md index bb3470a..7c85977 100644 --- a/docs/package.json.md +++ b/docs/package.json.md @@ -51,7 +51,6 @@ package.json 备忘清单 ### 安装 `name` 包 - ```sh yarn add [包名] # or @@ -89,7 +88,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `license` - 所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。 ```json @@ -140,7 +138,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `repository` - ```json { "repository": { @@ -188,7 +185,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `contributors` - ```json { "contributors": [ @@ -290,7 +286,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `esnext` - 完整的[提案在这里](http://2ality.com/2017/04/transpiling-dependencies-babel.html)。 简短说明： - `esnext`：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。 @@ -358,7 +353,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### 特定的 `scripts` - 对于以下脚本，`npm` 支持 `package.json` 文件的 `scripts` 默认命令字段： - `prepublish`: 在打包并发布包之前运行，以及在没有任何参数的本地 `npm` 安装之前运行。 （见下文） @@ -411,7 +405,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `dependencies` - 这些是你的包的开发版和发布版都需要的依赖。 ```json @@ -442,7 +435,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### workspaces - ```json { "name": "my-workspaces-powered-project", @@ -486,7 +478,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `peerDependencies` - ```json { "peerDependencies": { @@ -547,7 +538,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `engines` - 指定使用你的包客户必须使用的版本，这将检查 `process.versions` 以及当前 `yarn` 版本。 ```json @@ -602,7 +592,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz ### `publishConfig` - 这些配置值将在你的包发布时使用。比如，你可以给包打标签。 ```json @@ -635,7 +624,6 @@ Yarn ### `resolutions` - ```json { "resolutions": { diff --git a/docs/quickreference.md b/docs/quickreference.md new file mode 100644 index 0000000..c66e3a9 --- /dev/null +++ b/docs/quickreference.md @@ -0,0 +1,409 @@ +Quick Reference 备忘清单 +=== + +这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！ + +入门 +--- + +### 本地编译预览 + +简单的将仓库克隆下来本地调试页面展示。 + +#### 克隆仓库 + +```shell +git clone git@github.com:jaywcjlove/reference.git +``` + +#### 安装依赖编译生成 HTML 页面 + +```shell +npm i # 安装依赖 +npm run build # 编译输出 HTML +``` + +HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静态页面在浏览器中打开预览。 + +### 介绍 + +在备忘清单采用 `HTML 注释语法`，标识网站布局和一些样式，目的是为了在 `GitHub` 中也是正常毫无瑕疵的预览 `Markdown`。 + +```markdown +### 卡片标题 + + +卡片 Markdown 内容展示，下面注释语法为文字内容改变样式 + +``` + + +使用 `col-span-2` 类标识，卡片占 `2` 列位置 + +### 注释语法介绍 + + +- 在某个 Markdown 语法下方或者后面，添加 HTML注释 +- 以 `` 结束，包裹参数内容 +- 内容采用 URL 参数的字符拼接方式 + +#### 语法 + +`` +`标识开始` + `参数` + `分隔符` + `参数` + `标识结束` + +#### 示例 + +```markdown +### H2 部分 + + +### H3 部分 + +``` + +#### 示例，三行占位，标题红色 + +```markdown +### 标题 + +``` + + + +#### 参数说明 + +类 | 说明 +---- | ---- +`body-style` | 包裹所有卡片`外壳`的样式 +`body-class` | 用于卡片栏布局，添加`类`名 +`wrap-style` | 卡片栏添加 CSS 样式 +`wrap-class` | 用于卡片占位，添加`类`名 + +### 文字颜色 + +```markdown +_我是红色_ +**加粗红色** +``` + +上面添加注释样式，文字 _我是红色_ 文字变`红`了 + +### 文字大小 + +```markdown +**加粗变大红色** + +``` + + +上面添加注释样式，文字 _加粗变大红色_ 变`红`并且`大`了 + +### 强制换行 + +```markdown +\```js +function () {} +\``` + +``` + +如果代码块内容太长，使用强制换行类解决 + + +### 展示表格表头 + +```markdown +| Key | value | +| ---- | ---- | +| `键` | 值 | + +``` + +注释配置添加 `show-header` 类，放置在表格下面，表头将被展示出来。 + +布局 +--- + +### H2 部分 + + +```markdown +H2 部分 +--- + +### 卡片 1 (H3 部分) +### 卡片 2 (H3 部分) +### 卡片 3 (H3 部分) +``` + +上面实例 `H2 部分` 标题下面有三个`卡片`，默认 `3` 栏布局。 + +```markdown +H2 部分 +--- + +### 卡片 1 (H3 部分) +### 卡片 2 (H3 部分) +### 卡片 3 (H3 部分) +``` + +使用注释配置为 H2 部分 添加 `col-span-2` 类，将 ~~`3`~~ 栏布局变成 `2` 栏布局。 + +类 | 说明 +---- | ---- +`cols-1` | `1` 栏卡片布局 +`cols-2` | `2` 栏卡片布局 +`cols-3` | `3` 栏卡片布局 +`cols-4` | `4` 栏卡片布局 +`cols-5` | `5` 栏卡片布局 + + +### 占位布局 style 写法 + +```markdown +### H3 部分 + +``` + + +放在 `### H3 部分` 下面的注释配置，与 `` 相同，设置 2 行占位布局。 + +### 卡片栏布局 style 写法 + +```markdown +## H2 部分 + +``` + + +放在 `## H2 部分` 下面的注释配置，与 `` 相同，设置 2 栏布局。 + + +### H3 部分 + +```markdown +### 卡片 1 (H3 部分) + +### 卡片 2 (H3 部分) + +### 卡片 3 (H3 部分) +``` + +类 | 说明 +---- | ---- +`col-span-2` | `2` 列占位 +`col-span-3` | `3` 列占位 +`col-span-4` | `4` 列占位 +`row-span-2` | `2` 行占位 +`row-span-3` | `3` 行占位 +`row-span-4` | `4` 行占位 + + +### 卡片 1 列布局 + +```shell +╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆ H3 Title 1 ┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +Markdown 源码 + +```markdown +### H3 Title 1 + +### Title 2 + +### Title 3 + +### Title 4 +``` + +默认 3 列布局，第一标题添加 `col-span-3` 占位类 + + +表格 +--- + +### 基本表格 + +#### Date + +| | | +| ---- | ---- | +`%m/%d/%Y` | 06/05/2013 +`%A, %B %e, %Y` | Sunday, June 5, 2013 +`%b %e %a` | Jun 5 Sun + +#### Time + +| | | +| ---- | ---- | +`%H:%M` | 23:05 +`%I:%M %p` | 11:05 PM + +标题为 `H4` 的基本表格。 + +### 快捷键 + +| | | +| ---- | ---- | +`V` | Vector +`P` | Pencil +`T` | Text +`L` | Line +`R` | Rectangle +`O` | Oval +`U` | Rounded + +### 展示标题 + +| Prefix | Example | What | +| ---- | ---- | ---- | +`//` | `//hr[@class='edge']` | Anywhere +`./` | `./a` | Relative +`/` | `/html/body/div` | Root + + +`` + +列表 +--- + +### 一栏（默认） + +- Item 1 +- Item 2 +- Item 3 + +### 四列 + +- Item 1 +- Item 2 +- Item 3 +- Item 4 +- Item 5 +- Item 6 +- Item 7 +- Item 8 + + +`` + +### 没有标记 + +- Item 1 +- Item 2 +- Item 3 +- Item 4 +- Item 5 +- Item 6 + + +`` + +H2 部分 - 5列效果展示 +--- + + +### One + +``` +... +``` + +### Two + +``` +... +``` + +### Three + +``` +... +``` + +### Four + +``` +... +``` + +### Five + +``` +... +``` + +H3 部分 - 占位效果展示 +--- + +### row-span-2 + + +``` +... +``` + +`` + +### col-span-2 + + +``` +... +``` + +`` + +### 红色标题 + + +``` +... +``` + +`` + +### 黄色标题 + + +``` +... +``` + +`` + +### col-span-3 + + +``` +... +``` + +### 卡片子项 + +每个部分可以有以下子项： + +#### H4 子标题 + +- pre +- table +- ul + +#### H4 子标题 + +- pre +- table +- ul + +### H3 部分 + +每个盒子(卡片)都是一个 `H3` 部分。 盒子将包含 `H3` 自身内的所有东西。 + +这是一个包含段落的基本部分。 \ No newline at end of file diff --git a/docs/semver.md b/docs/semver.md index 8a2fa32..63a3b73 100644 --- a/docs/semver.md +++ b/docs/semver.md @@ -21,7 +21,6 @@ Semver 备忘清单 | `主版本号(MAJOR)` | 当你做了不兼容的 API 修改 | | `次版本号(MINOR)` | 当你做了向下兼容的功能性新增 | | `修订号(PATCH)` | 当你做了向下兼容的问题修正 | - ### 简单范围 @@ -38,7 +37,6 @@ Semver 备忘清单 ### 范围 - | 范围 | 描述 | Notes | | --- | --- | --- | | `~1.2.3` | 是 `>=1.2.3 <1.3.0` | | @@ -54,15 +52,14 @@ Semver 备忘清单 | `1` | 相同的 | | | `*` | 任何版本 | | | `x` | 相同的 | | - ### 连字符范围 - | 范围 | 描述 | | --- | --- | | `1.2.3 - 2.3.4` | 是 `>=1.2.3 <=2.3.4` | + #### 部分向右 @@ -70,14 +67,12 @@ Semver 备忘清单 | --- | --- | | `1.2.3 - 2.3` | 是 `>=1.2.3 <2.4.0` | | `1.2.3 - 2` | 是 `>=1.2.3 <3.0.0` | - #### 部分向左 | 范围 | 描述 | | --- | --- | | `1.2 - 2.3.0` | 是 `1.2.0 - 2.3.0` | - 当右侧为部分（例如，`2.3`）时，假定缺失的部分为`x`（例如，` 2.3.x`）。 @@ -89,6 +84,7 @@ Semver 备忘清单 | --- | --- | | `>=0.14 <16` | 和 (空格分隔) | | `0.14.x \|\| 15.x.x` | 或 (双竖线分隔) | + ### 预发布 @@ -104,7 +100,6 @@ Semver 备忘清单 | `~` | 意思是“相当接近” | | `0.x.x` | 用于“初始开发” | | `1.x.x` | 表示定义了公共 API | - 另见 diff --git a/docs/sketch.md b/docs/sketch.md index 970068f..ca0b4dc 100644 --- a/docs/sketch.md +++ b/docs/sketch.md @@ -8,7 +8,7 @@ Sketch 备忘清单 ### 插入 -| 快捷键 | 插入 | +| 快捷键 | 描述 | | ----- | ---- | | `a` | (New Artboard) 新画板 | | `s` | (Slice) 切片 | @@ -20,13 +20,11 @@ Sketch 备忘清单 | `v` | (Vector Point) 向量点 | | `p` | (Pencil) 铅笔 | | `t` | (Text) 文本 | - ### 类型 - | 快捷键 | 类型 | | ----- | ---- | | `Cmd + B` | 加粗 | @@ -42,13 +40,11 @@ Sketch 备忘清单 | `Cmd + Shift + \` | 居中对齐 | | `Cmd + Shift + }` | 右对齐 | | `Control + Cmd + Space` | 特殊字符 | - ### 画布视图 - | 画布视图 | 快捷键 | | ----- | ---- | | `Cmd (+) +` | 放大 | @@ -66,7 +62,6 @@ Sketch 备忘清单 | `Control + H` | 切换选择手柄 | | `Control + X` | 切换像素网格 | | `Space + Drag` | 移动画布 | - ### 窗口 @@ -79,7 +74,6 @@ Sketch 备忘清单 | `Alt + Cmd + T` | 切换工具栏 | | `Cmd + .` | 演示模式 | | `Control + Cmd + F` | 进入全屏 | - ### 编辑形状 @@ -94,7 +88,6 @@ Sketch 备忘清单 | `Cmd + Arrows` | 更改对象大小 | | `Shift + Cmd + Arrows` | 将单位更改 10 | | `1, 2, 3, 4` | 更改矢量点样式 | - ### 编辑图层 @@ -110,7 +103,6 @@ Sketch 备忘清单 | `Shift + Cmd + R` | 旋转 | | `F` | 切换填充 | | `B` | 切换边框 | - ### 排列图层、组和画板 @@ -131,7 +123,6 @@ Sketch 备忘清单 | `Cmd + F` | 按名称查找图层 | | `Fn + ↑` | 选择上方页面 | | `Fn + ↓` | 选择下面的页面 | - 另见 diff --git a/docs/toml.md b/docs/toml.md index ae37bfe..a81bb7f 100644 --- a/docs/toml.md +++ b/docs/toml.md @@ -102,7 +102,6 @@ array3 = [8001, 8001, 8002] ### 友好数组 - ```toml array1 = [ "Don't mix", "different", "types" ] array2 = [ [ 1.2, 2.4 ], ["all", 'strings', """are the same""", '''type'''] ] @@ -173,7 +172,6 @@ bar = 2 ### 类数组 - ```toml [[comments]] author = "Nate" @@ -251,7 +249,6 @@ bat = "hi" ### Inline Table - ```toml name = { first = "Tom", last = "Preston-Werner" } point = { x = 1, y = 2 } diff --git a/docs/typescript.md b/docs/typescript.md index 528d8a0..5ca1503 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -68,7 +68,6 @@ Object, String, Number, Boolean ### 通用语法 - ```ts /** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */ interface JSONResponse extends Response, HTTPAble { @@ -263,7 +262,6 @@ const data: import("./data").data ### 对象字面量语法 - ```ts type JSONResponse = { version: number; // 字段 @@ -302,7 +300,6 @@ type ArtistSub = Subscriber ### 模板联合类型 - ```ts type SupportedLangs = "en" | "pt" | "zh"; type FooterLocaleIDs = "header" | "footer"; @@ -316,7 +313,6 @@ type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`; ### 条件类型 - ```ts type HasFourLegs = Animal extends { legs: 4 } ? Animal : never type Animals = Bird | Dog | Ant | Wolf; @@ -379,7 +375,6 @@ if (Array.isArray(input)) { ### 任务 - ```ts const data1 = { name: "Zagreus" @@ -558,7 +553,6 @@ class C implements Bag {} ### 通用语法 - ```ts // 确保类符合一组接口或类型 ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮ // 子类这个类 ┈┈┈┈┈┈┈┈↘ ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈ @@ -645,7 +639,6 @@ class Dog extends Animal { getName(): { ... } } ### 装饰器和属性 - ```ts import { Syncable, triggersSync, preferCache, required } from "mylib" @@ -1145,7 +1138,6 @@ declare namespace JSX { ### 函数组件 - ```tsx interface FooProp { name: string; @@ -1189,7 +1181,6 @@ function Dog(prop:CeProps): JSX.Element { ### 函数子组件 - ```tsx interface MenuProps extends React.LiHTMLAttributes { ... } const InternalMenu = (props: MenuProps, ref?: React.ForwardedRef) => ( @@ -1213,7 +1204,6 @@ Menu.SubMenu = SubMenu; ### 有效组件 - ```tsx declare namespace JSX { interface ElementClass { @@ -1247,7 +1237,6 @@ function NotAValidFactoryFunction() { ### 类组件 - ```ts type Props = { header: React.ReactNode; diff --git a/docs/vscode.md b/docs/vscode.md index 339c2d0..2a899b0 100644 --- a/docs/vscode.md +++ b/docs/vscode.md @@ -15,11 +15,9 @@ VSCode 备忘清单 | `Ctrl` `Shift` `W` | 关闭窗口 | | `Ctrl` `,` | 用户设置 | | `Ctrl` `K` `Ctrl` `S` | 键盘快捷键 | - - ### 基本编辑 - + | - | - | |---------------------------|------------------------------------| @@ -48,7 +46,6 @@ VSCode 备忘清单 | `Ctrl` `/` | 切换行注释 | | `Shift` `Alt` `A` | 切换块评论 | | `Alt` `Z` | 切换自动换行 | - ### 导航 @@ -64,7 +61,6 @@ VSCode 备忘清单 | `Ctrl` `Shift` `Tab` | 浏览编辑组历史 | | `Alt` ` ←` _/_ `→` | 后退/前进 | | `Ctrl` `M` | 切换 Tab 移动焦点 | - ### 搜索和替换 @@ -78,7 +74,6 @@ VSCode 备忘清单 | `Ctrl` `D` | 将选择添加到下一个查找匹配项 | | `Ctrl` `K` `Ctrl` `D` | 将最后一个选择移动到下一个查找匹配项 | | `Alt` `C` _/_ `R` _/_ `W` | 切换区分大小写/正则表达式/整个单词 | - ### 多光标和选择 @@ -96,7 +91,6 @@ VSCode 备忘清单 | `Shift` `Alt` `` | 列（框）选择 | | `Ctrl` `Shift` `Alt` `` | 列（框）选择 | | `Ctrl` `Shift` `Alt` `PgUp` _/_ `PgDn` | 列（框）选择页上/下 | - ### 丰富的语言编辑 @@ -114,7 +108,6 @@ VSCode 备忘清单 | `F2` | 重命名符号 | | `Ctrl` `K` `Ctrl` `X` | 修剪尾随空格 | | `Ctrl` `K` `M` | 更改文件语言 | - ### 编辑管理 @@ -128,7 +121,6 @@ VSCode 备忘清单 | `Ctrl` `K` `Ctrl` `←` _/_ `→` | 专注于上一个/下一个编辑组 | | `Ctrl` `Shift` `PgUp` _/_ `PgDn` | 向左/向右移动编辑器 | | `Ctrl` `K` `←` _/_ `→` | 移动活动编辑器组 | - ### 文件管理 @@ -149,7 +141,6 @@ VSCode 备忘清单 | `Ctrl` `K` `P` | 复制活动文件的路径 | | `Ctrl` `K` `R` | 在资源管理器中显示活动文件 | | `Ctrl` `K` `O` | 在新窗口/实例中显示活动文件 | - ### 展示 @@ -170,7 +161,6 @@ VSCode 备忘清单 | `Ctrl` `Shift` `V` | 打开 Markdown 预览 | | `Ctrl` `K` `V` | 打开 Markdown 预览到一边 | | `Ctrl` `K` `Z` | Zen 模式（Esc Esc 退出） | - ### 调试 @@ -190,4 +180,3 @@ VSCode 备忘清单 | `Ctrl` `↑` _/_ `↓` | 向上/向下滚动 | | `Shift` `PgUp` _/_ `PgDn` | 向上/向下滚动页面 | | `Ctrl` `Home` _/_ `End` | 滚动到顶部/底部 | - diff --git a/package.json b/package.json index 73691da..98b62ff 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "keywords": [], "devDependencies": { - "@wcj/markdown-to-html": "^2.0.14", + "@wcj/markdown-to-html": "^2.0.15", "fs-extra": "^10.1.0", "recursive-readdir-files": "^2.3.0", "rehype-document": "^6.1.0", diff --git a/scripts/create.mjs b/scripts/create.mjs index a2c9ace..f8104b0 100644 --- a/scripts/create.mjs +++ b/scripts/create.mjs @@ -62,8 +62,8 @@ export function getTocsTree(arr = [], result = []) { const headerCls = ['wrap-header', `h${level}wrap`]; if (level === 1) wrapCls.push('max-container'); - const wrapStyle = toc.properties['data-wrap-style']; - delete toc.properties['data-wrap-style'] + const wrapStyle = toc.properties['wrap-style']; + delete toc.properties['wrap-style'] const wrapClass = toc.properties['wrap-class']; if (wrapClass) wrapCls.push(wrapClass); delete toc.properties['wrap-class']; @@ -93,9 +93,8 @@ export function getTocsTree(arr = [], result = []) { const childs = getChilds([...data.slice(n + 1)], level); const resultChilds = getTocsTree(childs); if (resultChilds.length > 0) { - const bodyStyle = toc.properties['data-body-style']; - delete toc.properties['data-body-style'] - + const bodyStyle = toc.properties['body-style']; + delete toc.properties['body-style'] const bodyClass = toc.properties['body-class']; delete toc.properties['body-class'] panle.children = panle.children.concat({ diff --git a/scripts/index.mjs b/scripts/index.mjs index 645c8dc..f51af5f 100644 --- a/scripts/index.mjs +++ b/scripts/index.mjs @@ -42,7 +42,7 @@ export async function run() { await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH) const files = await recursiveReaddirFiles(process.cwd(), { ignored: /\/(node_modules|\.git)/, - exclude: /(\.json|mjs)$/, + exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/, filter: (item) => item.ext === 'md', }); createHTML(files); diff --git a/scripts/style.css b/scripts/style.css index 2187adf..437eef8 100644 --- a/scripts/style.css +++ b/scripts/style.css @@ -21,6 +21,91 @@ body { blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } +h1,h2,h3,h4,h5,h6 { + font-size: inherit; + font-weight: inherit +} +ol, ul, menu { + list-style: none; + margin: 0; + padding: 0; +} + +.wrap-body > p > code { + --text-opacity: 1; + color: rgb(5 150 105/var(--text-opacity)); +} + +table { + width: 100%; + text-indent: 0; + border-color: inherit; + border-collapse: collapse +} + +table td:not(:last-child)>code, ul li > code, kbd { + background-color: rgb(51 65 85/0.5); + color: rgb(203 213 225/1); + box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000; + letter-spacing: 0.075rem; + padding: 0.1em 0.54em; + border: 1px solid rgb(204,204,204); + border-color: rgb(51 65 85/1); + line-height: 1.5; + font-family: Arial,Helvetica,sans-serif; + font-size: 12px; + display: inline-block; + border-radius: 3px; +} + +table tr+tr { + border-top: solid 1px #ececec94; + border-color: rgb(51 65 85/0.5); +} + +table td:first-child { + white-space: nowrap; +} +table td, table th { + padding: 9px 14px; + text-align: left; +} +table tr th:last-child, table tr td:last-child { + text-align: right; +} + +table thead th { + white-space: nowrap; + font-weight: normal; + color: rgb(16 185 129/1); +} + +table thead { + display: none; + border-bottom: solid 1px rgba(85,102,119,0.3); +} + +table.show-header thead { + display: table-header-group; +} + +tt, code { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 1em; +} +pre:only-child { + height: 100%; +} + +pre { + margin-top: 0; + margin-bottom: 0; + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + word-wrap: normal; + line-height: 1.5; + overflow: hidden; + padding: 1rem; +} .max-container a { color: rgb(2 132 199/1); @@ -241,7 +326,7 @@ body.home .h1wrap p { width: 100%; } -.wrap-header.h3wrap > .wrap-body p:last-child { +.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child { margin-top: auto; } @@ -267,12 +352,6 @@ body.home .h1wrap p { text-align: center; } -ol, ul, menu { - list-style: none; - margin: 0; - padding: 0; -} - .h4wrap > .wrap-body ul, .h4wrap > .wrap-body ol, .h4wrap > .wrap-body dl, @@ -346,87 +425,25 @@ ol, ul, menu { box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3); } -table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse -} - - -table td:not(:last-child)>code, ul li > code, kbd { - background-color: rgb(51 65 85/0.5); - color: rgb(203 213 225/1); - box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000; - letter-spacing: 0.075rem; - padding: 0.1em 0.54em; - border: 1px solid rgb(204,204,204); - border-color: rgb(51 65 85/1); - line-height: 1.6; - font-family: Arial,Helvetica,sans-serif; - font-size: 12px; - display: inline-block; - border-radius: 3px; -} - -table tr+tr { - border-top: solid 1px #ececec94; - border-color: rgb(51 65 85/0.5); -} - -table td:first-child { - white-space: nowrap; -} -table td, table th { - padding: 9px 14px; - text-align: left; -} -table tr th:last-child, table tr td:last-child { - text-align: right; -} - -table thead th { - white-space: nowrap; - font-weight: normal; - color: rgb(16 185 129/1); -} - -table thead { - display: table-header-group; - border-bottom: solid 1px rgba(85,102,119,0.3); -} - -.table-thead-hide thead { - display: none; -} - -tt, code { - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; - font-size: 1em; -} -pre:only-child { - height: 100%; -} - -pre { - margin-top: 0; - margin-bottom: 0; - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; - word-wrap: normal; - line-height: 1.5; - overflow: hidden; - padding: 1rem; -} - .code-highlight { display: block; overflow-x: auto; } .cols-1 { - grid-template-columns: repeat(1,minmax(0,1fr)); + grid-template-columns: repeat(1,minmax(0,1fr)) !important; } .cols-2 { - grid-template-columns: repeat(2,minmax(0,1fr)); + 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; } .col-span-2 { grid-column: span 2/span 2;