Merge pull request #196 from gethinode/develop

Clean up

assets/scss/app.scss

@@ -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";
@@ -98,3 +95,6 @@
 
 // Import theme placeholder
 @import "theme/theme.scss";
+
+// Import Bootstrap utilities API
+@import "bootstrap/scss/utilities/api";

assets/scss/components/_sidebar.scss

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

layouts/partials/assets/sidebar.html

@@ -2,57 +2,108 @@
 {{- $section := $page.Section }}
 {{- $data := .menu -}}
 
+{{- 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 }}
+        {{ $level := 0}}
+        {{ $baseURL := relLangURL (path.Join $section site.Params.docs.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>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.10.0",
+      "version": "0.11.1",
       "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",
+      "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,
       "funding": [
         {
@@ -3402,49 +3402,13 @@
       "hasInstallScript": true,
       "dependencies": {
         "@xhmikosr/bin-wrapper": "^5.0.1",
-        "pkg-conf": "^4.0.0",
+        "pkg-conf": "^4.0.0"
-        "rimraf": "^3.0.2"
       },
       "bin": {
         "hugo": "cli.js"
       },
       "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": {
@@ -9578,39 +9542,13 @@
       "dev": true
     },
     "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,
       "requires": {
         "@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": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "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",