Merge pull request #1350 from gethinode/develop

Improve breadcrumb for small devices

go.mod

@@ -8,7 +8,7 @@ require (
 	github.com/gethinode/mod-csp v1.0.6 // indirect
 	github.com/gethinode/mod-flexsearch/v2 v2.0.2 // indirect
 	github.com/gethinode/mod-fontawesome v1.10.0 // indirect
-	github.com/gethinode/mod-google-analytics v1.1.6 // indirect
+	github.com/gethinode/mod-google-analytics v1.1.9 // indirect
 	github.com/gethinode/mod-katex v1.1.2 // indirect
 	github.com/gethinode/mod-leaflet v1.2.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.13 // indirect

go.sum

@@ -154,6 +154,8 @@ github.com/gethinode/mod-google-analytics v1.1.5 h1:wlOcgwNEJAnIQmPJIo3cT06xnr1d
 github.com/gethinode/mod-google-analytics v1.1.5/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
 github.com/gethinode/mod-google-analytics v1.1.6 h1:0eNIM4NTzXnnRHMM04IVnYPPGwbMAmit6fjuUuCQv2I=
 github.com/gethinode/mod-google-analytics v1.1.6/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.1.9 h1:ld3bRGiJiUCfe/deH+4vOP3oZNhG6mPssT254EcK0Ro=
+github.com/gethinode/mod-google-analytics v1.1.9/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=

layouts/partials/assets/breadcrumb.html

@@ -6,6 +6,16 @@
 
 {{ $error := false }}
 
+<!-- Limits a title to a maximum of 33 runes, adds a "..." suffix otherwise -->
+{{ define "partials/short-title.html" }}
+    {{- $title := . -}}
+    {{ if gt (strings.RuneCount $title) 33 }}
+        {{ $title = print (substr $title 0 30) "..." }}
+    {{ end }}
+
+    {{ return $title }}
+{{ end }}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "breadcrumb" "args" . "group" "partial") }}
     {{- errorf "partial [assets/breadcrumb.html] - Invalid arguments" -}}
@@ -13,23 +23,41 @@
 {{ end }}
 
 <!-- Initialize arguments -->
-{{ $page := .page }}
+{{- $page := .page -}}
+{{- $breakpoint := $page.Scratch.Get "breakpoint" -}}
+
+<!-- Include breadcrumb items that have both a title and address -->
+{{ $items := slice }}
+{{- range $index, $item := $page.Ancestors.Reverse -}}
+    {{- $title := .LinkTitle -}}
+    {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
+    {{- $address := or .RelPermalink .Params.Redirect -}}
+    {{ if and $title $address}}
+        {{ $items = $items | append (dict "title" $title "address" $address) }}
+    {{ end }}
+{{ end }}
 
 <!-- Main code -->
 {{ if not $error }}
-    <nav aria-label="breadcrumb">
+    <nav aria-label="breadcrumb" class="d-{{ $breakpoint.prev }}-none">
         <ol class="breadcrumb">
-            {{- range $index, $item := $page.Ancestors.Reverse -}}
-                {{- $title := .LinkTitle -}}
-                {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
-                {{- $address := or .RelPermalink .Params.Redirect -}}
-                {{ if $title }}
-                    {{ if $address }}
-                        <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
-                    {{ else }}
-                        <li class="breadcrumb-item">{{ $title }}</li>
-                    {{ end }}
-                {{ end }}
+            {{- $length := len $items -}}
+            {{- if gt $length 0 -}}
+                {{ $item := index $items (sub $length 1) }}
+                <li class="breadcrumb-item">
+                    <a href="{{ $item.address }}">
+                        {{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}&nbsp;{{ partial "short-title" $item.title }}
+                    </a>
+                </li>
+            {{- end -}}
+        </ol>
+    </nav>
+
+    <nav aria-label="breadcrumb" class="d-none d-{{ $breakpoint.prev }}-block">
+        <ol class="breadcrumb">
+            {{- $length := len $items }}
+            {{- range $index, $item := $items -}}
+                <li class="breadcrumb-item"><a href="{{ $item.address }}">{{ $item.title }}</a></li>
             {{- end -}}
             <li class="breadcrumb-item active" aria-current="page">{{ $page.LinkTitle }}</li>
         </ol>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.27.23",
+  "version": "0.27.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.27.23",
+      "version": "0.27.24",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^7.0.2",

package.json

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