Improve tabbed pane: allow right aligned tabs, allow tab groups Fixes, css and code improvements (#1037)

5 files changed, 72 insertions, 52 deletions

diff --git a/assets/scss/shortcodes/tabbed-pane.scss b/assets/scss/shortcodes/tabbed-pane.scss
index 15e5470..0f075fa 100644
--- a/assets/scss/shortcodes/tabbed-pane.scss
+++ b/assets/scss/shortcodes/tabbed-pane.scss
@@ -6,20 +6,17 @@
 .tab-content {
   .tab-pane {
     .highlight {
-      border: none;
-      max-width: 100%;
+    margin: 0rem 0 0rem 0;
+    border: none;
+    max-width: 100%;
     }
-    pre {
-      border-left: 1px solid rgba(0, 0, 0, 0.125);
-      border-right: 1px solid rgba(0, 0, 0, 0.125);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    }
-    margin: 0rem;
+    margin-top: 0rem;
+    margin-bottom: 1.5rem;
     max-width: 80%;
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
-  }
+    border-left: 1px solid rgba(0, 0, 0, 0.125);
+    border-right: 1px solid rgba(0, 0, 0, 0.125);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    }
 }
 
 .tab-body {
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
index 5a644bc..c947ac4 100644
--- a/layouts/shortcodes/tab.html
+++ b/layouts/shortcodes/tab.html
@@ -21,12 +21,25 @@
 {{ with $.Get "highlight" }}
   {{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }}
 {{ end }}
-{{ with $.Get "code" }}
-  {{ $tab = merge $tab (dict "code" ($.Get "code")) }}
+{{ with $.Get "text" }}
+  {{ if ne ( printf "%T" . ) "bool" }}
+  {{- errorf "shortcode tab: parameter 'text' must be either true or false" -}}
+  {{ end }}
+  {{ $tab = merge $tab (dict "text" ($.Get "text")) }}
+{{ end }}
+{{ with $.Get "right" }}
+  {{ if ne ( printf "%T" . ) "bool" }}
+  {{- errorf "shortcode tab: parameter 'right' must be either true or false" -}}
+  {{ end }}
+  {{ $tab = merge $tab (dict "rightpush" ($.Get "right")) }}
 {{ end }}
 {{ with $.Get "disabled" }}
+  {{ if ne ( printf "%T" . ) "bool" }}
+  {{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
+  {{ end }}
   {{ $tab = merge $tab (dict "disabled" ($.Get "disabled")) }}
 {{ end }}
+
 {{ with $.Inner }}
   <!-- Trim any leading and trailing newlines from .Inner, this avoids
        spurious lines during syntax highlighting -->
@@ -35,5 +48,5 @@
 
 <!-- add dict tab to parent's scratchpad -->
 {{ with .Parent }}
-  {{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}
-{{ end }}
\ No newline at end of file
+  {{- $.Parent.Scratch.SetInMap "tabs" (printf "%02v" $.Ordinal) $tab -}}
+{{ end }}
diff --git a/layouts/shortcodes/tabpane.html b/layouts/shortcodes/tabpane.html
index 0d019bf..4836f62 100644
--- a/layouts/shortcodes/tabpane.html
+++ b/layouts/shortcodes/tabpane.html
@@ -5,9 +5,9 @@
 {{ end }}
 {{ end }}
 
-{{ with .Get "code"  }}
+{{ with .Get "text"  }}
 {{ if ne ( printf "%T" . ) "bool" }}
-{{- errorf "shortcode tabpane: parameter 'code' must be either true or false" -}}
+{{- errorf "shortcode tabpane: parameter 'text' must be either true or false" -}}
 {{ end }}
 {{ end }}
 
@@ -17,19 +17,27 @@
 {{ end }}
 {{ end }}
 
+{{ with .Get "right"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'right' must be either true or false" -}}
+{{ end }}
+{{ end }}
+
 <!-- Set values given defined within tabpane -->
 {{- $langPane := default "" ($.Get "lang") -}}
 {{- $hloptionsPane := default "" ($.Get "highlight") -}}
-{{- $codePane := default true ($.Get "code") -}}
+{{- $textPane := default false ($.Get "text") -}}
 {{- $langEqualsHeader := default false ($.Get "langEqualsHeader") -}}
 {{- $persistLang := default true ($.Get "persistLang") -}}
+{{- $rightPane := default false ($.Get "right") -}}
 {{- $disabled := false -}}
+{{- $rightpush := false -}}
 {{- $activeSet := false -}}
 
 <!-- Scratchpad gets populated through call to .Inner -->
 {{- .Inner -}}
 
-<ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
+<ul class="nav nav-tabs{{ if $rightPane }} justify-content-end{{ end }}" id="tabs-{{- $.Ordinal -}}" role="tablist">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
     {{- $lang := $langPane -}}
@@ -42,21 +50,23 @@
 
     {{- $disabled := false -}}
     {{- with $element.disabled -}}
-      {{ if ne ( printf "%T" . ) "bool" }}
-        {{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
-      {{ end }}
       {{- $disabled = . }}
     {{- end -}}
 
+    {{- $rightpush := false -}}
+    {{- with $element.rightpush -}}
+      {{- $rightpush = . }}
+    {{- end -}}
+
     <!-- Replace space and +, not valid for css selectors -->
     {{- $lang := replaceRE "[\\s+]" "-" $lang -}}
 
-    <li class="nav-item">
+    <li class="nav-item{{ if $rightpush }} ml-auto{{ end }}">
       <!-- Generate the IDs for the <a> and the <div> elements -->
-      {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
-      {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
+      {{- $tabid := printf "tabs-%02v-%v-tab" $.Ordinal $index | anchorize -}}
+      {{- $entryid := printf "tabs-%02v-%v" $.Ordinal $index | anchorize -}}
 
-      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if eq $disabled true }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}" 
+      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if $disabled }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}"
           id="{{- $tabid -}}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
           {{ if ne $lang "" }}{{- if $persistLang -}}onclick="persistLang({{- $lang -}});"{{end}}{{end}}
         aria-controls="{{- $entryid -}}" aria-selected="{{- and ( not $activeSet ) ( not $disabled ) "true" "false" -}}">
@@ -95,23 +105,20 @@
       {{- $hloptions = $element.highlight -}}
     {{- end -}}
 
-    {{- $code := $codePane -}}
-    {{- with $element.code -}}
-      {{ if ne ( printf "%T" . ) "bool" }}
-        {{- errorf "shortcode tab: parameter 'code' must be either true or false" -}}
-      {{ end }}
-      {{- $code = . }}
+    {{- $text := $textPane -}}
+    {{- with $element.text -}}
+      {{- $text = . }}
     {{- end -}}
 
-    {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
-    {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
+    {{- $tabid := printf "tabs-%02v-%v-tab" $.Ordinal $index | anchorize -}}
+    {{- $entryid := printf "tabs-%02v-%v" $.Ordinal $index | anchorize -}}
 
-    <div class="{{ if not $code }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
+    <div class="{{ if $text }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
         id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
-        {{ if $code }}
-          {{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
+        {{ if $text }}
+          {{- index . "content" -}}
         {{- else -}}
-            {{- index . "content" -}}
+          {{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
         {{- end -}}
     </div>
 
diff --git a/netlify.toml b/netlify.toml
index eb6cbe4..c8efe54 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -6,7 +6,7 @@ publish = "userguide/public"
 command = "npm run docs-install && npm run build:preview"
 
 [build.environment]
-GO_VERSION = "1.18.2"
+GO_VERSION = "1.18.3"
 HUGO_THEME = "repo"
 
 [context.production]
diff --git a/userguide/content/en/docs/Adding content/Shortcodes/index.md b/userguide/content/en/docs/Adding content/Shortcodes/index.md
index 627a3a0..6799365 100644
--- a/userguide/content/en/docs/Adding content/Shortcodes/index.md
+++ b/userguide/content/en/docs/Adding content/Shortcodes/index.md
@@ -322,7 +322,7 @@ With this shortcode you can embed external content into a Docsy page as an inlin
 {{% alert title="Warning" color="warning" %}}
 You can only embed external content from a server when its `X-Frame-Options` is not set or if it specifically allows embedding for your site. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options for details.
 
-There are several tools you can use to check if a website can be embedded via iframe - e.g.: https://gf.dev/x-frame-options-test. Be aware that when this test says "Couldn’t find the X-Frame-Options header 
+There are several tools you can use to check if a website can be embedded via iframe - e.g.: https://gf.dev/x-frame-options-test. Be aware that when this test says "Couldn’t find the X-Frame-Options header
 in the response headers." you __CAN__ embed it, but when the test says "Great! X-Frame-Options header was found in the HTTP response headers as highlighted below.", you __CANNOT__ - unless it has been explicitly enabled for your site.
 {{% /alert %}}
 
@@ -382,17 +382,20 @@ print("Hello World!")
 {{< tab "Ruby" >}}
 puts "Hello World!"
 {{< /tab >}}
-{{< tab "Scala" >}}
+{{< tab header="Scala" >}}
 object HelloWorld extends App {
   println("Hello world!")
 }
 {{< /tab >}}
+{{< tab header="Reference" right=true text=true >}}
+{{< iframe src="https://www.mycplus.com/featured-articles/hello-world-programs-in-300-programming-languages" >}}
+{{< /tab >}}
 {{< /tabpane >}}
 
-The Docsy template provides two shortcodes `tabpane` and `tab` that let you easily create tabbed panes. To see how to use them, have a look at the following code block, which renders to a pane with one disabled and three active tabs:
+The Docsy template provides two shortcodes `tabpane` and `tab` that let you easily create tabbed panes. To see how to use them, have a look at the following code block, which renders to a right aligned pane with one disabled and three active tabs:
 
 ```go-html-template
-{{</* tabpane code=false */>}}
+{{</* tabpane text=true right=true */>}}
   {{%/* tab header="**Languages**:" disabled=true /*/%}}
   {{%/* tab header="English" lang="en" */%}}
   ![Flag United Kingdom](flags/uk.png)
@@ -404,14 +407,14 @@ The Docsy template provides two shortcodes `tabpane` and `tab` that let you easi
   {{</* /tab */>}}
   {{%/* tab header="Swahili" lang="sw" */%}}
   ![Flag Tanzania](flags/tz.png)
-  **Karibu sana!** 
+  **Karibu sana!**
   {{%/* /tab */%}}
 {{%/* /tabpane */%}}
 ```
 
-This code translates to the tabbed pane below, showing a `Welcome!` greeting in English, German or Swahili:
+This code translates to the right aligned tabbed pane below, showing a `Welcome!` greeting in English, German or Swahili:
 
-{{< tabpane code=false >}}
+{{< tabpane text=true right=true >}}
   {{% tab header="**Languages**:" disabled=true /%}}
   {{% tab header="English" lang="en" %}}
   ![Flag United Kingdom](flags/uk.png)
@@ -423,7 +426,7 @@ This code translates to the tabbed pane below, showing a `Welcome!` greeting in
   {{< /tab >}}
   {{% tab  header="Swahili" lang="sw" %}}
   ![Flag Tanzania](flags/tz.png)
-  **Karibu sana!** 
+  **Karibu sana!**
   {{% /tab %}}
 {{< /tabpane >}}
 
@@ -431,13 +434,13 @@ This code translates to the tabbed pane below, showing a `Welcome!` greeting in
 
 Tabbed panes are implemented using two shortcodes:
 
-* The `tabpane` shortcode, which is the container element for the tabs. This shortcode can optionally hold the named parameters `lang` and/or `highlight`. The values of these optional parameters are passed on as second `LANG` and third `OPTIONS` arguments to Hugo's built-in [`highlight`](https://gohugo.io/functions/highlight/) function which is used to render the code blocks of the individual tabs. In case the header text of the tab equals the language used in the tab's code block (as in the first tabbed pane example above), you may specify `langEqualsHeader=true` in the surrounding `tabpane` shortcode. Then, the header text of the individual tab is automatically set as `lang` parameter of the respective tab.
-* The various `tab` shortcodes represent the tabs you would like to show. Specify the named parameter `header` for each tab in order to set the header text of the tab. If the `header` parameter is the only parameter inside your tab shortcode, you can specify the header as unnamed parameter, something like `{ tab "My header" }} … {{ /tab }}`. If your `tab` shortcode does not have any parameters, the header of the tab will default to `Tab n`. You can disable a tab by specifying the parameter `disabled=true`. For enabled tabs, there are two modes for content display, `code` representation and _textual_ representation:
+* The `tabpane` shortcode, which is the container element for the tabs. This shortcode can hold the optional named parameters `lang`, `highlight` and `right`. The value of the optional parameters `lang` and `highlight` are passed on as second `LANG` and third `OPTIONS` arguments to Hugo's built-in [`highlight`](https://gohugo.io/functions/highlight/) function which is used to render the code blocks of the individual tabs. Specify `right=true` if you want to right align your tabs. In case the header text of the tab equals the language used in the tab's code block (as in the first tabbed pane example above), you may specify `langEqualsHeader=true` in the surrounding `tabpane` shortcode. Then, the header text of the individual tab is automatically set as `lang` parameter of the respective tab.
+* The various `tab` shortcodes represent the tabs you would like to show. Specify the named parameter `header` for each tab in order to set the header text of the tab. If the `header` parameter is the only parameter inside your tab shortcode, you can specify the header as unnamed parameter, something like `{ tab "My header" }} … {{ /tab }}`. If your `tab` shortcode does not have any parameters, the header of the tab will default to `Tab n`. To split the panes into a left aligned and a right aligned tab group, specify `right=true` in the dividing tab. By giving `right=true` several times, you can even render multiple tab groups. You can disable a tab by specifying the parameter `disabled=true`. For enabled tabs, there are two modes for content display, `code` representation and _textual_ representation:
   * By default, the tab's content is rendered as `code block`. In order to get proper syntax highlighting, specify the named parameter `lang` --and optionally the parameter `highlight`-- for each tab. Parameters set in the parent `tabpane` shortcode will be overwritten.
-  * If the contents of your tabs should be rendered as text with different styles and with optional images, specify `code=false` as parameter of your `tabpane` (or your `tab`). If your content is markdown, use the percent sign `%` as outermost delimiter of your `tab` shortcode, your markup should look like `{{%/* tab */%}}`Your \*\*markdown\*\* content`{{%/* /tab */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.
+  * If the contents of your tabs should be rendered as text with different styles and with optional images, specify `text=true` as parameter of your `tabpane` (or your `tab`). If your content is markdown, use the percent sign `%` as outermost delimiter of your `tab` shortcode, your markup should look like `{{%/* tab */%}}`Your \*\*markdown\*\* content`{{%/* /tab */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.
 
 {{% alert title="Info" %}}
-By default, the language of the selected tab is stored and preserved between different browser sessions. If the content length within your tabs differs greatly, this may lead to unwanted scrolling when switching between tabs. To disable this unwanted behaviour, specify `persistLang=false` within your `tabpane` shortcode. 
+By default, the language of the selected tab is stored and preserved between different browser sessions. If the content length within your tabs differs greatly, this may lead to unwanted scrolling when switching between tabs. To disable this unwanted behaviour, specify `persistLang=false` within your `tabpane` shortcode.
 {{% /alert %}}
 
 ## Card panes