Merge 368c20e935eb96e9a6a5998c5a2941b9416b286c into e3b582676e5db64078053db99e3636e5b6311874

* fix: properly handle tabs overflow

* chore: rebuild css

assets/css/compiled/main.css

@@ -914,9 +914,15 @@ video {
 .hx-overflow-x-hidden {
   overflow-x: hidden;
 }
+.hx-overflow-y-hidden {
+  overflow-y: hidden;
+}
 .hx-overscroll-contain {
   overscroll-behavior: contain;
 }
+.hx-overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
 .hx-text-ellipsis {
   text-overflow: ellipsis;
 }

assets/js/tabs.js

@@ -1,14 +1,14 @@
-document.querySelectorAll('.tabs-toggle').forEach(function (button) {
+document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) {
   button.addEventListener('click', function (e) {
     // set parent tabs to unselected
-    const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
+    const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-tabs-toggle'));
     tabs.map(tab => tab.dataset.state = '');
 
     // set current tab to selected
     e.target.dataset.state = 'selected';
 
     // set all panels to unselected
-    const panelsContainer = e.target.parentElement.nextElementSibling;
+    const panelsContainer = e.target.parentElement.parentElement.nextElementSibling;
     Array.from(panelsContainer.children).forEach(function (panel) {
       panel.dataset.state = '';
     });

exampleSite/content/docs/guide/syntax-highlighting.md

@@ -78,11 +78,18 @@ def main():
     say_hello()
 ```
 
-
 ### Copy Button
 
-By default, copy button is enabled for code blocks.
+By default, copy button is enabled for code blocks. Its behavior can changed by modifying the site configuration file:
 
+```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
+params:
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+```
 
 ## Supported Languages
 

exampleSite/hugo.yaml

@@ -151,6 +151,12 @@ params:
       sortBy: date
       sortOrder: desc # or "asc"
 
+  highlight:
+    copy:
+      enable: true
+      # hover | always
+      display: hover
+
   comments:
     enable: false
     type: giscus

exampleSite/hugo_stats.json

@@ -222,6 +222,8 @@
       "hextra-footer",
       "hextra-scrollbar",
       "hextra-sidebar-collapsible-button",
+      "hextra-tabs-panel",
+      "hextra-tabs-toggle",
       "hextra-toc",
       "highlight",
       "hover:dark:hx-bg-primary-500/10",
@@ -392,7 +394,9 @@
       "hx-overflow-x-auto",
       "hx-overflow-x-hidden",
       "hx-overflow-y-auto",
+      "hx-overflow-y-hidden",
       "hx-overscroll-contain",
+      "hx-overscroll-x-contain",
       "hx-p-0.5",
       "hx-p-1",
       "hx-p-1.5",
@@ -603,8 +607,6 @@
       "steps",
       "subheading-anchor",
       "success-icon",
-      "tabs-panel",
-      "tabs-toggle",
       "theme-toggle",
       "xl:hx-block"
     ],

layouts/shortcodes/hextra/hero-section.html

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

layouts/shortcodes/tab.html

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

layouts/shortcodes/tabs.html

@@ -5,21 +5,22 @@
   {{ errorf "no items provided" }}
 {{- end -}}
 
-
-<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
-  {{- range $i, $item := $items -}}
-    <button
-      class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-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 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-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 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 dark:hx-border-neutral-800">
+    {{- range $i, $item := $items -}}
+      <button
+        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-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 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-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 }}