Show blog post publish date in search results

layouts/index.json

@@ -7,6 +7,10 @@
     {{- end -}}
 
     {{- if ne $page.File nil -}}
+        {{- $date := "" -}}
+        {{- if and (eq $page.Section "blog") (not $page.Date.IsZero) -}}
+            {{- $date = $page.Date.Format "Jan 2, 2006" -}}
+        {{- end -}}
         {{-
             $index = $index | append (
                 dict
@@ -16,6 +20,7 @@
                     "href" $page.RelPermalink
                     "params" $page.Params
                     "kind" $page.Kind
+                    "date" $date
                     "ancestors" (after 1 $ancestors)
             )
         -}}

scripts/search/page.js

@@ -122,6 +122,7 @@ module.exports = {
                     description: item.params.meta_desc,
                     href: item.href,
                     authors: item.params.authors,
+                    date: item.date || undefined,
                     tags: item.params.tags,
                     rank: this.getRank(item),
                     boosted: this.isBoosted(item),

theme/src/scss/_algolia.scss

@@ -158,6 +158,11 @@
             .description {
                 @apply text-xs text-gray-800 leading-relaxed;
             }
+
+            .date {
+                @apply text-gray-600 -mt-1 mb-3;
+                font-size: 0.6875rem;
+            }
         }
     }
 

theme/src/ts/algolia/autocomplete.ts

@@ -9,6 +9,7 @@ interface SearchResultHit {
     ancestors?: string[];
     h1?: string;
     title: string;
+    date?: string;
 }
 
 // CSS selector of the element to convert into an autocomplete control.
@@ -242,6 +243,9 @@ function initAutocomplete(el: HTMLElement) {
                                             ${ labelForTag(item.section) }
                                         </span>
                                     </div>
+                                    ${ item.date
+                                        ? html`<div class="date">${ item.date }</div>`
+                                        : "" }
                                     <div class="description">
                                         ${ item.description !== "" && components.Highlight({ hit: item, attribute: "description" }) }
                                     </div>