Merge pull request #206 from gethinode/develop

Bump release version

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,8 +27,9 @@ If applicable, add a copy of Hugo's log messages.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - Host OS: [e.g. macOS Ventura 13.0]
- - Node version: [e.g. node v18.10.0]
+ - Hinode version: [e.g. v0.11.3]
+ - Host OS: [e.g. macOS Ventura 13.3]
+ - Node version: [e.g. node v18.15.0]
  - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
  - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
 

assets/js/critical/color.js

@@ -4,8 +4,6 @@
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
 
-{{ if site.Params.main.enableDarkMode }}
-
 (() => {
   'use strict'
 
@@ -30,17 +28,24 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = theme => {
-    const activeSelector = document.querySelector('.theme-icon-active')
-    const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const activeIcon = activeButton.querySelector('i')
+    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('i')
 
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      element.classList.remove('active')
-    })
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+      })
 
-    activeSelector.className = activeIcon.className
-    activeSelector.className = activeSelector.className.replace('theme-icon', 'theme-icon-active')
-    activeButton.classList.add('active')
+      for (let i = 0; i < activeSelectors.length; ++i) {
+        activeSelectors[i].className = activeIcon.className
+        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
+      }
+
+      for (let i = 0; i < activeButtons.length; ++i) {
+        activeButtons[i].classList.add('active')
+      }
+    }
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -63,5 +68,3 @@
       })
   })
 })()
-
-{{ end }}

assets/js/flexsearch.js

@@ -81,7 +81,7 @@ Source:
     // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
     // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
     //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
+    {{ $list := where (where site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
     {{ $len := (len $list) -}}
   
     index.add(

assets/js/navbar.js

@@ -1,5 +1,6 @@
 const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
 // set the navbar background color to opaque when scrolling past a breakpoint
 window.onscroll = () => {
@@ -14,3 +15,10 @@ window.onscroll = () => {
 toggler.onclick = () => {
   navbar.classList.toggle('navbar-expanded')
 }
+
+// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+for (let i = 0; i < modeSelectors.length; ++i) {
+  modeSelectors[i].onclick = () => {
+    toggler.click()
+  }
+}

assets/scss/common/_icons.scss

@@ -1,25 +1,25 @@
 // scss-docs-start icons
-$form-check-input-checked-bg-image:             url("icons/form-check-input-checked-bg-image.svg") !default;
-$form-check-radio-checked-bg-image:             url("icons/form-check-radio-checked-bg-image.svg") !default;
-$form-check-input-indeterminate-bg-image:       url("icons/form-check-input-indeterminate-bg-image.svg") !default;
-$form-switch-bg-image:                          url("icons/form-switch-bg-image.svg") !default;
-$form-switch-bg-image-dark:                     url("icons/form-switch-bg-image-dark.svg") !default;
-$form-switch-focus-bg-image:                    url("icons/form-switch-focus-bg-image.svg") !default;
-$form-switch-checked-bg-image:                  url("icons/form-switch-checked-bg-image.svg") !default;
-$form-select-indicator:                         url("icons/form-select-indicator.svg") !default;
-$form-select-indicator-dark:                    url("icons/form-select-indicator-dark.svg") !default;
-$form-feedback-icon-valid:                      url("icons/form-feedback-icon-valid.svg") !default;
-$form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.svg") !default;
-$navbar-light-toggler-icon-bg:                  url("icons/navbar-light-toggler-icon-bg.svg") !default;
-$navbar-dark-toggler-icon-bg:                   url("icons/navbar-dark-toggler-icon-bg.svg") !default;
-$accordion-button-icon:                         url("icons/accordion-button-icon.svg") !default;
-$accordion-button-icon-dark:                    url("icons/accordion-button-icon-dark.svg") !default;
-$accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
-$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.svg") !default;
-$carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
-$carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
-$btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
-$btn-toggle:                                    url("icons/btn-toggle.svg") !default;
-$btn-toggle-dark:                               url("icons/btn-toggle-dark.svg") !default;
+$form-check-input-checked-bg-image:             url("/icons/form-check-input-checked-bg-image.svg") !default;
+$form-check-radio-checked-bg-image:             url("/icons/form-check-radio-checked-bg-image.svg") !default;
+$form-check-input-indeterminate-bg-image:       url("/icons/form-check-input-indeterminate-bg-image.svg") !default;
+$form-switch-bg-image:                          url("/icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("/icons/form-switch-bg-image-dark.svg") !default;
+$form-switch-focus-bg-image:                    url("/icons/form-switch-focus-bg-image.svg") !default;
+$form-switch-checked-bg-image:                  url("/icons/form-switch-checked-bg-image.svg") !default;
+$form-select-indicator:                         url("/icons/form-select-indicator.svg") !default;
+$form-select-indicator-dark:                    url("/icons/form-select-indicator-dark.svg") !default;
+$form-feedback-icon-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
+$form-feedback-icon-invalid:                    url("/icons/form-feedback-icon-invalid.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("/icons/navbar-light-toggler-icon-bg.svg") !default;
+$navbar-dark-toggler-icon-bg:                   url("/icons/navbar-dark-toggler-icon-bg.svg") !default;
+$accordion-button-icon:                         url("/icons/accordion-button-icon.svg") !default;
+$accordion-button-icon-dark:                    url("/icons/accordion-button-icon-dark.svg") !default;
+$accordion-button-active-icon:                  url("/icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("/icons/accordion-button-active-icon-dark.svg") !default;
+$carousel-control-prev-icon-bg:                 url("/icons/carousel-control-prev-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("/icons/carousel-control-next-icon-bg.svg") !default;
+$btn-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
+$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

assets/scss/common/_styles.scss

@@ -18,3 +18,14 @@ a:active {
 .tickmark li::marker {
     content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}

assets/scss/components/_navbar.scss

@@ -4,13 +4,17 @@
 
 .navbar {
     transition: 0.5s ease-in-out;
-    background-color: none;
+    background-color: transparent;
 }
 
 .nav-active, .navbar-expanded {
     background-color: var(--bs-body-bg);
 }
 
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);
@@ -24,6 +28,10 @@
     border: 0 if($enable-important-utilities, !important, null);
 }
 
+.fw-30 {
+    width: 30px !important;
+}
+
 /* Lines of the Toggler */
 .toggler-icon {
     width: 30px;

assets/scss/components/_toc.scss

@@ -6,9 +6,9 @@
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
     overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }
 
 // scss-docs-end toc

config/_default/params.toml

@@ -21,10 +21,11 @@
 
 # toml-docs-start navigation
 [navigation]
+    anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "5em"
+    offset = "3.8em"
     search = true
     breadcrumb = false
     toc = true

content/en/blog/bootstrap-elements.md

@@ -198,7 +198,7 @@ As an example, the following shortcode displays a light navigation header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

content/nl/blog/bootstrap-elements.md

@@ -198,7 +198,7 @@ De volgende shortcode toont een navigatiemenu.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,5 @@
+{{ if site.Params.navigation.anchor }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"><i class="fa-solid fa-link anchor"></i></a></h{{ .Level }}>
+{{ else }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+{{ end }}

layouts/_default/baseof.html

@@ -1,12 +1,17 @@
+{{- $section := .Section }}
 {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
+{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
 
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
         {{ block "head" . }}{{ end -}}
     </head>
 
     <body>
+        {{- if site.Params.main.enableDarkMode -}}
+            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "page" .) -}}
+        {{- end -}}
         <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                 {{- partial "assets/navbar.html" (dict
@@ -52,6 +57,6 @@
             {{- partial "footer/footer.html" . -}}
         {{ end -}}
 
-        {{- partialCached "footer/scripts.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "page" .) }}
     </body>
 </html>

layouts/_default/single.html

@@ -69,6 +69,7 @@
 
 {{ define "main" -}}
     {{- $menu := .Scratch.Get "sidebar" -}}
+    {{- $version := .Scratch.Get "version" -}}
     {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
     {{ if and $menu $sidebar -}}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
@@ -77,14 +78,14 @@
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
             </div>
             <div class="offcanvas-body">
-                {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
             </div>
         </div>
     
         <div class="container-fluid">
             <div class="row row-cols-md-2 row-cols-lg-3">
                 <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
-                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
                 </div>
                 <div class="col col-md-9 col-lg-8 mb-5 p-4">
                     {{ partial "partials/header.html" . }}

layouts/partials/assets/navbar.html

@@ -6,12 +6,47 @@
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                     "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
 -->
 
+<!-- Inline partial to render the color mode switcher -->
+{{- define "partials/navbar-mode.html" -}}
+    {{- $id := .id -}}
+    {{- $size := .size -}}
+    {{- $collapsed := .collapsed -}}
+
+    <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-expanded="false" id="navbar-color-theme">
+            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="d-md-none"></span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                    {{ T "colorLight" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                    {{ T "colorDark" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                    {{ T "colorAuto" }}
+                </a>
+            </li>
+        </ul>
+    </li>
+{{- end -}}
+
 {{- $supportedFlags := slice "true" "false" -}}
 
 {{- $id := 0 -}}
@@ -65,6 +100,15 @@
 {{- end -}}
 
 {{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- with .mode -}}
+    {{- $darkModeParam := . -}}
+    {{- if in $supportedFlags $darkModeParam -}}
+        {{- if eq $darkModeParam "true" }}{{ $enableDarkMode = site.Params.main.enableDarkMode }}{{ else }}{{ $enableDarkMode = false }}{{ end -}}
+    {{- else -}}
+        {{- errorf "Invalid value for param 'darkMode': %s" $darkModeParam -}}
+    {{- end -}}
+{{- end -}}
+
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
@@ -79,19 +123,21 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
-	<div class="container-fluid">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
+	<div class="container-fluid p-0">
         <!-- Insert sidebar toggler when applicable -->
-        {{- if $page.Scratch.Get "sidebar" -}}
-            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- else -}}
-            <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- end -}}
+        <div class="d-flex">
+            {{- if $page.Scratch.Get "sidebar" -}}
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- else -}}
+                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- end -}}
+        </div>
 
         <!-- Insert the brand logo or name -->
         <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +149,14 @@
         </a>
 
         <!-- Insert main navigation toggler -->
-		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-			<span class="toggler-icon top-bar emphasis"></span>
-			<span class="toggler-icon middle-bar emphasis"></span>
-			<span class="toggler-icon bottom-bar emphasis"></span>
-		</button>
+        <div class="d-flex fw-30">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                <span class="toggler-icon top-bar emphasis"></span>
+                <span class="toggler-icon middle-bar emphasis"></span>
+                <span class="toggler-icon bottom-bar emphasis"></span>
+            </button>
+        </div>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
             <!-- Insert search input -->
@@ -120,20 +168,21 @@
                     {{- $menu_item_url := $menu.URL | relLangURL -}}
                     {{- $page_url:= $page.RelPermalink | relLangURL -}}
                     {{- $active := hasPrefix $page_url $menu_item_url -}}
-
+                    
                     {{- $url := urls.Parse .URL -}}
                     {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
                     {{- if .HasChildren -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
+                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
-                                    <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
+                                    {{- $child_active := eq $page_url .URL -}}
+                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
                                 {{- end -}}
                             </ul>
-                          </li>
+                        </li>
                     {{- else -}}
                         <li class="nav-item">
                             {{- $external := ne $url.Host $baseurl.Host -}}
@@ -150,18 +199,22 @@
 
 
                 {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                         <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                     </li>
+                    <li><hr class="dropdown-divider-bg"></li>
                 {{- end -}}
 
                 <!-- Insert language switcher if applicable -->
                 {{- if $enableLanguage -}}
                     {{- $currentLang := $page.Language.Lang -}}
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
+                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
                             {{- if $page.IsTranslated -}}
                                 {{- range $page.AllTranslations -}}
@@ -178,32 +231,8 @@
                               
                 <!-- Insert color mode switcher -->
                 {{- if $enableDarkMode -}}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
-                            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }}
-                            <span class="d-md-none"></span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="light" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
-                                    {{ T "colorLight" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="dark" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
-                                    {{ T "colorDark" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="auto" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
-                                    {{ T "colorAuto" }}
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
                 {{- end -}}
             </ul>
         </div>

layouts/partials/assets/sidebar.html

@@ -1,6 +1,7 @@
 {{- $page := .page }}
 {{- $section := $page.Section }}
 {{- $data := .menu -}}
+{{- $version := .version -}}
 
 {{- define "partials/sidebar/group.html" -}}
     {{- $page := .page -}}
@@ -79,9 +80,9 @@
 
 {{ if $data }}
     <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $sectionBreak := false }}
-        {{ $level := 0}}
-        {{ $baseURL := relLangURL (path.Join $section site.Params.docs.version) }}
+        {{- $sectionBreak := false -}}
+        {{- $level := 0 -}}
+        {{- $baseURL := relLangURL (path.Join $section $version) }}
 
         <ul class="list-unstyled ps-0">
         {{- range $index, $item := $data -}}

layouts/partials/footer/scripts.html

@@ -1,15 +1,20 @@
-{{ $filename := "js/main.bundle.js" -}}
-{{ if hugo.IsProduction }}{{ $filename = "js/main.bundle.min.js" }}{{ end -}}
+{{ $filename := .filename | default "js/main.bundle.js" -}}
+{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
+{{ $page := .page }}
+
 {{ $files := slice -}}
-{{ range $index, $file := resources.Match "js/**.js" -}}
+{{ range $index, $file := resources.Match $match -}}
     {{ $files = $files | append $file -}}
 {{ end -}}
-{{ $bundle := $files | resources.Concat $filename -}}
-{{ $js := $bundle | resources.ExecuteAsTemplate $filename . -}}
 
-{{- if not hugo.IsProduction -}}
-    <script src="{{ $js.RelPermalink }}"></script>
-{{ else -}}
-    {{ $js = $js | minify | fingerprint -}}
-    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ if gt (len $files) 0 }}
+    {{ $bundle := $files | resources.Concat $filename -}}
+    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+
+    {{- if not hugo.IsProduction -}}
+        <script src="{{ $js.RelPermalink }}"></script>
+    {{ else -}}
+        {{ $js = $js | minify | fingerprint -}}
+        <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
 {{ end -}}

layouts/partials/head/stylesheet.html

@@ -15,8 +15,8 @@
     "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
+{{- $options := (dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
+{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
 {{- if hugo.IsProduction -}}
     {{- $options = merge $options (dict "outputStyle" "compressed") -}}
 {{- else -}}

layouts/shortcodes/navbar.html

@@ -8,12 +8,15 @@
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                     "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
     "title"         Optional brand title, displayed when the logo is not set.
 -->
 
 {{ $error := false }}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+{{ $supportedFlags := slice "true" "false" -}}
 
 {{ $id := add .Ordinal 1 }}
 
@@ -49,7 +52,6 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}
     {{ $color = . }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" $color -}}
         {{ $error = true -}}
@@ -58,12 +60,18 @@
 
 {{ $searchParam := "true" -}}
 {{ with .Get "search" }}{{ $searchParam = . }}{{ end -}}
-{{ $supportedFlags := slice "true" "false" -}}
 {{ if not (in $supportedFlags $searchParam) -}}
     {{ errorf "Invalid value for param 'search': %s" .Position -}}
     {{ $error = true -}}
 {{ end -}}
 
+{{ $modeParam := "true" -}}
+{{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $modeParam) -}}
+    {{ errorf "Invalid value for param 'mode': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
 {{ $logo := "" -}}
 {{ with .Get "logo" }}{{ $logo = . }}{{ end -}}
 
@@ -71,5 +79,17 @@
 {{ with .Get "title" }}{{ $title = . }}{{ end -}}
 
 {{ if not $error -}}
-    {{- partial "assets/navbar.html" (dict "id" $id "page" $page "size" $size "style" $style "color" $color "search" $searchParam "menus" $menus "logo" $logo "title" $title) -}}
+    {{- partial "assets/navbar.html" (dict 
+        "id" $id 
+        "page" $page
+        "size" $size
+        "style" $style
+        "color" $color
+        "search" $searchParam
+        "mode" $modeParam
+        "menus" $menus
+        "logo" $logo
+        "title" $title
+        )
+    -}}
 {{ end -}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.1",
+  "version": "0.11.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.11.1",
+      "version": "0.11.7",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.1",
+  "version": "0.11.7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",