diff options
| -rw-r--r-- | config.toml | 5 | ||||
| -rw-r--r-- | content/_index.md | 54 | ||||
| -rw-r--r-- | layouts/shortcodes/artlist.html | 2 | ||||
| -rw-r--r-- | static/style.css | 44 |
4 files changed, 101 insertions, 4 deletions
diff --git a/config.toml b/config.toml index f5f4f7a..e277fe1 100644 --- a/config.toml +++ b/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 diff --git a/content/_index.md b/content/_index.md index e06deb1..53c9e99 100644 --- a/content/_index.md +++ b/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. diff --git a/layouts/shortcodes/artlist.html b/layouts/shortcodes/artlist.html index ef3eeb8..fa7a62e 100644 --- a/layouts/shortcodes/artlist.html +++ b/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> diff --git a/static/style.css b/static/style.css index f4ea240..0c659ba 100644 --- a/static/style.css +++ b/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 ; +} |