docs: update docs

Wxh16144 · Sep 13, 2023 · 6c50b29 · 6c50b29
1 parent a42ad8e
commit 6c50b29
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,24 @@
 # dumi-plugin-color-chunk
+
+> 美化内联代码块儿 `#f00` 包裹的颜色值。 [Like Supported color models](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#supported-color-models)
+
+## Usage
+
+### Install
+
+```bash
+npm install dumi-plugin-color-chunk --save-dev
+```
+
+### Apply
+
+```ts
+// .dumirc.ts
+export default {
+  plugins: ['dumi-plugin-color-chunk'],
+};
+```
+
+### Full Document
+
+Read more: https://wxh16144.github.io/dumi-plugin-color-chunk/
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "dumi-plugin-color-chunk",
   "version": "1.0.0",
+  "description": "Dumi Plugin - Beautify inline color blocks",
   "keywords": [
     "dumi"
   ],

diff --git a/playground/.dumirc.ts b/playground/.dumirc.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'dumi';
 import { resolve } from 'path';
+import { homepage } from '../package.json';
 
 const isProd = process.env.NODE_ENV === 'production';
 // 不是预览模式 同时是生产环境
@@ -11,6 +12,9 @@ export default defineConfig({
   plugins: [githubRepoName],
   themeConfig: {
     name: 'color-chunk',
+    socialLinks: {
+      github: homepage,
+    },
   },
   outputPath: resolve(__dirname, '../.doc'),
   base: isProdSite ? `/${githubRepoName}/` : '/',

diff --git a/playground/docs/index.md b/playground/docs/index.md
@@ -1,10 +1,10 @@
 ---
-title: A static site based on dumi
+title: Beautify inline color blocks
 ---
 
 <br>
 
-## 美化颜色块儿
+## 美化颜色块儿 <sub>灵感来源 [Supported color models](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#supported-color-models)</sub>
 
 <br>
 
@@ -24,3 +24,13 @@ title: A static site based on dumi
 
 3. 在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。
    例如，红色可以表示为 `rgb(255, 0, 0)`，绿色可以表示为 `rgb(0, 255, 0)`，蓝色可以表示为 `rgb(0, 0, 255)`。
+
+---
+
+## 更多
+
+|                                  Color                                  |                   Syntax                    |        Example         |        Output        |
+| :---------------------------------------------------------------------: | :-----------------------------------------: | :--------------------: | :------------------: |
+|    [HEX](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color)    | `#RGB` \| `#RRGGBB` \|`#RGBA` \|`#RRGGBBAA` |      \`#0969DA\`       |      `#0969DA`       |
+| [RGB](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb) |       `rgb(R,G,B)` \| `rgba(R,G,B,A)`       |  \`rgb(9, 105, 218)\`  |  `rgb(9, 105, 218)`  |
+| [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) |       `hsl(H,S,L)` \| `hsl(H,S,L,A)`        | \`hsl(212, 92%, 45%)\` | `hsl(212, 92%, 45%)` |
diff --git a/playground/docs/usage.md b/playground/docs/usage.md
@@ -10,14 +10,16 @@ npm install dumi-plugin-color-chunk --save-dev
 
 # 使用
 
-```js {4} | pure
+```js {3} | pure
 // .dumirc.ts
 export default {
-  plugins: [['dumi-plugin-color-chunk']],
+  plugins: ['dumi-plugin-color-chunk'],
 };
 ```
 
-## 自定义颜色块儿
+## 自定义
+
+<i>Source Code: [src/component/index.tsx](https://github.com/Wxh16144/dumi-plugin-color-chunk/blob/master/src/component/index.tsx)</i>
 
 ```js | pure
 // .duim/theme/builtins/ColorChunk.ts