Skip to content

Commit

Permalink
Add dark mode switch 32 (#37)
Browse files Browse the repository at this point in the history
Solves: #32 #27 

Signed-off-by: Hofi <[email protected]>
  • Loading branch information
mrgarris0n authored May 16, 2024
2 parents 26ae5c1 + 8d29527 commit 9b8fde2
Show file tree
Hide file tree
Showing 25 changed files with 595 additions and 105 deletions.
19 changes: 19 additions & 0 deletions LICENSE.lunr
Original file line number Diff line number Diff line change
@@ -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.
15 changes: 11 additions & 4 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
9 changes: 3 additions & 6 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
24 changes: 21 additions & 3 deletions _includes/masthead.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -%}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion _includes/search/algolia-search-scripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
4 changes: 2 additions & 2 deletions _includes/search/search_form.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
140 changes: 140 additions & 0 deletions _includes/skins.html
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 10 additions & 10 deletions _js/custom/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -563,7 +561,7 @@ $(function () {
}
});

document.addEventListener("mouseover", function (event) {
document.addEventListener('mouseover', function (event) {
elementUnderCursor = event.target;
});

Expand Down Expand Up @@ -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");

Expand All @@ -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
Expand Down
Loading

0 comments on commit 9b8fde2

Please sign in to comment.