Add tabs shortcode

README.md

@@ -684,6 +684,29 @@ Parameters:
 <dt><code>cite</code></dt>
 <dd>Optional. String. Plain text. Citation.</dd>
 
+### Tabs
+
+The `paige/tabs` shortcodes provide tabbed content.
+
+```
+{{< paige/tabs >}}
+    {{< paige/tabs/buttons >}}
+        {{< paige/tabs/button >}}A{{< /paige/tabs/button >}}
+        {{< paige/tabs/button >}}B{{< /paige/tabs/button >}}
+        {{< paige/tabs/button >}}C{{< /paige/tabs/button >}}
+    {{< /paige/tabs/buttons >}}
+    {{< paige/tabs/panes >}}
+        {{< paige/tabs/pane >}}1{{< /paige/tabs/pane >}}
+        {{< paige/tabs/pane >}}2{{< /paige/tabs/pane >}}
+        {{< paige/tabs/pane >}}3{{< /paige/tabs/pane >}}
+    {{< /paige/tabs/panes >}}
+{{< /paige/tabs >}}
+```
+
+Inner content: Required. String. Markdown.
+
+Parameters: None.
+
 ### Vimeo
 
 The `paige/vimeo` shortcode provides a Vimeo video.

exampleSite/content/shortcodes/tabs.md

@@ -0,0 +1,132 @@
++++
+authors = ["author-demo"]
+categories = ["paige", "shortcodes"]
+date = 2024-07-06T22:37:00-07:00
+description = "Demonstration of the Paige tabs shortcodes."
+tags = ["figures", "tabs"]
+title = "Tabs Shortcode"
++++
+
+Paige provides a `paige/tabs` shortcode for displaying content in tabs.
+
+<!--more-->
+
+## Basic
+
+Code:
+
+```go-html-template
+{{</* paige/tabs */>}}
+{{</* paige/tabs/buttons */>}}
+{{</* paige/tabs/button */>}}JSON{{</* /paige/tabs/button */>}}
+{{</* paige/tabs/button */>}}TOML{{</* /paige/tabs/button */>}}
+{{</* paige/tabs/button */>}}YAML{{</* /paige/tabs/button */>}}
+{{</* /paige/tabs/buttons */>}}
+{{</* paige/tabs/panes */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="json" */>}}
+{"foo": 123}
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="toml" */>}}
+foo = 123
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="yaml" */>}}
+foo: 123
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* /paige/tabs/panes */>}}
+{{</* /paige/tabs */>}}
+```
+
+Result:
+
+{{< paige/tabs >}}
+{{< paige/tabs/buttons >}}
+{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
+{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
+{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
+{{< /paige/tabs/buttons >}}
+{{< paige/tabs/panes >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="json" >}}
+{"foo": 123}
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="toml" >}}
+foo = 123
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="yaml" >}}
+foo: 123
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< /paige/tabs/panes >}}
+{{< /paige/tabs >}}
+
+## Figure
+
+Code:
+
+```go-html-template
+{{</* paige/figure caption="Tabs" */>}}
+{{</* paige/tabs */>}}
+{{</* paige/tabs/buttons */>}}
+{{</* paige/tabs/button */>}}JSON{{</* /paige/tabs/button */>}}
+{{</* paige/tabs/button */>}}TOML{{</* /paige/tabs/button */>}}
+{{</* paige/tabs/button */>}}YAML{{</* /paige/tabs/button */>}}
+{{</* /paige/tabs/buttons */>}}
+{{</* paige/tabs/panes */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="json" */>}}
+{"foo": 123}
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="toml" */>}}
+foo = 123
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* paige/tabs/pane */>}}
+{{</* paige/code lang="yaml" */>}}
+foo: 123
+{{</* /paige/code */>}}
+{{</* /paige/tabs/pane */>}}
+{{</* /paige/tabs/panes */>}}
+{{</* /paige/tabs */>}}
+{{</* /paige/figure */>}}
+```
+
+Result:
+
+{{< paige/figure caption="Tabs" >}}
+{{< paige/tabs >}}
+{{< paige/tabs/buttons >}}
+{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
+{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
+{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
+{{< /paige/tabs/buttons >}}
+{{< paige/tabs/panes >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="json" >}}
+{"foo": 123}
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="toml" >}}
+foo = 123
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< paige/tabs/pane >}}
+{{< paige/code lang="yaml" >}}
+foo: 123
+{{< /paige/code >}}
+{{< /paige/tabs/pane >}}
+{{< /paige/tabs/panes >}}
+{{< /paige/tabs >}}
+{{< /paige/figure >}}

layouts/shortcodes/paige/tabs.html

@@ -0,0 +1,11 @@
+{{ $content := chomp .Inner }}
+
+{{ if not (.Page.Scratch.Get "paige-tabs") }}
+    {{ .Page.Scratch.Set "paige-tabs" 0 }}
+{{ end }}
+
+{{ .Page.Scratch.Add "paige-tabs" 1 }}
+
+<div class="paige-tabs">
+    {{ $content }}
+</div>

layouts/shortcodes/paige/tabs/button.html

@@ -0,0 +1,16 @@
+{{ $content := chomp .Inner | markdownify }}
+{{ $tabcount := .Page.Scratch.Get "paige-tabs" | default 0 }}
+
+{{ if not $content }}
+    {{ errorf "layouts/shortcodes/paige/tab/button.html: no content" }}
+{{ end }}
+
+{{ .Page.Scratch.Add "paige-tabs-button" 1 }}
+
+{{ $buttoncount := .Page.Scratch.Get "paige-tabs-button" }}
+
+{{ $active := eq $buttoncount 1 }}
+
+<li class="nav-item" role="presentation">
+    <button aria-controls="paige-tabs-{{ $tabcount }}-pane-{{ $buttoncount }}" aria-selected="{{ $active }}" class="{{ if $active }} active {{ end }} nav-link" data-bs-target="#paige-tabs-{{ $tabcount }}-pane-{{ $buttoncount }}" data-bs-toggle="tab" id="paige-tabs-{{ $tabcount }}-button-{{ $buttoncount }}" role="tab" type="button">{{ $content }}</button>
+</li>

layouts/shortcodes/paige/tabs/buttons.html

@@ -0,0 +1,9 @@
+{{ $content := chomp .Inner }}
+
+{{ .Page.Scratch.Set "paige-tabs-button" 0 }}
+
+<div class="paige-tab-buttons">
+    <ul class="mb-3 nav nav-tabs" role="tablist">
+        {{ $content }}
+    </ul>
+</div>

layouts/shortcodes/paige/tabs/pane.html

@@ -0,0 +1,14 @@
+{{ $content := chomp .Inner | markdownify }}
+{{ $tabcount := .Page.Scratch.Get "paige-tabs" | default 0 }}
+
+{{ if not $content }}
+    {{ errorf "layouts/shortcodes/paige/tab/pane.html: no content" }}
+{{ end }}
+
+{{ .Page.Scratch.Add "paige-tabs-pane" 1 }}
+
+{{ $panecount := .Page.Scratch.Get "paige-tabs-pane" }}
+
+{{ $active := eq $panecount 1 }}
+
+<div aria-labelledby="paige-tabs-{{ $tabcount }}-button-{{ $panecount }}" class="{{ if $active }} active {{ end }} fade {{ if $active }} show {{ end }} tab-pane" id="paige-tabs-{{ $tabcount }}-pane-{{ $panecount }}" role="tabpanel" tabindex="0">{{ $content }}</div>

layouts/shortcodes/paige/tabs/panes.html

@@ -0,0 +1,9 @@
+{{ $content := chomp .Inner }}
+
+{{ .Page.Scratch.Set "paige-tabs-pane" 0 }}
+
+<div class="paige-tab-panes">
+    <div class="tab-content">
+        {{ $content }}
+    </div>
+</div>