Make site logo customizable (#47)

2 files changed, 38 insertions, 16 deletions

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>