Merge branch 'main' into main

assets/scripts/pages/search.js

@@ -26,7 +26,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   const searchQuery = param('keyword')
   if (searchQuery) {
-    document.getElementById('search-query').value = searchQuery
+    document.getElementById('search-box').value = searchQuery
     executeSearch(searchQuery)
   } else {
     const node = document.createElement('p')
@@ -37,7 +37,7 @@ window.addEventListener('DOMContentLoaded', () => {
   function executeSearch (searchQuery) {
     const url = window.location.href.split('/search/')[0] + '/index.json'
 
-    fetch(url).then(function (data) {
+    fetch(url).then(response => response.json()).then(function (data) {
       const pages = data
       const fuse = new Fuse(pages, fuseOptions)
       const results = fuse.search(searchQuery)
@@ -91,8 +91,8 @@ window.addEventListener('DOMContentLoaded', () => {
         snippet
       })
 
-      const doc = new DOMParser().parseFromString(output, 'text/html')
+      const dom = new DOMParser().parseFromString(output, 'text/html')
-      document.getElementById('search-results').append(doc)
+      document.getElementById('search-results').append(dom.getElementsByClassName('post-card')[0])
 
       snippetHighlights.forEach(function (snipvalue) {
         const context = document.getElementById('#summary-' + key)

assets/styles/layouts/list.scss

@@ -1,7 +1,7 @@
 // in Hugo, Page kind can be either "section" or "page".
 // if it is section, then it's a page with a list of items, for example /posts
 // if it is page, then it is a single page.
-body.kind-section {
+body.kind-section, body.kind-term, body.kind-page{
   .wrapper {
     display: flex;
     padding: 0;
@@ -98,6 +98,22 @@ body.kind-section {
     width: fit-content;
   }
   
+  .taxonomy-terms-card {
+    text-align: left;
+  }
+  .taxonomy-terms-card li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  
+  .taxonomy-terms-card a {
+    color: #f9fafc;
+  }
+
   /* ============= Device specific fixes ======= */
   
   /* Large screens such as TV */

assets/styles/sections/recent-posts.scss

@@ -38,6 +38,22 @@
     -webkit-line-clamp: 5; /* number of lines to show */
     -webkit-box-orient: vertical;
   }
+
+  .taxonomy-terms {
+    text-align: left;
+  }
+  .taxonomy-terms li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
+  
+  .taxonomy-terms a {
+    color: #f9fafc;
+  }
   
   /* ============= Device specific fixes ======= */
   

exampleSite/config.yaml

@@ -189,6 +189,7 @@ params:
     # Show tags under the post title
     tags:
       enable: true
+      on_card: true # enables tags in post cards
 
     # Specify whether to show flag in the language selector. Default is true.
     flags:

layouts/partials/cards/post.html

@@ -9,6 +9,16 @@
         <p class="card-text post-summary">{{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms-card">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a
         href="{{ .RelPermalink | relLangURL }}"

layouts/partials/cards/recent-post.html

@@ -11,6 +11,16 @@
         <p class="card-text post-summary"> {{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
       </div>