Add support for logo with dark mode and icon descriptions

6 files changed, 60 insertions, 22 deletions

diff --git a/_config.yml b/_config.yml
index 244a5e2..3d16dc3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,7 @@
-logo: false
+logo:
+  enable: false
+  lightmode: null
+  darkmode: null
 favicon: false
 timeformat: "MMM, D YYYY"
 podcast: true
@@ -9,12 +12,12 @@ highlight:
   lightmode: 'atom-one-light'
   darkmode: 'atom-one-dark'
 navbar:
-  - ['mailto:[email protected]', 'fa fa-paper-plane']
-  - ['https://github.com/guiqiqi/chromate', 'fa fa-github']
-  - ['/feed.rss', 'fa fa-rss']
+  - ['mailto:[email protected]', 'fa fa-paper-plane', '']
+  - ['https://github.com/guiqiqi/chromate', 'fa fa-github', '']
+  - ['/feed.rss', 'fa fa-rss', '']
 menubar:
-  - ['/about/', '关于']
-  - ['/archives/', '归档']
+  - ['/about/', 'About']
+  - ['/archives/', 'Archives']
 rss:
   enable: true
   path: '/feed.rss'
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 8ad3684..46c5fc5 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -3,8 +3,8 @@
         <header class="navbar" aria-label="main navigation">
             <div class="container">
                 <div class="navbar-brand header-title">
-                    <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>">
-                            <%= config.title %>
+                    <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>">                        
+                        <%= config.title %>
                     </a>
                     <a role="button" class="navbar-burger" data-target="header-menu" aria-label="menu" aria-expanded="false">
                         <span aria-hidden="true"></span>
@@ -28,33 +28,40 @@
     <div class="hero-body">
         <div class="container has-text-centered">
             <p class="title">
-                <% if (theme.logo) { %>
-                    <span class="header-logo" style="background-image: url('<%= theme.logo %>');">
-                    </span>
-                <% } else { %>
-                    <span class="header-title is-size-2 is-family-monospace is-uppercase">
+                <span class="is-size-2 is-family-monospace is-uppercase">
+                    <% if (theme.logo.enable) { %>
+                        <img id="logo" data-src-lightmode="<%= theme.logo.lightmode %>" 
+                             data-src-darkmode="<%= theme.logo.darkmode %>" style="max-width: 200px;" />
+                    <% } else { %>
                         <%= config.title %>
-                    </span>
-                <% } %> 
+                    <% } %>
+                </span>
             </p>
             <p class="subtitle is-size-6">
                 <%- config.description %>
-                <ul class="header-navbar">
+                <div>
                     <% for (let index in theme.navbar) { %>
                         <% 
                             const mapping = theme.navbar[index];
                             const link = mapping[0];
                             const favicon = mapping[1];
+                            const description = mapping[2];
                             let outter = link.startsWith("https://") ? true : false;
                         %>
                         <% if (outter) { %>
-                            <a class="icon" href="<%= link %>" target="_blank" rel="noopener noreferrer">
+                            <a href="<%= link %>" target="_blank" rel="noopener noreferrer">
                         <% } else { %>  
-                            <a class="icon" href="<%= link %>">
+                            <a href="<%= link %>">
                         <% } %>
-                        <i class="<%= favicon %>"></i></a>
+                            <span class="icon-text">
+                                <span class="icon">
+                                    <i class="<%= favicon %>"></i>
+                                </span>
+                                <span><%= description %></span>
+                            </span>
+                        </a>
                     <% } %>
-                </ul>
+                </div>
             </p>
         </div>
     </div>
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 63975f4..da0a8a1 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -1,13 +1,17 @@
 <!-- Lazyload support -->
 <%- js('js/script.min.js') %>
 <% if (theme.lazyload) { %>
-    <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.min.js"></script>
+    <script async defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.min.js"></script>
     <script>
         window.lazyLoadOptions = {
             elements_selector: ".lazy",
             threshold: 0,
             effect: "fadeIn"
         };
+        window.addEventListener("LazyLoad::Initialized", 
+        function (event) {
+            window.lazyLoader = event.detail.instance;
+        }, false);
     </script>
 <% } %>
 
diff --git a/source/js/script.js b/source/js/script.js
index ae91858..8a3daa5 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -31,6 +31,17 @@ window.addEventListener("load", function () {
         });
     };
     darklistener.add(colorman);
+    // Add logo color selector
+    var logoman = function (mode) {
+        var logo = document.getElementById("logo");
+        var darksrc = logo === null || logo === void 0 ? void 0 : logo.getAttribute("data-src-darkmode");
+        var lightsrc = logo === null || logo === void 0 ? void 0 : logo.getAttribute("data-src-lightmode");
+        if (!logo || !darksrc || !lightsrc)
+            return;
+        var src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc;
+        logo.setAttribute("src", src);
+    };
+    darklistener.add(logoman);
 });
 /* Darkmode listener */
 var SystemDarkmodePrefrence;
diff --git a/source/js/script.min.js b/source/js/script.min.js
index 078e42b..487569f 100644
--- a/source/js/script.min.js
+++ b/source/js/script.min.js
@@ -1 +1 @@
-"use strict"; window.addEventListener("load", function () { var a = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); if (a.length > 0) { a.forEach(function (c) { c.addEventListener("click", function () { var e = c.getAttribute("data-target"); c.classList.toggle("is-active"); if (!e) { return } var d = document.getElementById(e); d === null || d === void 0 ? void 0 : d.classList.toggle("is-active") }, false) }) } var b = function (e) { var d = ".auto-dark"; var c = Array.prototype.slice.call(document.querySelectorAll(d), 0); c.forEach(function (f) { if (e === SystemDarkmodePrefrence.dark) { f === null || f === void 0 ? void 0 : f.classList.add("is-dark"); f === null || f === void 0 ? void 0 : f.classList.remove("is-light") } else { f === null || f === void 0 ? void 0 : f.classList.add("is-light"); f === null || f === void 0 ? void 0 : f.classList.remove("is-dark") } }) }; darklistener.add(b) }); var SystemDarkmodePrefrence; (function (a) { a[a["dark"] = 0] = "dark"; a[a["light"] = 1] = "light" })(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {})); var DarkmodeListener = (function () { function a() { var b = window.matchMedia("(prefers-color-scheme: dark)").matches; this._mode = b ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; this._handlers = []; this._listen() } a.prototype._listen = function () { var d = this; var b = window.matchMedia("(prefers-color-scheme: dark)"); var c = function (e) { var f = e.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; d._handlers.forEach(function (g) { g(f) }); d._mode = f }; b.addEventListener("change", c) }; a.prototype.add = function (b) { b(this._mode); this._handlers.push(b) }; a.prototype.mode = function () { return this._mode }; return a }()); var darklistener = new DarkmodeListener();
\ No newline at end of file
+"use strict"; window.addEventListener("load", function () { var a = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); if (a.length > 0) { a.forEach(function (d) { d.addEventListener("click", function () { var f = d.getAttribute("data-target"); d.classList.toggle("is-active"); if (!f) { return } var e = document.getElementById(f); e === null || e === void 0 ? void 0 : e.classList.toggle("is-active") }, false) }) } var c = function (f) { var e = ".auto-dark"; var d = Array.prototype.slice.call(document.querySelectorAll(e), 0); d.forEach(function (g) { if (f === SystemDarkmodePrefrence.dark) { g === null || g === void 0 ? void 0 : g.classList.add("is-dark"); g === null || g === void 0 ? void 0 : g.classList.remove("is-light") } else { g === null || g === void 0 ? void 0 : g.classList.add("is-light"); g === null || g === void 0 ? void 0 : g.classList.remove("is-dark") } }) }; darklistener.add(c); var b = function (h) { var e = document.getElementById("logo"); var g = e === null || e === void 0 ? void 0 : e.getAttribute("data-src-darkmode"); var d = e === null || e === void 0 ? void 0 : e.getAttribute("data-src-lightmode"); if (!e || !g || !d) { return } var f = (h === SystemDarkmodePrefrence.dark) ? g : d; e.setAttribute("src", f) }; darklistener.add(b) }); var SystemDarkmodePrefrence; (function (a) { a[a["dark"] = 0] = "dark"; a[a["light"] = 1] = "light" })(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {})); var DarkmodeListener = (function () { function a() { var b = window.matchMedia("(prefers-color-scheme: dark)").matches; this._mode = b ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; this._handlers = []; this._listen() } a.prototype._listen = function () { var d = this; var b = window.matchMedia("(prefers-color-scheme: dark)"); var c = function (e) { var f = e.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; d._handlers.forEach(function (g) { g(f) }); d._mode = f }; b.addEventListener("change", c) }; a.prototype.add = function (b) { b(this._mode); this._handlers.push(b) }; a.prototype.mode = function () { return this._mode }; return a }()); var darklistener = new DarkmodeListener();
\ No newline at end of file
diff --git a/source/js/script.ts b/source/js/script.ts
index e6a2155..912c1d9 100644
--- a/source/js/script.ts
+++ b/source/js/script.ts
@@ -32,6 +32,19 @@ window.addEventListener("load", () => {
         })
     }
     darklistener.add(colorman);
+
+    // Add logo color selector
+    const logoman = (mode: SystemDarkmodePrefrence) => {
+        const logo = document.getElementById("logo");
+        const darksrc = logo?.getAttribute("data-src-darkmode");
+        const lightsrc = logo?.getAttribute("data-src-lightmode");
+        if (!logo || !darksrc || !lightsrc)
+            return;
+        let src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc;
+        logo.setAttribute("src", src);
+    }
+    darklistener.add(logoman);
+    
 });
 
 /* Darkmode listener */