Merge pull request #202 from gethinode/develop

Color mode

.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]
+ - Hinode version: [e.g. v0.11.3]
- - Node version: [e.g. node v18.10.0]
+ - 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)]
 

.gitignore

@@ -3,4 +3,5 @@ resources/
 node_modules/
 
 .DS_store
-.hugo_build.lock
+.hugo_build.lock
+hugo_stats.json

.stylelintignore

@@ -3,6 +3,6 @@ assets/scss/components/_syntax-dark.scss
 assets/scss/components/_syntax-light.scss
 assets/scss/hotfix
 assets/scss/vendor
-assets/scss/fonts.scss
+assets/scss/theme/fonts.scss
 assets/scss/app.scss
 node_modules

.stylelintrc.json

@@ -2,10 +2,7 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "no-empty-source": null,
-    "indentation": 4,
-    "string-quotes": "double",
     "scss/comment-no-empty": null,
-    "max-line-length": null,
     "scss/at-extend-no-missing-placeholder": null,
     "scss/dollar-variable-colon-space-after": null,
     "scss/dollar-variable-empty-line-before": null,

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'
 
@@ -63,5 +61,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

@@ -1,18 +1,5 @@
 // Define template variables
-// TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
+@import "hugo:vars";
-//       requires installation of dart-sass, no cross-platform installation available yet
-$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
-$primary:                       {{ site.Params.style.primary | default "#007bff" }};
-$secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
-$success:                       {{ site.Params.style.success | default "#198754" }};
-$info:                          {{ site.Params.style.info | default "#0dcaf0" }};
-$warning:                       {{ site.Params.style.warning | default "#ffc107" }};
-$danger:                        {{ site.Params.style.danger | default "#dc3545" }};
-$light:                         {{ site.Params.style.light | default "#f8f9fa" }};
-$dark:                          {{ site.Params.style.dark | default "#212529" }};
-$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "4em" }}{{ else }}0em{{ end }};
-$enable-dark-mode:              {{ site.Params.main.enableDarkMode | default true }} !default;
-$enable-important-utilities:    true !default;
 
 // Include default variable overrides
 @import "common/variables.scss";
@@ -24,14 +11,14 @@ $enable-important-utilities:    true !default;
 @import "bootstrap/scss/functions";
 
 // Import Bootstrap configuration
-@import "hotfix/variables";
+@import "bootstrap/scss/variables";
-@import "hotfix/variables-dark.scss";
+@import "bootstrap/scss/variables-dark.scss";
-@import "hotfix/maps";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
 // Import Bootstrap layout & components
-@import "hotfix/root";
+@import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -66,9 +53,6 @@ $enable-important-utilities:    true !default;
 // 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";
@@ -100,9 +84,17 @@ $enable-important-utilities:    true !default;
 @import "helpers/colored-links.scss";
 @import "helpers/display.scss";
 
-{{- if not (hasPrefix (lower site.Params.style.themeFontPath) "http") -}}
+// TODO: include fonts with following statement in Dart Sass
-@import "fonts.scss";
+// @if $import-fonts {
-{{- end -}}
+//     @include meta.load-css(theme/fonts);
+// }
+
+{{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
+    @import "theme/fonts.scss";
+{{ end }}
 
 // Import theme placeholder
-@import "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-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-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-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:                          url("/icons/form-switch-bg-image.svg") !default;
-$form-switch-bg-image-dark:                     url("icons/form-switch-bg-image-dark.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-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-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:                         url("/icons/form-select-indicator.svg") !default;
-$form-select-indicator-dark:                    url("icons/form-select-indicator-dark.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-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
-$form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.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-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;
+$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:                         url("/icons/accordion-button-icon.svg") !default;
-$accordion-button-icon-dark:                    url("icons/accordion-button-icon-dark.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:                  url("/icons/accordion-button-active-icon.svg") !default;
-$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.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-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;
+$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-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
-$btn-toggle:                                    url("icons/btn-toggle.svg") !default;
+$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
-$btn-toggle-dark:                               url("icons/btn-toggle-dark.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/common/_variables.scss

@@ -1,5 +1,6 @@
 // Bootstrap variables overrides for theme
 $enable-negative-margins:       true;
+$enable-important-utilities:    true !default;
 
 // Font awesome variables overrides for theme
 $fa-font-path:                  "../fonts";
@@ -8,7 +9,7 @@ $fa-font-path:                  "../fonts";
 $navbar-toggler-focus-width:    0 !default;
 
 // scss-docs-start font
-$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;

assets/scss/components/_card.scss

@@ -18,10 +18,7 @@
 .card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;
-    top: 0;
+    inset: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background: rgba(255, 255, 255, 0.3);
     opacity: 0;
     transition: opacity 0.25s;

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

assets/scss/hotfix/_maps.scss

@@ -1,176 +0,0 @@
-// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
-//
-// Re-assigned maps
-//
-// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
-
-// scss-docs-start theme-colors-rgb
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// scss-docs-end theme-colors-rgb
-
-// scss-docs-start theme-text-map
-$theme-colors-text: (
-  "primary": $primary-text-emphasis,
-  "secondary": $secondary-text-emphasis,
-  "success": $success-text-emphasis,
-  "info": $info-text-emphasis,
-  "warning": $warning-text-emphasis,
-  "danger": $danger-text-emphasis,
-  "light": $light-text-emphasis,
-  "dark": $dark-text-emphasis,
-) !default;
-// scss-docs-end theme-text-map
-
-// scss-docs-start theme-bg-subtle-map
-$theme-colors-bg-subtle: (
-  "primary": $primary-bg-subtle,
-  "secondary": $secondary-bg-subtle,
-  "success": $success-bg-subtle,
-  "info": $info-bg-subtle,
-  "warning": $warning-bg-subtle,
-  "danger": $danger-bg-subtle,
-  "light": $light-bg-subtle,
-  "dark": $dark-bg-subtle,
-) !default;
-// scss-docs-end theme-bg-subtle-map
-
-// scss-docs-start theme-border-subtle-map
-$theme-colors-border-subtle: (
-  "primary": $primary-border-subtle,
-  "secondary": $secondary-border-subtle,
-  "success": $success-border-subtle,
-  "info": $info-border-subtle,
-  "warning": $warning-border-subtle,
-  "danger": $danger-border-subtle,
-  "light": $light-border-subtle,
-  "dark": $dark-border-subtle,
-) !default;
-// scss-docs-end theme-border-subtle-map
-
-$theme-colors-text-dark: null !default;
-$theme-colors-bg-subtle-dark: null !default;
-$theme-colors-border-subtle-dark: null !default;
-
-@if $enable-dark-mode {
-  // scss-docs-start theme-text-dark-map
-  $theme-colors-text-dark: (
-    "primary": $primary-text-emphasis-dark,
-    "secondary": $secondary-text-emphasis-dark,
-    "success": $success-text-emphasis-dark,
-    "info": $info-text-emphasis-dark,
-    "warning": $warning-text-emphasis-dark,
-    "danger": $danger-text-emphasis-dark,
-    "light": $light-text-emphasis-dark,
-    "dark": $dark-text-emphasis-dark,
-  ) !default;
-  // scss-docs-end theme-text-dark-map
-
-  // scss-docs-start theme-bg-subtle-dark-map
-  $theme-colors-bg-subtle-dark: (
-    "primary": $primary-bg-subtle-dark,
-    "secondary": $secondary-bg-subtle-dark,
-    "success": $success-bg-subtle-dark,
-    "info": $info-bg-subtle-dark,
-    "warning": $warning-bg-subtle-dark,
-    "danger": $danger-bg-subtle-dark,
-    "light": $light-bg-subtle-dark,
-    "dark": $dark-bg-subtle-dark,
-  ) !default;
-  // scss-docs-end theme-bg-subtle-dark-map
-
-  // scss-docs-start theme-border-subtle-dark-map
-  $theme-colors-border-subtle-dark: (
-    "primary": $primary-border-subtle-dark,
-    "secondary": $secondary-border-subtle-dark,
-    "success": $success-border-subtle-dark,
-    "info": $info-border-subtle-dark,
-    "warning": $warning-border-subtle-dark,
-    "danger": $danger-border-subtle-dark,
-    "light": $light-border-subtle-dark,
-    "dark": $dark-border-subtle-dark,
-  ) !default;
-  // scss-docs-end theme-border-subtle-dark-map
-}
-
-// Utilities maps
-//
-// Extends the default `$theme-colors` maps to help create our utilities.
-
-// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
-// scss-docs-start utilities-colors
-$utilities-colors: $theme-colors-rgb !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
-  )
-) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-
-$utilities-text-emphasis-colors: (
-  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
-  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
-  "success-emphasis": var(--#{$prefix}success-text-emphasis),
-  "info-emphasis": var(--#{$prefix}info-text-emphasis),
-  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
-  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
-  "light-emphasis": var(--#{$prefix}light-text-emphasis),
-  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-) !default;
-// scss-docs-end utilities-text-colors
-
-// scss-docs-start utilities-bg-colors
-$utilities-bg: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg)
-  )
-) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-
-$utilities-bg-subtle: (
-  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
-  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
-  "success-subtle": var(--#{$prefix}success-bg-subtle),
-  "info-subtle": var(--#{$prefix}info-bg-subtle),
-  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
-  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
-  "light-subtle": var(--#{$prefix}light-bg-subtle),
-  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
-) !default;
-// scss-docs-end utilities-bg-colors
-
-// scss-docs-start utilities-border-colors
-$utilities-border: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white)
-  )
-) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
-
-$utilities-border-subtle: (
-  "primary-subtle": var(--#{$prefix}primary-border-subtle),
-  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
-  "success-subtle": var(--#{$prefix}success-border-subtle),
-  "info-subtle": var(--#{$prefix}info-border-subtle),
-  "warning-subtle": var(--#{$prefix}warning-border-subtle),
-  "danger-subtle": var(--#{$prefix}danger-border-subtle),
-  "light-subtle": var(--#{$prefix}light-border-subtle),
-  "dark-subtle": var(--#{$prefix}dark-border-subtle)
-) !default;
-// scss-docs-end utilities-border-colors
-
-$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
-
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-
-$gutters: $spacers !default;

assets/scss/hotfix/_root.scss

@@ -1,180 +0,0 @@
-// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
-
-:root,
-[data-bs-theme="light"] {
-  // Note: Custom variable values only support SassScript inside `#{}`.
-
-  // Colors
-  //
-  // Generate palettes for full colors, grays, and theme colors.
-
-  @each $color, $value in $colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $grays {
-    --#{$prefix}gray-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-rgb {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-text {
-    --#{$prefix}#{$color}-text-emphasis: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-bg-subtle {
-    --#{$prefix}#{$color}-bg-subtle: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-border-subtle {
-    --#{$prefix}#{$color}-border-subtle: #{$value};
-  }
-
-  --#{$prefix}white-rgb: #{to-rgb($white)};
-  --#{$prefix}black-rgb: #{to-rgb($black)};
-
-  // Fonts
-
-  // Note: Use `inspect` for lists so that quoted items keep the quotes.
-  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
-  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
-  --#{$prefix}gradient: #{$gradient};
-
-  // Root and body
-  // scss-docs-start root-body-variables
-  @if $font-size-root != null {
-    --#{$prefix}root-font-size: #{$font-size-root};
-  }
-  --#{$prefix}body-font-family: #{inspect($font-family-base)};
-  @include rfs($font-size-base, --#{$prefix}body-font-size);
-  --#{$prefix}body-font-weight: #{$font-weight-base};
-  --#{$prefix}body-line-height: #{$line-height-base};
-  @if $body-text-align != null {
-    --#{$prefix}body-text-align: #{$body-text-align};
-  }
-
-  --#{$prefix}body-color: #{$body-color};
-  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$prefix}body-bg: #{$body-bg};
-  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
-
-  --#{$prefix}emphasis-color: #{$body-emphasis-color};
-  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
-
-  --#{$prefix}secondary-color: #{$body-secondary-color};
-  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
-  --#{$prefix}secondary-bg: #{$body-secondary-bg};
-  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
-
-  --#{$prefix}tertiary-color: #{$body-tertiary-color};
-  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
-  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
-  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
-  // scss-docs-end root-body-variables
-
-  @if $headings-color != null {
-    --#{$prefix}heading-color: #{$headings-color};
-  }
-
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
-  --#{$prefix}link-decoration: #{$link-decoration};
-
-  --#{$prefix}link-hover-color: #{$link-hover-color};
-  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
-
-  @if $link-hover-decoration != null {
-    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
-  }
-
-  --#{$prefix}code-color: #{$code-color};
-  --#{$prefix}highlight-bg: #{$mark-bg};
-
-  // scss-docs-start root-border-var
-  --#{$prefix}border-width: #{$border-width};
-  --#{$prefix}border-style: #{$border-style};
-  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-translucent: #{$border-color-translucent};
-
-  --#{$prefix}border-radius: #{$border-radius};
-  --#{$prefix}border-radius-sm: #{$border-radius-sm};
-  --#{$prefix}border-radius-lg: #{$border-radius-lg};
-  --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
-  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
-  --#{$prefix}border-radius-pill: #{$border-radius-pill};
-  // scss-docs-end root-border-var
-
-  --#{$prefix}box-shadow: #{$box-shadow};
-  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
-  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
-  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
-
-  // Focus styles
-  // scss-docs-start root-focus-variables
-  --#{$prefix}focus-ring-width: #{$focus-ring-width};
-  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  --#{$prefix}focus-ring-color: #{$focus-ring-color};
-  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
-  --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
-  // scss-docs-end root-focus-variables
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark, true) {
-    color-scheme: dark;
-
-    // scss-docs-start root-dark-mode-vars
-    --#{$prefix}body-color: #{$body-color-dark};
-    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    --#{$prefix}body-bg: #{$body-bg-dark};
-    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
-
-    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
-    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-
-    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-
-    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
-
-    @each $color, $value in $theme-colors-text-dark {
-      --#{$prefix}#{$color}-text-emphasis: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-bg-subtle-dark {
-      --#{$prefix}#{$color}-bg-subtle: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-border-subtle-dark {
-      --#{$prefix}#{$color}-border-subtle: #{$value};
-    }
-
-    @if $headings-color-dark != null {
-      --#{$prefix}heading-color: #{$headings-color-dark};
-    }
-
-    --#{$prefix}link-color: #{$link-color-dark};
-    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
-
-    --#{$prefix}code-color: #{$code-color-dark};
-
-    --#{$prefix}border-color: #{$border-color-dark};
-    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
-    // scss-docs-end root-dark-mode-vars
-  }
-}

assets/scss/hotfix/_variables-dark.scss

@@ -1,77 +0,0 @@
-// Copied from https://github.com/twbs/bootstrap/pull/37953
-
-// Dark color mode variables
-//
-// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
-
-//
-// Global colors
-//
-
-// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark:        tint-color($success, 40%) !default;
-$info-text-emphasis-dark:           tint-color($info, 40%) !default;
-$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
-$light-text-emphasis-dark:          $gray-100 !default;
-$dark-text-emphasis-dark:           $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
-
-// scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark:            shade-color($success, 80%) !default;
-$info-bg-subtle-dark:               shade-color($info, 80%) !default;
-$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
-$light-bg-subtle-dark:              $gray-800 !default;
-$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
-
-// scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
-$success-border-subtle-dark:        shade-color($success, 40%) !default;
-$info-border-subtle-dark:           shade-color($info, 40%) !default;
-$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
-$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
-$light-border-subtle-dark:          $gray-700 !default;
-$dark-border-subtle-dark:           $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
-
-$body-color-dark:                   $gray-500 !default;
-$body-bg-dark:                      $gray-900 !default;
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
-$body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700 !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
-$headings-color-dark:               null !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
-$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
-$code-color-dark:                   tint-color($code-color, 40%) !default;
-
-
-//
-// Forms
-//
-
-$form-select-indicator-color-dark:  $body-color-dark !default;
-$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-$form-switch-color-dark:            rgba($white, .25) !default;
-$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
-
-
-//
-// Accordion
-//
-
-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// scss-docs-end sass-dark-mode-vars

config/_default/config.toml

@@ -16,9 +16,9 @@ enableInlineShortcodes = true
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
 ignoreErrors = ["error-remote-getjson"]
 
-# toml-docs-start build
+# toml-docs-start timeout
 timeout = "60s"
-# toml-docs-end build
+# toml-docs-end timeout
 
 # toml-docs-start language
 languageCode = "en-us"
@@ -26,6 +26,11 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 # toml-docs-end language
 
+# toml-docs-start build
+[build]
+  writeStats = true
+# toml-docs-end build
+  
 [taxonomies]
   tag = 'tags'
 

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
@@ -67,7 +68,7 @@
 
 # toml-docs-start theme-colors
 [style]
-    primary = "#D43900"
+    primary = "#d43900"
     secondary = "#6c757d"
     success = "#198754"
     info = "#0dcaf0"
@@ -82,6 +83,9 @@
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
 # toml-docs-end font
+# toml-docs-start build
+    purge = false
+# toml-docs-end build
 
 [schema]
     type = "Organization"

config/postcss.config.js

@@ -1,18 +1,40 @@
-const autoprefixer = require('autoprefixer')
+const autoprefixer = require('autoprefixer')({})
-const cssnano = require('cssnano')
+const cssnano = require('cssnano')({
-// const purgecss = require('@fullhuman/postcss-purgecss')
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
+  safelist: [
+    ...whitelister([
+      './assets/scss/components/_clipboard.scss',
+      './assets/scss/components/_command.scss',
+      './assets/scss/components/_navbar.scss',
+      './assets/scss/components/_search.scss',
+      './assets/scss/components/_syntax.scss',
+      './assets/scss/components/_syntax-dark.scss',
+      './assets/scss/components/_syntax-light.scss',
+      './assets/scss/theme/fonts.scss',
+      './assets/scss/theme/theme.scss',
+      './node_modules/bootstrap/scss/_carousel.scss',
+      './node_modules/bootstrap/scss/_dropdown.scss',
+      './node_modules/bootstrap/scss/_reboot.scss',
+      './node_modules/bootstrap/scss/_tooltip.scss',
+      './node_modules/bootstrap/scss/_transitions.scss',
+      './node_modules/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
 
 module.exports = {
   plugins: [
-    autoprefixer(),
+    autoprefixer,
-    cssnano({
+    cssnano,
-      preset: 'advanced'
+    purgecss
-    })
-    // purgecss({
-    //   content: [
-    //     './layouts/**/*.html',
-    //     './content/**/*.md'
-    //   ]
-    // })
   ]
 }

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="#!" */>}}Left{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Middle{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Right{{</* /button */>}}
 {{</* /button-group */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -166,7 +166,7 @@ echo "goodbye"
 
 ## Docs
 
-Use the `docs` shortcode to display the content of a `toml` or `scss` file:
+Use the `docs` shortcode to display the content of a `js`, `scss` or `toml` file:
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
@@ -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="#!" */>}}Links{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Midden{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Midden{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Rechts{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Rechts{{</* /button */>}}
 {{</* /button-group */>}}
 {{< /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">
+                <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" . }}
                     {{ 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

@@ -79,19 +79,21 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
-	<div class="container-fluid">
+	<div class="container-fluid p-0">
         <!-- Insert sidebar toggler when applicable -->
-        {{- if $page.Scratch.Get "sidebar" -}}
+        <div class="d-flex">
-            <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" }}">
+            {{- if $page.Scratch.Get "sidebar" -}}
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                <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" }}">
-            </button>
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-        {{- else -}}
+                </button>
-            <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+            {{- else -}}
-            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
+                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
-            </button>
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-        {{- end -}}
+                </button>
+            {{- end -}}
+        </div>
 
         <!-- Insert the brand logo or name -->
         <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +105,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 }}"
+        <div class="d-flex fw-30">
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			<span class="toggler-icon top-bar emphasis"></span>
+                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-			<span class="toggler-icon middle-bar emphasis"></span>
+                <span class="toggler-icon top-bar emphasis"></span>
-			<span class="toggler-icon bottom-bar emphasis"></span>
+                <span class="toggler-icon middle-bar emphasis"></span>
-		</button>
+                <span class="toggler-icon bottom-bar emphasis"></span>
+            </button>
+        </div>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
             <!-- Insert search input -->
@@ -120,17 +124,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,7 +164,7 @@
                 {{- 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" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
@@ -179,7 +184,7 @@
                 <!-- 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">
+                        <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>

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">
+    <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $url := split $page.Permalink "/" -}}
+        {{- $sectionBreak := false -}}
-        {{- $page_slug := index $url (sub (len $url) 2) -}}
+        {{- $level := 0 -}}
-        {{- $sectionBreak := false }}
+        {{- $baseURL := relLangURL (path.Join $section $version) }}
 
         <ul class="list-unstyled ps-0">
-        {{- range $index, $group := $data -}}
+        {{- range $index, $item := $data -}}
-            {{- $link := $group.title -}}
+            {{- if $item.pages }}
-            {{- $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 }}
                 {{- $sectionBreak = true }}
-                <li class="mb-1">
+                {{ partial "partials/sidebar/group.html" (dict 
-                    <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 }}">
+                    "page" $page
-                        <div class="text-start flex-fill">{{ $group.title }}</div>
+                    "index" $index
-                    </button>
+                    "level" (add $level 1)
-                    <div class="collapse {{ if $is_active_group }}show{{ end }}" id="sidebar-collapse-{{ $index }}">
+                    "baseURL" $baseURL
-                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+                    "group" $item
-                            {{- 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>
             {{- else }}
-                <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
+                {{ partial "partials/sidebar/item.html" (dict 
-                {{- $sectionBreak = false }}
+                    "page" $page
-                <li>
+                    "sectionBreak" $sectionBreak
-                    <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
+                    "level" $level
-                        <li>
+                    "baseURL" $baseURL
-                            {{- $doc_slug := $group.title | urlize -}}
+                    "title" $item.title
-                            {{- $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>
             {{- end }}
         {{- end }}
         </ul>

layouts/partials/footer/scripts.html

@@ -1,15 +1,20 @@
-{{ $filename := "js/main.bundle.js" -}}
+{{ $filename := .filename | default "js/main.bundle.js" -}}
-{{ if hugo.IsProduction }}{{ $filename = "js/main.bundle.min.js" }}{{ end -}}
+{{ $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 -}}
+{{ if gt (len $files) 0 }}
-    <script src="{{ $js.RelPermalink }}"></script>
+    {{ $bundle := $files | resources.Concat $filename -}}
-{{ else -}}
+    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
-    {{ $js = $js | minify | fingerprint -}}
+
-    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{- 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/head.html

@@ -3,10 +3,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ hugo.Generator}}
-    {{ partial "head/stylesheet.html" -}}
+    {{ partial "head/stylesheet.html" . -}}
     {{ partial "head/seo.html" . }}
     {{ partialCached "head/favicon.html" . -}}
     {{ if gt (len .Site.Languages) 1}}
-    <meta name="lang" content="{{ .Site.Language }}" />
+    <meta name="lang" content="{{ .Site.Language }}">
     {{ end }}
 {{ end }}

layouts/partials/head/stylesheet.html

@@ -1,19 +1,42 @@
-{{- $options := (dict "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules")) -}}
+{{- $navbarOffset := "0em" -}}
-{{- if hugo.IsProduction }}{{ $options = merge $options (dict "outputStyle" "compressed") }}{{ end -}}
+{{- if .Site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
-{{- $post_options := dict "config" "config" -}}
+{{- $vars := dict 
-{{- $css := resources.Get "scss/app.scss" | resources.ExecuteAsTemplate "style.app.scss" . | toCSS $options | resources.PostCSS $post_options -}}
+    "theme-font"              (default "Inter" .Site.Params.style.themeFont)
+    "primary"                 (default "#007bff" .Site.Params.style.primary)
+    "secondary"               (default "#6c757d" .Site.Params.style.secondary)
+    "success"                 (default "#198754" .Site.Params.style.success)
+    "info"                    (default "#0dcaf0" .Site.Params.style.info)
+    "warning"                 (default "#ffc107" .Site.Params.style.warning)
+    "danger"                  (default "#dc3545" .Site.Params.style.danger)
+    "light"                   (default "#f8f9fa" .Site.Params.style.light)
+    "dark"                    (default "#212529" .Site.Params.style.dark)
+    "navbar-offset"           $navbarOffset
+    "enable-dark-mode"        (printf "%t" ((default true .Site.Params.main.enableDarkMode)))
+    "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
+-}}
+
+{{- $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 -}}
+    {{- $options = merge $options (dict "outputStyle" "expanded") -}}
+{{- end -}}
+{{- $css := resources.Get "scss/app.scss" | resources.ExecuteAsTemplate "style.app.scss" . | toCSS $options -}}
 {{- partial "head/icons.html" (dict "css" $css) -}}
+{{- if .Site.Params.style.purge -}}
+    {{- $post_options := dict "config" "config" -}}
+    {{- $css = $css | resources.PostCSS $post_options -}}
+{{- end -}}
 
-<!-- TODO: add proper postCSS purge -->
+{{- if not hugo.IsProduction -}}
-
-{{- if eq (hugo.Environment) "development" -}}
     <link rel="stylesheet" href="{{ $css.Permalink | relURL }}">
 {{- else -}}
-    {{- $css = $css | fingerprint -}}
+    {{- $css = $css | fingerprint | resources.PostProcess -}}
     <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
 {{- end -}}
-{{- if hasPrefix (lower site.Params.style.themeFontPath) "http" -}}
+{{- if hasPrefix (lower .Site.Params.style.themeFontPath) "http" -}}
     <link rel="preconnect" href="https://fonts.googleapis.com"> 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="{{ site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
+    <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
 {{- end -}}

layouts/shortcodes/docs.html

@@ -9,23 +9,27 @@
 
 {{- $name := .Get "name" -}}
 {{- $basePath := .Site.Params.docs.basePath -}}
-{{- $file := path.Join $basePath (path.Clean (.Get "file")) -}}
+{{- $file := .Get "file" }}
-{{- $extension := path.Ext $file -}}
+{{- if hasPrefix $file "./" -}}
+    {{- $file = path.Clean $file -}}
+{{- else -}}
+    {{- $file = path.Join $basePath (path.Clean $file) -}}
+{{- end -}}
+{{- $extension := strings.TrimLeft "." (path.Ext $file)  }}
 {{- $capture_start := "" -}}
 {{- $capture_end := "" -}}
 
 {{- $id := printf "docs-collapse-%d" .Ordinal -}}
 
-{{- $supportedExtensions := slice ".scss" ".toml" -}}
+{{- $supportedExtensions := slice "js" "scss" "toml" -}}
 {{- if in $supportedExtensions $extension -}}
-    {{- if eq $extension ".toml" }}
+    {{- if eq $extension "toml" }}
         {{- $capture_start = printf "# toml-docs-start %s" $name -}}
         {{- $capture_end = printf "# toml-docs-end %s" $name -}}
     {{- else -}}
-        {{- $capture_start = printf "// scss-docs-start %s" $name -}}
+        {{- $capture_start = printf "// %s-docs-start %s" $extension $name -}}
-        {{- $capture_end = printf "// scss-docs-end %s" $name -}}
+        {{- $capture_end = printf "// %s-docs-end %s" $extension $name -}}
     {{- end -}}
-    {{- $extension = strings.TrimLeft "." $extension  }}
 {{- else -}}
     {{- errorf "File format not supported (line %s): %s" .Position $file -}}
 {{- end -}}

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 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.9.6",
+  "version": "0.11.5",
   "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": "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: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": "hugo --gc --minify",
-    "build:debug": "exec-bin node_modules/.bin/hugo/hugo -e debug --debug",
+    "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-light": "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-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": {
@@ -52,29 +51,28 @@
   },
   "homepage": "https://gethinode.com",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0-alpha1",
+    "bootstrap": "^5.3.0-alpha3",
-    "cssnano": "^5.1.15",
+    "cssnano": "^6.0.0",
-    "cssnano-preset-advanced": "^5.3.10",
+    "cssnano-preset-advanced": "^6.0.0",
-    "eslint": "^8.34.0",
+    "eslint": "^8.37.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.6.1",
+    "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",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.4.1",
     "shx": "^0.3.4",
-    "stylelint": "^15.2.0",
+    "stylelint": "^15.4.0",
     "stylelint-config-standard-scss": "^7.0.1"
   },
-  "otherDependencies": {
+  "hugo-bin": {
-    "hugo": "0.110.0"
+    "buildTags": "extended"
   }
 }

theme.toml

@@ -6,7 +6,7 @@ homepage = "https://gethinode.com"
 demosite = "https://demo.gethinode.com"
 tags = ["blog", "documentation", "minimal", "modern", "customizable", "search", "bootstrap"]
 features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts"]
-min_version = "0.81.0"
+min_version = "0.109.0"
 
 [author]
   name = "Mark Dumay"