Merge pull request #2814 from ZhenShuo2021/logo-alt

✨ Feat: logo alt and remove logo JS

.prettierignore

@@ -30,5 +30,3 @@ 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,7 +96,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
   }
 });
 
-
 var updateMeta = () => {
   var elem, style;
   elem = document.querySelector('body');
@@ -104,33 +103,6 @@ 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,26 +1,49 @@
 <div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
-  {{ if .Site.Params.Logo }}
-    {{ $logo := resources.Get .Site.Params.Logo }}
-    {{ if $logo }}
-      <div>
-        <a href="{{ "" | relLangURL }}" class="flex">
-          <span class="sr-only">{{ .Site.Title | markdownify }}</span>
-          {{ if eq $logo.MediaType.SubType "svg" }}
-            <span class="logo object-scale-down object-left nozoom">
-              {{ $logo.Content | safeHTML }}
-            </span>
-          {{ else }}
-            <img
-              src="{{ $logo.RelPermalink }}"
-              width="{{ div $logo.Width 2 }}"
-              height="{{ div $logo.Height 2 }}"
-              class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
-              alt="">
-          {{ end }}
-        </a>
-      </div>
-    {{ end }}
+  {{ $primary := resources.Get .Site.Params.Logo }}
+  {{ $secondary := resources.Get .Site.Params.SecondaryLogo }}
+
+  {{ if or $primary $secondary }}
+    <div>
+      <a href="{{ "" | relLangURL }}" class="flex">
+        <span class="sr-only">{{ .Site.Title | markdownify }}</span>
+
+        {{ if $primary }}
+          <div class="{{ cond $secondary "block dark:hidden" "" }}">
+            {{- if eq $primary.MediaType.SubType "svg" -}}
+              <span class="logo object-scale-down object-left nozoom">
+                {{ $primary.Content | safeHTML }}
+              </span>
+            {{ else }}
+              <img
+                src="{{ $primary.RelPermalink }}"
+                width="{{ div $primary.Width 2 }}"
+                height="{{ div $primary.Height 2 }}"
+                class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
+                alt="Site logo">
+            {{ 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 }}