feat: add the toggle shortcode

.prettierrc

@@ -1,3 +1,14 @@
 {
-    "singleQuote": true
+    "goTemplateBracketSpacing": true,
+    "overrides": [
+        {
+            "files": [
+                "*.html"
+            ],
+            "options": {
+                "parser": "go-template",
+                "bracketSameLine": true
+            }
+        }
+    ]
 }

assets/main/scss/_nav.scss

@@ -7,3 +7,10 @@
   --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}primary);
   --#{$prefix}nav-pills-link-active-color: var(--#{$prefix}on-primary);
 }
+
+.nav-pills,
+.nav-tabs {
+  .nav-item {
+    margin-bottom: 0;
+  }
+}

exampleSite/content/docs/shortcodes/toggle/index.en.md

@@ -0,0 +1,76 @@
++++
+# type = "docs"
+title = "Toggle"
+date = 2023-01-21T23:22:11+08:00
+# description = "" # Used by description meta tag, summary will be used instead if not set or empty.
+featured = false
+draft = false
+comment = true
+toc = true
+reward = true
+pinned = false
+carousel = false
+categories = ["Shortcode"]
+tags = ["Toggle"]
+series = ["Docs"]
+images = []
++++
+
+The `toggle` shortcode is similar to the `code-toggle`, but it's more generic.
+
+<!--more-->
+
+## Usage
+
+```markdown
+{{</* toggle myToggleName */>}}
+
+  {{</* toggle-item myToggleItemName */>}}
+    CONTENT HERE, MARKDOWN and SHORTCODE are support.
+  {{</* /toggle-item */>}}
+
+  ...
+
+{{</* /toggle */>}}
+```
+
+- The `myToggleName` MUST be unique per page.
+- The `myToggleItemName` MUST be unique per toggle.
+
+## Example
+
+{{< toggle foobar >}}
+
+  {{< toggle-item Foo >}}
+    Foo
+  {{< /toggle-item >}}
+
+  {{< toggle-item Bar >}}
+    Bar
+  {{< /toggle-item >}}
+
+{{< /toggle >}}
+
+
+{{< toggle languages >}}
+  {{< toggle-item PHP >}}
+    {{< highlight php >}}
+    <?php
+      echo "hello world"
+    {{< /highlight >}}
+  {{< /toggle-item >}}
+
+  {{< toggle-item JS >}}
+    {{< highlight javascript >}}
+    console.log("hello world")
+    {{< /highlight >}}
+  {{< /toggle-item >}}
+
+  {{< toggle-item SQL >}}
+    {{< highlight sql >}}
+    SELECT "hello world"
+    {{< /highlight >}}
+  {{< /toggle-item >}}
+
+{{< /toggle >}}
+

layouts/shortcodes/toggle-item.html

@@ -0,0 +1,3 @@
+{{- $parentName := .Parent.Get 0 }}
+{{- $name := .Get 0 }}
+{{- .Page.Store.SetInMap (printf "toggle-%s-items" $parentName) $name .Inner -}}

layouts/shortcodes/toggle.html

@@ -0,0 +1,37 @@
+{{- $name := .Get 0 }}
+{{- if eq .Inner "" }}{{ end }}
+{{- $items := .Page.Store.Get (printf "toggle-%s-items" $name) }}
+<ul class="nav nav-tabs toggle" id="toggle-{{ $name }}" role="tablist">
+    {{- $count := 0 }}
+  {{- range $itemName, $item := $items }}
+    <li class="nav-item" role="presentation">
+      <button
+        class="nav-link{{ if eq $count 0 }} active{{ end }}"
+        id="toggle-{{ $name }}-{{ $itemName }}-tab"
+        data-bs-toggle="tab"
+        data-bs-target="#toggle-{{ $name }}-{{ $itemName }}-tab-pane"
+        type="button"
+        role="tab"
+        aria-controls="toggle-{{ $name }}-{{ $itemName }}-tab-pane"
+        aria-selected="{{ cond (eq $count 0) `true` `false` }}">
+        {{ $itemName }}
+      </button>
+    </li>
+    {{- $count = add $count 1 }}
+  {{- end }}
+</ul>
+<div class="tab-content mb-3" id="toggle-{{ $name }}-content">
+    {{- $count := 0 }}
+  {{- range $itemName, $item := $items }}
+    <div
+      class="tab-pane fade{{ if eq $count 0 }} show active{{ end }}"
+      id="toggle-{{ $name }}-{{ $itemName }}-tab-pane"
+      role="tabpanel"
+      aria-labelledby="toggle-{{ $name }}-{{ $itemName }}-tab"
+      tabindex="0">
+      {{ $item }}
+    </div>
+    {{- $count = add $count 1 }}
+  {{- end }}
+</div>
+