Add list sort product page example.

assets/js/listsort.js

@@ -0,0 +1,58 @@
+/**
+ * @file
+ * A JavaScript file for implementing list.js.
+ */
+
+(function () {
+
+  'use strict';
+
+  // Classes to filter on must be [a-z]+.
+  const options = {
+    valueNames: [ 'products', 'tags', 'categories', 'date' ],
+    listClass: 'js-items',
+    page: 30,
+    pagination: true
+  };
+
+  const items = new List('js-list', options);
+  const jsfilter1 = document.querySelector('.js-filter-1');
+  const jsfilter2 = document.querySelector('.js-filter-2');
+
+  jsfilter1.addEventListener('change', function(e) {
+    const value = e.target.value;
+
+    items.filter(function (item) {
+      if (value == '') {
+        items.filter();
+      }
+      else if (item.values().tags.indexOf(value) !== -1) {
+        return true;
+      }
+      else {
+        return false;
+      }
+    });
+
+    return false;
+   });
+
+  jsfilter2.addEventListener('change', function(e) {
+    const value = e.target.value;
+
+    items.filter(function (item) {
+      if (value == '') {
+        items.filter();
+      }
+      else if (item.values().categories.indexOf(value) !== -1) {
+        return true;
+      }
+      else {
+        return false;
+      }
+    });
+
+    return false;
+   });
+
+})();

content/en/blog/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Blog section
+weight: 1
 
 ---
 

content/en/podcast/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Podcast section
+weight: 2
 
 ---
 

content/en/products/_index.md

@@ -0,0 +1,10 @@
+---
+title: Products
+listsort: true
+weight: 10
+
+---
+
+Example for sorting, searching and filtering with [List.js](https://listjs.com/) that is included with the Zen theme.
+
+There are some js and html code needed for each implementation. See [listsort.js](https://github.com/frjo/zen-demo/blob/main/assets/js/listsort.js) and [products/list.html](https://github.com/frjo/zen-demo/blob/main/layouts/products/list.html)

content/en/products/prod01.md

@@ -0,0 +1,13 @@
+---
+title: Product 01
+date: 2023-09-01T11:02:25+02:00
+tags:
+  - dolor
+  - amet
+categories:
+  - consectetur
+  - elit
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod02.md

@@ -0,0 +1,13 @@
+---
+title: Product 02
+date: 2023-09-02T11:02:25+02:00
+tags:
+  - dolor
+  - tempor
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod03.md

@@ -0,0 +1,13 @@
+---
+title: Product 03
+date: 2023-08-17T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - consectetur
+  - aliqua
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod04.md

@@ -0,0 +1,13 @@
+---
+title: Product 04
+date: 2023-09-18T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - magna
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod05.md

@@ -0,0 +1,13 @@
+---
+title: Product 05
+date: 2023-09-19T11:02:25+02:00
+tags:
+  - ullamco
+  - labore
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod06.md

@@ -0,0 +1,13 @@
+---
+title: Product 06
+date: 2023-09-20T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod07.md

@@ -0,0 +1,13 @@
+---
+title: Product 07
+date: 2023-09-24T11:02:25+02:00
+tags:
+  - dolor
+  - tempor
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod08.md

@@ -0,0 +1,13 @@
+---
+title: Product 08
+date: 2023-07-25T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - consectetur
+  - aliqua
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod09.md

@@ -0,0 +1,13 @@
+---
+title: Product 09
+date: 2023-08-26T11:02:25+02:00
+tags:
+  - dolor
+  - labore
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod10.md

@@ -0,0 +1,13 @@
+---
+title: Product 10
+date: 2023-09-27T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - magna
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod11.md

@@ -0,0 +1,13 @@
+---
+title: Product 11
+date: 2023-07-28T11:02:25+02:00
+tags:
+  - ullamco
+  - sed
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/en/products/prod12.md

@@ -0,0 +1,13 @@
+---
+title: Product 12
+date: 2023-09-29T11:02:25+02:00
+tags:
+  - dolor
+  - sed
+categories:
+  - consectetur
+  - eiusmod
+
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

hugo.yaml

@@ -50,6 +50,7 @@ params:
   realfavicongenerator: true
   sidebar: true
   submitted: true
+  umbrella: true
 
 languages:
   en:

layouts/products/list.html

@@ -0,0 +1,57 @@
+{{ define "main" -}}
+<main class="main layout__main">
+<header>
+<h1 class="title">{{ .Title }}</h1>
+</header>
+
+{{ with .Content -}}
+<div class="content">
+{{ . }}
+</div>
+{{ end -}}
+
+<div id="js-list">
+  {{ if $.Param "listsort" -}}
+  <div class="filter margin-top">
+    <input class="search" placeholder="Search">
+
+    <select class="js-filter-1">
+      <option value="">Tags</option>
+      {{ range site.Taxonomies.tags -}}
+      <option value="{{ .Page.Title }}">{{ .Page.Title }}</option>
+      {{ end -}}
+    </select>
+
+    <select class="js-filter-2">
+      <option value="">Categories</option>
+      {{ range site.Taxonomies.categories -}}
+      <option value="{{ .Page.Title }}">{{ .Page.Title }}</option>
+      {{ end -}}
+    </select>
+
+    <button class="sort" data-sort="products">
+      Sort by product
+    </button>
+
+    <button class="sort" data-sort="date">
+      Sort by date
+    </button>
+  </div>
+  {{ end -}}
+
+  <table class="list-table">
+    <thead>
+      <tr><th class="sort" data-sort="products">Product</th><th class="sort" data-sort="tags">Tags</th><th class="sort" data-sort="categories">Categories</th><th class="sort" data-sort="date">Date</th></tr>
+    </thead>
+    <tbody class="js-items">
+    {{ range .Pages -}}
+    {{ .Render "tr" }}
+    {{ end -}}
+    </tbody>
+  </table>
+
+  <nav><ul class="navbar pagination"></ul></nav>
+</div>
+
+</main>
+{{ end -}}

layouts/products/tr.html

@@ -0,0 +1,23 @@
+<tr>
+<td class="products">
+<a href="{{ .RelPermalink }}">{{ .Title }}</a>
+</td>
+
+<td class="tags">
+{{- $tags := slice -}}
+{{- range (.GetTerms "tags") }}{{ $tags = $tags | append .LinkTitle }}{{ end -}}
+{{- delimit $tags ", " -}}
+</td>
+
+
+<td class="categories">
+{{- $categories := slice -}}
+{{- range (.GetTerms "categories") }}{{ $categories = $categories | append .LinkTitle }}{{ end -}}
+{{- delimit $categories ", " -}}
+</td>
+
+<td class="date">
+<time class="created-date" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format ($.Param "dateformat" | default "2 January, 2006") }}</time>
+</td>
+
+</tr>