Add filtering

sass/style.scss

@@ -10,8 +10,8 @@ body {
 }
 
 main.songs {
-	display: grid;
-	grid-template-columns: 1fr 3fr;
+	display: flex;
+	flex-direction: column;
 	gap: 1em;
 	max-width: 50em;
 	margin: 0 auto;
@@ -22,7 +22,31 @@ main.songs {
 	}
 
 	.filters {
-		// ...
+		display: grid;
+		grid-template-columns: 2fr 1fr 1fr;
+		gap: 1em;
+		margin: 1em 0;
+
+		// This is removed via JS to prevent displaying the inputs
+		// on browsers wih JavaScript disabled.
+		&.hidden { display: none }
+
+		&>* {
+			border: 1px solid #aaa;
+			border-radius: .5em;
+			padding: .5em 1em;
+			font-size: 1em;
+		}
+
+		&>.button {
+			text-align: center;
+			cursor: pointer;
+
+			&.selected {
+				border-color: #333;
+				box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
+			}
+		}
 	}
 
 	.song-list {
@@ -39,6 +63,8 @@ main.songs {
 			box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
 			border-left: .7em solid #000;
 
+			&.hidden { display: none }
+
 			&.mixtape { border-color: #654575 }
 			&.classic { border-color: #a55d05 }
 

static/js/filter.js

@@ -0,0 +1,41 @@
+const filters = document.querySelector(".filters");
+const buttons = Array.from(filters.querySelectorAll(".button"));
+const search = document.querySelector("input[type='text']");
+const songList = document.querySelector(".song-list");
+
+let selectedCategory = null;
+
+function buttonToggle(clickedButton) {
+	buttons.forEach(button => {
+		if (button === clickedButton && !button.classList.contains("selected")) {
+			button.classList.add("selected");
+			selectedCategory = button.dataset.category;
+		} else {
+			button.classList.remove("selected");
+			selectedCategory = null;
+		}
+	});
+	filterSongs();
+}
+
+function filterSongs() {
+	const searchTerm = search.value.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+	const songs = Array.from(songList.children);
+	songs.forEach(song => {
+		const title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+		const matching = title.includes(searchTerm) && (!selectedCategory || song.dataset.category === selectedCategory);
+		song.classList.toggle("hidden", !matching);
+	});
+}
+
+// Event listeners
+search.addEventListener("keyup", filterSongs);
+buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
+
+// Normalize song titles
+Array.from(songList.children).forEach(song => {
+	song.dataset.title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+});
+
+// Display the filter section on JS-enabled browsers
+window.addEventListener("load", () => filters.classList.remove = "hidden");

templates/index.html

@@ -12,11 +12,13 @@
 {% block content %}
 	<main class="songs">
 		<section class="filters">
-			FILTERS
+			<input type="text" placeholder="Hledat">
+			<div class="button" data-category="classic">classic</div>
+			<div class="button" data-category="mixtape">mixtape</div>
 		</section>
 		<section class="song-list">
 			{% for song in section.pages %}
-				<div class="{{ macros::primary_category(song=song) }}">
+				<div class="{{ macros::primary_category(song=song) }}" data-title="{{ song.title }}" data-category="{{ macros::primary_category(song=song) }}">
 					<div class="meta">
 						<div class="title">{{ song.title }}</div>
 						{% if song.taxonomies["artist"] %}
@@ -36,6 +38,8 @@
 		</section>
 	</main>
 {% endblock %}
-{% block script %}{% endblock %}
+{% block script %}
+	<script src="{{ get_url(path="/js/filter.js") }}"></script>
+{% endblock %}
 </body>
 </html>