Merge pull request #1550 from gethinode/develop

Develop

Author: markdumay

assets/js/critical/color.js

@@ -1,4 +1,4 @@
-{{- if site.Params.main.enableDarkMode -}}
+{{- if (or site.Params.main.enableDarkMode site.Params.main.colorMode.enabled) -}}
 
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)

assets/scss/components/_navbar.scss

@@ -7,7 +7,7 @@
 }
 
 .mode-switch {
-    --#{$prefix}mode-switch-width: 50px;
+    --#{$prefix}mode-switch-width: 3em;
 }
 
 .mode-switch .label {
@@ -64,6 +64,18 @@
     transform: scale(0.8);
 }
 
+.mode-toggle > input {
+	z-index: 1;
+	cursor: pointer;
+    height: 25px;
+    width: 25px;
+}
+
+.mode-toggle > label {
+	z-index: 0;
+	cursor: pointer;
+}
+
 // Source: https://jsfiddle.net/njhgr40m/
 
 @if $enable-dark-mode {
@@ -126,6 +138,36 @@
 
 .navbar-expanded {
     box-shadow: $box-shadow-sm;
+    min-height: 100vh;
+    align-items: start;
+}
+
+.navbar-expanded .navbar-collapse {
+    margin-top: 2rem;
+}
+
+@each $h, $size in $font-sizes {
+    .navbar-fs-#{$h} {
+        font-size: #{$size};
+    }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    @if $infix != '' {
+        @include media-breakpoint-up($next) {
+            .navbar#{$infix}-fs { 
+                font-size: inherit;
+            } 
+        }
+    }
+}
+
+.navbar-icon {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
 .nav-item .vr {

assets/scss/components/_sidebar.scss

@@ -134,4 +134,6 @@
 
 .dropdown-toggle {
     outline: 0;
+    display: flex;
+    align-items: center;
 }

config/_default/hugo.toml

@@ -176,7 +176,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-csp"
   [[module.imports]]
-    path = "github.com/gethinode/mod-flexsearch/v2"
+    path = "github.com/gethinode/mod-flexsearch/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-fontawesome/v2"
   [[module.imports]]

config/_default/params.toml

@@ -2,9 +2,7 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
-    enableDarkMode = true
     enableLanguageSelectionStorage = false
-    modes = ["light", "dark"]
     canonifyAssetsURLs = false
     endorse = true
     footerBelowFold = false
@@ -22,6 +20,12 @@
         tab = false
     [main.build]
         transpiler = "libsass"
+    [main.colorMode]
+        enabled = true
+        modes = ["light", "dark"]
+        toggle = false
+        iconLight = "fas sun"
+        iconDark = "fas moon"
 # toml-docs-end main
 
 # toml-docs-start images
@@ -91,8 +95,6 @@
     overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
-    search = true
-    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
@@ -103,6 +105,12 @@
     [navigation.padding]
         x = 4
         y = 4
+    [navigation.language]
+        icon = "fas globe"
+    [navigation.search]
+        enabled = true
+        modal = true
+        icon = "fas magnifying-glass"
 # toml-docs-end navigation
 
 # toml-docs-start messages

config/postcss.config.js

@@ -27,7 +27,7 @@ const purgecss = purgeCSSPlugin({
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
       './_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss',
-      './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/v3/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
       './_vendor/github.com/gethinode/mod-mermaid/v3/assets/scss/mermaid.scss',

content/_modals/_index.md

@@ -0,0 +1,8 @@
+---
+title: Modal elements
+cascade:
+- build:
+    list: local
+    publishResources: false
+    render: never
+---

data/structures/navbar-item.yml

@@ -9,7 +9,9 @@ arguments:
     comment: Context of the current page.
     group: partial
   menu:
-    type: '*navigation.MenuEntry'
+    type:
+      - '*navigation.MenuEntry'
+      - 'map[string]interface {}'
     optional: false
     comment: Menu data to use for the navbar item.
   parent:
@@ -37,3 +39,24 @@ arguments:
     optional: true
     comment: >-
       Renders the navigation item as plain item, ignoring any children.
+  breakpoint:
+    release: v1.2.0
+  modal:
+    type: string
+    optional: true
+    release: v1.2.0
+    comment: >-
+      If set, toggles a modal control for the provided target.
+  id:
+    type: string
+    optional: true
+    release: v1.2.0
+    comment: >-
+      If set, adds an id attribute to the menu item.
+  fs:
+    type: int
+    optional: true
+    default: 6
+    release: v1.2.0
+    comment: >-
+      Sets the font size of the navigation items when the navbar is collapsed.

exampleSite/config/_default/hugo.toml

@@ -115,7 +115,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-csp"
   [[module.imports]]
-    path = "github.com/gethinode/mod-flexsearch/v2"
+    path = "github.com/gethinode/mod-flexsearch/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-fontawesome/v2"
   [[module.imports]]

exampleSite/config/_default/params.toml

@@ -1,9 +1,7 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
-    enableDarkMode = true
     enableLanguageSelectionStorage = true
-    modes = ["light", "dark"]
     canonifyAssetsURLs = false
     footerBelowFold = false
     loading = "lazy"
@@ -21,6 +19,12 @@
     [main.build]
         transpiler = "dartsass"
         silenceDeprecations = true
+    [main.colorMode]
+        enabled = true
+        modes = ["light", "dark"]
+        toggle = true
+        iconLight = "fas sun"
+        iconDark = "fas moon"
 
 [debugging]
     showJS = false
@@ -45,18 +49,23 @@
     horizontal = false
     offset = "5.5rem"
     offsetXS = "5.5rem"
-    search = true
-    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
     size = "md"
+    fontsizeCollapsed = 6
     startLevel = 2
     endLevel = 3
     maxNumHeadings = 9
+    [navigation.language]
+        icon = "fas globe"
     [navigation.padding]
         x = 4
         y = 4
+    [navigation.search]
+        enabled = true
+        modal = false
+        icon = "fas magnifying-glass"
 
 [messages]
     placement = "bottom-right"