Refactor tatbs (#579)

Use toml to parallel grids and move styling to partial so it can be
reused.

Author: jarrodmillman

doc/content/user_guide/web-components.md

@@ -171,26 +171,32 @@ Code example from the PyData Sphinx Theme's kitchen sink:
 
 {{< tabs >}}
 
-{{< tab "c++" >}}
+[[tab]]
+name = 'c++'
+content = '''
 
 ```c++
 int main(const int argc, const char **argv) {
     return 0;
 }
 ```
 
-{{< /tab >}}
+'''
 
-{{< tab "python" >}}
+[[tab]]
+name = 'python'
+content = '''
 
 ```python
 def main():
     return
 ```
 
-{{< /tab >}}
+'''
 
-{{< tab "java" >}}
+[[tab]]
+name = 'java'
+content = '''
 
 ```java
 class Main {
@@ -199,33 +205,39 @@ class Main {
 }
 ```
 
-{{< /tab >}}
+'''
 
-{{< tab "julia" >}}
+[[tab]]
+name = 'julia'
+content = '''
 
 ```julia
 function main()
 end
 ```
 
-{{< /tab >}}
+'''
 
-{{< tab "fortran" >}}
+[[tab]]
+name ='fortran'
+content = '''
 
 ```fortran
 PROGRAM main
 END PROGRAM main
 ```
 
-{{< /tab >}}
+'''
 
 {{< /tabs >}}
 
 An example with headings
 
 {{< tabs >}}
 
-{{< tab "First example" >}}
+[[tab]]
+name = 'First example'
+content = '''
 
 ### How would this work?
 
@@ -244,12 +256,13 @@ def foo(x):
 #### What now?
 
 Well, this is a good question.
+'''
 
-{{< /tab >}}
-
-{{< tab "Second example" >}}
+[[tab]]
+name = 'Second example'
+content = '''
 Another hello world
-{{< /tab >}}
+'''
 
 {{< /tabs >}}
 

layouts/partials/_elements/tabs.html

@@ -0,0 +1,16 @@
+{{- $groupId := .groupId }}
+{{- $tabs := .tabs }}
+<div class="tabs">
+  <div role="tablist" class="automatic">
+    {{- range $idx, $tab := $tabs }}
+    <button id="{{ $groupId }}-tab-{{ $idx }}" type="button" role="tab" aria-selected="{{ cond (eq $idx 0) "true" "false" }}" aria-controls="{{ $groupId }}-tabpanel-{{ $idx }}">
+      {{ .name }}
+    </button>
+    {{- end }}
+  </div>
+  {{- range $idx, $tab := $tabs }}
+  <div id="{{ $groupId }}-tabpanel-{{ $idx }}" role="tabpanel" tabindex="0" aria-labelledby="${{ $groupId }}-tab-{{ $idx }}">
+    {{- .content | markdownify -}}
+  </div>
+  {{- end }}
+</div>

layouts/shortcodes/tab.html

@@ -4,44 +4,33 @@
 
 {{< tabs >}}
 
-{{< tab "c++" >}}
+[[tab]]
+name = 'c++'
+content = '''
 An example program in C++:
 ```c++
 int main(const int argc, const char **argv) {
     return 0;
 }
 ```
 It simply returns 0, indicating no errors.
-{{< /tab >}}
+'''
 
-{{< tab "python" >}}
+[[tab]]
+name = 'python'
+content = '''
 An example program in Python:
 ```python
 def main():
     return True
 ```
 It returns `True`, indicating no errors.
-{{< /tab >}}
+'''
 
 {{< /tabs >}}
 
 */}}
 
-<!-- Render inner tabs, which adds them to a scratch variable for this parent shortcode -->
-{{- .Inner -}}
-{{- $groupId := .Page.Scratch.Get "tabgroup" | default 0 -}}
-{{- .Page.Scratch.Set "tabgroup" (add $groupId 1) -}}
-<div class="tabs">
-  <div role="tablist" class="automatic">
-    {{- range $idx, $tab := .Scratch.Get "tabs" }}
-    <button id="{{ $groupId }}-tab-{{ $idx }}" type="button" role="tab" aria-selected="{{ cond (eq $idx 0) "true" "false" }}" aria-controls="{{ $groupId }}-tabpanel-{{ $idx }}">
-      {{ .name }}
-    </button>
-    {{- end }}
-  </div>
-  {{- range $idx, $tab := .Scratch.Get "tabs" }}
-  <div id="{{ $groupId }}-tabpanel-{{ $idx }}" role="tabpanel" tabindex="0" aria-labelledby="${{ $groupId }}-tab-{{ $idx }}">
-    {{- .content | markdownify -}}
-  </div>
-  {{- end }}
-</div>
+{{- $groupId := printf "%03d" $.Ordinal -}}
+{{- $tabs := (index (.Inner | transform.Unmarshal) "tab") -}}
+{{ partial "_elements/tabs" (dict "groupId" $groupId "tabs" $tabs) }}