fix(menu): custom-logo links are broken for doc deployments with a path

vogloblinsky · vogloblinsky · commit bd28dd0d0a83 · 2022-02-09T22:20:56.000+01:00
fix #1203
diff --git a/src/resources/js/menu.js b/src/resources/js/menu.js
@@ -77,15 +77,16 @@ document.addEventListener('DOMContentLoaded', function () {
     processMenuLinks(entityLinks);
     var indexLinks = document.querySelectorAll('[data-type="index-link"]');
     processMenuLinks(indexLinks, true);
-    var entityLogos = document.querySelectorAll('[data-type="compodoc-logo"]');
-    var processLogos = function (entityLogo) {
+    var compodocLogos = document.querySelectorAll('[data-type="compodoc-logo"]');
+    var customLogo = document.querySelectorAll('[data-type="custom-logo"]');
+    var processLogos = function (entityLogos) {
         for (var i = 0; i < entityLogos.length; i++) {
             var entityLogo = entityLogos[i];
             if (entityLogo) {
                 var url = entityLogo.getAttribute('data-src');
                 // Dark mode + logo
                 let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                if (isDarkMode) {
+                if (isDarkMode && url.indexOf('compodoc') !== -1) {
                     url = 'images/compodoc-vectorise-inverted.png';
                 }
                 if (url.charAt(0) !== '.') {
@@ -115,7 +116,8 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         }
     };
-    processLogos(entityLogos);
+    processLogos(compodocLogos);
+    processLogos(customLogo);
 
     setTimeout(function () {
         document.getElementById('btn-menu').addEventListener('click', function () {
diff --git a/src/templates/partials/menu.hbs b/src/templates/partials/menu.hbs
@@ -17,7 +17,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                 <li class="title">
                     {{#if customLogo}}
                     <a href="index.html" data-type="index-link">
-                        <img alt="" class="img-responsive" data-type="custom-logo" src={{strip-url "/images/" customLogo}}>
+                        <img alt="" class="img-responsive" data-type="custom-logo" data-src="{{strip-url "images/" customLogo}}">
                     </a>
                     {{else}}
                     <a href="index.html" data-type="index-link">{{documentationMainName}}</a>
