Merge pull request #203 from gethinode/develop

Navbar

.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/scss/app.scss

@@ -53,9 +53,6 @@
 // Import Bootstrap helpers
 @import "bootstrap/scss/helpers";
 
-// Import Bootstrap utilities
-@import "bootstrap/scss/utilities/api";
-
 // Import Font Awesome
 // scss-docs-start awesome
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
@@ -97,4 +94,7 @@
 {{ end }}
 
 // Import theme placeholder
-@import "theme/theme.scss";
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API
+@import "bootstrap/scss/utilities/api";

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

@@ -24,6 +24,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/_sidebar.scss

@@ -3,8 +3,22 @@
     top: $navbar-offset;
 }
 
+.sidebar-overflow {
+    top: $navbar-offset;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
 .sidebar-item {
-    color: black;
+    color: rgba(0, 0, 0, 0.65);
+    margin-left: 0 !important;
+    padding-left: 0.85rem !important;
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: black;
+    }
 }
 
 .btn-toggle {
@@ -55,6 +69,14 @@
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-tertiary-color);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: var(--bs-secondary-color);
+            }
         }
 
         .btn-toggle {

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 = "4em"
+    offset = "3.8em"
     search = true
     breadcrumb = false
     toc = true

content/en/blog/bootstrap-elements.md

@@ -73,7 +73,7 @@ As an example, the following shortcode displays a tooltip for a dark button with
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
+{{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" badge="99+" */>}}
     Inbox
 {{</* /button */>}}
 {{< /example>}}
@@ -86,9 +86,9 @@ As an example, the following shortcode displays a group of three buttons.
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* button-group aria-label="Basic example" */>}}
-  {{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Left{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Middle{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Right{{</* /button */>}}
 {{</* /button-group */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -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 -->
 
@@ -236,7 +236,7 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
     Tooltip demonstration
 {{</* /tooltip */>}}
 {{< /example >}}

content/nl/blog/bootstrap-elements.md

@@ -73,7 +73,7 @@ De volgende shortcode toont een knop met een label en een aanwijzing.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button color="secondary" tooltip="Toon je ongelezen berichten" href="#" badge="99+" */>}}
+{{</* button color="secondary" tooltip="Toon je ongelezen berichten" href="#!" badge="99+" */>}}
     Inbox
 {{</* /button */>}}
 {{< /example>}}
@@ -86,9 +86,9 @@ De volgende shortcode toont een groep van drie knoppen.
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* button-group aria-label="Basic example" */>}}
-  {{</* button color="primary" href="#" */>}}Links{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Midden{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Rechts{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Links{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Midden{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Rechts{{</* /button */>}}
 {{</* /button-group */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -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 -->
 
@@ -236,7 +236,7 @@ De volgende shortcode toont een uitleg voor een gekleurde link.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
     Tooltip demonstration
 {{</* /tooltip */>}}
 {{< /example >}}

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,21 +78,21 @@
                 <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 mt-5 d-md-block">
-                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                <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 "version" $version) }}
                 </div>
                 <div class="col col-md-9 col-lg-8 mb-5 p-4">
                     {{ partial "partials/header.html" . }}
                     {{ partial "partials/body.html" . }}
                     {{ partial "partials/footer.html" . }}
                 </div>
-                <div class="col col-lg-2 d-none d-lg-block mt-5">
+                <div class="col col-lg-2 d-none d-lg-block pt-5">
                     {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
                         {{ partial "assets/toc.html" . -}}
                     {{ end -}}

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" data-bs-theme-value="light" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                    {{- 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="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                    {{- 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="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                    {{- 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,17 +168,18 @@
                     {{- $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>
@@ -159,9 +208,12 @@
                 {{- 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 +230,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,58 +1,110 @@
 {{- $page := .page }}
 {{- $section := $page.Section }}
 {{- $data := .menu -}}
+{{- $version := .version -}}
+
+{{- define "partials/sidebar/group.html" -}}
+    {{- $page := .page -}}
+    {{- $index := .index -}}
+    {{- $level := .level -}}
+    {{- $baseURL := .baseURL -}}
+    {{- $group := .group -}}
+
+    {{- $doc_slug := $group.title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
+
+    <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}" aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}">
+            <div class="text-start flex-fill">{{ $group.title }}</div>
+        </button>
+        <div class="collapse {{ if $collapsed }}show{{ end }}" id="sidebar-collapse-{{ $index }}-{{ $level }}">
+            <ul class="btn-toggle-nav list-unstyled fw-normal {{ if eq $level 0}} pb-1 {{ end }}ps-3">
+                {{- range $item := $group.pages -}}
+                    {{- if $item.pages -}}
+                        {{ partial "partials/sidebar/group.html" (dict 
+                            "page" $page
+                            "index" $index
+                            "level" (add $level 1)
+                            "baseURL" $href
+                            "group" $item
+                            )
+                        }}
+                    {{- else -}}
+                        {{ partial "partials/sidebar/item.html" (dict 
+                            "page" $page
+                            "sectionBreak" false
+                            "level" $level
+                            "baseURL" $href
+                            "title" $item.title
+                            )
+                        }}
+                    {{ end -}}
+                {{- end }}
+            </ul>
+        </div>
+    </li>
+{{ end -}}
+
+{{- define "partials/sidebar/item.html" -}}
+    {{ $page := .page }}
+    {{ $sectionBreak := .sectionBreak }}
+    {{- $level := .level -}}
+    {{ $baseURL := .baseURL}}
+    {{ $title := .title}}
+
+    {{- $doc_slug := $title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{ $active := eq $page.RelPermalink $href }}
+
+    {{ if eq $level 0}}
+        <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
+        {{- $sectionBreak = false }}
+        <li>
+            <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
+                <li>
+                    <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded {{ if $active }}active{{ end }}">
+                        {{ $title }}
+                    </a>      
+                </li>
+            </ul>
+        </li>
+    {{ else }}
+        <li>
+            <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded small {{ if $active }}active{{ end }}">
+                {{ $title }}
+            </a>      
+        </li>
+    {{ end }}
+{{ end -}}
 
 {{ if $data }}
-    <nav class="sidebar flex-shrink-0 ps-1 pt-3 sticky-top" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $url := split $page.Permalink "/" -}}
-        {{- $page_slug := index $url (sub (len $url) 2) -}}
-        {{- $sectionBreak := false }}
+    <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 $version) }}
 
         <ul class="list-unstyled ps-0">
-        {{- range $index, $group := $data -}}
-            {{- $link := $group.title -}}
-            {{- $link_slug := $link | urlize -}}
-
-            {{- if $group.pages -}}
-                {{- $link = index $group.pages 0 -}}
-                {{- $link_slug = $link.title | urlize -}}
-            {{- end -}}
-
-            {{- $group_slug := $group.title | urlize -}}
-            {{- $is_active_group := eq $page.Params.group $group_slug -}}
-
-            {{- if $group.pages }}
+        {{- range $index, $item := $data -}}
+            {{- if $item.pages }}
                 {{- $sectionBreak = true }}
-                <li class="mb-1">
-                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}" aria-expanded="{{ if $is_active_group }}true{{ else }}false{{ end }}">
-                        <div class="text-start flex-fill">{{ $group.title }}</div>
-                    </button>
-                    <div class="collapse {{ if $is_active_group }}show{{ end }}" id="sidebar-collapse-{{ $index }}">
-                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                            {{- range $doc := $group.pages -}}
-                                {{- $doc_slug := $doc.title | urlize -}}
-                                {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                                {{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
-                                <li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
-                            {{- end }}
-                        </ul>
-                    </div>
-                </li>
+                {{ partial "partials/sidebar/group.html" (dict 
+                    "page" $page
+                    "index" $index
+                    "level" (add $level 1)
+                    "baseURL" $baseURL
+                    "group" $item
+                    )
+                }}
             {{- else }}
-                <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
-                {{- $sectionBreak = false }}
-                <li>
-                    <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
-                        <li>
-                            {{- $doc_slug := $group.title | urlize -}}
-                            {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                            {{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
-                            <a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
-                                {{ $group.title }}
-                            </a>      
-                        </li>
-                    </ul>
-                </li>
+                {{ partial "partials/sidebar/item.html" (dict 
+                    "page" $page
+                    "sectionBreak" $sectionBreak
+                    "level" $level
+                    "baseURL" $baseURL
+                    "title" $item.title
+                    )
+                }}
             {{- end }}
         {{- end }}
         </ul>

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/img.html

@@ -19,8 +19,9 @@
 {{- if $src -}}
     <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
         {{ partial "image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
+        <div class="carousel-caption gradient"></div>
         {{ with $caption }}
-            <div class="carousel-caption d-none d-md-block gradient">
+            <div class="carousel-caption d-none d-md-block">
                 <div class="d-flex justify-content-center align-items-end h-100 w-100 p-4">{{ . }}</div>
             </div>
         {{ end }}

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.10.0-alpha5",
+  "version": "0.11.6",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,11 +17,11 @@
   },
   "scripts": {
     "prestart": "npm run clean",
-    "start": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender",
-    "start:prod": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender -e production",
+    "start": "hugo server --bind=0.0.0.0 --disableFastRender",
+    "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender -e production",
     "prebuild": "npm run clean",
-    "build": "exec-bin node_modules/.bin/hugo/hugo --gc --minify",
-    "build:debug": "exec-bin node_modules/.bin/hugo/hugo -e debug --debug",
+    "build": "hugo --gc --minify",
+    "build:debug": "hugo -e debug --debug",
     "build:preview": "npm run build -D -F",
     "clean": "rimraf public resources",
     "clean:install": "rimraf package-lock.json node_modules",
@@ -31,14 +31,13 @@
     "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\"",
     "lint:markdown-fix": "markdownlint-cli2-fix \"*.md\" \"content/**/*.md\"",
     "test": "npm run -s lint",
-    "env": "exec-bin node_modules/.bin/hugo/hugo env",
+    "env": "hugo env",
     "precheck": "npm version",
-    "check": "exec-bin node_modules/.bin/hugo/hugo version",
+    "check": "hugo version",
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
-    "create:syntax-light": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
-    "create:syntax-dark": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
+    "create:syntax-light": "hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
+    "create:syntax-dark": "hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
     "create:syntax": "npm run -s create:syntax-light & npm run -s create:syntax-dark",
-    "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
     "upgrade": "npx npm-check-updates -u"
   },
   "repository": {
@@ -55,7 +54,7 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0-alpha2",
+    "bootstrap": "^5.3.0-alpha3",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
     "eslint": "^8.37.0",
@@ -63,9 +62,8 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
-    "exec-bin": "^1.0.0",
     "flexsearch": "^0.7.31",
-    "hugo-installer": "^4.0.1",
+    "hugo-bin": "^0.102.0",
     "markdownlint-cli2": "^0.6.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
@@ -74,7 +72,7 @@
     "stylelint": "^15.4.0",
     "stylelint-config-standard-scss": "^7.0.1"
   },
-  "otherDependencies": {
-    "hugo": "0.111.3"
+  "hugo-bin": {
+    "buildTags": "extended"
   }
 }