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));-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/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/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) => {