Files
hextra_mirror/layouts/_shortcodes/tabs.html
Xin 7b27743159 feat(tabs): implement synchronized tabs switching (#700)
* Sync tabs across groups

* feat(tabs): add optional synchronization

* Move tabs sync setting under page params

* fix: spacing between title and site title (#704)

* docs: document configure opengraph image (#706)

* [Docs] document using og:image

* Make example title page match others

* clarify wording

* chore: update tailwind css to latest version 4.1.8 (#703)

* fix: wrong SRI hash for katex.css (#702)

* Correct URL given in 'dev.toml'

* stylesheet 'katex.css': fix SRI hash

* fix(build): run npm update to fix postcss complaint

* feat(tags): improve usability of tags (#698)

* feat(tags): improve usability of tags

* Tags can be shown also at docs
* Documented tag-related config flags
* Added example tags to the site
* Made rendered tags active

* Move tags listing to ToC

* Hide tags section on no tags

* feat(math): add optional MathJax support (#707)

* feat: add MathJax option

* docs: move math engine note

* refactor: update LaTeX documentation and improve MathJax integration

- Adjusted LaTeX documentation for clarity and formatting.
- Enhanced MathJax configuration in the templates to support both KaTeX and MathJax rendering.
- Removed deprecated comments and streamlined the script loading process for MathJax.
- Updated the passthrough extension settings in the Hugo configuration for better compatibility with LaTeX math expressions.

* docs: simplify LaTeX documentation and clarify configuration steps

- Updated LaTeX documentation to reflect that KaTeX is enabled by default, removing the need for manual activation.
- Added examples for using LaTeX math expressions and clarified the configuration for the passthrough extension in Hugo.
- Enhanced MathJax section to emphasize its use as an alternative rendering engine.

* fix(tabs): add null check for panels container and update example items

* fix(tabs): improve tab group key handling and add validation for items parameter

* refactor(tabs): comment out sync option in configuration and adjust tab formatting in documentation

---------

Co-authored-by: hobobandy <30026704+hobobandy@users.noreply.github.com>
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
Co-authored-by: Andreas Deininger <adeininger@urbanonline.de>
Co-authored-by: yuri <1969yuri1969@gmail.com>
2025-07-21 21:16:44 +01:00

41 lines
1.8 KiB
HTML

{{- $items := split (.Get "items") "," -}}
{{- $defaultIndex := int ((.Get "defaultIndex") | default "0") -}}
{{- $enableSync := site.Params.page.tabs.sync | default false -}}
{{- if not (.Get "items") -}}
{{ errorf "tabs shortcode: 'items' parameter is required" }}
{{- end -}}
{{- if not $items -}}
{{ errorf "tabs shortcode: 'items' parameter cannot be empty" }}
{{- end -}}
{{- range $items -}}
{{- if eq (trim . " ") "" -}}
{{ errorf "tabs shortcode: empty item found in 'items' parameter" }}
{{- end -}}
{{- end -}}
<div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
<div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800"{{ if $enableSync }} data-tab-group="{{ delimit $items `,` }}"{{ end }}>
{{- range $i, $item := $items -}}
<button
class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"
role="tab"
type="button"
aria-controls="tabs-panel-{{ $i }}"
{{- if eq $i $defaultIndex }} aria-selected="true" {{ end -}}
{{- if eq $i $defaultIndex }} tabindex="0" {{ end -}}
{{- if eq $i $defaultIndex }} data-state="selected"{{ end -}}
>
{{- $item -}}
</button>
{{- end -}}
</div>
</div>
<div>
{{- .Inner -}}
</div>
{{- /* Drop trailing newlines */ -}}