Add dark mode switch 32 (#37)

Solves: #32 #27 

Signed-off-by: Hofi <[email protected]>

Author: mrgarris0n

LICENSE.lunr

@@ -0,0 +1,19 @@
+Copyright (C) 2013 by Oliver Nightingale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

_config.yml

@@ -3,6 +3,7 @@
 remote_theme: mmistakes/[email protected]
 #theme: minimal-mistakes-jekyll
 minimal_mistakes_skin: "midnight" # "default", "air", "aqua", "contrast", "dark", "dirt", "midnight", "mint", "neon", "plum", "sunrise"
+skin_switchable: true
 
 # Disable caching of content to disk in order to skip creating a .jekyll-cache or similar directory
 disable_disk_cache: true
@@ -68,10 +69,11 @@ exclude:
   - Gemfile.lock
   - node_modules
   # Shell we add to the generated _site as well?
-  - LICENSE.minimal-mistakes
-  - LICENSE.midnight
+  - LICENSE.*
 
 # Sass/SCSS
+# If you are using Sass @import statements, you’ll need to ensure that your sass_dir is set to the base directory that contains your Sass files
+# https://jekyllrb.com/docs/assets/#sassscss
 sass:
   sass_dir: _sass/minimal-mistakes
   style: compressed # https://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
@@ -204,10 +206,15 @@ kramdown:
 atom_feed:
   hide: true
 
+# https://jch.penibelst.de/
 compress_html:
+  profile: true
   clippings: all
-  ignore:
-    envs: development  # disable compression in dev environment
+  endings: all
+  ignore: 
+    # do not use yet, too slow and can cause issues in the final output
+    # envs: [ development ] disable compression in a given environment
+    envs: all
 
 # These are introduced with our customized theme source, not part of mmistakes/minimal-mistakes
 

_includes/head.html

@@ -6,15 +6,12 @@
   <link href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
 {% endunless %}
 
-<!-- https://t.co/dKP3o1e -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<script>
-  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
-</script>
+<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';</script>
+
+{% include skins.html %}
 
-<!-- For all browsers -->
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"></noscript>
 

_includes/masthead.html

@@ -4,13 +4,15 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
+
         {% unless logo_path == empty %}
           <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
         {% endunless %}
         <a class="site-title" href="{{ '/' | relative_url }}">
           {{ site.masthead_title | default: site.title }}
           {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
         </a>
+
         <ul class="visible-links">
           {% if site.masthead.hide_navigator == false %}
             {%- for link in site.data.navigation.main -%}
@@ -20,17 +22,33 @@
             {%- endfor -%}
           {% endif %}
         </ul>
+
         {% if site.search == true %}
-        <button class="search__toggle" type="button">
-          <span id="searchHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
-          <i class="fas fa-search"></i>
+        {% comment %}<!-- search__toggle is kept fir bacjward compatibility -->{% endcomment %}
+        <button id="search-button" class="masthead_button search__toggle" type="button">
+          <span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
+          <i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
+        </button>
+        {% endif %}
+
+        {% if site.skin_switchable == true %}
+        <i class="masthead_button_small_img fa fa-sun"></i>
+        <button id="skin-button" class="masthead_button_with_side_image" type="button">
+          <i class="masthead_button_icon fa fa-toggle-off" style="font-size: 150%;"></i>
         </button>
+        <i class="masthead_button_small_img fa fa-moon"></i>
         {% endif %}
+
+        <button id="settings-button" class="masthead_button_last" type="button">
+          <i class="masthead_button_icon fas fa-user-cog" style="font-size: 110%;"></i>
+        </button>
+
         <button class="greedy-nav__toggle hidden" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
           <div class="navicon"></div>
         </button>
         <ul class="hidden-links hidden"></ul>
+
       </nav>
     </div>
   </div>

_includes/search/algolia-search-scripts.html

@@ -53,7 +53,7 @@ <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}$
 
 // Starting the search only when toggle is clicked
 $(document).ready(function () {
-  $(".search__toggle").on("click", function() {
+  $("#search-button").on("click", function() {
     if(!search.started) {
       search.start();
     }

_includes/search/search_form.html

@@ -6,7 +6,7 @@
     <label class="sr-only" for="search">
       {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
     </label>
-    <input type="search" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    <input type="search" id="search" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
     <a class="search-help content-tooltip full-content-tooltip nav-link" href="/lunr_search_help.html">[ Hover or click for search help ]</a>
   </form>
   <div id="results" class="results"></div>
@@ -15,7 +15,7 @@
     <label class="sr-only" for="cse-search-input-box-id">
       {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
     </label>
-    <input type="search" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    <input type="search" id="cse-search-input-box-id" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
   </form>
   <div id="results" class="results">
     <gcse:searchresults-only></gcse:searchresults-only>

_includes/skins.html

@@ -0,0 +1,140 @@
+{% comment %}
+<!-- Dynamic loading of the user selected skin stylesheet -->
+{% endcomment %}
+
+{% comment %}<!-- NOTE: the 'default' skin is in the 'main.css', see the main.scss file for details -->{% endcomment %}
+<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+<style>
+  #full-page-container.full-page-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: contents;
+  }
+
+  #full-page-container.hidden {
+    visibility: hidden;
+    display: none;
+  }
+</style>
+
+<script async="false">
+
+  const docRoot = '{{ site.baseurl }}';
+  const darkSkin = 'midnight';
+  const lightSkin = 'default';
+
+  function docPrefix() {
+    return (docRoot != '' ? docRoot + '/' : '');    
+  }
+
+  function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
+  }
+
+  function getCookie(name, defaultValue = null) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1, c.length);
+      }
+      if (c.indexOf(nameEQ) == 0) {
+        return c.substring(nameEQ.length, c.length);
+      }
+    }
+    return defaultValue;
+  }
+
+  (function () {
+    function setSkin(skin) {
+      const stylesheet = document.getElementById('skinedStylesheet');
+      //stylesheet.onload = saveChanges;
+      stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
+      setCookie('skin', skin, 365 * 100);
+    }
+
+    function toggleSkin(event) {
+        if (getCookie('skin', 'default') == darkSkin) {
+          event.target.classList.remove('fa-toggle-on');
+          event.target.classList.add('fa-toggle-off');
+          setSkin(lightSkin);
+        }
+        else {
+          event.target.classList.remove('fa-toggle-off');
+          event.target.classList.add('fa-toggle-on');
+          setSkin(darkSkin);
+        }
+        event.currentTarget.blur();
+      }
+
+    function toggleIcon(target, off) {
+      if (off) {
+        target.classList.remove('fa-toggle-on');
+        target.classList.add('fa-toggle-off');
+      }
+      else {
+        target.classList.remove('fa-toggle-off');
+        target.classList.add('fa-toggle-on');
+      }
+    }
+    
+    function toggleSkin(event) {
+      var off = getCookie('skin', 'default') == darkSkin;
+      
+      if (off)
+        setSkin(lightSkin);
+      else
+        setSkin(darkSkin);
+      toggleIcon(event.target, off);
+
+      event.currentTarget.blur();
+    }
+
+    /* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
+      half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
+    */
+    window.addEventListener("load", function () {
+      function saveChanges() {
+        const htmlStyle = window.getComputedStyle(document.documentElement);
+        const backgroundColor = htmlStyle.backgroundColor;
+        setCookie('skin-background-color', backgroundColor, 365 * 100);
+      };    
+
+      var container = document.getElementById("full-page-container");
+      if (container)
+        container.classList.remove('hidden');
+
+      // Why this is not working?!?!
+      //document.body.style.removeProperty("backgroundColor");
+      document.body.style.backgroundColor = "";
+      if (storedSkin !== 'default')
+        toggleIcon($('#skin-button').find('.masthead_button_icon')[0], false);
+  
+      $("#skin-button").on("click", toggleSkin);
+
+      saveChanges();
+    });
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const skinBackgroundColor = getCookie('skin-background-color');
+      if (skinBackgroundColor)
+        document.body.style.backgroundColor = skinBackgroundColor;
+    });
+
+    const storedSkin = getCookie('skin', 'default');
+    if (storedSkin !== 'default')
+      setSkin(storedSkin);
+
+  })();
+</script>

_js/custom/navigation.js

@@ -3,8 +3,6 @@
    ========================================================================== */
 
 $(function () {
-  // FIXME: How to get the real base URL (without using Liquid and Front Matter) ?!?!
-  const docRoot = '';
   const notFoundPageName = '404.html';
   const contentID = 'article';
 
@@ -175,7 +173,7 @@ $(function () {
       error => {
         if (error == "Error: 404") {
           var baseURL = window.location.origin;
-          var notFoundURL = baseURL + '/' + (docRoot != '' ? docRoot + '/' : '') + notFoundPageName;
+          var notFoundURL = baseURL + '/' + docPrefix() + notFoundPageName;
 
           updateContentFromUrl(notFoundURL);
         }
@@ -467,7 +465,7 @@ $(function () {
   }
 
   function shouldHideTooltip(activeTarget) {
-    return ((tooltipTarget == null || activeTarget != tooltipTarget) && (tooltip == null || (activeTarget != tooltip && activeTarget.closest('.tooltip') == null)));
+    return ((tooltipTarget == null || activeTarget != tooltipTarget) && (tooltip == null || (activeTarget != tooltip && activeTarget != null && activeTarget.closest('.tooltip') == null)));
   }
 
   function hideTooltip(withDelay) {
@@ -563,7 +561,7 @@ $(function () {
       }
     });
 
-    document.addEventListener("mouseover", function (event) {
+    document.addEventListener('mouseover', function (event) {
       elementUnderCursor = event.target;
     });
 
@@ -601,22 +599,22 @@ $(function () {
   // -------------
 
   // Close search screen with Esc key or toggle with predefined hotKey
-  $(document).on("keyup", function (event) {
+  $(document).on('keyup', function (event) {
     // Define the desired hotkey (in this case, Ctrl + Shift + F)
     var searchHotkey = { ctrlKey: true, shiftKey: true, key: 'F' };
 
     if (event.keyCode === 27) {
       if ($(".initial-content").hasClass("is--hidden"))
-        toggleSearch();
+        toggleSearch(event);
     }
     else if (event.ctrlKey === searchHotkey.ctrlKey &&
       event.shiftKey === searchHotkey.shiftKey &&
       event.key === searchHotkey.key) {
-      toggleSearch();
+      toggleSearch(event);
     }
   });
 
-  function toggleSearch() {
+  function toggleSearch(event) {
     $(".search-content").toggleClass("is--visible");
     $(".initial-content").toggleClass("is--hidden");
 
@@ -635,9 +633,11 @@ $(function () {
 
     if (tooltipTarget)
       hideTooltip(true);
+    // NOTE: event.target is not always the toggle here, use it directly instead of the event
+    $("#search-button").trigger('blur');
   }
 
-  $(".search__toggle").on("click", toggleSearch);
+  $("#search-button").on('click', toggleSearch);
 
   // -------------
   // Startup