Merge 06eb8a66a12c523297d23a06b376889767a8e80d into 655148f329692288c8a0cc9cae8bbc6635e8d131

* Add docs on how to customize theme

* fix heading level

* extend description

* Add missing classes

* Update exampleSite/content/docs/advanced/customization.md

---------

Co-authored-by: Xin <fuxin1997@gmail.com>

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;
-  }
-
-  const yOffset = visibleActiveItem.clientHeight;
-  const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
-  sidebarScrollbar.scrollTo({
-    behavior: "instant",
-    top: yDistance - yOffset
-  });
+function saveSidebarPosition(scrollPosition) {
+  localStorage.setItem('sidebarScrollPosition', scrollPosition);
 }
+
+function restoreSidebarPosition(sidebarScrollbar) {
+  const savedPosition = localStorage.getItem('sidebarScrollPosition');
+  
+  if (savedPosition !== null) {
+    requestAnimationFrame(() => {
+      sidebarScrollbar.scrollTop = parseInt(savedPosition);
+    });
+  }
+}

exampleSite/content/docs/advanced/customization.md

@@ -44,6 +44,128 @@ 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
+
+#### 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:

exampleSite/content/showcase/index.md

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