feat: add tabs implementation

chore: use filename by default in sidebar

layouts/partials/scripts.html

@@ -13,6 +13,11 @@
   </script>
 {{ end }}
 
+{{ if .HasShortcode "tabs" }}
+  {{ $tabsJS := resources.Get "js/tabs.js" }}
+  <script src="{{ $tabsJS.RelPermalink }}"></script>
+{{ end }}
+
 {{ if .Page.Params.math }}
   <!-- TODO: embed katex in the theme -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous" />

layouts/partials/sidebar.html

@@ -1,26 +1,28 @@
 <aside class="flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
-  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem)]">
+  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem-3.75rem)]">
     <ul class="flex flex-col gap-1 max-md:hidden">
-      {{ $s := .FirstSection }}
-      {{ $topLevelItems := union $s.RegularPages $s.Sections }}
-      {{ $currentUrl := .RelPermalink }}
+      {{- $s := .FirstSection -}}
+      {{- $topLevelItems := union $s.RegularPages $s.Sections -}}
+      {{- $currentUrl := .RelPermalink -}}
 
-      {{ range $topLevelItems.ByWeight }}
-        {{ $isCurrent := eq $currentUrl .RelPermalink }}
+      {{- range $topLevelItems.ByWeight -}}
+        {{- $isCurrent := eq $currentUrl .RelPermalink -}}
+        {{- $title := .LinkTitle | default .File.BaseFileName -}}
         <li class="open">
-          {{ if $isCurrent }}
+          {{- if $isCurrent -}}
             <a
               class="flex cursor-pointer items-center justify-between gap-2 rounded bg-primary-100 px-2 py-1.5 text-sm font-semibold text-primary-800 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500"
               href="{{ .RelPermalink }}"
-              >{{ .LinkTitle }}</a
             >
+              {{- $title -}}
+            </a>
           {{ else }}
             <a
               class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-sm text-gray-500 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50"
               href="{{ .RelPermalink }}"
-              >{{ .LinkTitle }}
+              >{{- $title -}}
             </a>
-          {{ end }}
+          {{- end -}}
         </li>
         {{ $secondLevelItems := union .RegularPages .Sections }}
         {{ with $secondLevelItems }}
@@ -38,7 +40,7 @@
                     {{ end }}"
                     href="{{ .RelPermalink }}"
                   >
-                    {{ .LinkTitle }}
+                    {{ .LinkTitle | default .File.BaseFileName }}
                   </a>
                 </li>
               {{ end }}

layouts/shortcodes/tab.html

@@ -0,0 +1,11 @@
+{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
+
+<div
+  class="tabs-panel rounded pt-6 hidden 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>

layouts/shortcodes/tabs.html

@@ -0,0 +1,26 @@
+{{- $items := split (.Get "items") "," -}}
+{{- $defaultIndex := int ((.Get "defaultIndex") | default "0") -}}
+
+{{- if not $items -}}
+  {{ errorf "no items provided" }}
+{{- end -}}
+
+
+<div class="mt-4 flex w-max min-w-full border-b border-gray-200 pb-px dark:border-neutral-800">
+  {{- range $i, $item := $items -}}
+    <button
+      class="tabs-toggle data-[state=selected]:border-primary-500 data-[state=selected]:text-primary-600 mr-2 rounded-t p-2 font-medium leading-5 transition-colors -mb-0.5 select-none border-b-2 border-transparent text-gray-600 hover:border-gray-200 hover:text-black dark:text-gray-200 dark:hover:border-neutral-800 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>
+  {{ .Inner }}
+</div>