search: add breadcrumb to dedicated search results #647

exampleSite/config/_default/config.toml

@@ -215,6 +215,7 @@ title = "Hugo Relearn Documentation"
   showVisitedLinks = true
   collapsibleMenu = true
   disableBreadcrumb = false
+  disableRootBreadcrumb = true
   disableInlineCopyToClipBoard = true
   disableNextPrev = false
   disableLandingPageButton = true

exampleSite/content/basics/configuration/_index.en.md

@@ -53,6 +53,8 @@ Note that some of these parameters are explained in details in other sections of
   disableLanguageSwitchingButton = false
   # Hide breadcrumbs in the header and only show the current page title
   disableBreadcrumb = true
+  # Hide the root (first) breadcrumb in the header
+  disableRootBreadcrumb = true
   # If set to true, hide table of contents menu in the header of all pages
   disableToc = false
   # If set to false, load the MathJax module on every page regardless if a MathJax shortcode is present

exampleSite/content/basics/migration/_index.en.md

@@ -32,7 +32,11 @@ This document shows you what's new in the latest release. For a detailed list of
 
   In this case it is advised to remove the `title` from the headless branch parent's frontmatter, as it will otherwise appear in your breadcrumbs.
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The above change has a nice side effect. It is now possible to overwrite the setting for `collapsibleMenu` of your `config.toml` inside of a page's frontmatter.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to overwrite the setting for `collapsibleMenu` of your `config.toml` inside of a page's frontmatter.
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to remove the root breadcrumb by setting `disableRootBreadcrumb=true` in your `config.toml`.
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The output of the dedicated search page now displays the result's breadcrumb.
 
 ---
 

layouts/_default/index.json

@@ -15,7 +15,14 @@
       {{- end }}
       {{- $title = printf "%s %s %s" $title (default "::" .Site.Params.titleSeparator) .Title }}
     {{- end }}
-    {{- $pages = $pages | append (dict "uri" (partial "relLangPrettyUglyURL.hugo" (dict "to" .)) "title" $title "tags" .Params.tags "description" .Description "content" (.Plain | htmlUnescape)) }}
+    {{- $pages = $pages | append (dict
+      "uri" (partial "relLangPrettyUglyURL.hugo" (dict "to" .))
+      "title" $title
+      "tags" .Params.tags
+      "breadcrumb" (trim ((partial "breadcrumbs.html" (dict "page" . "dirOnly" true)) | plainify | htmlUnescape) "\n\r\t ")
+      "description" .Description
+      "content" (.Plain | htmlUnescape)
+    ) }}
   {{- end }}
 {{- end -}}
 {{- $pages | jsonify (dict "indent" "  ") }}

layouts/_default/index.search.js

@@ -15,7 +15,14 @@
       {{- end }}
       {{- $title = printf "%s %s %s" $title (default "::" .Site.Params.titleSeparator) .Title }}
     {{- end }}
-    {{- $pages = $pages | append (dict "uri" (partial "relLangPrettyUglyURL.hugo" (dict "to" .)) "title" $title "tags" .Params.tags "description" .Description "content" (.Plain | htmlUnescape)) }}
+    {{- $pages = $pages | append (dict
+      "uri" (partial "relLangPrettyUglyURL.hugo" (dict "to" .))
+      "title" $title
+      "tags" .Params.tags
+      "breadcrumb" (trim ((partial "breadcrumbs.html" (dict "page" . "dirOnly" true)) | plainify | htmlUnescape) "\n\r\t ")
+      "description" .Description
+      "content" (.Plain | htmlUnescape)
+    ) }}
   {{- end }}
 {{- end -}}
 var relearn_search_index = {{ $pages | jsonify (dict "indent" "  ") }}

layouts/partials/breadcrumbs.html

@@ -0,0 +1,54 @@
+{{- $page := .page }}
+{{- $to := $page }}
+{{- $pageurl := partial "relLangPrettyUglyURL.hugo" (dict "to" $page) }}
+{{- $lasturl := partial "relLangPrettyUglyURL.hugo" (dict "to" $page) }}
+{{- if .dirOnly }}
+  {{- $page = $page.Parent }}
+  {{- $to = $page }}
+  {{- $lasturl = partial "relLangPrettyUglyURL.hugo" (dict "to" $page) }}
+{{- end }}
+{{- $depth := add 1 (int (partial "get-page-depth.hugo" (dict "page" $page))) }}
+{{- if .page.Site.Params.disableRootBreadcrumb }}
+  {{- $depth = add $depth -1 }}
+{{- end }}
+{{- $breadcrumb := slice }}
+{{- range seq $depth }}
+  {{- if $to }}
+    {{- if $to.Title }}
+      {{- $breadcrumb = $breadcrumb | append $to }}
+    {{- end }}
+  {{- else }}
+    {{- break }}
+  {{- end }}
+  {{- $to = $to.Parent }}
+{{- end }}
+{{- $len := len $breadcrumb -}}
+{{- $breadcrumbReversed := slice }}
+{{- range seq $len }}
+  {{- $breadcrumbReversed = $breadcrumbReversed | append (index $breadcrumb (sub $len .)) }}
+{{- end }}
+{{- range $i, $e := $breadcrumbReversed }}
+  {{- $to := $e }}
+  {{- $title := $to.Title }}
+  {{- if eq .Kind "taxonomy" }}
+    {{- $title = i18n $to.Data.Plural }}
+    {{- if not $title }}
+      {{- $title = $to.Data.Plural }}
+    {{- end }}
+  {{- else if eq .Kind "term" }}
+    {{- $title = i18n $to.Data.Singular }}
+    {{- if not $title }}
+      {{- $title = $to.Data.Singular }}
+    {{- end }}
+    {{- $title = printf "%s %s %s" $title (default "::" .Site.Params.titleSeparator) $to.Title }}
+  {{- end }}
+  {{- if not $title }}
+    {{- $title = $to.Site.Title }}
+  {{- end }}
+  {{- $url := partial "relLangPrettyUglyURL.hugo" (dict "to" $to) }}
+  {{- $isPage := eq $url $pageurl }}
+  {{- $isLast := eq $url $lasturl }}
+  {{- $link := and $url (not $isPage) }}
+  {{- printf "<li" | safeHTML }}
+            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">{{ if $link }}<a itemprop="item" href="{{ $url }}">{{end}}<span itemprop="name">{{ $title }}</span>{{ if $link }}</a>{{ end }}<meta itemprop="position" content="{{ $depth }}">{{ if not $isLast }}{{ (printf "&nbsp;%s&nbsp;" (default ">" .Site.Params.breadcrumbSeparator)) | safeHTML }}{{ end }}</li>
+{{- end }}

layouts/partials/header.html

@@ -77,7 +77,7 @@
           {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
           {{- if $showBreadcrumb }}
           <ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
-            {{- template "breadcrumb" dict "page" . "to" . }}
+            {{- partial "breadcrumbs.html" (dict "page" .) }}
           </ol>
           {{- else }}
           <span class="topbar-breadcrumbs highlightable">
@@ -93,52 +93,3 @@
       <div id="R-main-overlay"></div>
       <main id="R-body-inner" class="highlightable {{ partialCached "archetype.hugo" (dict "hook" $hook "page" . "parameter" . "outputFormat" $outputFormat) .RelPermalink $outputFormat $hook }}" tabindex="-1">
         <div class="flex-block-wrapper">
-{{- define "breadcrumb" }}
-  {{- $breadcrumb := slice }}
-  {{- $page := .page }}
-  {{- $pageurl := partial "relLangPrettyUglyURL.hugo" (dict "to" $page) }}
-  {{- $to := .to }}
-  {{- $breadcrumb = $breadcrumb | append $to }}
-  {{- $depth := int (partial "get-page-depth.hugo" (dict "page" $page)) }}
-  {{- range seq $depth }}
-    {{- $to = $to.Parent }}
-    {{- if $to }}
-      {{- if $to.Title }}
-        {{- $breadcrumb = $breadcrumb | append $to }}
-      {{- end }}
-    {{- else }}
-      {{- break }}
-    {{- end }}
-  {{- end }}
-  {{- $len := len $breadcrumb -}}
-  {{- $breadcrumbReversed := slice }}
-  {{- range seq $len }}
-    {{- $breadcrumbReversed = $breadcrumbReversed | append (index $breadcrumb (sub $len .)) }}
-  {{- end }}
-  {{- $depth := 0 }}
-  {{- range $i, $e := $breadcrumbReversed }}
-    {{- $to := $e }}
-    {{- $depth = add $depth 1 }}
-    {{- $title := $to.Title }}
-    {{- if eq .Kind "taxonomy" }}
-      {{- $title = i18n $to.Data.Plural }}
-      {{- if not $title }}
-        {{- $title = $to.Data.Plural }}
-      {{- end }}
-    {{- else if eq .Kind "term" }}
-      {{- $title = i18n $to.Data.Singular }}
-      {{- if not $title }}
-        {{- $title = $to.Data.Singular }}
-      {{- end }}
-      {{- $title = printf "%s %s %s" $title (default "::" .Site.Params.titleSeparator) $to.Title }}
-    {{- end }}
-    {{- if not $title }}
-      {{- $title = $to.Site.Title }}
-    {{- end }}
-    {{- $url := partial "relLangPrettyUglyURL.hugo" (dict "to" $to) }}
-    {{- $last := eq $url $pageurl }}
-    {{- $link := and $url (not $last) }}
-    {{- printf "<li" | safeHTML }}
-            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">{{ if $link }}<a itemprop="item" href="{{ $url }}">{{end}}<span itemprop="name">{{ $title }}</span>{{ if $link }}</a>{{ end }}<meta itemprop="position" content="{{ $depth }}">{{ if not $last }}{{ (printf "&nbsp;%s&nbsp;" (default ">" .Site.Params.breadcrumbSeparator)) | safeHTML }}{{ end }}</li>
-  {{- end }}
-{{- end }}

static/css/auto-complete.css

@@ -51,6 +51,13 @@
     color: rgba( 255, 255, 255, 1 );
 }
 
+.autocomplete-suggestion > .breadcrumbs {
+    font-size: .7869em;
+    margin-inline-start: 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .autocomplete-suggestion > .context {
     font-size: .7869em;
     margin-inline-start: 1em;

static/css/ie.css

@@ -177,6 +177,9 @@
 	.autocomplete-suggestions {
 		text-align: left;
 	}
+	.autocomplete-suggestion > .breadcrumbs {
+		margin-left: 1em;
+	}
 	.autocomplete-suggestion > .context {
 		margin-left: 1em;
 	}
@@ -520,6 +523,10 @@
 		color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
 	}
 
+	#R-searchresults .autocomplete-suggestion > .breadcrumbs {
+		color: rgba( 125, 201, 3, 1 ); /* var(--PRIMARY-color) */
+	}
+
 	.copy-to-clipboard-button {
 		background-color: rgba( 255, 250, 233, 1 ); /* var(--CODE-INLINE-BG-color) */
 		border-color: rgba( 248, 232, 200, 1 ); /* var(--CODE-INLINE-BORDER-color) */

static/css/theme.css

@@ -1742,10 +1742,20 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
     height: 0;
 }
 
+#R-searchresults .autocomplete-suggestion > .breadcrumbs {
+    font-size: .9rem;
+    font-weight: 400;
+    margin-top: .167em;
+    padding-left: .2em;
+    padding-right: .2em;
+}
+
 #R-searchresults .autocomplete-suggestion > .context {
     font-size: 1rem;
     font-weight: 300;
-    margin-top: .66rem;
+    margin-top: .66em;
+    padding-left: .1em;
+    padding-right: .1em;
 }
 
 .badge {

static/css/variant.css

@@ -262,6 +262,10 @@ table {
     color: var(--INTERNAL-MAIN-TEXT-color);
 }
 
+#R-searchresults .autocomplete-suggestion > .breadcrumbs {
+    color: var(--INTERNAL-PRIMARY-color);
+}
+
 .copy-to-clipboard-button {
     background-color: var(--INTERNAL-CODE-INLINE-BG-color);
     border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);

static/js/search.js

@@ -213,17 +213,26 @@ function searchDetail( value ) {
                 item.matches.map( function(match){return match.replace(/\W/g, '\\$&')} ).join('|') +
                 ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}';
             var context = page.content.match(new RegExp(contextPattern, 'i'));
-            var divcontext = document.createElement('div');
-            divcontext.className = 'context';
-            divcontext.innerText = (context || '');
             var divsuggestion = document.createElement('a');
             divsuggestion.className = 'autocomplete-suggestion';
             divsuggestion.setAttribute('data-term', value);
             divsuggestion.setAttribute('data-title', page.title);
             divsuggestion.setAttribute('href', baseUri + page.uri);
             divsuggestion.setAttribute('data-context', context);
-            divsuggestion.innerText = '» ' + page.title;
+            var divtitle = document.createElement('div');
+            divtitle.className = 'title';
+            divtitle.innerText = '» ' + page.title;
+            divsuggestion.appendChild( divtitle );
+            var divbreadcrumb = document.createElement('div');
+            divbreadcrumb.className = 'breadcrumbs';
+            divbreadcrumb.innerText = (page.breadcrumb || '');
+            divsuggestion.appendChild( divbreadcrumb );
+            if( context ){
+                var divcontext = document.createElement('div');
+                divcontext.className = 'context';
+                divcontext.innerText = (context || '');
                 divsuggestion.appendChild( divcontext );
+            }
             results.appendChild( divsuggestion );
         });
         window.relearn.markSearch();
@@ -276,17 +285,22 @@ function startSearch(){
                 item.matches.map( function(match){return match.replace(/\W/g, '\\$&')} ).join('|') +
                 ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}';
             var context = page.content.match(new RegExp(contextPattern, 'i'));
-            var divcontext = document.createElement('div');
-            divcontext.className = 'context';
-            divcontext.innerText = (context || '');
             var divsuggestion = document.createElement('div');
             divsuggestion.className = 'autocomplete-suggestion';
             divsuggestion.setAttribute('data-term', term);
             divsuggestion.setAttribute('data-title', page.title);
             divsuggestion.setAttribute('data-uri', baseUri + page.uri);
             divsuggestion.setAttribute('data-context', context);
-            divsuggestion.innerText = '» ' + page.title;
+            var divtitle = document.createElement('div');
+            divtitle.className = 'title';
+            divtitle.innerText = '» ' + page.title;
+            divsuggestion.appendChild( divtitle );
+            if( context ){
+                var divcontext = document.createElement('div');
+                divcontext.className = 'context';
+                divcontext.innerText = (context || '');
                 divsuggestion.appendChild( divcontext );
+            }
             return divsuggestion.outerHTML;
         },
         /* onSelect callback fires when a search suggestion is chosen */