Merge branch 'main' into dev

.prettierignore

@@ -30,3 +30,5 @@ layouts/_default/index.json
 layouts/shortcodes/screenshot.html
 layouts/shortcodes/figure.html
 layouts/partials/hugo-embedded/shortcodes/figure-default.html
+
+assets/js/appearance.js

assets/js/appearance.js

@@ -96,6 +96,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
   }
 });
 
+
 var updateMeta = () => {
   var elem, style;
   elem = document.querySelector('body');
@@ -103,6 +104,33 @@ var updateMeta = () => {
   document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
 }
 
+{{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }}
+{{ $primaryLogo := resources.Get .Site.Params.Logo }}
+{{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }}
+{{ if and ($primaryLogo) ($secondaryLogo) }}
+var updateLogo = (targetAppearance) => {
+  var imgElems = document.querySelectorAll("img.logo");
+  var logoContainers = document.querySelectorAll("span.logo");
+  
+  targetLogoPath = 
+    targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
+    "{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}"
+  for (const elem of imgElems) {
+    elem.setAttribute("src", targetLogoPath)
+  }
+
+  {{ if eq $primaryLogo.MediaType.SubType "svg" }}
+  targetContent = 
+    targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
+    `{{ $primaryLogo.Content | safeHTML }}` : `{{ $secondaryLogo.Content | safeHTML }}`
+  for (const container of logoContainers) {
+    container.innerHTML = targetContent;
+  }
+  {{ end }}
+}
+{{ end }}
+{{- end }}
+
 var getTargetAppearance = () => {
   return document.documentElement.classList.contains("dark") ? "dark" : "light"
 }

layouts/partials/header/basic.html

@@ -1,49 +1,26 @@
 <div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
-  {{ $primary := resources.Get .Site.Params.Logo }}
+  {{ if .Site.Params.Logo }}
-  {{ $secondary := resources.Get .Site.Params.SecondaryLogo }}
+    {{ $logo := resources.Get .Site.Params.Logo }}
-
+    {{ if $logo }}
-  {{ if or $primary $secondary }}
+      <div>
-    <div>
+        <a href="{{ "" | relLangURL }}" class="flex">
-      <a href="{{ "" | relLangURL }}" class="flex">
+          <span class="sr-only">{{ .Site.Title | markdownify }}</span>
-        <span class="sr-only">{{ .Site.Title | markdownify }}</span>
+          {{ if eq $logo.MediaType.SubType "svg" }}
-
+            <span class="logo object-scale-down object-left nozoom">
-        {{ if $primary }}
+              {{ $logo.Content | safeHTML }}
-          <div class="{{ cond $secondary "block dark:hidden" "" }}">
+            </span>
-            {{- if eq $primary.MediaType.SubType "svg" -}}
+          {{ else }}
-              <span class="logo object-scale-down object-left nozoom">
+            <img
-                {{ $primary.Content | safeHTML }}
+              src="{{ $logo.RelPermalink }}"
-              </span>
+              width="{{ div $logo.Width 2 }}"
-            {{ else }}
+              height="{{ div $logo.Height 2 }}"
-              <img
+              class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
-                src="{{ $primary.RelPermalink }}"
+              alt="">
-                width="{{ div $primary.Width 2 }}"
+          {{ end }}
-                height="{{ div $primary.Height 2 }}"
+        </a>
-                class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
+      </div>
-                alt="Site logo">
+    {{ end }}
-            {{ end }}
-          </div>
-        {{ end }}
-
-        {{ if $secondary }}
-          <div class="hidden dark:block">
-            {{ if eq $secondary.MediaType.SubType "svg" }}
-              <span class="logo object-scale-down object-left nozoom">
-                {{ $secondary.Content | safeHTML }}
-              </span>
-            {{ else }}
-              <img
-                src="{{ $secondary.RelPermalink }}"
-                width="{{ div $secondary.Width 2 }}"
-                height="{{ div $secondary.Height 2 }}"
-                class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
-                alt="Site logo (dark mode)">
-            {{ end }}
-          </div>
-        {{ end }}
-      </a>
-    </div>
   {{ end }}
-
   {{ if not .Site.Params.disableTextInHeader | default true }}
     <a href="{{ "" | relLangURL }}" class="text-base font-medium truncate min-w-0 shrink">
       {{ .Site.Title | markdownify }}

package-lock.json

@@ -2594,6 +2594,9 @@
       "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
       "dev": true,
       "license": "(MPL-2.0 OR Apache-2.0)",
+      "engines": {
+        "node": ">=20"
+      },
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }