fix: replace deprecated site.IsMultiLingual

2025-11-03 18:44:52 -05:00 · 2024-12-28 17:55:55 +00:00
parent 783ab1e97f
commit 4d9015aefe
5 changed files with 144 additions and 17 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2483,7 +2483,7 @@ article details > summary::before {
  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
@media (max-width: 767px) {
-  .sidebar-container {
+  .hextra-sidebar-container {
    position: fixed;
    top: 0px;
    bottom: 0px;
@@ -2494,28 +2494,152 @@ article details > summary::before {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: calc(var(--navbar-height));
  }
-  .sidebar-container:is(html[class~="dark"] *) {
+  .hextra-sidebar-container:is(html[class~="dark"] *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 17 / var(--tw-bg-opacity));
  }
-  .sidebar-container {
+  .hextra-sidebar-container {
    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;
  }
 }
-.sidebar-container li > div {
+.hextra-sidebar-container li > div {
  height: 0px;
 }
-.sidebar-container li.open > div {
+.hextra-sidebar-container li.open > div {
  height: auto;
  padding-top: 0.25rem;
 }
-.sidebar-container li.open > a > span > svg > path {
+.hextra-sidebar-container li.open > a > span > svg > path {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hextra-sidebar-container .hextra-sidebar-item-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list::before {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  width: 1px;
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:is(html[class~="dark"] *)::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 0.75rem;
+  padding-left: 0.75rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *)::before {
+  content: var(--tw-content);
+  left: 0px;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0.75rem;
+  padding-right: 0.75rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *)::before {
+  content: var(--tw-content);
+  right: 0px;
+}
+.hextra-sidebar-container .hextra-sidebar-item-link {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: .875rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.active {
+  --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));
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.active {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.active: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);
+  --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) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.active: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));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive {
+    border-width: 1px;
+    border-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive: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);
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity));
+  }
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  }
+}
 nav .search-wrapper {
  display: none;
 }
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -69,6 +69,7 @@
      "[hyphens:auto]",
      "[transition:background-color_1.5s_ease]",
      "[word-break:break-word]",
+      "active",
      "active:hx-bg-gray-400/20",
      "active:hx-opacity-50",
      "active:hx-shadow-gray-200",
@@ -242,6 +243,10 @@
      "hextra-pdf",
      "hextra-scrollbar",
      "hextra-sidebar-collapsible-button",
+      "hextra-sidebar-container",
+      "hextra-sidebar-item",
+      "hextra-sidebar-item-link",
+      "hextra-sidebar-item-list",
      "hextra-tabs-panel",
      "hextra-tabs-toggle",
      "hextra-toc",
@@ -542,6 +547,7 @@
      "hx-z-20",
      "hx-z-[-1]",
      "icon",
+      "inactive",
      "language-options",
      "language-switcher",
      "last-of-type:hx-mb-0",
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
-    {{ partial "sidebar.html" (dict "context" .) }}
+    {{ partial "sidebar-ng.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
-    {{ partial "sidebar.html" (dict "context" .) }}
+    {{ partial "sidebar-ng.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
--- a/layouts/partials/sidebar-ng.html
+++ b/layouts/partials/sidebar-ng.html
@@ -32,14 +32,10 @@
 <aside class="hextra-sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
  {{/* Search bar on small screen */}}
  {{- partialCached "components/sidebar/mobile-search" . -}}
-
-
  <div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
    {{/* Mobile Navigation */}}
    <ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
-      {{- with $dataMobile -}}
-        {{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}
-      {{- end -}}
+      {{- with $dataMobile -}}{{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}{{- end -}}
    </ul>

    {{/* Sidebar on large screen */}}
@@ -58,6 +54,7 @@
        {{- partialCached "components/sidebar/bottom" $context site.Home -}}
      </ul>
    {{ end -}}
+  <div style="position: absolute; top: 10px; right: 0; font-size: 10px; color: #888;">new</div>
  </div>
  {{- partial "components/sidebar/switches" (dict "context" $context "disableSidebar" $disableSidebar) -}}
 </aside>
@@ -75,14 +72,14 @@
  {{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
  {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}

-  {{ if or site.IsMultiLingual $displayThemeToggle }}
+  {{ if or hugo.IsMultilingual $displayThemeToggle }}
    <div
-      class="{{ $switchesClass }} {{ with site.IsMultiLingual }}
+      class="{{ $switchesClass }} {{ with hugo.IsMultilingual -}}
        hx-justify-end
-      {{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
+      {{- end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
      data-toggle-animation="show"
    >
-      {{- with site.IsMultiLingual -}}
+      {{- with hugo.IsMultilingual -}}
        {{- partial "language-switch" (dict "context" $context "grow" true) -}}
        {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
      {{- else -}}