chore(docs): refactor extended shortcodes docs

exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md

@@ -0,0 +1,259 @@
+---
+weight: 5
+title: "Theme Documentation - mermaid Shortcode"
+date: 2020-03-03T15:29:41+08:00
+lastmod: 2020-03-03T15:29:41+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
+
+<!--more-->
+
+**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
+
+Just insert your mermaid code in the `mermaid` shortcode and that’s it.
+
+## 1 Flowchart {#flowchart}
+
+Example **flowchart** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{< /mermaid >}}
+
+## 2 Sequence Diagram {#sequence-diagram}
+
+Example **sequence diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{< /mermaid >}}
+
+## 3 GANTT {#gantt}
+
+Example **GANTT** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+    dateFormat  YYYY-MM-DD
+    title Adding GANTT diagram functionality to mermaid
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2               :         des4, after des3, 5d
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gantt
+    dateFormat  YYYY-MM-DD
+    title Adding GANTT diagram functionality to mermaid
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2               :         des4, after des3, 5d
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+{{< /mermaid >}}
+
+## 4 Class Diagram {#class-diagram}
+
+Example **class diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    Class03 *-- Class04
+    Class05 o-- Class06
+    Class07 .. Class08
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    Class03 *-- Class04
+    Class05 o-- Class06
+    Class07 .. Class08
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## 5 State Diagram {#state-diagram}
+
+Example **state diagram** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{< /mermaid >}}
+
+## 6 Git Graph {#git-graph}
+
+Example **git graph** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{< /mermaid >}}
+
+## 7 Pie {#pie}
+
+Example **pie** `mermaid` input:
+
+```markdown
+{{</* mermaid */>}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{</* /mermaid */>}}
+```
+
+The rendered output looks like this:
+
+{{< mermaid >}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{< /mermaid >}}

exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.zh-cn.md

@@ -0,0 +1,259 @@
+---
+weight: 5
+title: "主题文档 - mermaid Shortcode"
+date: 2020-03-03T15:29:59+08:00
+lastmod: 2020-03-03T15:29:59+08:00
+draft: false
+author: "Dillon"
+authorLink: "https://dillonzq.com"
+description: "mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能."
+images: ["featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+`mermaid` shortcode 使用 [Mermaid](https://mermaidjs.github.io/) 库提供绘制图表和流程图的功能.
+
+<!--more-->
+
+[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
+
+只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可.
+
+## 1 流程图 {#flowchart}
+
+一个 **流程图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+{{< /mermaid >}}
+
+## 2 时序图 {#sequence-diagram}
+
+一个 **时序图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+{{< /mermaid >}}
+
+## 3 甘特图 {#gantt}
+
+一个 **甘特图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+gantt
+    dateFormat  YYYY-MM-DD
+    title Adding GANTT diagram functionality to mermaid
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2               :         des4, after des3, 5d
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+gantt
+    dateFormat  YYYY-MM-DD
+    title Adding GANTT diagram functionality to mermaid
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2               :         des4, after des3, 5d
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+{{< /mermaid >}}
+
+## 4 类图 {#class-diagram}
+
+一个 **类图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    Class03 *-- Class04
+    Class05 o-- Class06
+    Class07 .. Class08
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    Class08 <--> C2: Cool label
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    Class03 *-- Class04
+    Class05 o-- Class06
+    Class07 .. Class08
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    Class08 <--> C2: Cool label
+{{< /mermaid >}}
+
+## 5 状态图 {#state-diagram}
+
+一个 **状态图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+{{< /mermaid >}}
+
+## 6 Git 图 {#git-graph}
+
+一个 **Git 图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+{{< /mermaid >}}
+
+## 7 饼图 {#pie}
+
+一个 **饼图** `mermaid` 示例:
+
+```markdown
+{{</* mermaid */>}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{</* /mermaid */>}}
+```
+
+呈现的输出效果如下:
+
+{{< mermaid >}}
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+{{< /mermaid >}}