Merge remote-tracking branch 'origin/main' into sidebar-data-source

layouts/partials/components/codeblock.html

@@ -1,11 +1,27 @@
 {{ $filename := .filename | default "" -}}
+{{ $base_url := .base_url | default "" -}}
 {{ $lang := .lang | default "" }}
 {{ $content := .content }}
 {{ $options := .options | default (dict) }}
 
 {{- if $filename -}}
-  <div class="filename" dir="auto">{{ $filename }}</div>
+  <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 -}}
+    {{- end -}}
+  </div>
 {{- end -}}
+
 {{- if transform.CanHighlight $lang -}}
   <div>{{- highlight $content $lang $options -}}</div>
 {{- else -}}

layouts/partials/components/giscus.html

@@ -8,9 +8,18 @@
    * This solution was created with reference to:
    * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
   */
-  function getGiscusTheme() {
+  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');
+    }
+  }
 
   function setGiscusTheme() {
     function sendMessage(message) {

layouts/partials/components/github-style-alert.html

@@ -0,0 +1,42 @@
+{{- $content := .content -}}
+{{- $alertType := .alertType -}}
+{{- $alertTitle := .alertTitle -}}
+
+{{- $icons := dict
+  "note" "information-circle"
+  "tip" "light-bulb"
+  "important" "information-circle"
+  "warning" "exclamation"
+  "caution" "exclamation-circle"
+-}}
+
+{{- $icon := index $icons $alertType -}}
+{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
+
+{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
+
+{{- $alertClasses := dict
+  "note" "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"
+  "tip" "hx-border-green-200 hx-bg-green-100 hx-text-green-900 dark:hx-border-green-200/30 dark:hx-bg-green-900/30 dark:hx-text-green-200"
+  "important" "hx-border-indigo-200 hx-bg-indigo-100 hx-text-indigo-900 dark:hx-border-indigo-200/30 dark:hx-bg-indigo-900/30 dark:hx-text-indigo-200"
+  "warning" "hx-border-amber-200 hx-bg-amber-100 hx-text-amber-900 dark:hx-border-amber-200/30 dark:hx-bg-amber-900/30 dark:hx-text-amber-200"
+  "caution" "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"
+-}}
+
+{{- $class := index $alertClasses $alertType | default $defaultClass -}}
+
+
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-flex-col hx-rounded-lg hx-border hx-py-4 hx-px-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <p class="hx-flex hx-items-center hx-font-medium">
+    {{- with $icon -}}
+      {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}}
+    {{- end -}}
+    {{- $title -}}
+  </p>
+
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -1,5 +1,7 @@
 {{- $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" -}}
@@ -15,7 +17,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 $enableFooterSwitches -}}
+  {{- if $footerSwitchesVisible -}}
     <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 -}}
@@ -24,14 +26,21 @@
       <hr class="dark:hx-border-neutral-800" />
     {{- end -}}
   {{- end -}}
-  <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 }}
+    <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>
-  </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 -}}
+        </div>
+      </div>
+    {{- end -}}
 </footer>
 
 {{- define "theme-credit" -}}

layouts/partials/scripts.html

@@ -37,9 +37,32 @@
   {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
   <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", () => {
+      // Store original mermaid code for each diagram
+      document.querySelectorAll(".mermaid").forEach(el => {
+        el.dataset.original = el.innerHTML;
+      });
+
       const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
       mermaid.initialize({ startOnLoad: true, theme: theme });
+
+      let timeout;
+      new MutationObserver(() => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+          document.querySelectorAll(".mermaid").forEach(el => {
+            // Reset to original content, preserving HTML
+            el.innerHTML = el.dataset.original;
+            el.removeAttribute("data-processed");
+          });
+          mermaid.initialize({ startOnLoad: true, theme: theme });
+          mermaid.init();
+        }, 150);
+      }).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
     });
   </script>
 {{- end -}}

layouts/partials/shortcodes/badge.html

@@ -2,6 +2,7 @@
 {{- $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" -}}
@@ -11,6 +12,9 @@
 {{- $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 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>
 {{- /* Strip trailing newline. */ -}}

layouts/partials/shortcodes/callout.html

@@ -0,0 +1,28 @@
+{{- $content := .content -}}
+{{- $emoji := .emoji -}}
+{{- $icon := .icon -}}
+
+{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" -}}
+
+{{- $class := .class | default $defaultClass -}}
+
+
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
+    {{- with $emoji -}}
+      <div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{- . -}}
+      </div>
+    {{- else -}}
+      {{- with $icon -}}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
+      {{- $content -}}
+    </div>
+  </div>
+</div>