Merge pull request #978 from gethinode/develop

Publish v0.24.0 release
Update release tag for plain images support
2025-10-07 10:04:22 +00:00 · 2024-06-03 13:14:41 +02:00 · 2024-06-03 13:08:22 +02:00 · 2024-06-03 13:06:01 +02:00 · 2024-06-03 13:05:15 +02:00 · 2024-06-03 12:52:10 +02:00
9 changed files with 203 additions and 388 deletions
--- a/assets/js/critical/color.js
+++ b/assets/js/critical/color.js
@@ -9,44 +9,49 @@
 (() => {
  'use strict'

+  const supportedThemes = ['auto', 'dark', 'light'];
+
+  // retrieves the currently stored theme from local storage (cookie)
  const storedTheme = localStorage.getItem('theme')

-  const getPreferredTheme = () => {
-    if (storedTheme) {
-      return storedTheme
-    }
-
+  // retrieves the theme preferred by the client, defaults to light
+  function getPreferredTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

-  const setTheme = function (theme) {
-    if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+  // retrieves the current theme, either from local storage or client's preferences
+  function getTheme() {
+    if (storedTheme) {
+      return storedTheme
    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      const preference = getPreferredTheme()
+      localStorage.setItem('theme', preference)
+      return preference
    }
  }

-  setTheme(getPreferredTheme())
-
-  const showActiveTheme = theme => {
-    const activeSelectors = document.querySelectorAll('.theme-icon-active')
-    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
-    if (activeButtons.length > 0) {
-      const activeIcon = activeButtons[0].querySelector('span')
-
-      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-        element.classList.remove('active')
-      })
-
-      for (let i = 0; i < activeSelectors.length; ++i) {
-        activeSelectors[i].innerHTML = activeIcon.innerHTML
-      }
-
-      for (let i = 0; i < activeButtons.length; ++i) {
-        activeButtons[i].classList.add('active')
-      }
+  // applies and stores requested theme
+  function setTheme(theme) {
+    if (!supportedThemes.includes(theme)) {
+      theme = 'auto'
    }
+    localStorage.setItem('theme', theme)
+
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    })
+  }
+
+  // alternates the currently active theme
+  function toggleTheme() {
+    const target = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark'
+    setTheme(target)
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -56,18 +61,32 @@
  })

  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
+    setTheme(getTheme())
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')

-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.classList.add('notransition');
+    })
+    
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+      chk.addEventListener('change', function () {
+        toggleTheme()
      })
+    })
+
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.offsetHeight; // flush css changes
+      ball.classList.remove('notransition');
+    })
  })
+
+  window.addEventListener('load', () => {
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+    })
+  });  
 })()

 {{- end -}}
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -1,3 +1,9 @@
+@if $enable-dark-mode {
+    body { 
+        transition: background-color 0.5s, color 0.5s; 
+    }
+}
+
 //
 // Remove underline from all links
 //
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -1,8 +1,6 @@
 // stylelint-disable annotation-no-unknown

 // Source: https://jsfiddle.net/njhgr40m/
-
-
 .navbar {
    --bs-navbar-expanded-color: var(--bs-body-bg);
    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
@@ -236,3 +234,61 @@
        }
    }
 }
+
+// adapted from https://www.codeply.com/p/UsTEwDkzNp#
+.checkbox {
+	opacity: 0;
+	position: absolute;
+}
+
+.mode-switch {
+    --#{$prefix}mode-switch-width: 50px;
+}
+
+.mode-switch .label {
+	border-color: var(--#{$prefix}border-color);
+    border-style: solid;
+    border-width: 1px;
+	border-radius: var(--#{$prefix}mode-switch-width);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	position: relative;
+	height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
+	width: var(--#{$prefix}mode-switch-width);
+    transform: scale(0.9);
+}
+
+.notransition {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+.mode-switch .label .ball {
+    background-color: var(--#{$prefix}secondary-bg);
+	border-radius: 50%;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	transition: transform 0.2s linear;
+}
+
+.mode-switch .checkbox:checked + .label .ball {
+	transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
+}
+
+.mode-switch .fa-moon {
+	color: $yellow;
+    transform: scale(0.8);
+}
+
+.mode-switch .fa-sun {
+	color: var(--#{$prefix}bs-body-color);
+    transform: scale(0.8);
+}
--- a/data/structures/image.yml
+++ b/data/structures/image.yml
@@ -137,4 +137,4 @@ arguments:
    comment:
      Flag to indicate if the image should render a plain image instead of an
      image set. When set, no transformations are applied to the image.
-    release: v0.24.0-beta5
+    release: v0.24.0
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -22,6 +22,7 @@
      "i",
      "img",
      "input",
+      "label",
      "li",
      "link",
      "mark",
@@ -69,6 +70,7 @@
      "align-self-end",
      "anchor",
      "badge",
+      "ball",
      "bg-body",
      "bg-body-tertiary",
      "bg-danger",
@@ -123,6 +125,7 @@
      "carousel-indicators",
      "carousel-inner",
      "carousel-item",
+      "checkbox",
      "chroma",
      "col",
      "col-10",
@@ -188,7 +191,6 @@
      "fa-arrow-right",
      "fa-bootstrap",
      "fa-circle-check",
-      "fa-circle-half-stroke",
      "fa-code",
      "fa-docker",
      "fa-ellipsis",
@@ -257,6 +259,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "lead",
      "leaflet-map",
      "link-bg-body",
@@ -278,6 +281,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-1",
      "ms-3",
      "ms-auto",
@@ -309,6 +313,7 @@
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-nav-scroll",
      "navbar-title",
@@ -391,7 +396,6 @@
      "sticky-top",
      "stretched-link",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "syntax-highlight",
      "tab-content",
      "tab-pane",
@@ -419,8 +423,6 @@
      "text-sm-start",
      "text-start",
      "text-uppercase",
-      "theme-icon",
-      "theme-icon-active",
      "tickmark",
      "timeline",
      "timeline-bg-dark",
@@ -459,8 +461,6 @@
      "w-50"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "TableOfContents",
      "abbr",
      "accordion",
@@ -532,6 +532,8 @@
      "nav-0-btn-2",
      "navbar",
      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
      "navbar-sample-collapse",
      "navigation",
      "notification",
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -11,6 +11,7 @@
      "html",
      "img",
      "input",
+      "label",
      "li",
      "link",
      "meta",
@@ -31,6 +32,7 @@
      "align-items-center",
      "align-self-center",
      "align-self-end",
+      "ball",
      "bg-body",
      "bg-opacity-10",
      "bg-primary",
@@ -41,6 +43,7 @@
      "btn",
      "btn-close",
      "btn-primary",
+      "checkbox",
      "col",
      "col-12",
      "col-6",
@@ -57,22 +60,15 @@
      "d-flex",
      "d-inline",
      "d-md-block",
-      "d-md-none",
      "d-none",
      "display-1",
      "display-4",
-      "dropdown",
-      "dropdown-item",
-      "dropdown-menu",
-      "dropdown-menu-end",
-      "dropdown-toggle",
      "emphasis",
      "end-0",
      "fa",
      "fa-10x",
      "fa-2x",
      "fa-book-open",
-      "fa-circle-half-stroke",
      "fa-ellipsis",
      "fa-face-frown",
      "fa-fw",
@@ -100,6 +96,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "link-bg-footer",
      "link-secondary",
      "main-content",
@@ -107,6 +104,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-auto",
      "ms-md-3",
      "mt-3",
@@ -123,6 +121,7 @@
      "navbar-container",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-toggler",
      "no-js",
@@ -156,15 +155,12 @@
      "search-suggestions",
      "shadow",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "text-center",
      "text-decoration-none",
      "text-muted",
      "text-secondary",
      "text-sm-start",
      "text-start",
-      "theme-icon",
-      "theme-icon-active",
      "toast",
      "toast-body",
      "toast-container",
@@ -173,9 +169,9 @@
      "top-bar"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
      "toast-container",
      "toast-copied-code-message"
    ]
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -16,36 +16,16 @@

 <!-- Inline partial to render the color mode switcher -->
 {{- define "partials/navbar-mode.html" -}}
-    {{- $size := .size -}}
-    {{- $collapsed := .collapsed -}}
-    {{- $id := .id -}}
+    {{- $id := .id | default "navbar-mode" -}}

-    <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
-        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "colorMode" }}" aria-expanded="false" id="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }}&nbsp;{{ T "colorMode" }}{{ end }}
-            <span class="d-md-none"></span>
-        </a>
-        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorLight" }}
-                </a>
-            </li>
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorDark" }}
-                </a>
-            </li>
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorAuto" }}
-                </a>
-            </li>
-        </ul>
-    </li>
+    <div class="d-flex mode-switch align-items-center" id="{{ $id }}">
+        <input type="checkbox" class="checkbox navbar-mode-selector" id="{{ $id }}-checkbox" />
+        <label class="label" for="{{ $id }}-checkbox">
+            {{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}
+            {{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}
+            <div class="ball"></div>
+        </label>
+    </div>
 {{- end -}}

 <!-- Inline partial to render the version switcher -->
@@ -300,7 +280,6 @@
                    <!-- Insert color mode switcher -->
                    {{- if $enableDarkMode -}}
                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
                    {{- end -}}

                    <!-- Insert modal search button -->
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.24.0-beta10",
+  "version": "0.24.0",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -66,24 +66,26 @@
    "url": "https://github.com/gethinode/hinode/issues"
  },
  "homepage": "https://gethinode.com",
-  "devDependencies": {
+  "dependencies": {
    "@fullhuman/postcss-purgecss": "^6.0.0",
-    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "^6.0.0",
    "autoprefixer": "^10.4.19",
    "cssnano": "^7.0.1",
    "cssnano-preset-advanced": "^7.0.1",
+    "hugo-bin": "0.123.2",
+    "purgecss-whitelister": "^2.4.0"
+  },
+  "devDependencies": {
+    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
+    "@netlify/plugin-lighthouse": "^6.0.0",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.2.0",
-    "hugo-bin": "0.123.2",
    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^11.0.0",
-    "purgecss-whitelister": "^2.4.0",
    "replace-in-files-cli": "^2.2.0",
    "rimraf": "^5.0.7",
    "shx": "^0.3.4",
Author	SHA1	Message	Date
Mark Dumay	31cf9eb577	Merge pull request #978 from gethinode/develop Publish v0.24.0 release	2024-06-03 13:14:41 +02:00
Mark Dumay	9a8ebd3558	Update release tag for plain images support	2024-06-03 13:08:22 +02:00
Mark Dumay	148c587283	Merge branch 'main' into develop	2024-06-03 13:06:01 +02:00
Mark Dumay	7c9c4cbabb	Publish v0.24.0 release	2024-06-03 13:05:15 +02:00
Mark Dumay	20f14934c2	Merge pull request #977 from gethinode/develop Bump package release	2024-06-03 12:52:10 +02:00
Mark Dumay	840e67d12d	Merge branch 'main' into develop	2024-06-03 12:45:05 +02:00
Mark Dumay	8ef57a265e	Bump package release	2024-06-03 12:43:19 +02:00
Mark Dumay	8677357450	Merge pull request #976 from gethinode/develop Sync color mode when navigating browser history	2024-06-03 11:59:43 +02:00
Mark Dumay	79ac2dae4f	Merge branch 'main' into develop	2024-06-03 11:32:15 +02:00
Mark Dumay	20cad07a0b	Sync color mode when navigating browser history	2024-06-03 11:31:10 +02:00
Mark Dumay	2c97af2fef	Merge pull request #975 from gethinode/develop Smoothen transition between color modes	2024-06-03 11:30:49 +02:00
Mark Dumay	95ded6296c	Merge branch 'main' into develop	2024-06-03 10:16:28 +02:00
Mark Dumay	3b46095821	Sync release numbering	2024-06-03 10:04:34 +02:00
Mark Dumay	1bf4e74e56	Smoothen transition between color modes	2024-06-03 10:02:58 +02:00
Mark Dumay	9b75b46c49	Merge pull request #974 from gethinode/develop Fix color-mode switcher	2024-06-03 09:44:51 +02:00
Mark Dumay	107077f5ec	Fix color-mode switcher	2024-06-03 09:36:48 +02:00
Mark Dumay	528b70bfa2	Merge branch 'main' into develop	2024-06-03 07:27:40 +02:00
Mark Dumay	75ab4625b1	Isolate production dependencies	2024-06-03 07:27:05 +02:00
Mark Dumay	bac3054ec2	Merge pull request #972 from gethinode/switch Replace color-mode switcher	2024-06-03 06:23:02 +02:00
Mark Dumay	d63fd5f212	Merge branch 'main' into switch	2024-06-02 19:50:01 +02:00
Mark Dumay	5678d2cab5	Replace color-mode switcher	2024-06-02 17:13:04 +02:00