Compare commits

...

17 Commits

Author SHA1 Message Date
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
9 changed files with 167 additions and 149 deletions

View File

@@ -53,9 +53,6 @@
// Import Bootstrap helpers // Import Bootstrap helpers
@import "bootstrap/scss/helpers"; @import "bootstrap/scss/helpers";
// Import Bootstrap utilities
@import "bootstrap/scss/utilities/api";
// Import Font Awesome // Import Font Awesome
// scss-docs-start awesome // scss-docs-start awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome"; @import "@fortawesome/fontawesome-free/scss/fontawesome";
@@ -98,3 +95,6 @@
// Import theme placeholder // Import theme placeholder
@import "theme/theme.scss"; @import "theme/theme.scss";
// Import Bootstrap utilities API
@import "bootstrap/scss/utilities/api";

View File

@@ -24,6 +24,10 @@
border: 0 if($enable-important-utilities, !important, null); border: 0 if($enable-important-utilities, !important, null);
} }
.fw-30 {
width: 30px !important;
}
/* Lines of the Toggler */ /* Lines of the Toggler */
.toggler-icon { .toggler-icon {
width: 30px; width: 30px;

View File

@@ -10,8 +10,16 @@
} }
.sidebar-item { .sidebar-item {
color: rgba(0, 0, 0, 0.65);
margin-left: 0 !important;
padding-left: 0.85rem !important;
&.active,
&:hover,
&:focus {
color: black; color: black;
} }
}
.btn-toggle { .btn-toggle {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@@ -61,6 +69,14 @@
@include color-mode(dark) { @include color-mode(dark) {
.sidebar-item { .sidebar-item {
color: var(--bs-tertiary-color); color: var(--bs-tertiary-color);
margin-left: 0 !important;
padding-left: 0.85rem !important;
&.active,
&:hover,
&:focus {
color: var(--bs-secondary-color);
}
} }
.btn-toggle { .btn-toggle {

View File

@@ -1,4 +1,6 @@
{{- $section := .Section }}
{{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}} {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
<!doctype html> <!doctype html>
<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark"> <html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">

View File

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

View File

@@ -79,19 +79,21 @@
{{- $pre := .Pre -}} {{- $pre := .Pre -}}
{{- $post := .Post -}} {{- $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 --> <!-- Insert sidebar toggler when applicable -->
<div class="d-flex">
{{- if $page.Scratch.Get "sidebar" -}} {{- 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" }}"> <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") -}} {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
</button> </button>
{{- else -}} {{- else -}}
<!-- Insert invisible sidebar toggler to center logo correctly on smaller screens --> <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
<button class="navbar-toggler collapsed ms-n3 invisible" type="button"> <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}} {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
</button> </button>
{{- end -}} {{- end -}}
</div>
<!-- Insert the brand logo or name --> <!-- Insert the brand logo or name -->
<a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}"> <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +105,14 @@
</a> </a>
<!-- Insert main navigation toggler --> <!-- 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">
<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" }}"> aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
<span class="toggler-icon top-bar emphasis"></span> <span class="toggler-icon top-bar emphasis"></span>
<span class="toggler-icon middle-bar emphasis"></span> <span class="toggler-icon middle-bar emphasis"></span>
<span class="toggler-icon bottom-bar emphasis"></span> <span class="toggler-icon bottom-bar emphasis"></span>
</button> </button>
</div>
<div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}"> <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
<!-- Insert search input --> <!-- Insert search input -->
@@ -130,7 +134,8 @@
</a> </a>
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end">
{{- range .Children -}} {{- 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 -}} {{- end -}}
</ul> </ul>
</li> </li>

View File

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

86
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "@gethinode/hinode", "name": "@gethinode/hinode",
"version": "0.10.0", "version": "0.11.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@gethinode/hinode", "name": "@gethinode/hinode",
"version": "0.10.0", "version": "0.11.3",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free": "^6.4.0", "@fortawesome/fontawesome-free": "^6.4.0",
@@ -21,7 +21,7 @@
"eslint-plugin-n": "^15.7.0", "eslint-plugin-n": "^15.7.0",
"eslint-plugin-promise": "^6.1.1", "eslint-plugin-promise": "^6.1.1",
"flexsearch": "^0.7.31", "flexsearch": "^0.7.31",
"hugo-bin": "^0.101.5", "hugo-bin": "^0.102.0",
"markdownlint-cli2": "^0.6.0", "markdownlint-cli2": "^0.6.0",
"postcss-cli": "^10.1.0", "postcss-cli": "^10.1.0",
"purgecss-whitelister": "^2.4.0", "purgecss-whitelister": "^2.4.0",
@@ -3389,9 +3389,9 @@
"dev": true "dev": true
}, },
"node_modules/hugo-bin": { "node_modules/hugo-bin": {
"version": "0.101.5", "version": "0.102.0",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz", "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
"integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==", "integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@@ -3402,49 +3402,13 @@
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@xhmikosr/bin-wrapper": "^5.0.1", "@xhmikosr/bin-wrapper": "^5.0.1",
"pkg-conf": "^4.0.0", "pkg-conf": "^4.0.0"
"rimraf": "^3.0.2"
}, },
"bin": { "bin": {
"hugo": "cli.js" "hugo": "cli.js"
}, },
"engines": { "engines": {
"node": "^14.13.1 || >=16.0.0" "node": "^14.14.0 || >=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_modules/human-signals": { "node_modules/human-signals": {
@@ -9578,39 +9542,13 @@
"dev": true "dev": true
}, },
"hugo-bin": { "hugo-bin": {
"version": "0.101.5", "version": "0.102.0",
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.101.5.tgz", "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.0.tgz",
"integrity": "sha512-iq125a7Z0Zwx9nk/+66O+Yy7juwoY5ttQ8+6tkCzDoyDN71n2m8BiG8qeFLYQF1joMiiPE8ItGYu0Tkn98aGxA==", "integrity": "sha512-gJeDdC4W0x/+a8rf7pz8L/NheEeHIKrtLIHFwMumX04UAFYUA065A4uQmDjRspsMdQ9muwB9eQfOwTSjqaYyrQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@xhmikosr/bin-wrapper": "^5.0.1", "@xhmikosr/bin-wrapper": "^5.0.1",
"pkg-conf": "^4.0.0", "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"
}
}
} }
}, },
"human-signals": { "human-signals": {

View File

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