From 74bf5e99414a799181948de23d19f762c42ee7ce Mon Sep 17 00:00:00 2001
From: "Md. Emruz Hossain" <hossainemruz@gmail.com>
Date: Wed, 22 Jul 2020 22:08:50 +0600
Subject: [PATCH] Make site logo customizable (#47)

---
 exampleSite/config.yaml                       |   7 +++
 layouts/partials/navigators/navbar-2.html     |  41 +++++++++++-------
 layouts/partials/navigators/navbar.html       |  13 +++++-
 .../{logo-inverted.png => inverted-logo.png}  | Bin
 .../assets/images/{logo.png => main-logo.png} | Bin
 static/assets/js/navbar.js                    |   8 +++-
 6 files changed, 51 insertions(+), 18 deletions(-)
 rename static/assets/images/{logo-inverted.png => inverted-logo.png} (100%)
 rename static/assets/images/{logo.png => main-logo.png} (100%)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 8af4441..005b519 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -30,6 +30,13 @@ params:
   # background image of the landing page
   background: "images/background.jpg"
 
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # transparent navbar and the main logo will be used in the non-transparent navbar.
+  # It will be default to the theme logos if not provided.
+  logo:
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
 
diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html
index bca52a9..ceb6cb6 100644
--- a/layouts/partials/navigators/navbar-2.html
+++ b/layouts/partials/navigators/navbar-2.html
@@ -1,19 +1,30 @@
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
-    <div class="container">
-       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <a class="navbar-brand" href="{{ site.BaseURL }}">
-        <img src="/assets/images/logo.png">
-        {{- site.Title -}}
-      </a>
-      <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
-        <span class="navbar-toggler-icon"></span>
-      </button>
+  <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
+      <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <a class="navbar-brand" href="{{ site.BaseURL }}">
+      <img src="{{ $mainLogo }}">
+      {{- site.Title -}}
+    </a>
+    <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-      <div class="collapse navbar-collapse" id="top-nav-items">
-        <ul class="navbar-nav ml-auto">
-        </ul>
-      </div>
+    <div class="collapse navbar-collapse" id="top-nav-items">
+      <ul class="navbar-nav ml-auto">
+      </ul>
     </div>
+  </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index 0873fa4..24e2b1a 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -1,7 +1,15 @@
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
     <a class="navbar-brand" href="{{ .Site.BaseURL }}">
-      <img src="/assets/images/logo-inverted.png" id="logo">
+      <img src="{{ $invertedLogo }}" id="logo">
       {{- .Site.Title -}}
     </a>
     <button
@@ -50,4 +58,7 @@
       </ul>
     </div>
   </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>
diff --git a/static/assets/images/logo-inverted.png b/static/assets/images/inverted-logo.png
similarity index 100%
rename from static/assets/images/logo-inverted.png
rename to static/assets/images/inverted-logo.png
diff --git a/static/assets/images/logo.png b/static/assets/images/main-logo.png
similarity index 100%
rename from static/assets/images/logo.png
rename to static/assets/images/main-logo.png
diff --git a/static/assets/js/navbar.js b/static/assets/js/navbar.js
index 4b97052..c882cc6 100644
--- a/static/assets/js/navbar.js
+++ b/static/assets/js/navbar.js
@@ -15,7 +15,9 @@
         $('#navbar-toggler').removeClass('navbar-dark');
         $('#navbar-toggler').addClass('navbar-light');
 
-        $('#logo').attr("src","assets/images/logo.png");
+        // get the main logo from hidden img tag
+        let mainLogo = document.getElementById("main-logo").getAttribute("src");
+        $('#logo').attr("src", mainLogo);
       } else {
         $('#top-navbar').removeClass('final-navbar shadow');
         $('#top-navbar').addClass('initial-navbar');
@@ -23,7 +25,9 @@
         $('#navbar-toggler').removeClass('navbar-light');
         $('#navbar-toggler').addClass('navbar-dark');
 
-        $('#logo').attr("src","assets/images/logo-inverted.png");
+        // get the inverted logo from hidden img tag
+        let invertedLogo = document.getElementById("inverted-logo").getAttribute("src");
+        $('#logo').attr("src", invertedLogo);
       }
     });
   });