Compare commits

...

38 Commits

Author SHA1 Message Date
Mark Dumay
6fe0df9466 Merge pull request #203 from gethinode/develop
Navbar
2023-04-09 15:20:59 +02:00
mark
2fc134503c Bump release version 2023-04-09 15:14:11 +02:00
mark
f11e98367b Change navbar size 2023-04-09 15:13:31 +02:00
mark
0ad4875ee2 Improve mode selector behavior 2023-04-09 15:13:11 +02:00
mark
a227a01407 Hide language label unless collapsed 2023-04-09 15:12:37 +02:00
mark
a8c8546c23 Add mode param 2023-04-09 15:11:20 +02:00
mark
0aa2a0427b Add mode param 2023-04-09 15:10:27 +02:00
mark
3047f8e937 Support multiple selectors 2023-04-09 15:10:01 +02:00
Mark Dumay
d144bd328c Merge pull request #202 from gethinode/develop
Color mode
2023-04-08 09:09:13 +02:00
mark
8815642bea Bump release version 2023-04-08 08:57:30 +02:00
mark
cb862374fd FIx icon path 2023-04-08 08:56:45 +02:00
mark
60265ce7e8 Fix #200 2023-04-08 08:54:25 +02:00
Mark Dumay
eec1c0954a Update bug_report.md
Add Hinode version
2023-04-07 18:44:14 +02:00
mark
8aa0556298 Move stylesheet to folder 2023-04-06 17:49:53 +02:00
mark
c92c1686cd Remove redundant suffix from main js bundle 2023-04-06 17:29:43 +02:00
Mark Dumay
f2509b07af Merge pull request #199 from gethinode/develop
Navigation
2023-04-06 09:49:34 +02:00
mark
4b606deafd Clean up style 2023-04-06 09:40:11 +02:00
mark
d9f805d4a4 Bump release version 2023-04-06 09:33:10 +02:00
mark
a62bea018b Refine TOC offset 2023-04-06 09:31:09 +02:00
mark
2596f2d7ee Refine heading offset 2023-04-06 09:31:02 +02:00
mark
2bcd955402 Fix #154 2023-04-06 09:09:17 +02:00
Mark Dumay
511ad2cb4c Merge pull request #198 from gethinode/develop
Navbar
2023-04-06 06:21:07 +02:00
mark
b87a91f6df Fix #128 2023-04-06 06:17:30 +02:00
mark
11b8bb4c69 Bump release version 2023-04-06 06:05:00 +02:00
mark
84fab6b8a8 Improve alignment of navbar elements 2023-04-06 06:04:29 +02:00
Mark Dumay
656770352a Merge pull request #197 from gethinode/develop
Configurable sidebar version
2023-04-05 13:17:07 +02:00
mark
1dadce3f92 Bump release version 2023-04-05 13:11:57 +02:00
mark
8d428d3b51 Make sidebar version configurable 2023-04-05 13:11:28 +02:00
Mark Dumay
8de8204f0e Merge pull request #196 from gethinode/develop
Clean up
2023-04-05 09:20:30 +02:00
mark
e5d2ece0b7 Bump release version 2023-04-05 09:16:00 +02:00
mark
01159ceea2 Remove debug statement 2023-04-05 09:10:07 +02:00
Mark Dumay
d6357b70ae Merge pull request #195 from gethinode/develop
Multi-level sidebar nav
2023-04-05 09:05:08 +02:00
mark
eb000e9f81 Fix linting issues 2023-04-05 08:51:38 +02:00
mark
efe9c2e06e Bump release version 2023-04-05 08:39:41 +02:00
mark
4c41cbcafb Enable nested sidebar navigation 2023-04-05 08:39:24 +02:00
mark
1910af163d Move API to enable utilities in theme styles 2023-04-05 08:31:21 +02:00
Mark Dumay
cba1566ba1 Merge pull request #194 from gethinode/develop
Bump dependencies
2023-04-03 15:27:27 +02:00
mark
69abe3ec0c Bump dependencies 2023-04-03 15:19:08 +02:00
22 changed files with 326 additions and 236 deletions

View File

@@ -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)]

View File

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

View File

@@ -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(

View File

@@ -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";

View File

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

View File

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

View File

@@ -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;

View File

@@ -10,7 +10,15 @@
}
.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 {
@@ -61,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 {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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" aria-label="{{ (strings.FirstUpper $section) }} navigation">
{{- $url := split $page.Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
{{- $sectionBreak := false }}
{{- $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>

View File

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

View File

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

View File

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

86
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "@gethinode/hinode",
"version": "0.10.0",
"version": "0.11.6",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@gethinode/hinode",
"version": "0.10.0",
"version": "0.11.6",
"license": "MIT",
"devDependencies": {
"@fortawesome/fontawesome-free": "^6.4.0",
@@ -21,7 +21,7 @@
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-promise": "^6.1.1",
"flexsearch": "^0.7.31",
"hugo-bin": "^0.101.5",
"hugo-bin": "^0.102.0",
"markdownlint-cli2": "^0.6.0",
"postcss-cli": "^10.1.0",
"purgecss-whitelister": "^2.4.0",
@@ -3389,9 +3389,9 @@
"dev": true
},
"node_modules/hugo-bin": {
"version": "0.101.5",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz",
"integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==",
"version": "0.102.0",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
"integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
"dev": true,
"funding": [
{
@@ -3402,49 +3402,13 @@
"hasInstallScript": true,
"dependencies": {
"@xhmikosr/bin-wrapper": "^5.0.1",
"pkg-conf": "^4.0.0",
"rimraf": "^3.0.2"
"pkg-conf": "^4.0.0"
},
"bin": {
"hugo": "cli.js"
},
"engines": {
"node": "^14.13.1 || >=16.0.0"
}
},
"node_modules/hugo-bin/node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
"dev": true,
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.1.1",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
},
"engines": {
"node": "*"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/hugo-bin/node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dev": true,
"dependencies": {
"glob": "^7.1.3"
},
"bin": {
"rimraf": "bin.js"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
"node": "^14.14.0 || >=16.0.0"
}
},
"node_modules/human-signals": {
@@ -9578,39 +9542,13 @@
"dev": true
},
"hugo-bin": {
"version": "0.101.5",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz",
"integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==",
"version": "0.102.0",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
"integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
"dev": true,
"requires": {
"@xhmikosr/bin-wrapper": "^5.0.1",
"pkg-conf": "^4.0.0",
"rimraf": "^3.0.2"
},
"dependencies": {
"glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.1.1",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dev": true,
"requires": {
"glob": "^7.1.3"
}
}
"pkg-conf": "^4.0.0"
}
},
"human-signals": {

View File

@@ -1,6 +1,6 @@
{
"name": "@gethinode/hinode",
"version": "0.10.0",
"version": "0.11.6",
"description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
"keywords": [
"hugo",
@@ -63,7 +63,7 @@
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-promise": "^6.1.1",
"flexsearch": "^0.7.31",
"hugo-bin": "^0.101.5",
"hugo-bin": "^0.102.0",
"markdownlint-cli2": "^0.6.0",
"postcss-cli": "^10.1.0",
"purgecss-whitelister": "^2.4.0",