Merge 368c20e935 into de9f9b312e

Implement header size
Implement hextra hero-section
2025-07-15 02:02:48 -04:00 · 2024-09-14 23:56:03 +01:00 · 2024-05-17 15:29:39 -04:00 · 2024-05-16 19:24:41 -04:00
23 changed files with 80 additions and 263 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -1006,18 +1006,18 @@ video {
 }
 .hx-bg-primary-100 {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
 }
 .hx-bg-primary-400 {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity));
 }
 .hx-bg-primary-600 {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
 .hx-bg-primary-700\/5 {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
 }
 .hx-bg-red-100 {
  --tw-bg-opacity: 1;
@ -1176,9 +1176,6 @@ video {
 .hx-text-4xl {
  font-size: 2.25rem;
 }
-.hx-text-\[\.65rem\] {
-  font-size: .65rem;
-}
 .hx-text-\[10px\] {
  font-size: 10px;
 }
@ -1274,7 +1271,7 @@ video {
 }
 .hx-text-primary-800 {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
 }
 .hx-text-red-900 {
  --tw-text-opacity: 1;
@ -1449,7 +1446,7 @@ video {
  }
 }
 .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.1);
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity));
 }
@ -1517,7 +1514,7 @@ video {
 }
 .content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
@ -1551,7 +1548,7 @@ video {
  margin-bottom: 1rem;
  overflow-x: auto;
  border-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: .9em;
@ -1563,18 +1560,18 @@ video {

  .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
    border-width: 1px;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
    --tw-contrast: contrast(1.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
 }
 .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
@media (prefers-contrast: more) {

  .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
  }
 }
 .content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
@ -2135,7 +2132,7 @@ article details > summary::before {
 }
 .hextra-code-block pre {
  overflow-x: auto;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
  font-size: .9em;
  font-weight: 500;
  -webkit-font-smoothing: auto;
@ -2145,18 +2142,18 @@ article details > summary::before {

  .hextra-code-block pre {
    border-width: 1px;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
    --tw-contrast: contrast(1.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
 }
 .hextra-code-block pre:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
@media (prefers-contrast: more) {

  .hextra-code-block pre:is(html[class~="dark"] *) {
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
  }
 }
 .hextra-code-block .filename {
@ -2169,7 +2166,7 @@ article details > summary::before {
  white-space: nowrap;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
@ -2179,7 +2176,7 @@ article details > summary::before {
  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 .hextra-code-block .filename:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
 }
@ -2236,7 +2233,7 @@ article details > summary::before {
 .chroma .hl {
  display: block;
  width: 100%;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
 }
 .hextra-cards {
  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
@ -2272,6 +2269,7 @@ article details > summary::before {
  top: 5px;
  right: 5px;
  z-index: 10;
+  font-size: .65rem;
 }
 .steps h3 {
  counter-increment: step;
@ -2348,13 +2346,13 @@ article details > summary::before {
 }
 .search-wrapper li .active {
  border-radius: 0.375rem;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
@media (prefers-contrast: more) {

  .search-wrapper li .active {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }
 }
 .search-wrapper .no-result {
@ -2441,7 +2439,7 @@ article details > summary::before {
  }
 .search-wrapper .match {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
@media (max-width: 767px) {
  .sidebar-container {
@ -2596,10 +2594,6 @@ nav .search-wrapper {
  overflow: auto;
  font-size: .75rem;
 }
-.hextra-badge {
-  display: inline-flex;
-  align-items: center;
-}
 html {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
@ -2621,14 +2615,12 @@ body:is(html[class~="dark"] *) {
 :root {
  --primary-hue: 212deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
  --navbar-height: 4rem;
  --menu-height: 3.75rem;
 }
 .dark {
  --primary-hue: 204deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
 }
 .placeholder\:hx-text-gray-500::-moz-placeholder {
  --tw-text-opacity: 1;
@ -2725,11 +2717,11 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:hx-bg-primary-50:hover {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
 }
 .hover\:hx-bg-primary-700:hover {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 .hover\:hx-bg-slate-50:hover {
  --tw-bg-opacity: 1;
@ -2749,7 +2741,7 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:hx-text-primary-600:hover {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .hover\:hx-opacity-60:hover {
  opacity: 0.6;
@ -2786,7 +2778,7 @@ body:is(html[class~="dark"] *) {
 }
 .focus\:hx-ring-primary-300:focus {
  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / var(--tw-ring-opacity));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
 }
 .active\:hx-bg-gray-400\/20:active {
  background-color: rgb(156 163 175 / 0.2);
@ -2831,11 +2823,11 @@ body:is(html[class~="dark"] *) {
 }
 .data-\[state\=selected\]\:hx-border-primary-500[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));
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
 }
 .data-\[state\=selected\]\:hx-text-primary-600[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));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden {
  display: none;
@ -2874,7 +2866,7 @@ body:is(html[class~="dark"] *) {

  .contrast-more\:hx-border-primary-500 {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }

  .contrast-more\:hx-border-transparent {
@ -2989,14 +2981,14 @@ body:is(html[class~="dark"] *) {
  background-color: rgb(251 146 60 / 0.2);
 }
 .dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 .dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
 }
 .dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
 .dark\:hx-bg-red-900\/30:is(html[class~="dark"] *) {
  background-color: rgb(127 29 29 / 0.3);
@ -3050,7 +3042,7 @@ body:is(html[class~="dark"] *) {
 }
 .dark\:hx-text-primary-600:is(html[class~="dark"] *) {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .dark\:hx-text-red-200:is(html[class~="dark"] *) {
  --tw-text-opacity: 1;
@ -3139,14 +3131,14 @@ body:is(html[class~="dark"] *) {
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 .dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~="dark"] *) {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
 }
 .dark\:hover\:hx-bg-primary-700:hover:is(html[class~="dark"] *) {
  --tw-bg-opacity: 1;
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
 .hover\:dark\:hx-bg-primary-500\/10:is(html[class~="dark"] *):hover {
-  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
 .dark\:hover\:hx-text-gray-100:hover:is(html[class~="dark"] *) {
  --tw-text-opacity: 1;
@ -3174,7 +3166,7 @@ body:is(html[class~="dark"] *) {
 }
 .hover\:dark\:hx-text-primary-600:is(html[class~="dark"] *):hover {
  --tw-text-opacity: 1;
-  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
 .dark\:hover\:hx-shadow-none:hover:is(html[class~="dark"] *) {
  --tw-shadow: 0 0 #0000;
@ -3187,7 +3179,7 @@ body:is(html[class~="dark"] *) {
 }
 .dark\:focus\:hx-ring-primary-800:focus: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));
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
 }
@media (prefers-contrast: more) {

@ -3207,7 +3199,7 @@ body:is(html[class~="dark"] *) {

  .contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
    --tw-border-opacity: 1;
-    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
  }

  .dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
--- a/assets/css/components/badge.css
+++ b/assets/css/components/badge.css
@ -1,3 +0,0 @@
-.hextra-badge {
-  @apply hx-inline-flex hx-items-center;
-}
--- a/assets/css/components/cards.css
+++ b/assets/css/components/cards.css
@ -38,4 +38,5 @@
  top: 5px;
  right: 5px;
  z-index: 10;
+  font-size: .65rem;
 }
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -11,7 +11,6 @@
@import "components/code-copy.css";
@import "components/hextra/feature-grid.css";
@import "components/jupyter.css";
-@import "components/badge.css";

 html {
  @apply hx-text-base hx-antialiased;
@ -26,7 +25,6 @@ body {
 :root {
  --primary-hue: 212deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
  --navbar-height: 4rem;
  --menu-height: 3.75rem;
 }
@ -34,5 +32,4 @@ body {
 .dark {
  --primary-hue: 204deg;
  --primary-saturation: 100%;
-  --primary-lightness: 50%;
 }
--- a/assets/js/flexsearch.js
+++ b/assets/js/flexsearch.js
@ -200,7 +200,7 @@ document.addEventListener("DOMContentLoaded", function () {
      cache: 100,
      document: {
        id: 'id',
-        store: ['title', 'crumb'],
+        store: ['title'],
        index: "content"
      }
    });
@ -210,7 +210,7 @@ document.addEventListener("DOMContentLoaded", function () {
      cache: 100,
      document: {
        id: 'id',
-        store: ['title', 'content', 'url', 'display', 'crumb'],
+        store: ['title', 'content', 'url', 'display'],
        index: "content",
        tag: 'pageId'
      }
@ -222,30 +222,6 @@ document.addEventListener("DOMContentLoaded", function () {
    for (const route in data) {
      let pageContent = '';
      ++pageId;
-      const urlParts = route.split('/').filter(x => x != "" && !x.startsWith('#'));
-
-      let crumb = '';
-      let searchUrl = '/'
-      for (let i = 0; i < urlParts.length; i++) {
-        const urlPart = urlParts[i];
-        searchUrl += urlPart + '/'
-
-        const crumbData = data[searchUrl];
-        if (!crumbData) {
-          console.warn('Excluded page', searchUrl, '- will not be included for search result breadcrumb for', route);
-          continue;
-        }
-
-        let title = data[searchUrl].title;
-        if (title == "_index") {
-          title = urlPart.split("-").map(x => x).join(" ");
-        }
-        crumb += title;
-
-        if (i < urlParts.length - 1) {
-          crumb += ' > ';
-        }
-      }

      for (const heading in data[route].data) {
        const [hash, text] = heading.split('#');
@ -259,7 +235,6 @@ document.addEventListener("DOMContentLoaded", function () {
          id: url,
          url,
          title,
-          crumb,
          pageId: `page_${pageId}`,
          content: title,
          ...(paragraphs[0] && { display: paragraphs[0] })
@ -270,7 +245,6 @@ document.addEventListener("DOMContentLoaded", function () {
            id: `${url}_${i}`,
            url,
            title,
-            crumb,
            pageId: `page_${pageId}`,
            content: paragraphs[i]
          });
@ -282,7 +256,6 @@ document.addEventListener("DOMContentLoaded", function () {
      window.pageIndex.add({
        id: pageId,
        title: data[route].title,
-        crumb,
        content: pageContent
      });

@ -335,7 +308,7 @@ document.addEventListener("DOMContentLoaded", function () {
          _page_rk: i,
          _section_rk: j,
          route: url,
-          prefix: isFirstItemOfPage ? result.doc.crumb : undefined,
+          prefix: isFirstItemOfPage ? result.doc.title : undefined,
          children: { title, content }
        })
        isFirstItemOfPage = false
--- a/assets/js/sidebar.js
+++ b/assets/js/sidebar.js
@ -1,9 +1,4 @@
 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) {
@ -14,23 +9,4 @@ 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
-  });
-}
+});
--- a/assets/json/search-data.json
+++ b/assets/json/search-data.json
@ -7,6 +7,7 @@

 {{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
 {{- $pages = where $pages "Params.excludeSearch" "!=" true -}}
+{{- $pages = where $pages "Content" "!=" "" -}}

 {{- $output := dict -}}

--- a/exampleSite/content/docs/advanced/customization.md
+++ b/exampleSite/content/docs/advanced/customization.md
@ -34,13 +34,12 @@ The color of text mixed with `other text` can customized with:

 ### Primary Color

-The primary color of the theme can be customized by setting the `--primary-hue`, `--primary-saturation` and `--primary-lightness` variables:
+The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:

 ```css {filename="assets/css/custom.css"}
 :root {
  --primary-hue: 100deg;
  --primary-saturation: 90%;
-  --primary-lightness: 50%;
 }
 ```

--- a/exampleSite/content/docs/guide/configuration.md
+++ b/exampleSite/content/docs/guide/configuration.md
@ -186,10 +186,10 @@ To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site,
  {{< /filetree/folder >}}
 {{< /filetree/container >}}

-Include `favicon.ico`, `favicon.svg` and `favicon-dark.svg` files in your project to ensure your site's favicons display correctly.
+Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly.

-While `favicon.ico` is generally for older browsers, `favicon.svg` and `favicon-dark.svg` are supported by modern browsers.
-Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate such icons.
+While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode.
+Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.

 ### Theme Configuration

--- a/exampleSite/content/docs/guide/organize-files.md
+++ b/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 specifying `breadcrumbs: false` in its front matter:
+You can hide breadcrumbs completely from a page by specfying `breadcrumbs: false` in its front matter:

 ```yaml {filename="content/docs/guide/organize-files.md"}
 ---
--- a/exampleSite/content/docs/guide/shortcodes/cards.md
+++ b/exampleSite/content/docs/guide/shortcodes/cards.md
@ -22,7 +22,7 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
  {{</* card link="../callout" title="Callout" icon="warning" */>}}
-  {{</* card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" */>}}
+  {{</* card link="../callout" title="Card with tag" icon="warning" tag= "A custom tag" */>}}
  {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
@ -87,30 +87,3 @@ 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 */>}}
-```
-
--- a/exampleSite/content/docs/guide/shortcodes/others.md
+++ b/exampleSite/content/docs/guide/shortcodes/others.md
@ -10,41 +10,6 @@ sidebar:
  These shortcodes are considered less stable and may be changed anytime.
 {{< /callout >}}

-## Badge
-
-```
-{{</* badge "Badge" */>}}
-```
-
-Result:
-
-{{< badge "Badge" >}}
-
-Variants:
-
-```
-{{</* badge content="info" type="info" */>}}
-{{</* badge content="warning" type="warning" */>}}
-{{</* badge content="error" type="error" */>}}
-```
-
-Result:
-
-{{< badge content="info" type="info" >}} &nbsp;
-{{< badge content="warning" type="warning" >}} &nbsp;
-{{< badge content="error" type="error" >}}
-
-With link:
-
-```
-{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" */>}}
-```
-
-Result:
-
-{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}}
-
-
 ## YouTube

 Embed a YouTube video.
--- a/exampleSite/content/showcase/index.md
+++ b/exampleSite/content/showcase/index.md
@ -13,13 +13,6 @@ 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"
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@ -209,7 +209,6 @@
      "group-hover:hx-underline",
      "group-open:before:hx-rotate-90",
      "hamburger-menu",
-      "hextra-badge",
      "hextra-card",
      "hextra-card-icon",
      "hextra-card-image",
@ -465,7 +464,6 @@
      "hx-sticky",
      "hx-text-2xl",
      "hx-text-4xl",
-      "hx-text-[.65rem]",
      "hx-text-[10px]",
      "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
      "hx-text-base",
@ -490,6 +488,7 @@
      "hx-text-white",
      "hx-text-xl",
      "hx-text-xs",
+      "hx-text-xxs",
      "hx-text-yellow-900",
      "hx-to-gray-600",
      "hx-top-0",
--- a/layouts/partials/head-css.html
+++ b/layouts/partials/head-css.html
@ -1,6 +1,6 @@
 {{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
  {{- $styles := resources.Get "css/styles.css" }}
-  {{- $styles = $styles | postCSS (dict "inlineImports" true) }}
+  {{- $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
  <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 {{- else }}
  {{- $styles := resources.Get "css/compiled/main.css" -}}
--- a/layouts/partials/shortcodes/badge.html
+++ b/layouts/partials/shortcodes/badge.html
@ -1,16 +0,0 @@
-{{- $content := .content -}}
-{{- $type := .type -}}
-{{- $class := .class | default "" -}}
-{{- $border := .border | default false -}}
-
-{{- $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" -}}
-{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}}
-{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}}
-
-{{- $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-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
-</div>
-{{- /* Strip trailing newline. */ -}}
--- a/layouts/partials/shortcodes/card.html
+++ b/layouts/partials/shortcodes/card.html
@ -54,13 +54,15 @@
  {{- end -}}

  {{- if $tag }}
-    {{- partial "shortcodes/badge.html" (dict
-      "content" $tag
-      "type" $tagType
-      "class" "hextra-card-tag"
-      "border" true
-      )
-    -}}
+    {{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
+    {{ $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" }}
+    {{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
+    {{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
+
+    {{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }}
+    <div class="hextra-card-tag">
+      <span class="hx-inline-block hx-rounded-full hx-px-2.5 hx-leading-6 {{ $tagClass }}">{{ $tag }}</span>
+    </div>
  {{- end -}}
 </a>
 {{- /* Strip trailing newline. */ -}}
--- a/layouts/partials/shortcodes/cards.html
+++ b/layouts/partials/shortcodes/cards.html
@ -1,6 +0,0 @@
-{{- $cols := .cols | default 3 -}}
-{{- $content := .content -}}
-
-<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
-  {{- $content -}}
-</div>
--- a/layouts/shortcodes/badge.html
+++ b/layouts/shortcodes/badge.html
@ -1,33 +0,0 @@
-{{- if .IsNamedParams -}}
-  {{- $content := .Get "content" -}}
-  {{- $type := .Get "type" | default "" -}}
-  {{- $class := .Get "class" | default "" -}}
-  {{- $link := .Get "link" | default "" -}}
-
-  {{- if $link -}}
-    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
-      {{- partial "shortcodes/badge.html" (dict
-        "content" $content 
-        "type" $type
-        "class" $class
-        "border" true
-        )
-      -}}
-    </a>
-  {{- else -}}
-    {{- partial "shortcodes/badge.html" (dict
-      "content" $content 
-      "type" $type
-      "class" $class
-      "border" true
-      )
-    -}}
-  {{- end -}}
-{{- else -}}
-  {{- $content := .Get 0 -}}
-  {{- partial "shortcodes/badge.html" (dict
-    "content" $content 
-    "border" true
-    )
-  -}}
-{{- end -}}
--- a/layouts/shortcodes/cards.html
+++ b/layouts/shortcodes/cards.html
@ -1,3 +1,5 @@
 {{- $cols := .Get "cols" | default 3 -}}

-{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
+<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
+  {{- .Inner -}}
+</div>
--- a/layouts/shortcodes/hextra/hero-section.html
+++ b/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 }}>
--- a/layouts/shortcodes/include.html
+++ b/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} (positional parameter 0) The path to the page, relative to the content directory.
+@param {string} (postional parameter 0) The path to the page, relative to the content directory.
@returns template.HTML

@example {{% include "functions/_common/glob-patterns" %}}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,18 +3,10 @@ const colors = require('tailwindcss/colors')
 const makePrimaryColor =
  l =>
    ({ opacityValue }) => {
-      let result = "hsl(var(--primary-hue) var(--primary-saturation) ";
-        if (l <= 50) {
-          // Interpolate between lower values
-          result+= `calc(calc(var(--primary-lightness) / 50) * ${l})`;
-        }
-        else {
-          // Interpolate between higher values
-          result+= `calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * ${l - 50})`;
-        }
-
-      result += (opacityValue ? ` / ${opacityValue})` : ')');
-      return result;
+      return (
+        `hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
+        (opacityValue ? ` / ${opacityValue})` : ')')
+      )
    }

 /** @type {import('tailwindcss').Config} */
Author	SHA1	Message	Date
Floren Munteanu	464f3c4ef1	Merge `368c20e935` into `de9f9b312e`	2024-09-14 23:56:03 +01:00
Floren Munteanu	368c20e935	Implement header size	2024-05-17 15:29:39 -04:00
Floren Munteanu	9e684fa313	Implement hextra hero-section	2024-05-16 19:24:41 -04:00