From 98ba641b303d3eb6aaeb1660c028801e7674de15 Mon Sep 17 00:00:00 2001
From: Will Faught <willfaught@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:08:04 -0700
Subject: [PATCH] Add tabs shortcode

---
 README.md                                  |  23 ++++
 exampleSite/content/shortcodes/tabs.md     | 132 +++++++++++++++++++++
 layouts/shortcodes/paige/tabs.html         |  11 ++
 layouts/shortcodes/paige/tabs/button.html  |  16 +++
 layouts/shortcodes/paige/tabs/buttons.html |   9 ++
 layouts/shortcodes/paige/tabs/pane.html    |  14 +++
 layouts/shortcodes/paige/tabs/panes.html   |   9 ++
 7 files changed, 214 insertions(+)
 create mode 100644 exampleSite/content/shortcodes/tabs.md
 create mode 100644 layouts/shortcodes/paige/tabs.html
 create mode 100644 layouts/shortcodes/paige/tabs/button.html
 create mode 100644 layouts/shortcodes/paige/tabs/buttons.html
 create mode 100644 layouts/shortcodes/paige/tabs/pane.html
 create mode 100644 layouts/shortcodes/paige/tabs/panes.html

diff --git a/README.md b/README.md
index 0fc12047..582108c9 100644
--- a/README.md
+++ b/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.
diff --git a/exampleSite/content/shortcodes/tabs.md b/exampleSite/content/shortcodes/tabs.md
new file mode 100644
index 00000000..bd52d035
--- /dev/null
+++ b/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 >}}
diff --git a/layouts/shortcodes/paige/tabs.html b/layouts/shortcodes/paige/tabs.html
new file mode 100644
index 00000000..c4056658
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/paige/tabs/button.html b/layouts/shortcodes/paige/tabs/button.html
new file mode 100644
index 00000000..48e0caae
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/paige/tabs/buttons.html b/layouts/shortcodes/paige/tabs/buttons.html
new file mode 100644
index 00000000..59c73fa7
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/paige/tabs/pane.html b/layouts/shortcodes/paige/tabs/pane.html
new file mode 100644
index 00000000..dcfc9ae0
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/paige/tabs/panes.html b/layouts/shortcodes/paige/tabs/panes.html
new file mode 100644
index 00000000..144f0660
--- /dev/null
+++ b/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>