Merge pull request #765 from gethinode/develop

Refactor navbar to use color themes in overlay mode

.github/workflows/lint-build.yml

@@ -41,10 +41,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [windows-latest, ubuntu-latest]
-        # 2024-02-07: temp disabled macOS due to Dart Sass installation error
-        # see https://github.com/sass/homebrew-sass/issues/57 
-        # os: [macos-latest, windows-latest, ubuntu-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         node-version: [18.x, 20.x]
 

assets/js/navbar.js

@@ -13,8 +13,12 @@ if (navbar !== null && togglers !== null) {
   window.onscroll = () => {
     if (window.scrollY > 75) {
       navbar.classList.add('nav-active')
+      const storedTheme = localStorage.getItem('theme')
+      navbar.setAttribute('data-bs-theme', storedTheme)
     } else {
       navbar.classList.remove('nav-active')
+      const defaultTheme = navbar.getAttribute('data-bs-overlay')
+      navbar.setAttribute('data-bs-theme', defaultTheme)
     }
   }
 

assets/scss/components/_navbar.scss

@@ -41,28 +41,6 @@
     box-shadow: $box-shadow-sm;
 }
 
-.navbar-overlay-dark {
-    --bs-navbar-color: #{$navbar-dark-color};
-    --bs-navbar-hover-color: #{$navbar-dark-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-dark-disabled-color};
-    --bs-navbar-active-color: #{$navbar-dark-active-color};
-    --bs-navbar-brand-color: #{$navbar-dark-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-    --bs-navbar-toggler-color: white;
-}
-
-.navbar-overlay-light, .navbar-overlay-dark.nav-active, .navbar-overlay-dark.navbar-expanded {
-    --bs-navbar-color: #{$navbar-light-color};
-    --bs-navbar-hover-color: #{$navbar-light-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-light-disabled-color};
-    --bs-navbar-active-color: #{$navbar-light-active-color};
-    --bs-navbar-brand-color: #{$navbar-light-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-    --bs-navbar-toggler-color: black;
-}
-
 .nav-item .vr {
     color: var(--bs-navbar-color);
 }

exampleSite/hugo_stats.json

@@ -15,6 +15,7 @@
       "form",
       "h2",
       "h3",
+      "h5",
       "head",
       "hr",
       "html",
@@ -307,6 +308,11 @@
       "navbar-toggler",
       "next",
       "no-js",
+      "offcanvas",
+      "offcanvas-body",
+      "offcanvas-header",
+      "offcanvas-start",
+      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -520,6 +526,8 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "offcanvas-label",
+      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",

layouts/_default/baseof.html

@@ -1,31 +1,3 @@
-{{- define "partials/optional-scripts.html" -}}
-{{ $page_modules := slice }}
-{{ if reflect.IsMap .Params.modules }}
-    {{ $page_modules = .Params.modules }}
-{{ else }}
-    {{ $page_modules = $page_modules | append .Params.modules }}
-{{ end }}
-
-{{- $modules := site.Params.modules.optional | intersect $page_modules -}}
-    {{- range $index, $mod := $modules -}}
-        {{- $filename := printf "js/%s.bundle.js" $mod -}}
-        {{- $match := printf "js/modules/%s/**.js" $mod -}}
-        {{- $skipTemplate := false -}}
-        {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
-            {{- if in site.Params.modules.disableTemplate $mod}}
-                {{- $skipTemplate = true -}}
-            {{- end -}}
-        {{- end -}}
-
-        {{ $state := "" }}
-        {{- with (index site.Params.modules $mod) -}}
-            {{- with index . "state" }}{{ $state = . }}{{ end -}}
-        {{- end -}}
-
-        {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
-    {{- end -}}
-{{- end -}}
-
 {{- /* Set version-aware sidebar menu */ -}}
 {{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
 {{- $.Scratch.Set "version" $version -}}
@@ -99,6 +71,6 @@
 
         {{- partial "footer/toast-container.html" . -}}
         {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
-        {{- partial "partials/optional-scripts.html" . -}}
+        {{- partial "footer/optional-scripts.html" . -}}
     </body>
 </html>

layouts/_default/single.html

@@ -1,29 +1,9 @@
-{{- define "partials/single-main.html" -}}
-    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-    {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" (dict "page" .) }}{{ end -}}
-
-    {{ .Render "single/header" }}
-
-    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-        <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" (dict "page" .) }}</div>
-    {{- end -}}
-    {{ .Render "single/body" }}
-
-    {{ .Render "single/footer" }}
-{{ end -}}
-
 {{ define "main" -}}
-    {{- $menu := .Scratch.Get "sidebar" -}}
-    {{- $version := .Scratch.Get "version" -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-
-    {{ $sidebar := "" }}
-    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
-    {{ if and $menu $hasSidebar  }}{{ $sidebar = partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}{{ end }}
-
+    {{ $sidebar := .Render "single/sidebar" }}
     {{ $toc := .Render "single/panel-toc" }}
 
-    {{ with $sidebar -}}
+    {{ with $sidebar }}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
@@ -36,13 +16,13 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if $hasSidebar -}}
+        {{ if $sidebar -}}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
                 <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}
                 </div>
                 <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 p-4">
-                    {{ partial "partials/single-main.html" . }}
+                    {{ .Render "single/main" }}
                 </div>
                 <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
                     {{ $toc | safeHTML }}
@@ -51,7 +31,7 @@
         {{ else }}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
                 <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
-                    {{ partial "partials/single-main.html" . }}
+                    {{ .Render "single/main" }}
                 </div>
                 <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
                     {{ $toc | safeHTML }}

layouts/_default/single/main.html

@@ -0,0 +1,11 @@
+{{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+{{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" (dict "page" .) }}{{ end -}}
+
+{{ .Render "single/header" }}
+
+{{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+    <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" (dict "page" .) }}</div>
+{{- end -}}
+{{ .Render "single/body" }}
+
+{{ .Render "single/footer" }}

layouts/_default/single/sidebar.html

@@ -0,0 +1,7 @@
+{{- $menu := .Scratch.Get "sidebar" -}}
+{{- $version := .Scratch.Get "version" -}}
+{{ $sidebar := "" }}
+{{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
+{{ if and $menu $hasSidebar  }}
+    {{ partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}
+{{ end }}

layouts/partials/assets/button.html

@@ -16,8 +16,8 @@
 {{- $title := trim .title " \r\n" -}}
 {{- $icon := .icon }}
 {{- if not (or $title $icon) -}}
-    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
-    {{ $error = true }}
+    {{- warnf "partial [assets/button.html] - Missing element title or icon" -}}
+    {{ $title = T "linkPlaceholder" }}
 {{- end -}}
 
 {{- $id := .id }}

layouts/partials/assets/navbar.html

@@ -173,10 +173,13 @@
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar p-4
-        {{ if $overlay }}navbar-overlay-{{ $overlayMode }}{{ else }}{{ with $color }}bg-{{ . }}{{ end }}{{ end }}
-        {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}
-        {{ if $contrast }}navbar-contrast{{ end }}"
-        {{ with $theme }}data-bs-theme="{{ . }}"{{ end }}
+        {{- if not $overlay }}{{ with $color }} bg-{{ . }}{{ end }}{{ end -}}
+        {{ if $fixed }} navbar-fixed-top{{ end }} navbar-expand-{{ $size -}}
+        {{ if $contrast }} navbar-contrast{{ end }}"
+        {{ if $overlay }}
+        data-bs-theme="{{ $overlayMode }}"
+        data-bs-overlay="{{ $overlayMode }}"
+        {{ else }}{{ with $theme }}data-bs-theme="{{ . }}"{{ end }}{{ end }}
         {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
         >
         <div class="container-xxl p-0">

layouts/partials/footer/optional-scripts.html

@@ -0,0 +1,25 @@
+{{ $page_modules := slice }}
+{{ if reflect.IsMap .Params.modules }}
+    {{ $page_modules = .Params.modules }}
+{{ else }}
+    {{ $page_modules = $page_modules | append .Params.modules }}
+{{ end }}
+
+{{- $modules := site.Params.modules.optional | intersect $page_modules  -}}
+{{- range $index, $mod := $modules -}}
+    {{- $filename := printf "js/%s.bundle.js" $mod -}}
+    {{- $match := printf "js/modules/%s/**.js" $mod -}}
+    {{- $skipTemplate := false -}}
+    {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
+        {{- if in site.Params.modules.disableTemplate $mod}}
+            {{- $skipTemplate = true -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{ $state := "" }}
+    {{- with (index site.Params.modules $mod) -}}
+        {{- with index . "state" }}{{ $state = . }}{{ end -}}
+    {{- end -}}
+
+    {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
+{{- end -}}

netlify.toml

@@ -4,8 +4,8 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.69.7"
-    HUGO_VERSION = "0.121.1"
+    DART_SASS_VERSION = "1.70.0"
+    HUGO_VERSION = "0.122.0"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
     NODE_VERSION = "18.19.0"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-beta",
+  "version": "0.23.0-beta4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-beta",
+      "version": "0.23.0-beta4",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

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