chore: adapt theme to new template system (#696)

* Adapted theme's layout to [Hugo v0.146.0](https://gohugo.io/templates/new-templatesystem-overview/)
* Bumped minimal Hugo version to v0.146.0

layouts/_shortcodes/badge.html

@@ -0,0 +1,36 @@
+{{- if .IsNamedParams -}}
+  {{- $content := .Get "content" -}}
+  {{- $type := .Get "type" | default "" -}}
+  {{- $class := .Get "class" | default "" -}}
+  {{- $link := .Get "link" | default "" -}}
+  {{- $icon := .Get "icon" | default "" -}}
+
+  {{- if $link -}}
+    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
+      {{- partial "shortcodes/badge.html" (dict
+        "content" $content 
+        "type" $type
+        "class" $class
+        "border" true
+        "icon" $icon
+        )
+      -}}
+    </a>
+  {{- else -}}
+    {{- partial "shortcodes/badge.html" (dict
+      "content" $content 
+      "type" $type
+      "class" $class
+      "border" true
+      "icon" $icon
+      )
+    -}}
+  {{- end -}}
+{{- else -}}
+  {{- $content := .Get 0 -}}
+  {{- partial "shortcodes/badge.html" (dict
+    "content" $content 
+    "border" true
+    )
+  -}}
+{{- end -}}

layouts/_shortcodes/callout.html

@@ -0,0 +1,19 @@
+{{- $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" -}}
+{{- $type := .Get "type" | default "default" -}}
+{{/* If emoji is not set, use the emoji from dict */}}
+{{- $emoji := .Get "emoji" -}}
+{{- if eq $emoji "" -}}
+  {{- $emoji = index $calloutEmojiDict $type -}}
+{{- end -}}
+{{/* Also allow using "icon" */}}
+{{- $icon := .Get "icon" -}}
+{{- $content := .InnerDeindent | markdownify -}}
+
+{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
+{{- $infoClass := "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
+{{- $warningClass := "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
+{{- $errorClass := "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
+
+{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
+
+{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}

layouts/_shortcodes/card.html

@@ -0,0 +1,49 @@
+{{- $context := . -}}
+{{- $link := .Get "link" -}}
+{{- $title := .Get "title" -}}
+{{- $icon := .Get "icon" -}}
+{{- $subtitle := .Get "subtitle" -}}
+{{- $image := .Get "image" -}}
+{{- $width := 0 -}}
+{{- $height := 0 -}}
+{{- $imageStyle := .Get "imageStyle" -}}
+{{- $tag := .Get "tag" -}}
+{{- $tagType := .Get "tagType" -}}
+
+{{/* Image processing options */}}
+{{- $method := .Get "method" | default "Resize" | humanize -}}
+{{- $options := .Get "options" | default "800x webp q80" -}}
+{{- $process := .Get "process" | default (printf "%s %s" $method $options) -}}
+
+{{- if and $image (not (urls.Parse $image).Scheme) -}}
+  {{- with or (.Page.Resources.Get $image) (resources.Get $image) -}}
+    {{/* .Process does not work on svgs */}}
+    {{- if (not (eq .MediaType.SubType "svg")) -}}
+      {{/* Retrieve the $image resource from local or global resources */}}
+      {{- $processed := .Process $process -}}
+      {{- $width = $processed.Width -}}
+      {{- $height = $processed.Height -}}
+      {{- $image = $processed.RelPermalink -}}
+    {{- end -}}
+  {{ else }}
+    {{/* Otherwise, use relative link of the image */}}
+    {{- if hasPrefix $image "/" -}}
+      {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{- partial "shortcodes/card" (dict
+  "page"        .Page
+  "link"        $link
+  "title"       $title
+  "icon"        $icon
+  "subtitle"    $subtitle
+  "image"       $image
+  "width"       $width
+  "height"      $height
+  "imageStyle"  $imageStyle
+  "tag"         $tag
+  "tagType"     $tagType
+  )
+-}}

layouts/_shortcodes/cards.html

@@ -0,0 +1,3 @@
+{{- $cols := .Get "cols" | default 3 -}}
+
+{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}

layouts/_shortcodes/details.html

@@ -0,0 +1,11 @@
+{{- $title := .Get "title" | default "" -}}
+{{- $closed := eq (.Get "closed") "true" | default false -}}
+
+<details class="hx:last-of-type:mb-0 hx:rounded-lg hx:bg-neutral-50 hx:dark:bg-neutral-800 hx:p-2 hx:mt-4 hx:group" {{ if not $closed }}open{{ end }}>
+  <summary class="hx:flex hx:items-center hx:cursor-pointer hx:select-none hx:list-none hx:p-1 hx:rounded-sm hx:transition-colors hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:before:mr-1 hx:before:inline-block hx:before:transition-transform hx:before:content-[''] hx:dark:before:invert hx:rtl:before:rotate-180 hx:group-open:before:rotate-90">
+    <strong class="hx:text-lg">{{ $title | markdownify }}</strong>
+  </summary>
+  <div class="hx:p-2 hx:overflow-hidden">
+    {{ .InnerDeindent | markdownify }}
+  </div>
+</details>

layouts/_shortcodes/filetree/container.html

@@ -0,0 +1,5 @@
+<div class="hextra-filetree hx:mt-6 hx:select-none hx:text-sm hx:text-gray-800 hx:dark:text-gray-300 not-prose">
+  <div class="hx:inline-block hx:rounded-lg hx:px-4 hx:py-2 hx:border hx:border-gray-200 hx:dark:border-neutral-800">
+    {{- .InnerDeindent -}}
+  </div>
+</div>

layouts/_shortcodes/filetree/file.html

@@ -0,0 +1,9 @@
+{{- $name := .Get "name" -}}
+
+
+<li class="hx:flex hx:list-none">
+  <span class="hx:inline-flex hx:cursor-default hx:items-center hx:py-1">
+    {{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}}
+    <span class="hx:ltr:ml-1 hx:rtl:mr-1">{{ $name | markdownify }}</span>
+  </span>
+</li>

layouts/_shortcodes/filetree/folder.html

@@ -0,0 +1,17 @@
+{{- $name := .Get "name" -}}
+{{- $state := .Get "state" | default "open" }}
+
+<li class="hx:group hx:flex hx:list-none hx:flex-col">
+  <button class="hextra-filetree-folder hx:inline-flex hx:cursor-pointer hx:items-center hx:py-1 hx:hover:opacity-60">
+    <span data-state="{{ $state }}" class="hx:data-[state=open]:hidden">
+      {{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
+    </span>
+    <span data-state="{{ $state }}" class="hx:data-[state=closed]:hidden">
+      {{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
+    </span>
+    <span class="hx:ltr:ml-1 hx:rtl:mr-1">{{ $name }}</span>
+  </button>
+  <ul data-state="{{ $state }}" class="hx:ltr:pl-5 hx:rtl:pr-5 hx:data-[state=closed]:hidden">
+    {{- .InnerDeindent -}}
+  </ul>
+</li>

layouts/_shortcodes/hextra/feature-card.html

@@ -0,0 +1,36 @@
+{{- $title := .Get "title" -}}
+{{- $subtitle := .Get "subtitle" -}}
+{{- $class := .Get "class" -}}
+{{- $image := .Get "image" -}}
+{{- $imageClass := .Get "imageClass" -}}
+{{- $style := .Get "style" -}}
+{{- $icon := .Get "icon" -}}
+{{- $link := .Get "link" -}}
+
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
+
+{{- if hasPrefix $image "/" -}}
+  {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+{{- end -}}
+
+<a
+  {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  class="{{ $class }} hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
+>
+  <div class="hx:relative hx:w-full hx:p-6">
+    <h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
+      {{ with $icon -}}
+        <span class="hx:pr-2">
+          {{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
+        </span>
+      {{ end -}}
+      <span>{{ $title }}</span>
+    </h3>
+    <p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">{{ $subtitle | markdownify }}</p>
+  </div>
+  {{- with $image -}}
+    <img src="{{ . }}" class="hx:absolute hx:max-w-none {{ $imageClass }}" alt="{{ $title }}" />
+  {{- end -}}
+</a>

layouts/_shortcodes/hextra/feature-grid.html

@@ -0,0 +1,12 @@
+{{- $cols := .Get "cols" | default 3 -}}
+{{- $style := .Get "style" | default "" -}}
+
+{{- $css := printf "--hextra-feature-grid-cols: %v; %s" $cols $style -}}
+
+
+<div
+  class="hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
+  {{ with $css }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner }}
+</div>

layouts/_shortcodes/hextra/hero-badge.html

@@ -0,0 +1,15 @@
+{{- $link := .Get "link" -}}
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
+{{- $class := .Get "class" }}
+{{- $style := .Get "style" -}}
+
+
+<a
+  {{ if $link }}href="{{ $href }}"{{ end }}
+  class="{{ $class }} not-prose hx:inline-flex hx:items-center hx:rounded-full hx:gap-2 hx:px-3 hx:py-1 hx:text-xs hx:text-gray-600 hx:dark:text-gray-400 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:border-gray-200 hx:dark:border-neutral-800 hx:border hx:hover:border-gray-400 hx:dark:hover:text-gray-50 hx:dark:hover:border-gray-600 hx:transition-all hx:ease-in hx:duration-200"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
+>
+  {{ .Inner | markdownify }}
+</a>

layouts/_shortcodes/hextra/hero-button.html

@@ -0,0 +1,15 @@
+{{- $link := .Get "link" -}}
+{{- $text := .Get "text" -}}
+{{- $style := .Get "style" -}}
+
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (hasPrefix $link "/") ($link | relURL) $link -}}
+
+<a
+  href="{{ $href }}"
+  class="not-prose hx:font-medium hx:cursor-pointer hx:px-6 hx:py-3 hx:rounded-full hx:text-center hx:text-white hx:inline-block hx:bg-primary-600 hx:hover:bg-primary-700 hx:focus:outline-hidden hx:focus:ring-4 hx:focus:ring-primary-300 hx:dark:bg-primary-600 hx:dark:hover:bg-primary-700 hx:dark:focus:ring-primary-800 hx:transition-all hx:ease-in hx:duration-200"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
+>
+  {{- $text -}}
+</a>

layouts/_shortcodes/hextra/hero-container.html

@@ -0,0 +1,38 @@
+{{- $class := .Get "class" -}}
+{{- $cols := .Get "cols" | default 2 -}}
+{{- $image := .Get "image" -}}
+{{- $imageCard := .Get "imageCard" | default false -}}
+{{- $imageClass := .Get "imageClass" -}}
+{{- $imageLink := .Get "imageLink" -}}
+{{- $imageLinkExternal := hasPrefix $imageLink "http" -}}
+{{- $imageStyle := .Get "imageStyle" -}}
+{{- $imageTitle := .Get "imageTitle" -}}
+{{- $imageWidth := .Get "imageWidth" | default 350 -}}
+{{- $imageHeight := .Get "imageHeight" | default 350 -}}
+{{- $style := .Get "style" -}}
+
+{{- $css := printf "--hextra-feature-grid-cols: %v; %s" $cols $style -}}
+{{- $href := cond (hasPrefix $imageLink "/") ($imageLink | relURL) $imageLink -}}
+{{- if hasPrefix $image "/" -}}
+  {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+{{- end -}}
+
+<div
+  class="{{ $class }} hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
+  {{ with $css }}style="{{ . | safeCSS }}"{{ end }}
+>
+  <div class="hx:w-full">
+    {{ .Inner }}
+  </div>
+  {{- with $image }}
+  <div class="hx:mx-auto">
+    <a
+      {{ with $imageLink }}href="{{ $href }}" {{ with $imageLinkExternal }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
+      {{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
+      class="{{ $imageClass }} {{ if $imageCard }}hextra-feature-card not-prose hx:block hx:relative hx:p-6 hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient{{ end }}"
+    >
+      <img src="{{ $image }}" width="{{ $imageWidth }}" height="{{ $imageHeight }}" {{ with $imageTitle }}alt="{{ $imageTitle }}"{{ end }}/>
+    </a>
+  </div>
+  {{ end -}}
+</div>

layouts/_shortcodes/hextra/hero-headline.html

@@ -0,0 +1,9 @@
+{{- $style := .Get "style" -}}
+
+
+<h1
+  class="not-prose hx:text-4xl hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-5xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</h1>

layouts/_shortcodes/hextra/hero-section.html

@@ -0,0 +1,10 @@
+{{- $style := .Get "style" -}}
+{{- $heading := int (strings.TrimPrefix "h" (.Get "heading" | default "h2")) -}}
+{{- $size := cond (ge $heading 4) "xl" (cond (eq $heading 3) "2xl" "4xl") -}}
+
+<h{{ $heading }}
+  class="not-prose hx:text-{{ $size }} hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-3xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</h{{ $heading }}>

layouts/_shortcodes/hextra/hero-subtitle.html

@@ -0,0 +1,9 @@
+{{- $style := .Get "style" -}}
+
+
+<p
+  class="not-prose hx:text-xl hx:text-gray-600 hx:dark:text-gray-400 hx:sm:text-xl"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</p>

layouts/_shortcodes/icon.html

@@ -0,0 +1,13 @@
+{{- $name := .Get "name" | default (.Get 0) -}}
+{{- $icon := index site.Data.icons $name -}}
+{{- $attributes := .Get "attributes" | default "height=1em"}}
+
+{{- if not $icon -}}
+  {{ errorf "icon %q not found" $name }}
+{{- end -}}
+
+{{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
+
+<span class="hx:inline-block hx:align-text-bottom icon">
+  {{- $icon | safeHTML -}}
+</span>

layouts/_shortcodes/include.html

@@ -0,0 +1,22 @@
+{{- /*
+https://github.com/gohugoio/gohugoioTheme/blob/master/layouts/shortcodes/include.html
+
+Renders the page using the RenderShortcode method on the Page object.
+
+You must call this shortcode using the {{% %}} notation.
+
+@param {string} (positional parameter 0) The path to the page, relative to the content directory.
+@returns template.HTML
+
+@example {{% include "functions/_common/glob-patterns" %}}
+*/}}
+
+{{- with .Get 0 }}
+  {{- with site.GetPage . }}
+    {{- .RenderShortcodes }}
+  {{- else }}
+    {{- errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
+  {{- end }}
+{{- else }}
+  {{- errorf "The %q shortcode requires a positional parameter indicating the path of the file to include. See %s" .Name .Position }}
+{{- end }}

layouts/_shortcodes/jupyter.html

@@ -0,0 +1,81 @@
+{{/* Render Jupyter Notebook */}}
+{{- $path := .Get 0 -}}
+{{- $data := "" -}}
+{{- $page := .Page -}}
+
+{{- $isLocal := not (urls.Parse $path).Scheme -}}
+{{- $isPage := and (eq .Page.Kind "page") (not .Page.BundleType) -}}
+
+{{/* https://gohugo.io/functions/transform/unmarshal/ */}}
+{{- if (not $isLocal) -}}
+  {{- with resources.GetRemote $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Remote resource not found: %s" $path -}}
+  {{- end -}}
+{{- else if (not $isPage) -}}
+  {{- with .Page.Resources.Get $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Local resource not found: %s" $path -}}
+  {{- end -}}
+{{- else -}}
+  {{- with resources.Get $path -}}
+    {{- with unmarshal .Content -}}{{- $data = . -}}{{- end -}}
+  {{- else -}}
+    {{- errorf "Local resource not found: %s" $path -}}
+  {{- end -}}
+{{- end -}}
+
+{{- $language := index $data "metadata" "language_info" "name" | default "python" -}}
+
+{{- with index $data "cells" -}}
+  {{- range $cell := . -}}
+    {{- if eq (index $cell "cell_type") "code" -}}
+      {{- $source := index $cell "source" -}}
+      {{- $sourceContent := (cond (reflect.IsSlice $source) (delimit $source "") $source) -}}
+{{- with ($sourceContent | strings.Chomp) -}}
+{{ (printf "\n\n```%s\n%s\n```\n" $language .) | safeHTML -}}
+{{- end -}}
+
+      <div class="hextra-jupyter-code-cell hextra-scrollbar">
+        {{- $outputs := index $cell "outputs" -}}
+        {{- with $outputs -}}
+          <div class="hextra-jupyter-code-cell-outputs-container">
+            <div class="hextra-jupyter-code-cell-outputs">
+              {{- range $output := . -}}
+                {{- if eq (index $output "output_type") "display_data" -}}
+                  {{- $data := index $output "data" -}}
+                  {{- $image := index $data "image/png" -}}
+                  {{- if $image -}}
+                    <img src="data:image/png;base64,{{- $image -}}" alt="image" />
+                  {{- end -}}
+                {{- else if eq (index $output "output_type") "stream" -}}
+                  {{- $text := index $output "text" -}}
+                  {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
+                  <pre class="not-prose">{{- $textContent -}}</pre>
+                {{- else if eq (index $output "output_type") "execute_result" -}}
+                  {{- $data := index $output "data" -}}
+                  {{- $text := index $data "text/plain" -}}
+                  {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
+                  <pre class="not-prose">{{- $textContent -}}</pre>
+                  {{- $html := index $data "text/html" -}}
+                  {{- if $html -}}
+                    {{- $htmlText := delimit $html "" -}}
+                    <div>
+                      {{- $htmlText | safeHTML -}}
+                    </div>
+                  {{- end -}}
+                {{- end -}}
+              {{- end -}}
+            </div>
+          </div>
+        {{- end -}}
+      </div>
+    {{- else if eq (index $cell "cell_type") "markdown" -}}
+        {{- $source := index $cell "source" }}
+        {{- $sourceContent := (cond (reflect.IsSlice $source) (delimit $source "") $source) }}
+{{ (printf "\n%s\n" $sourceContent) | safeHTML }}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}

layouts/_shortcodes/pdf.html

@@ -0,0 +1,9 @@
+{{/* Shortcode to include a PDF file in a page. */}}
+
+{{- $path := .Get 0 -}}
+{{- $url := partial "utils/file-path" (dict "page" .Page "path" $path) -}}
+
+
+<div class="hextra-pdf">
+  <iframe src="{{ $url | safeURL }}" width="100%" style="min-height: 32rem;" frameborder="0"></iframe>
+</div>

layouts/_shortcodes/steps.html

@@ -0,0 +1,3 @@
+<div class="steps hx:ml-4 hx:mb-12 hx:ltr:border-l hx:rtl:border-r hx:border-gray-200 hx:ltr:pl-6 hx:rtl:pr-6 hx:dark:border-neutral-800 [counter-reset:step]">
+  {{- .Inner -}}
+</div>

layouts/_shortcodes/tab.html

@@ -0,0 +1,12 @@
+{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
+
+<div
+  class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block"
+  id="tabs-panel-{{ .Ordinal }}"
+  role="tabpanel"
+  {{- if eq .Ordinal $defaultIndex }} tabindex="0" {{ end -}}
+  {{- if eq .Ordinal $defaultIndex }} data-state="selected" {{ end -}}
+>
+  {{- .InnerDeindent | markdownify -}}
+</div>
+{{- /* Drop trailing newlines */ -}}

layouts/_shortcodes/tabs.html

@@ -0,0 +1,28 @@
+{{- $items := split (.Get "items") "," -}}
+{{- $defaultIndex := int ((.Get "defaultIndex") | default "0") -}}
+
+{{- if not $items -}}
+  {{ errorf "no items provided" }}
+{{- 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">
+    {{- 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 */ -}}