-
Notifications
You must be signed in to change notification settings - Fork 200
/
Copy pathsearch.html
159 lines (123 loc) · 6.64 KB
/
search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
---
layout: default
---
<div class="content w-full md:w-4/5 p-6 h-full overflow-scroll">
<div class="search container max-width-2 mt-4">
<div id="search-container" class="relative">
<div id="filter" class="icon absolute top-2 right-2 p-0.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6">
<path d="M6.5 2.25a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0V4.5h6.75a.75.75 0 0 0 0-1.5H6.5v-.75ZM11 6.5a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0v-.75h2.25a.75.75 0 0 0 0-1.5H11V6.5ZM5.75 10a.75.75 0 0 1 .75.75v.75h6.75a.75.75 0 0 1 0 1.5H6.5v.75a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75ZM2.75 7.25H8.5v1.5H2.75a.75.75 0 0 1 0-1.5ZM4 3H2.75a.75.75 0 0 0 0 1.5H4V3ZM2.75 11.5H4V13H2.75a.75.75 0 0 1 0-1.5Z" />
</svg>
</div>
<input
class="block w-full rounded-md bg-white px-4 py-2 text-xl text-gray-900 outline outline-2 -outline-offset-1 outline-gray-500 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary focus:ring-[6px] focus:ring-red-200"
type="text"
id="search-input"
placeholder="search titles or ingredients..."
autofocus
>
<div id="filters" class="flex block gap-4 mt-4">
<div class="suggestions w-full mt-4 text-lg flex flex-col gap-2">
<span class="text-red-950 md:text-primary uppercase font-semibold text-center">INGREDIENTS</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">chicken</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">lentils</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">beef</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">butter</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">garlic</span>
<span class="suggestion cursor-pointer text-primary text-xl px-3 py-3 rounded-lg bg-red-200 text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">cheese</span>
</div>
{% assign all_tags = "" %}
<!-- Step 1: Collect all tags from recipes -->
{% for recipe in site.recipes %}
{% for tag in recipe.tags %}
{% assign tag = tag | strip %}
{% unless all_tags contains tag %}
{% assign all_tags = all_tags | append: tag | append: "," %}
{% endunless %}
{% endfor %}
{% endfor %}
<!-- Step 2: Convert collected tags into an array -->
{% assign tag_array = all_tags | split: "," %}
<!-- Step 3: Output tags in the correct format -->
<div class="suggestions w-full mt-4 text-lg flex flex-col gap-2">
<span class="text-red-950 md:text-primary uppercase font-semibold text-center">TAGS</span>
{% for tag in tag_array limit:6 %}
{% if tag != "" %}
<span class="suggestion cursor-pointer text-white text-xl px-3 py-3 rounded-lg bg-primary text-center md:hover:scale-105 md:hover:rotate-1 transition underline underline-offset-2">{{ tag }}</span>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div id="results" class="recipes hidden mb-24">
<h2 class="uppercase text-primary font-semibold mt-8 mb-4">Search Results</h2>
<div id="results_list" class="grid h-full grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
</div>
</div>
<!-- Script pointing to search-script.js -->
<script src="{{site.baseurl}}/plugins/simple-jekyll-search.min.js" type="text/javascript"></script>
<!-- Configuration -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get elements
const searchInput = document.getElementById('search-input');
const filters = document.getElementById('filters');
const results = document.getElementById('results');
const filterButton = document.getElementById('filter');
// Function to toggle filters visibility
function toggleFilters() {
const filtersAreHidden = filters.classList.contains('hidden');
// Toggle filters visibility
filters.classList.toggle('hidden', !filtersAreHidden);
filters.classList.toggle('block', filtersAreHidden);
// Correct opacity logic
if (filtersAreHidden) {
filterButton.classList.remove('opacity-30'); // Remove opacity when filters are shown
} else {
filterButton.classList.add('opacity-30'); // Add opacity when filters are hidden
}
}
// Function to show results and hide filters
function showResults() {
filters.classList.add('hidden');
filters.classList.remove('block');
results.classList.remove('hidden');
results.classList.add('block');
// Ensure the filter button gets opacity-30 when filters are hidden
filterButton.classList.add('opacity-30');
}
// Parse URL parameters
const params = new URLSearchParams(window.location.search);
const tag = params.get('tag');
// Initialize SimpleJekyllSearch
const simpleSearch = SimpleJekyllSearch({
searchInput,
resultsContainer: document.getElementById('results_list'),
noResultsText: 'No results (yet), but our search is janky. Try the same term again, right now, or try a suggested search term above...',
json: '{{site.baseurl}}/search.json',
searchResultTemplate: '<a class="recipe md:hover:scale-105 md:hover:rotate-1 transition" href="{url}"><canvas class="aspect-video w-full rounded-xl bg-gray-100 mb-1 bg-cover bg-center" style="background-image:url({image});"></canvas><h1 class="font-semibold leading-tight">{title}</h1></a>',
success: () => {
console.log('Search initialized successfully');
// If a tag is present, trigger search and update UI
if (tag) {
searchInput.value = tag;
setTimeout(() => {
simpleSearch.search(tag);
showResults();
}, 100);
}
},
});
// Event listener for clicking on suggested tags
document.querySelectorAll('.suggestion').forEach(item => {
item.addEventListener('click', function () {
searchInput.value = this.textContent;
simpleSearch.search(this.textContent);
showResults();
});
});
// Event listener for toggling filters
filterButton.addEventListener('click', toggleFilters);
});
</script>