Merge bb5923f113 into 97ea67198b

Long sidebars did not scroll to show the selected entry. This made
working with such long sidebars quite confusing.

assets/js/sidebar.js

@@ -1,4 +1,9 @@
 document.addEventListener("DOMContentLoaded", function () {
+  scrollToActiveItem();
+  enableCollapsibles();
+});
+
+function enableCollapsibles() {
   const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
   buttons.forEach(function (button) {
     button.addEventListener("click", function (e) {
@@ -9,4 +14,23 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     });
   });
-});
+}
+
+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
+  });
+}

exampleSite/content/docs/guide/organize-files.md

@@ -112,7 +112,7 @@ Documentation > Guide > Foo Bar
 
 ### Hiding Breadcrumbs
 
-You can hide breadcrumbs completely from a page by specfying `breadcrumbs: false` in its front matter:
+You can hide breadcrumbs completely from a page by specifying `breadcrumbs: false` in its front matter:
 
 ```yaml {filename="content/docs/guide/organize-files.md"}
 ---

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

@@ -87,3 +87,30 @@ Card supports adding tags which could be useful to show extra status information
   {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
 {{</* /cards */>}}
 ```
+
+## Columns
+
+You can specify the maximum number of columns for cards to span by passing the `cols` parameter to the `cards` shortcode. Note that columns will still be collapsed on smaller screens.
+
+{{< cards cols="1" >}}
+  {{< card link="/" title="Top Card" >}}
+  {{< card link="/" title="Bottom Card" >}}
+{{< /cards >}}
+
+{{< cards cols="2" >}}
+  {{< card link="/" title="Left Card" >}}
+  {{< card link="/" title="Right Card" >}}
+{{< /cards >}}
+
+```
+{{</* cards cols="1" */>}}
+  {{</* card link="/" title="Top Card" */>}}
+  {{</* card link="/" title="Bottom Card" */>}}
+{{</* /cards */>}}
+
+{{</* cards cols="2" */>}}
+  {{</* card link="/" title="Left Card" */>}}
+  {{</* card link="/" title="Right Card" */>}}
+{{</* /cards */>}}
+```
+

exampleSite/content/showcase/index.md

@@ -13,6 +13,13 @@ Open source projects powered by Hextra
 
 {{< cards >}}
 
+  {{< card
+        link="https://github.com/welding-torch/installc"
+        title="Install C"
+        image="https://github.com/user-attachments/assets/c9a85327-c7e7-40f1-830a-b4190a5e47bd"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
   {{< card
         link="https://github.com/axivo/website"
         title="AXIVO Docs"

layouts/partials/navbar.html

@@ -56,6 +56,12 @@
             {{ if $external }}target="_blank" rel="noreferer"{{ end }}
             class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
           >
+            {{ with .Params.hero_icon -}}
+              <span style="float: left; padding-right: 0.3em; padding-top: 2px; opacity: 0.75">
+                {{ partial "utils/icon.html" (dict "name" . "attributes" "height=18") }}
+              </span>
+            {{- end }}
+
             <span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- end -}}

layouts/shortcodes/include.html

@@ -5,7 +5,7 @@ Renders the page using the RenderShortcode method on the Page object.
 
 You must call this shortcode using the {{% %}} notation.
 
-@param {string} (postional parameter 0) The path to the page, relative to the content directory.
+@param {string} (positional parameter 0) The path to the page, relative to the content directory.
 @returns template.HTML
 
 @example {{% include "functions/_common/glob-patterns" %}}