Filter Articles with a Javascript Search (#772)

* for lugo changes

* quick search through recipes

* Update content/_index.md

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

* Update content/_index.md

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

* when searching, list one column, big results

* Update content/_index.md

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

* Update content/_index.md

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

* Update content/_index.md

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

* change for my naming

* remove for fix

* redundant

* hide tags in items so search sees tags

* last superficial changes

Co-authored-by: Steven Hall <Hallzy.18@gmail.com>

config.toml

@@ -2,3 +2,8 @@ baseURL = 'https://based.cooking/'
 languageCode = 'en-us'
 title = 'Based Cooking'
 theme = 'lugo'
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true

content/_index.md

@@ -2,14 +2,62 @@
 title: "🍲 Based Cooking 🍳"
 ---
 
-## Categories
+## What do you want to cook?
 
-{{< tagcloud >}}
+<div class="search">
+  <input type="text" id="search" placeholder="Search...">
+  <button class="clear-search">
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+  </button>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const rec = document.querySelectorAll('#artlist li')
+  const search = document.querySelector('#search')
+  const clearSearch = document.querySelector('.clear-search')
+  const artlist = document.getElementById('artlist')
+
+  search.addEventListener('input', e => {
+    // grab search input value
+    const searchText = e.target.value.toLowerCase()
+
+    const hasFilter = searchText.length > 0;
+
+    // for each recipe hide all but matched
+    let matchCount = 0;
+    rec.forEach(el => {
+      const recipeName = el.innerText.toLowerCase()
+      const isMatch = recipeName.includes(searchText)
+
+      el.hidden = !isMatch
+      el.classList.toggle('matched-recipe', isMatch && searchText.length !== 0);
+      if (hasFilter && isMatch) {
+        matchCount++;
+      }
+    })
 
-## All Recipes
+    artlist.classList.toggle('list-searched', matchCount > 0);
+  })
+
+  clearSearch.addEventListener('click', e => {
+    search.value = ''
+    rec.forEach(el => {
+      el.hidden = false
+      el.classList.remove('matched-recipe');
+    })
+
+    artlist.classList.remove('list-searched') ;
+  })
+})
+</script>
 
 {{< artlist >}}
 
+## Or Browse by Category...
+
+{{< tagcloud >}}
+
 ## About this site
 
 Founded to provide a simple online cookbook without ads and obese web design.

layouts/shortcodes/artlist.html

@@ -1,5 +1,5 @@
 <ul id=artlist>
 {{range.Site.RegularPages}}
-<li><a href="{{.Permalink}}">{{.Title}}</a></li>
+<li><a href="{{.Permalink}}">{{.Title}}<span style="display:none">{{.Params.Tags}}</span></a></li>
 {{end}}
 </ul>

static/style.css

@@ -51,6 +51,7 @@ h1 {
 
 h2 {
 	color: tomato ;
+	text-align: center ;
 }
 
 footer {
@@ -113,3 +114,46 @@ img[alt="XMR Logo"] {
 @media (min-width: 100em) {
 	#artlist { column-count: 3 ;}
 }
+
+
+input#search {
+  all: unset;
+  background: #222;
+  color: #fff;
+  padding: 0.7rem 1rem;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.search {
+  width: 400px;
+  max-width: 85vw;
+  position: relative;
+  margin: 0.5rem auto 1.2rem;
+  display: flex;
+}
+
+button.clear-search {
+  all: unset;
+  position: absolute;
+  right: 4px;
+  top: 5px;
+  height: 30px;
+  width: 30px;
+  color: #888;
+  cursor: pointer;
+  transition: color 180ms ease-in-out;
+}
+button.clear-search:hover {
+  color: #eee;
+}
+
+
+.matched-recipe {
+	font-size: x-large ;
+}
+
+.list-searched {
+	column-count: 1 !important ;
+	list-style: decimal ;
+}