feat: add tabs

layouts/partials/vendor.html

@@ -145,3 +145,11 @@
   }}
   <link rel="stylesheet" href="{{ $repoCardCSS.RelPermalink }}" integrity="{{ $repoCardCSS.Data.Integrity }}">
 {{ end }}
+
+{{/* tabs */}}
+{{ if .Page.HasShortcode "tabs" }}
+  {{ $tabJS := resources.Get "js/shortcodes/tabs.js" }}
+  {{ with $tabJS | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+    <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+  {{ end }}
+{{ end }}

layouts/shortcodes/tab.html

@@ -0,0 +1,5 @@
+{{- $index := .Parent.Scratch.Get "tab-index" | default 0 -}}
+{{- .Parent.Scratch.Set "tab-index" (add 1 $index) -}}
+<div class="tab__panel {{ if eq $index 0 }}tab--active{{ end }}" data-tab-index="{{ $index }}">
+  {{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
+</div>

layouts/shortcodes/tabs.html

@@ -0,0 +1,23 @@
+{{- $labels := split (.Get "labels") ";;" -}}
+
+
+<div class="tab__container w-full">
+  <div class="tab__nav" role="tablist">
+    <div class="flex gap-1 overflow-x-auto">
+      {{- range $index, $label := $labels -}}
+        <button
+          class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $index 0 }}
+            tab--active
+          {{ end }}"
+          role="tab"
+          aria-selected="{{ cond (eq $index 0) "true" "false" }}"
+          data-tab-index="{{ $index }}">
+          {{ trim $label " " }}
+        </button>
+      {{- end -}}
+    </div>
+  </div>
+  <div class="tab__content mt-4">
+    {{ .Inner }}
+  </div>
+</div>