Help:Shortcode Tabs

{{< tabs name="some-name" >}}

{{< tab name="Python" codelang="python" >}}
print("Hello World")
{{< /tab >}}

{{< tab name="C" codelang="c" >}}
printf("Hello World");
{{< /tab >}}

{{< tab name="Description" >}}
This is just a description. No code gets rendered.
{{< /tab >}}}

{{< /tabs >}}

<!-- 

  Tabs Shortcode
  ==============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes:
    - Tab Shortcode
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/tabs.html
  STYLE:  /assets/scss/components/_shortcode_tabs.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Tabs.md

  Description
  -----------

  Use the tab shortcode together with the tabs shortcode to display tabs.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

{{/* prettier-ignore-start */}}
{{- .Page.Scratch.Add "tabset-counter" 1 -}}
{{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
{{- $tabs := .Scratch.Get "tabs" -}}
{{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
<ul class="nav nav-tabs nav-fill mb-4" id="{{ $tab_set_id }}" role="tablist">
        {{- range $i, $e := $tabs -}}
          {{- $id := printf "%s-%d" $tab_set_id $i -}}
          {{- if (eq $i 0) -}}
                <li class="nav-item">
                        <button data-bs-toggle="tab" class="nav-link active" href="#{{ $id }}" type="button" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</button>
                </li>
          {{ else }}
                <li class="nav-item">
                        <button data-bs-toggle="tab" class="nav-link" href="#{{ $id }}" type="button" role="tab" aria-controls="{{ $id }}" aria-selected="false">{{- trim .name " " -}}</button>
                </li>
          {{- end -}}
{{- end -}}
</ul>
<div class="tab-content" id="{{ $tab_set_id }}">
{{- range $i, $e := $tabs -}}
{{- $id := printf "%s-%d" $tab_set_id $i -}}
{{- if (eq $i 0) -}}
  <div id="{{ $id }}" class="tab-pane show active" role="tabpanel" aria-labelledby="{{ $id }}">
{{ else }}
  <div id="{{ $id }}" class="tab-pane" role="tabpanel" aria-labelledby="{{ $id }}">
{{ end }}
<p>
        {{- with .content -}}
                {{- . -}}
        {{- else -}}
                {{- if eq $.Page.BundleType "leaf" -}}
                        {{- /* find the file somewhere inside the bundle. Note the use of double asterisk */ -}}
                        {{- with $.Page.Resources.GetMatch (printf "**%s*" .include) -}}
                                {{- if ne .ResourceType "page" -}}
                                {{- /* Assume it is a file that needs code highlighting. */ -}}
                                {{- $codelang := $e.codelang | default ( path.Ext .Name | strings.TrimPrefix ".") -}}
                                {{- highlight .Content $codelang "" -}}
                                {{- else -}}
                                        {{- .Content -}}
                                {{- end -}}
                        {{- end -}}
                {{- else -}}
                {{- $path := path.Join $.Page.File.Dir .include -}}
                {{- $page := site.GetPage "page" $path -}}
                {{- with $page -}}
                        {{- .Content -}}
                {{- else -}}
                {{- errorf "[%s] tabs include not found for path %q" site.Language.Lang $path -}}
                {{- end -}}
                {{- end -}}
        {{- end -}}
</div>
{{- end -}}
</div>
{{/* prettier-ignore-end */}}

<!-- 

  Tab Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes:
    - Tab Shortcode

  LAYOUT: /layouts/shortcodes/tab.html
  STYLE:  /assets/scss/components/_shortcode_tab.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Tabs.md

  Description
  -----------

  Use the tab shortcode together with the tabs shortcode to display tabs.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

{{/* prettier-ignore-start */}}
{{ if .Parent }}
	{{ $name := trim (.Get "name") " " }}
	{{ $include := trim (.Get "include") " "}}
	{{ $codelang := .Get "codelang" }}
	{{ if not (.Parent.Scratch.Get "tabs") }}
  	{{ .Parent.Scratch.Set "tabs" slice }}
	{{ end }}
	{{ with .Inner }}
  	{{ if $codelang }}
      {{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" (highlight . $codelang "") ) }}
    {{ else }}
      {{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" . ) }}
    {{ end }}
  {{ else }}
    {{ $.Parent.Scratch.Add "tabs" (dict "name" $name "include" $include "codelang" $codelang) }}
	{{ end }}
{{ else }}
	{{- errorf "[%s] %q: tab shortcode missing its parent" site.Language.Lang .Page.Path -}}
{{ end}}
{{/* prettier-ignore-end */}}

/*

  Tabs Shortcode
  ==============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes:
    - Tab Shortcode
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/tabs.html
  STYLE:  /assets/scss/components/_shortcode_tabs.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Tabs.md

  Tab Shortcode
  =============

  LAYOUT: /layouts/shortcodes/tab.html
  STYLE:  /assets/scss/components/_shortcode_tab.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Tabs.md

*/

/* Adapting nav-tabs for dark mode */
@include color-mode(dark) {
  button.nav-link.active {
    background-color: $body-bg-dark;
    color: $body-color-dark;
    border-color: $border-dark;
  }

  button.nav-link {
    color: $link-color-dark;
  }

  .nav-tabs {
    border-bottom: 1px solid $border-dark;
  }
}