feat: add styled-components.md cheatsheet.

README.md

@@ -20,6 +20,7 @@ Quick Reference
 [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));-->
 [React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
+[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(34 143 173/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(103 61 156/var(\-\-bg\-opacity));-->
 [TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->

docs/docker.md

@@ -25,12 +25,13 @@ $ docker run -d -p 80:80 docker/getting-started
 在前台创建并运行容器
 
 ```shell
-$ docker run -it -p 8001:8080 --name my-nginx nginx
+$ docker run -it -p --rm 8001:8080 --name my-nginx nginx
 ```
 
 ----
 
 - `-it` - 交互式 bash 模式
+- `--rm` - 容器终止运行后自动删除容器文件
 - `-p 8001:8080` - 将 `8001` 端口映射到容器中的 `8080` 端口
 - `--name my-nginx` - 指定名称
 - `nginx` - 要使用的镜像

docs/jest.md

@@ -63,8 +63,6 @@ describe('My work', () => {
 })
 ```
 
-
-
 ### 测试结构
 <!--rehype:wrap-class=col-span-3 row-span-2-->
 
@@ -135,6 +133,97 @@ expect(value).toThrow(error)
   .toThrowErrorMatchingSnapshot()
 ```
 
+### 快照
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatchSnapshot()
+  .toMatchInlineSnapshot()
+```
+
+### Errors
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toThrow(error)
+  .toThrowErrorMatchingSnapshot()
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeInstanceOf(Class)
+  .toMatchObject(object)
+  .toHaveProperty(keyPath, value)
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toContain(item)
+  .toContainEqual(item)
+  .toHaveLength(number)
+```
+
+### Numbers
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeCloseTo(number, numDigits)
+  .toBeGreaterThan(number)
+  .toBeGreaterThanOrEqual(number)
+  .toBeLessThan(number)
+  .toBeLessThanOrEqual(number)
+```
+
+### Booleans
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeFalsy()
+  .toBeNull()
+  .toBeTruthy()
+  .toBeUndefined()
+  .toBeDefined()
+```
+
+### Strings
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatch(regexpOrString)
+```
+
+### NaN
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+test('当值为 NaN 时通过', () => {
+  expect(NaN).toBeNaN();
+  expect(1).not.toBeNaN();
+});
+```
+
+### Others
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect.extend(matchers)
+expect.any(constructor)
+expect.addSnapshotSerializer(serializer)
+
+expect.assertions(1)
+```
+
 匹配器
 ----
 
@@ -388,8 +477,6 @@ expect(fn).toThrowErrorMatchingSnapshot()
 ### 实例
 <!--rehype:wrap-class=row-span-2-->
 
-请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。
-
 在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。
 
 ```js
@@ -409,6 +496,7 @@ beforeEach(expect.hasAssertions)
 ```
 
 这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 `expect.assertions(3)` 声明配合使用。
+请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)
 
 ### async/await
 
@@ -432,8 +520,8 @@ test('async test', (done) => {
   
   setTimeout(() => {
     try {
-      const result = getAsyncOperationResult()
+      const res = getAsyncOperatResult()
-      expect(result).toBe(true)
+      expect(res).toBe(true)
       done()
     } catch (err) {
       done.fail(err)
@@ -469,18 +557,28 @@ test('call the callback', () => {
   const callback = jest.fn()
   fn(callback)
   expect(callback).toBeCalled()
-  expect(callback.mock.calls[0][1].baz).toBe('pizza') // 第一次调用的第二个参数
+  expect(callback.mock.calls[0][1].baz)
+    .toBe('pizza') // 第一次调用的第二个参数
+  
   // 匹配第一个和最后一个参数，但忽略第二个参数
-  expect(callback).toHaveBeenLastCalledWith('meal', expect.anything(), 'margarita')
+  expect(callback)
+    .toHaveBeenLastCalledWith(
+      'meal',
+      expect.anything(),
+      'margarita'
+    )
 })
 ```
+<!--rehype:className=wrap-text -->
 
 您还可以使用快照：
 
 ```js
 test('call the callback', () => {
   // mockName 在 Jest 22+ 中可用
-  const callback = jest.fn().mockName('Unicorn') 
+  const callback = jest.fn()
+    .mockName('Unicorn')
+
   fn(callback)
   expect(callback).toMatchSnapshot()
   // ->
@@ -506,6 +604,7 @@ const callback = jest.fn(() => true)
 ```js
 const callback
     = jest.fn().mockReturnValue(true)
+
 const callbackOnce
     = jest.fn().mockReturnValueOnce(true)
 ```
@@ -515,6 +614,7 @@ const callbackOnce
 ```js
 const promise
     = jest.fn().mockResolvedValue(true)
+
 const promiseOnce
     = jest.fn().mockResolvedValueOnce(true)
 ```
@@ -522,17 +622,19 @@ const promiseOnce
 他们甚至可以拒绝值：
 
 ```js
-const failedPromise
+const failedPromise =
-    = jest.fn().mockRejectedValue('Error')
+  jest.fn().mockRejectedValue('Error')
-const failedPromiseOnce
+
-    = jest.fn().mockRejectedValueOnce('Error')
+const failedPromiseOnce =
+  jest.fn().mockRejectedValueOnce('Error')
 ```
 
 你甚至可以结合这些：
 
 ```js
-const callback
+const callback = jest.fn()
-    = jest.fn().mockReturnValueOnce(false).mockReturnValue(true)
+        .mockReturnValueOnce(false)
+        .mockReturnValue(true)
 // ->
 //  call 1: false
 //  call 2+: true
@@ -541,13 +643,20 @@ const callback
 ### 使用 `jest.mock` 方法模拟模块
 
 ```js
-jest.mock('lodash/memoize', () => (a) => a) // The original lodash/memoize should exist
+// 原来的 lodash/memoize 应该存在
-jest.mock('lodash/memoize', () => (a) => a, { virtual: true }) // The original lodash/memoize isn’t required
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a
+)
+// 不需要原始的 lodash/memoize
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a,
+  { virtual: true }
+)
 ```
 
-[jest.mock docs](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options)
+注意：当使用 `babel-jest` 时，对 [`jest.mock`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options) 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
-
-> 注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
 
 ### 使用模拟文件模拟模块
 
@@ -563,22 +672,18 @@ module.exports = (a) => a
 jest.mock('lodash/memoize')
 ```
 
-注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
+注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
 
-[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
+### 模拟 getters 和 setters
-
-### 模拟对象方法
 
 ```js
-const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
+const getTitle = jest.fn(() => 'pizza')
-expect(console.log.mock.calls).toEqual([['dope'], ['nope']])
+const setTitle = jest.fn()
-spy.mockRestore()
+const location = {}
-```
+Object.defineProperty(location, 'title', {
-
+  get: getTitle,
-```js
+  set: setTitle,
-const spy = jest.spyOn(ajax, 'request').mockImplementation(() => Promise.resolve({ success: true }))
+})
-expect(spy).toHaveBeenCalled()
-spy.mockRestore()
 ```
 
 ### 模拟 getter 和 setter (Jest 22.1.0+)
@@ -603,8 +708,9 @@ const setTitle = jest
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
+  // 运行使用 setTimeout或setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进直到所有定时器都执行完毕
   jest.runAllTimers()
   // 同步检查结果
@@ -619,8 +725,9 @@ test('kill the time', () => {
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
+  // 运行使用 setTimeout或setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进 250 毫秒
   jest.advanceTimersByTime(250)
   // 同步检查结果
@@ -628,20 +735,29 @@ test('kill the time', () => {
 })
 ```
 
-对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
+> 对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
 
 **注意：** 您应该在测试用例中调用 `jest.useFakeTimers()` 以使用其他假计时器方法。
 
-### 模拟 getters 和 setters
+### 模拟对象方法
 
 ```js
-const getTitle = jest.fn(() => 'pizza')
+const spy = jest.spyOn(console, 'log')
-const setTitle = jest.fn()
+  .mockImplementation(() => {})
-const location = {}
+
-Object.defineProperty(location, 'title', {
+expect(console.log.mock.calls)
-  get: getTitle,
+  .toEqual([['dope'], ['nope']])
-  set: setTitle,
+spy.mockRestore()
-})
+```
+
+```js
+const spy = jest.spyOn(ajax, 'request')
+  .mockImplementation(
+    () => Promise.resolve({success: true})
+  )
+
+expect(spy).toHaveBeenCalled()
+spy.mockRestore()
 ```
 
 ### 清除和恢复模拟
@@ -653,8 +769,10 @@ Object.defineProperty(location, 'title', {
 // 清除模拟使用日期
 // （fn.mock.calls、fn.mock.instances）
 fn.mockClear()
+
 // 清除并删除任何模拟的返回值或实现
 fn.mockReset()
+
 // 重置并恢复初始实现
 fn.mockRestore()
 ```

docs/package.json.md

@@ -101,7 +101,7 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 
 鼓励使用开源 [(OSI-approved)](https://opensource.org/licenses/alphabetical) 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。
 
-**license字段必须是以下之一:**
+#### **license字段必须是以下之一**
 
 - 如果你使用标准的许可证，需要一个有效地 [SPDX 许可证标识](https://spdx.org/licenses/)。
 - 如果你用多种标准许可证，需要有效的 [SPDX 许可证表达式2.0语法表达式](https://www.npmjs.com/package/spdx)。

scripts/assets/styled-components.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="m16.214 6.762-.075.391c-.116.741-.074.953.244 1.228l.307.254-.318 1.418c-.19.846-.423 1.555-.571 1.788-.127.201-.275.497-.307.656-.053.19-.233.381-.508.55-.243.138-.72.508-1.058.805-.27.243-.456.392-.557.456l-.33.261a1.4 1.4 0 0 0-.189.411c-.023.107-.01.178.024.23.033.05.09.085.168.107a.954.954 0 0 0 .282.023 3 3 0 0 0 .632-.112c.07-.019.125-.037.173-.053.074-.091.245-.263.548-.562.804-.793 1.111-1.227.794-1.11-.117.042-.064-.064.137-.276.424-.413.667-1.037 1.175-2.994.402-1.545.402-1.567.698-1.567.139 0 .532.024.532.024V6.762h-.902zm3.839 3.165c-.064 0-.17.096-.233.202-.116.19.021.306 1.767 1.396 1.037.657 1.873 1.217 1.852 1.26-.021.031-.868.582-1.883 1.217-1.842 1.142-1.852 1.153-1.683 1.386.212.275 0 .37 2.391-1.122L24 13.155v-.836l-1.937-1.196c-1.047-.656-1.957-1.185-2.01-1.196zm-16.085.117c-.053 0-.963.54-2.01 1.185L0 12.425v.836l1.947 1.217c1.08.666 1.99 1.217 2.032 1.217.042 0 .127-.096.212-.212.127-.201.02-.286-1.768-1.418C.72 12.996.54 12.848.71 12.732c.106-.074.91-.572 1.778-1.111 1.979-1.217 1.873-1.133 1.714-1.387-.063-.105-.17-.2-.233-.19zm8.684.023c-.292-.002-.92.443-2.8 1.978-.081.193-.088.326-.051.412.024.059.068.1.129.13.06.03.138.048.224.055.171.015.373-.012.536-.044l.11-.025a.386.386 0 0 1 .144-.118c.116-.064.603-.508 1.09-.984.857-.868 1.058-1.26.709-1.387a.24.24 0 0 0-.09-.017zm2.196.603c-.257.007-.72.305-1.513.938-.398.323-.65.497-.785.533l-.524.414c-.197.36-.226.583-.174.706a.25.25 0 0 0 .138.134.644.644 0 0 0 .24.045 2.18 2.18 0 0 0 .58-.085 3.466 3.466 0 0 0 .291-.092l.029-.012.053-.028c.1-.129.33-.372.618-.652.91-.878 1.375-1.502 1.28-1.735-.043-.113-.117-.17-.233-.166zm-2.424 1.08c-.074.008-.24.136-.539.398-.432.382-.903.602-1.066.504a3.97 3.97 0 0 1-.114.024c-.166.033-.373.06-.558.045a.708.708 0 0 1-.252-.063.337.337 0 0 1-.168-.17c-.037-.09-.037-.202.005-.345l-.65.534-1.471 1.217v1.973l4.82-3.797a.41.41 0 0 1 .016-.123c.037-.134.035-.202-.023-.196zm2.074.639c-.073 0-.195.103-.39.31-.265.283-.682.557-.903.613l-.034.018a2.191 2.191 0 0 1-.11.042c-.06.02-.138.044-.228.068-.18.049-.404.094-.604.089a.732.732 0 0 1-.275-.054.344.344 0 0 1-.184-.18c-.058-.139-.035-.334.092-.611L7.61 16.033v1.205h1.868l3.962-3.112c.103-.114.258-.27.467-.465.56-.519.687-.698.687-.963 0-.206-.023-.31-.096-.31zm.943 1.95-.339.338c-.19.18-.529.402-.761.497l-.046.02-.003.005-.01.01c-.009.007-.013.008-.02.011a3.432 3.432 0 0 1-.282.093 3.058 3.058 0 0 1-.65.115 1.035 1.035 0 0 1-.31-.027.364.364 0 0 1-.218-.144c-.048-.074-.062-.173-.035-.295a1.11 1.11 0 0 1 .095-.25l-3.197 2.526h4.252l.508-.582c.698-.814 1.016-1.396 1.016-1.894z"/>
+</svg>

scripts/style.css

@@ -212,7 +212,7 @@ table.show-header thead {
 }
 
 tt, code {
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,monospace;
   font-size: 1em;
 }
 pre:only-child {
@@ -222,7 +222,7 @@ pre:only-child {
 pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,monospace;
   word-wrap: normal;
   line-height: 1.5;
   overflow: hidden;