feat: add dockerfile.md cheatsheet.

README.md

@@ -1,22 +1,23 @@
 Quick Reference
 ===
 
-为开发人员分享快速参考备忘单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。
+为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。
 
 如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
 
 ## 编程
 
-[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(78 57 104/var(\-\-bg\-opacity));-->
+[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## 工具包
 
-[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/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));-->
 [Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->

docs/docker.md

@@ -128,7 +128,7 @@ docker rm nginx-server
 docker update --cpu-shares 512 -m 300M nginx-server
 ```
 
-Docker Images
+Docker 镜像
 ----
 <!--rehype:body-class=cols-2-->
 
@@ -158,7 +158,7 @@ $ docker build -f myOtherDockerfile .
 $ curl example.com/remote/Dockerfile | docker build -f - .
 ```
 
-Docker 联网
+Docker 网络
 ----
 <!--rehype:body-class=cols-2-->
 

docs/dockerfile.md

@@ -0,0 +1,155 @@
+Dockerfile 备忘清单
+===
+
+这是 [Dockerfile](https://docs.docker.com/engine/reference/builder/) 的快速参考备忘单。包含用户可以在命令行上调用以组装镜像的所有命令。
+
+参考
+----
+
+### 继承
+
+默认 `Dockerfile` 位于上下文的根目录中。
+
+- [Docker 备忘清单](./docker.md) _(github.io)_
+
+```shell
+docker build -f /path/to/a/Dockerfile .
+```
+
+使用 `-f` 指向文件系统中任何位置的 `Dockerfile`。
+
+### 继承
+
+```dockerfile
+FROM [--platform=<platform>] <image> [AS <name>]
+```
+<!--rehype:className=wrap-text -->
+
+示例
+
+```dockerfile
+FROM ruby:2.2.2
+FROM golang:1.19-alpine3.16 AS build-env
+```
+
+### 变量
+
+```dockerfile
+ENV <key>=<value> ...
+```
+
+```dockerfile
+ENV APP_HOME /myapp
+RUN mkdir $APP_HOME
+```
+
+```dockerfile
+ENV MY_NAME="John Doe" MY_DOG=Rex\ The\ Dog \
+    MY_CAT=fluffy
+```
+
+### 初始化
+<!--rehype:wrap-class=row-span-2 -->
+
+```dockerfile
+RUN bundle install
+```
+
+```dockerfile
+WORKDIR /myapp
+```
+
+```dockerfile
+VOLUME ["/data"]
+# 安装点规范
+```
+
+```dockerfile
+ADD file.xyz /file.xyz
+COPY --chown=user:group host_file.xyz /path/container_file.xyz
+```
+<!--rehype:className=wrap-text -->
+
+### Onbuild
+
+```dockerfile
+ONBUILD RUN bundle install
+# 与另一个文件一起使用时
+```
+
+### 命令
+
+```dockerfile
+EXPOSE 5900
+CMD ["bundle", "exec", "rails", "server"]
+```
+
+### 在严格的 shell 中运行命令
+
+```dockerfile
+ENV my_var
+SHELL ["/bin/bash", "-euo", "pipefail", "-c"]
+# With strict mode:
+RUN false         # ails 像使用 && 一样构建
+RUN echo "$myvar" # 由于拼写错误会抛出错误
+RUN true | false  # 将脱离管道
+```
+<!--rehype:className=wrap-text -->
+
+使用 `shell` 将为 shell 命令打开严格模式。
+
+### 入口点
+
+```dockerfile
+ENTRYPOINT ["executable", "param1", "param2"]
+ENTRYPOINT command param1 param2
+```
+<!--rehype:className=wrap-text -->
+
+配置将作为可执行文件运行的容器。
+
+```dockerfile
+ENTRYPOINT exec top -b
+```
+
+这将使用 shell 处理来替换 shell 变量，并将忽略任何 `CMD` 或 `docker run` 命令行参数。
+
+### 元数据
+
+```dockerfile
+LABEL version="1.0"
+```
+
+```dockerfile
+LABEL "com.example.vendor"="ACME Incorporated"
+LABEL com.example.label-with-value="foo"
+LABEL version="1.0"
+```
+<!--rehype:className=wrap-text -->
+
+```dockerfile
+LABEL description="本文说明\
+标签值可以跨越多行。"
+LABEL multi.label1="value1" \
+      multi.label2="value2" \
+      other="value3"
+```
+
+### 主要命令
+<!--rehype:wrap-class=col-span-2 -->
+
+命令 | 说明
+:- | -
+`FROM image` | 构建的基础镜像
+~~`MAINTAINER email`~~ | (已弃用)维护者的名字
+`COPY [--chown=<user>:<group>] <src>... <dest>` | 将上下文中的路径复制到位置 `dest` 的容器中
+`ADD [--chown=<user>:<group>] <src>... <dest>` | 与 `COPY` 相同，但解压缩存档并接受 http url。
+`RUN <command>` | 在容器内运行任意命令。
+`USER <user>[:<group>]` | 设置默认用户名。
+`WORKDIR /path/to/workdir` | 设置默认工作目录。
+`CMD command param1 param2` | 设置默认命令
+`ENV <key>=<value> ...` | 设置环境变量
+`EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
+
+## 也可以看看
+- [Dockerfile reference](https://docs.docker.com/engine/reference/builder/) _(docker.com)_

docs/quickreference.md

@@ -128,7 +128,7 @@ function () {}
 
 [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_<!--rehype:tooltips-->
 
-添加注释配置 `<!--rehype:tooltips-->` 添加一个 tooltips 提示。
+添加注释配置 `<!--rehype:tooltips-->` 添加一个 Tooltips 提示。
 
 ### H3 部分(卡片)背景颜色
 <!--rehype:wrap-style=background: #00c69357;-->

scripts/assets/dockerfile.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 50 50" height="1em" width="1em">
+  <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Sans" d="M20 9v5H10v5H5v5H1.125a1 1 0 0 0-.969.813S0 25.666 0 26.75c0 .687.07 1.433.188 2.188C.13 28.95.051 28.986 0 29h.188a15.52 15.52 0 0 0 2.062 5.563c.005.007-.005.023 0 .03a1 1 0 0 0 .031.063 1 1 0 0 0 .375.594 1 1 0 0 0 .063.031c.307.445.633.89 1 1.313C6.396 39.679 10.737 42 17 42c10.221 0 18.869-4.354 23.75-13h9.094c-1.086-.275-3.42-.64-3.032-2.063-1.292 1.496-3.755 1.684-5.656 1.344.362-.688.717-1.385 1.032-2.125 2.891-.073 4.964-1.004 6.124-2.125 1.268-1.225 1.657-2.593 1.657-2.593a1 1 0 0 0-.344-1.032s-2.527-1.842-6.313-1.218c-1.08-3.537-3.874-5.25-3.874-5.25a1 1 0 0 0-.688-.126 1 1 0 0 0-.438.22s-.668.57-1.218 1.593c-.55 1.024-1.057 2.582-.875 4.594.085.941.382 1.837.812 2.687-.242.148-.383.273-.781.438-.828.342-2.034.656-3.75.656H32v-5h-5V9h-7zm2 2h3v3h-3v-3zm-10 5h3v3h-3v-3zm5 0h3v3h-3v-3zm5 0h3v3h-3v-3zm17.094.219c.742.549 2.085 1.701 2.562 4.218a1 1 0 0 0 1.25.782c2.55-.7 3.93-.125 4.688.312-.145.315-.12.514-.688 1.063-.91.88-2.452 1.766-5.343 1.656a1 1 0 0 0-.97.625 27.36 27.36 0 0 1-1.343 2.813 2.11 2.11 0 0 1-.375-.282c-1.338 1.94-9.113 1.2-9.656-.312-1.677 1.968-6.885 1.968-8.563 0-.543 1.512-8.35 2.252-9.687.312-1.201 1.126-5.932 1.816-7.906-.468.187.688-.297 1.133-.938 1.437A11.462 11.462 0 0 1 2 26.75c0-.431.033-.47.063-.75H32.5c1.969 0 3.446-.377 4.5-.813 1.054-.435 1.803-.969 1.906-1.03a1 1 0 0 0 .25-1.47c-.554-.724-.844-1.627-.937-2.656-.146-1.612.234-2.74.625-3.468.133-.248.139-.195.25-.344zM7 21h3v3H7v-3zm5 0h3v3h-3v-3zm5 0h3v3h-3v-3zm5 0h3v3h-3v-3zm5 0h3v3h-3v-3zM2.25 29H38.5C33.912 36.414 26.29 40 17 40c-5.47 0-9.016-1.854-11.344-4.313 4.438.211 7.875-.968 7.875-.968a1.008 1.008 0 0 0-.25-2 1.005 1.005 0 0 0-.156.031 1 1 0 0 0-.25.063S8.785 34.208 4 33.53A13.95 13.95 0 0 1 2.25 29zM16 31a1 1 0 1 0 1 1 .949.949 0 0 0-.063-.375.443.443 0 0 1-.375.219c-.225 0-.406-.213-.406-.438 0-.15.097-.273.219-.343A1.055 1.055 0 0 0 16 31z"/>
+</svg>

scripts/assets/emoji.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-emoji-kiss-fill" viewBox="0 0 16 16" height="1em" width="1em">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" height="1em" width="1em">
   <path fill-rule="evenodd" d="M16 8a8 8 0 1 0-2.697 5.99c-.972-.665-1.632-1.356-1.99-2.062-.388-.766-.419-1.561-.075-2.23.496-.97 1.73-1.466 2.762-1.05.65-.262 1.38-.162 1.957.19.028-.275.043-.555.043-.838ZM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5Zm1.512 3.647c-.347.08-.737.198-1.107.319a.5.5 0 1 1-.31-.95c.38-.125.802-.254 1.192-.343.37-.086.78-.153 1.103-.108.16.022.394.085.561.286.188.226.187.497.131.705a1.894 1.894 0 0 1-.31.593c-.077.107-.168.22-.275.343.107.124.199.24.276.347.142.197.256.397.31.595.055.208.056.479-.132.706-.168.2-.404.262-.563.284-.323.043-.733-.027-1.102-.113a14.87 14.87 0 0 1-1.191-.345.5.5 0 1 1 .31-.95c.371.12.761.24 1.109.321.176.041.325.069.446.084a5.609 5.609 0 0 0-.502-.584.5.5 0 0 1 .002-.695 5.52 5.52 0 0 0 .5-.577 4.465 4.465 0 0 0-.448.082Zm.766-.086-.006-.002c.004 0 .006.002.006.002Zm.002 1.867h-.001l-.005.001a.038.038 0 0 1 .006-.002Zm.157-4.685a.5.5 0 0 1-.874-.486A1.934 1.934 0 0 1 10.25 5.75c.73 0 1.356.412 1.687 1.007a.5.5 0 1 1-.874.486.934.934 0 0 0-.813-.493.934.934 0 0 0-.813.493ZM14 9.828c1.11-1.14 3.884.856 0 3.422-3.884-2.566-1.11-4.562 0-3.421Z"/>
 </svg>

scripts/assets/sed.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M5 3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4.22l.212-.845c.013-.052.027-.104.043-.155H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v4.232c.32-.137.659-.213 1-.229V5a2 2 0 0 0-2-2H5Zm4.5 11h1.443l1-1H9.5a.5.5 0 0 0 0 1Zm-2-6.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM6.75 11a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 3a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM9.5 7a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Zm0 3a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Zm1.48 5.377 4.83-4.83a1.87 1.87 0 1 1 2.644 2.646l-4.83 4.829a2.197 2.197 0 0 1-1.02.578l-1.498.374a.89.89 0 0 1-1.079-1.078l.375-1.498a2.18 2.18 0 0 1 .578-1.02Z" fill="currentColor"/>
+</svg>

scripts/nodes/header.mjs

@@ -1,6 +1,10 @@
-import { logo, github, editor } from './logo.mjs';
+import path from 'path';
+import { github, editor } from './logo.mjs';
+import { getSVGNode } from '../utils/getSVGNode.mjs';
 
+const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg')
 export function header({ homePath, githubURL = '' }) {
+  const svgNode = getSVGNode(ICONS_PATH)
   const data = [
     {
       href: githubURL,
@@ -35,7 +39,19 @@ export function header({ homePath, githubURL = '' }) {
               href: homePath,
               class: ['logo'],
             },
-            children: logo,
+            children: [
+              ...svgNode,
+              {
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  class: ['title'],
+                },
+                children: [
+                  { type: 'text', value: 'Quick Reference' }
+                ]
+              }
+            ],
           },
           {
             type: 'element',

scripts/style.css

@@ -43,7 +43,7 @@ table {
   border-collapse: collapse
 }
 
-table td:not(:last-child)>code, ul li > code, kbd {
+table td:not(:last-child)>code, table td:not(:last-child)>del>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;
@@ -84,6 +84,11 @@ table td:first-child>code {
   --text-opacity: 1;
   color: rgb(5 150 105/var(--text-opacity));
 }
+table td:first-child>del>code {
+  text-decoration: inherit;
+  --text-opacity: 1;
+  color: rgb(244 67 54/var(--text-opacity));
+}
 
 table.show-header thead {
   display: table-header-group;
@@ -188,7 +193,7 @@ body.home .h1wrap p {
   --bg-opacity: 1;
 }
 .home-card a svg {
-  min-width: 1.5rem;
+  min-width: 1.6rem;
   height: 1.8rem;
 }
 
@@ -703,7 +708,6 @@ a.text-grey {
 
 /* 代码高亮 End */
 
-
 .footer-wrap {
   margin-top: 3.5rem;
   color: rgb(100 116 139/1);

scripts/utils/getSVGNode.mjs

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

scripts/utils/homeCardIcons.mjs

@@ -1,20 +1,9 @@
 import fs from 'fs-extra';
-import rehypeParse from 'rehype-parse'
-import {unified} from 'unified'
 import path from 'path';
-import { VFile } from 'vfile';
+import { getSVGNode } from './getSVGNode.mjs';
 
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
 
-function getSVGNode(iconPath) {
-  const svgStr = fs.readFileSync(iconPath);
-  const processor = unified().use(rehypeParse,{ fragment: true, space: "svg" })
-  const file = new VFile();
-  file.value = svgStr.toString();
-  const hastNode = processor.runSync(processor.parse(file), file);
-  return hastNode.children || []
-}
-
 export function homeCardIcons(node, parent, isHome) {
   if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
     node.children = node.children.map((child) => {