Merge pull request #229 from gethinode/TOC

TOC

assets/scss/components/_toc.scss

@@ -1,8 +1,8 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
@@ -15,6 +15,7 @@
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -29,12 +30,24 @@
 
 .toc nav li {
     margin-bottom: 0.25rem;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a {
     color: inherit;
 }
 
+.toc-panel nav a {
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+    }
+}
+
 .toc nav a:not(:hover) {
     text-decoration: none;
 }
@@ -42,3 +55,21 @@
 .toc nav a code {
     font: inherit;
 }
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}

layouts/_default/single.html

@@ -2,6 +2,7 @@
     {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
         {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        <p class="lead mb-5">{{ .Description }}</p>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
@@ -28,22 +29,23 @@
                 {{ end -}}
             </div>
         </div>
+        <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}
 
 {{ define "partials/body.html" -}}
-    {{ if in (slice "docs" "minimal") .Layout }}
-        <p class="lead mb-5">{{ .Description }}</p>
-        {{ .Content }}
-    {{ else }}
-        <p class="lead mb-5 mt-3">{{ .Description }}</p>
+    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+    {{- end -}}
+
+    {{ if not (in (slice "docs" "minimal") .Layout) }}
         {{ if .Params.thumbnail -}}
             {{- $credits := "" -}}
             {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
             {{- partial "assets/image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
-        {{ .Content }}
-{{ end }}
+    {{ end }}
+    {{ .Content }}
 {{ end -}}
 
 {{ define "partials/footer.html" -}}
@@ -82,7 +84,7 @@
     {{- $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">
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper .Section }}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

layouts/partials/assets/button.html

@@ -15,91 +15,118 @@
     "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
     "type"          Optional type of the element, either "link" or "button" (default).
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
+    "class"         Optional class attribute of the button element, e.g. “toc-button”.
+    "icon"          Optional Font Awesome icon class attribute, e.g. "fas sort".
+    "order"         Optional order of the icon, either "first" or "last" (default).
+    "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
+                    "between", "around", or "evenly".
 -->
 
-{{ $title := trim .title " \r\n" -}}
-{{ if not $title -}}
-    {{ errorf "partial [assets/button.html] - Missing element title" -}}
-{{ end -}}
+{{- $title := trim .title " \r\n" -}}
+{{- if not $title -}}
+    {{- errorf "partial [assets/button.html] - Missing element title" -}}
+{{- end -}}
 
-{{ $id := .id }}
+{{- $id := .id }}
 
-{{ $state := "enabled" -}}
-{{ with .state }}{{ $state = . }}{{ end -}}
-{{ $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
-{{ if not (in $supportedStates $state) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
-{{ end -}}
+{{- $state := "enabled" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
+{{- end -}}
 
-{{ $size := "md" -}}
-{{ with .size }}{{ $size = . }}{{ end -}}
-{{ $supportedSizes := slice "sm" "md" "lg" -}}
-{{ if not (in $supportedSizes $size) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
-{{ end -}}
+{{- $size := "md" -}}
+{{- with .size }}{{ $size = . }}{{ end -}}
+{{- $supportedSizes := slice "sm" "md" "lg" -}}
+{{- if not (in $supportedSizes $size) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
+{{- end -}}
 
-{{ $color := "primary" -}}
-{{ with .color }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
-{{ if not (in $supportedColors $color) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
-{{ end -}}
+{{- $color := "primary" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
+{{- end -}}
 
-{{ $outline := false -}}
-{{ with .outline }}{{ $outline = . }}{{ end -}}
+{{- $outline := false -}}
+{{- with .outline }}{{ $outline = . }}{{ end -}}
 
-{{ $badge := "" -}}
-{{ with .badge }}{{ $badge = . }}{{ end -}}
+{{- $badge := "" -}}
+{{- with .badge }}{{ $badge = . }}{{ end -}}
 
-{{ $label := "" -}}
-{{ with .label }}{{ $label = . }}{{ end -}}
+{{- $label := "" -}}
+{{- with .label }}{{ $label = . }}{{ end -}}
 
-{{ $tooltip := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .tooltip }}{{ $tooltip = . }}{{ end -}}
-{{ end -}}
+{{- $tooltip := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .tooltip }}{{ $tooltip = . }}{{ end -}}
+{{- end -}}
 
-{{ $href := .href -}}
+{{- $href := .href -}}
 
-{{ $collapse := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
-{{ end -}}
+{{- $collapse := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
+{{- end -}}
 
-{{ if $tooltip -}}
-    {{ if $collapse -}}
-        {{ errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
-    {{ end -}}
-{{ end -}}
+{{- if $tooltip -}}
+    {{- if $collapse -}}
+        {{- errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
+    {{- end -}}
+{{- end -}}
 
-{{ $type := "button" -}}
-{{ with .type }}{{ $type = . }}{{ end -}}
-{{ $supportedTypes := slice "button" "link" -}}
-{{ if not (in $supportedTypes $type) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
-{{ end -}}
+{{- $type := "button" -}}
+{{- with .type }}{{ $type = . }}{{ end -}}
+{{- $supportedTypes := slice "button" "link" -}}
+{{- if not (in $supportedTypes $type) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
+{{- end -}}
 
-{{ $placement := "top" -}}
-{{ with .placement }}{{ $placement = . }}{{ end -}}
-{{ $supportedPlacements := slice "top" "bottom" "left" "right" -}}
-{{ if not (in $supportedPlacements $placement) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
-{{ end -}}
+{{- $placement := "top" -}}
+{{- with .placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top" "bottom" "left" "right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
 
-<a {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
-    {{ with $id }}id="{{ . }}"{{ end }}
-    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
-    {{ else }}class="link-{{ $color }} position-relative"{{ end }}
-    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
-    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
-    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
-    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
+{{- $class := .class }}
+{{- $icon := .icon }}
+
+{{- $order := "last" -}}
+{{- with .order }}{{ $order = . }}{{ end -}}
+{{- $supportedOrders := slice "first" "last" -}}
+{{- if not (in $supportedOrders $order) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $justify := "center" -}}
+{{- with .justify }}{{ $justify = . }}{{ end -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
+    {{- with $id }}id="{{ . }}"{{ end -}}
+    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
+    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
+    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
+    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
+    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
     >
-    {{ $title -}}
-    {{ with $badge }}
+
+    <div class="d-flex justify-content-{{ $justify }}">
+        <div>{{ $title }}</div>
+        {{- with $icon }}<div class="align-self-center{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
+    </div>
+
+    {{- with $badge }}
         <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
             {{ . }}
             {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
         </span>
-    {{ end }}  
+    {{- end -}}  
 </a>

layouts/partials/assets/toc-dropdown.html

@@ -0,0 +1,23 @@
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
+{{ if (gt $items 1) -}}
+    <div class="d-grid gap-2 mx-auto">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "toc") 
+            "color" "secondary" 
+            "outline" "true" 
+            "class" "toc-button" 
+            "icon" "fas sort"
+            "justify" "between"
+            "collapse" "toc-collapse"
+            "order" "last") 
+        -}}
+    </div>
+
+    <p>
+        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+            <div class="toc toc-panel text-body-secondary p-2">
+                <small>{{ .TableOfContents }}</small>
+            </div>
+        </div>
+    </p>
+{{ end -}}

layouts/partials/assets/toc.html

@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
         <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
         {{ .TableOfContents }}
     </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.12.0",
+      "version": "0.12.1",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",

package.json

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