random-mirrors/based.cooking
1
0
Fork 0
mirror of https://github.com/LukeSmithxyz/based.cooking.git synced 2025-03-13 05:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

quick search through recipes

Browse Source
This commit is contained in:
Luke Smith 2022-05-26 17:37:00 -04:00
parent 0a837fb26a
commit c57a13d925
No known key found for this signature in database
GPG Key ID: 4C50B54A911F6252
3 changed files with 70 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
config.toml
View File

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

34
content/_index.md
View File

@ -2,9 +2,39 @@
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')
search.addEventListener('change', e => {
// grab search input value
const searchText = e.target.value.toLowerCase()
// for each receipe hide all but matched
rec.forEach(el => {
const recipeName = el.innerText.toLowerCase()
const isMatch = recipeName.includes(searchText)
el.hidden = !isMatch
})
})
clearSearch.addEventListener('click', e => {
search.value = ''
rec.forEach(el => el.hidden = false)
})
})
</script>
## All Recipes

33
static/style.css
View File

@ -113,3 +113,36 @@ 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;
}