Merge 06eb8a66a1 into f377609eba

update the theme 241104

assets/css/compiled/main.css

@@ -3258,14 +3258,6 @@ body:is(html[class~="dark"] *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity));
 }
-.data-\[state\=selected\]\:dark\:hx-border-primary-500:is(html[class~="dark"] *)[data-state="selected"] {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
-}
-.data-\[state\=selected\]\:dark\:hx-text-primary-600:is(html[class~="dark"] *)[data-state="selected"] {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
-}
 @media (prefers-contrast: more) {
 
   .contrast-more\:dark\:hx-border-current:is(html[class~="dark"] *) {

assets/js/sidebar.js

@@ -1,8 +1,43 @@
 document.addEventListener("DOMContentLoaded", function () {
-  scrollToActiveItem();
-  enableCollapsibles();
+  initializeSidebar();
 });
 
+function initializeSidebar() {
+  const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
+  if (!sidebarScrollbar) return;
+
+  enableCollapsibles();
+  restoreSidebarPosition(sidebarScrollbar);
+
+  const debouncedSave = debounce((position) => {
+    saveSidebarPosition(position);
+  }, 150);
+  
+  sidebarScrollbar.addEventListener('scroll', function() {
+    debouncedSave(this.scrollTop);
+  });
+
+  document.querySelectorAll('a').forEach(link => {
+    if (link.hostname === window.location.hostname) {
+      link.addEventListener('click', function(e) {
+        saveSidebarPosition(sidebarScrollbar.scrollTop);
+      });
+    }
+  });
+}
+
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 function enableCollapsibles() {
   const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
   buttons.forEach(function (button) {
@@ -16,21 +51,16 @@ function enableCollapsibles() {
   });
 }
 
-function scrollToActiveItem() {
-  const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
-  const activeItems = document.querySelectorAll(".sidebar-active-item");
-  const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
-    return activeItem.getBoundingClientRect().height > 0;
-  });
-
-  if (!visibleActiveItem) {
-    return;
+function saveSidebarPosition(scrollPosition) {
+  localStorage.setItem('sidebarScrollPosition', scrollPosition);
 }
 
-  const yOffset = visibleActiveItem.clientHeight;
-  const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
-  sidebarScrollbar.scrollTo({
-    behavior: "instant",
-    top: yDistance - yOffset
+function restoreSidebarPosition(sidebarScrollbar) {
+  const savedPosition = localStorage.getItem('sidebarScrollPosition');
+  
+  if (savedPosition !== null) {
+    requestAnimationFrame(() => {
+      sidebarScrollbar.scrollTop = parseInt(savedPosition);
     });
   }
+}

exampleSite/content/docs/advanced/customization.md

@@ -44,128 +44,6 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
 }
 ```
 
-### Further Theme Customization
-
-The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
-
-```css {filename="assets/css/custom.css"}
-.hextra-footer {
-  /* Styles will be applied to the footer element */
-}
-
-.hextra-footer:is(html[class~="dark"] *) {
-  /* Styles will be applied to the footer element in dark mode */
-}
-```
-
-The following classes can be used to customize various parts of the theme.
-
-#### General
-
-- `hextra-scrollbar` - The scrollbar element
-- `content` - Page content container
-
-#### Shortcodes
-
-##### Badge
-
-- `hextra-badge` - The badge element
-
-##### Card
-
-- `hextra-card` - The card element
-- `hextra-card-image` - The card image element
-- `hextra-card-icon` - The card icon element
-- `hextra-card-subtitle` - The card subtitle element
-
-##### Cards
-
-- `hextra-cards` - The cards grid container
-
-##### Jupyter Notebook
-
-- `hextra-jupyter-code-cell` - The Jupyter code cell container
-- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
-- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
-
-##### PDF
-
-- `hextra-pdf` - The PDF container element
-
-##### Steps
-
-- `steps` - The steps container
-
-##### Tabs
-
-- `hextra-tabs-panel` - The tabs panel container
-- `hextra-tabs-toggle` - The tabs toggle button
-
-##### Filetree
-
-- `hextra-filetree` - The filetree container
-
-##### Folder
-
-- `hextra-filetree-folder` - The filetree folder container
-
-#### Navbar
-
-- `nav-container` - The navbar container
-- `nav-container-blur` - The navbar container in blur element
-- `hamburger-menu` - The hamburger menu button
-
-#### Footer
-
-- `hextra-footer` - The footer element
-- `hextra-custom-footer` - The custom footer section container
-
-#### Search
-
-- `search-wrapper` - The search wrapper container
-- `search-input` - The search input element
-- `search-results` - The search results list container
-
-#### Table of Contents
-
-- `hextra-toc` - The table of contents container
-
-#### Sidebar
-
-- `mobile-menu-overlay` - The overlay element for the mobile menu
-- `sidebar-container` - The sidebar container
-- `sidebar-active-item` - The active item in the sidebar
-
-#### Language Switcher
-
-- `language-switcher` - The language switcher button
-- `language-options` - The language options container
-
-#### Theme Toggle
-
-- `theme-toggle` - The theme toggle button
-
-#### Cody Copy Button
-
-- `hextra-code-copy-btn-container` - The code copy button container
-- `hextra-code-copy-btn` - The code copy button
-
-#### Code Block
-
-- `hextra-code-block` - The code block container
-
-#### Feature Card
-
-- `hextra-feature-card` - The feature card link element
-
-#### Feature Grid
-
-- `hextra-feature-grid` - The feature grid container
-
-#### Breadcrumbs
-
-No specific class is available for breadcrumbs.
-
 ### Syntax Highlighting
 
 List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
@@ -184,28 +62,13 @@ You may add custom scripts to the end of the head for every page by adding the f
 layouts/partials/custom/head-end.html
 ```
 
-## Custom Extra Section in Footer
-
-You can add extra section in the footer by creating a file `layouts/partials/custom/footer.html` in your site.
-
-```html {filename="layouts/partials/custom/footer.html"}
-<!-- Your footer element here -->
-```
-
-The added section will be added before the copyright section in the footer.
-You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content.
-
-Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`.
-
 ## Custom Layouts
 
 The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
 For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
 
-For further information, refer to the [Hugo Templates][hugo-template-docs].
+For further information, refer to the [Hugo Templates](https://gohugo.io/templates/).
 
 ## Further Customization
 
 Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!
-
-[hugo-template-docs]: https://gohugo.io/templates/

exampleSite/content/docs/guide/shortcodes/others.md

@@ -34,15 +34,16 @@ Result:
 {{< badge content="warning" type="warning" >}} &nbsp;
 {{< badge content="error" type="error" >}}
 
-With link and icon:
+With link:
 
 ```
-{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
+{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" */>}}
 ```
 
 Result:
 
-{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
+{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}}
+
 
 ## YouTube
 

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

@@ -40,22 +40,6 @@ def say_hello():
     print("Hello!")
 ```
 
-### Link to File
-
-You can use the `base_url` attribute to provide a base URL that will be combined with the file name to generate a link.
-
-The file name can include a relative path if it specifies the file's location within the base path.
-
-````markdown {filename="Markdown"}
-```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
-go 1.20
-```
-````
-
-```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
-go 1.20
-```
-
 ### Line Numbers
 
 To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number:

exampleSite/content/showcase/index.md

@@ -95,7 +95,7 @@ Open source projects powered by Hextra
   >}}
 
   {{< card
-        link="https://github.com/remysheppard/lutheran-confessions"
+        link="https://lutheranconfessions.org/"
         title="LutheranConfessions"
         image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
         imageStyle="object-fit:cover; aspect-ratio:16/9;"

exampleSite/hugo.yaml

@@ -173,4 +173,3 @@ params:
       # emitMetadata: 0
       # inputPosition: top
       # lang: en
-      # theme: noborder_dark

exampleSite/hugo_stats.json

@@ -197,8 +197,6 @@
       "dark:placeholder:hx-text-gray-400",
       "data-[state=closed]:hx-hidden",
       "data-[state=open]:hx-hidden",
-      "data-[state=selected]:dark:hx-border-primary-500",
-      "data-[state=selected]:dark:hx-text-primary-600",
       "data-[state=selected]:hx-block",
       "data-[state=selected]:hx-border-primary-500",
       "data-[state=selected]:hx-text-primary-600",
@@ -230,7 +228,6 @@
       "hextra-code-block",
       "hextra-code-copy-btn",
       "hextra-code-copy-btn-container",
-      "hextra-custom-footer",
       "hextra-feature-card",
       "hextra-feature-grid",
       "hextra-filetree",

exampleSite/layouts/shortcodes/new-feature.html

@@ -1,11 +0,0 @@
-{{- $version := .Get "version" | default "" -}}
-{{- $icon := .Get "icon" | default "" -}}
-{{- $defaultLink := cond (eq $version "") "https://github.com/imfing/hextra/tree/main" (printf "https://github.com/imfing/hextra/releases/tag/%s" $version) -}}
-{{- $link := .Get "link" | default $defaultLink -}}
-{{- $content := cond (eq $version "") "New in main branch" (printf "New in %s" $version) -}}
-
-<div style="margin-top: 1rem; display: inline-flex;">
-  <a href="{{ $link }}" title="{{ $link | plainify }}" target="_blank">
-    {{- partial "shortcodes/badge" (dict "content" $content "border" true "icon" $icon) -}}
-  </a>
-</div>

layouts/_default/_markup/render-codeblock.html

@@ -1,13 +1,12 @@
 {{- $class := .Attributes.class | default "" -}}
 {{- $filename := .Attributes.filename | default "" -}}
-{{- $base_url := .Attributes.base_url | default "" -}}
 {{- $lang := .Attributes.lang | default .Type -}}
 
 
 <div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
-  {{- partial "components/codeblock" (dict "filename" $filename "lang" $lang "base_url" $base_url "content" .Inner "options" .Options) -}}
+  {{ partial "components/codeblock" (dict "filename" $filename "lang" $lang "content" .Inner "options" .Options) }}
 
-  {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) -}}
-    {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename -}}
-  {{- end -}}
+  {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) }}
+    {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename }}
+  {{ end }}
 </div>

layouts/partials/components/codeblock.html

@@ -1,27 +1,11 @@
 {{ $filename := .filename | default "" -}}
-{{ $base_url := .base_url | default "" -}}
 {{ $lang := .lang | default "" }}
 {{ $content := .content }}
 {{ $options := .options | default (dict) }}
 
 {{- if $filename -}}
-  <div class="filename not-prose" dir="auto">
-    {{- if $base_url -}}
-
-      {{- $base_url = strings.TrimSuffix "/" $base_url -}}
-      {{- $filename = strings.TrimPrefix "/" $filename -}}
-      {{- $file_url := urls.JoinPath $base_url $filename -}}
-
-      <a class="hx-no-underline hx-inline-flex hx-items-center hx-gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
-          <span>{{- $filename -}}</span>
-          {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
-      </a>
-    {{- else -}}
-      {{- $filename -}}
+  <div class="filename" dir="auto">{{ $filename }}</div>
 {{- end -}}
-  </div>
-{{- end -}}
-
 {{- if transform.CanHighlight $lang -}}
   <div>{{- highlight $content $lang $options -}}</div>
 {{- else -}}

layouts/partials/components/giscus.html

@@ -8,17 +8,8 @@
    * This solution was created with reference to:
    * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
   */
-  function getHugoTheme() {
-    return localStorage.getItem("color-theme");
-  }
-  
   function getGiscusTheme() {
-    let giscusTheme = "{{ (string .theme) | default `light` }}";
-    if(getHugoTheme() == 'light') {
-      return giscusTheme.replace('dark', 'light');
-    } else {
-      return giscusTheme.replace('light', 'dark');
-    }
+    return localStorage.getItem("color-theme");
   }
 
   function setGiscusTheme() {

layouts/partials/footer.html

@@ -1,7 +1,5 @@
 {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
 {{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
-{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
-{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
 
 {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
 {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
@@ -17,7 +15,7 @@
 
 
 <footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
-  {{- if $footerSwitchesVisible -}}
+  {{- if $enableFooterSwitches -}}
     <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
       {{- partial "language-switch.html" (dict "context" .) -}}
       {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
@@ -26,21 +24,14 @@
       <hr class="dark:hx-border-neutral-800" />
     {{- end -}}
   {{- end -}}
-    <div
-      class="hextra-custom-footer {{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400"
-    >
-      {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
-    </div>
-    {{- if $copyrightSectionVisible -}}
   <div
     class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
   >
     <div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
-            {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}}
-            {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
+      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
+      {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
     </div>
   </div>
-    {{- end -}}
 </footer>
 
 {{- define "theme-credit" -}}

layouts/partials/shortcodes/badge.html

@@ -2,7 +2,6 @@
 {{- $type := .type -}}
 {{- $class := .class | default "" -}}
 {{- $border := .border | default false -}}
-{{- $icon := .icon | default "" -}}
 
 {{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}}
 {{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
@@ -12,9 +11,6 @@
 {{- $borderClass := cond (eq $border true) "hx-border" "" -}}
 {{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
 <div class="hextra-badge {{ $class }}">
-  <div class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
-    {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
-    {{- $content -}}
-  </div>
+  <div class="hx-inline-flex hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
 </div>
 {{- /* Strip trailing newline. */ -}}

layouts/shortcodes/badge.html

@@ -3,7 +3,6 @@
   {{- $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">
@@ -12,7 +11,6 @@
         "type" $type
         "class" $class
         "border" true
-        "icon" $icon
         )
       -}}
     </a>
@@ -22,7 +20,6 @@
       "type" $type
       "class" $class
       "border" true
-      "icon" $icon
       )
     -}}
   {{- end -}}

layouts/shortcodes/tabs.html

@@ -9,7 +9,7 @@
   <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 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark: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"
+        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 }}"