Add filtering

content/chaluj/chaluj.cho

@@ -1,5 +1,5 @@
 {title: Cháluj}
-{artist: Morřata na útěku}
+{artist: Morčata na útěku}
 {capo: 3}
 
 {c: Capo 3/5}

content/chaluj/index.md

@@ -2,5 +2,5 @@
 title = "Cháluj"
 [taxonomies]
 category = ["mixtape"]
-artist = ["Morřata na útěku"]
+artist = ["Morčata na útěku"]
 +++

content/jdem-zpatky-do-lesu/jdem-zpatky-do-lesu.cho

@@ -1,4 +1,5 @@
 {title: Jdem zpátky do lesů}
+{artist: Žalman}
 
 [Am7]Sedím na kolejích, [D]které nikam neve[G]dou, [C][G]
 [Am7]koukám na kopretinu, jak [D]miluje se s lebe[G]dou, [C][G]

content/karolina/karolina.cho

@@ -1,4 +1,5 @@
 {title: Karolína}
+{artist: Kamelot}
 
 {define: Hm base-fret 1 frets 2 2 4 4 3 2 fingers 1 1 3 4 2 1}
 

content/kundicka-ruzova/kundicka-ruzova.cho

@@ -1,4 +1,5 @@
 {title: Kundička růžová}
+{artist: Standa}
 
 {capo: 3}
 {c: Capo: 3}

content/prasnice/prasnice.cho

@@ -1,8 +1,9 @@
 {title: Prasnice}
-{c: Originál Capo II (A, Bm, D, A, E)}
-
+{artist: Standa}
 {columns: 2}
 
+{c: Originál Capo II (A, Bm, D, A, E)}
+
 {sov}
 [G]Ve tři ráno mi nesvědčí, [Am]že mám voči prasečí.
 Co s [C]tím? Radši zapla[G]tím. [D]

content/prazdny-nadrazi/prazdny-nadrazi.cho

@@ -1,4 +1,5 @@
 {title: Prázdný nádraží}
+{artist: Ozvěna}
 
 {soc}
 Jen prázdný [C]nádraží na tebe dejchá samotou

content/rano-bylo-stejny/rano-bylo-stejny.cho

@@ -1,4 +1,5 @@
 {title: Ráno bylo stejný}
+{artist: Žalman}
 
 {define: Hm base-fret 1 frets 2 2 4 4 3 2 fingers 1 1 3 4 2 1}
 

content/sundej-z-hodin-zavazi/sundej-z-hodin-zavazi.cho

@@ -1,4 +1,5 @@
 {title: Sundej z hodin závaží}
+{artist: Fešáci}
 
 {sov}
 [D]Brouzdej trávou za tratí v dlouhých letních hodi[G]nách,

content/toulavej/toulavej.cho

@@ -1,4 +1,5 @@
 {title: Toulavej}
+{artist: Vojta Kiďák Tomáško}
 
 {sov}
 Někdo [Am]z vás, kdo chutnal [G]dálku jeden z [Am]těch, co rozu[E7]měj,

content/uz-to-nenapravim/uz-to-nenapravim.cho

@@ -1,8 +1,9 @@
 {title: Už to nenapravím}
-{capo: 2}
-{c: Capo 2}
-
+{artist: Samson}
 {columns: 2}
+{capo: 2}
+
+{c: Capo 2}
 
 {soc}
 [Am]Vapadapadapadap[D]ap [F] [E]      pa[Am]dadada [E]

content/zahrada-ticha/zahrada-ticha.cho

@@ -1,4 +1,5 @@
 {title: Zahrada ticha}
+{artist: Jakub Smolík}
 
 Je tam brána zdobe[D]ná, cestu oteví[Em]rá. Zahradu zele[C]nou [G] všechno připomí[D]ná.
 

sass/chordpro.scss

@@ -1,7 +1,15 @@
+$col-white: #fff;
+$col-black: #181818;
+
+
 body {
 	margin: 0;
-	background-color: #d8d8d8;
-	color: #181818;
+	background-color: $col-white;
+	color: $col-black;
+}
+
+table {
+	white-space: nowrap;
 }
 
 .song {
@@ -24,16 +32,16 @@ body {
 
 .chorus {
 	position: relative;
-}
 
-.chorus:before {
-	content: "";
-	position: absolute;
-	left: -1em;
-	display: block;
-	height: 100%;
-	width: 2px;
-	background-color: #181818;
+	&:before {
+		content: "";
+		position: absolute;
+		left: -1em;
+		display: block;
+		height: 100%;
+		width: 2px;
+		background-color: $col-black;
+	}
 }
 
 .tab {
@@ -46,21 +54,21 @@ body {
 	display: inline-block;
 	padding: .25em .5em;
 	background-color: #bbb;
-	color: #181818;
+	color: $col-black;
 }
 
 @media (prefers-color-scheme: dark) {
 	body {
-		background-color: #181818;
-		color: #d8d8d8;
+		background-color: $col-black;
+		color: $col-white;
 	}
 
 	.chorus:before {
-		background-color: #d8d8d8;
+		background-color: $col-white;
 	}
 
 	.comment {
 		background-color: #585858;
-		color: #d8d8d8;
+		color: $col-white;
 	}
 }

sass/style.scss

@@ -1,5 +1,108 @@
+$width-mobile: 900px;
+
+* {
+	box-sizing: border-box;
+}
+
 body {
 	margin: 0;
+	padding: 0;
+}
+
+main.songs {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	max-width: 50em;
+	margin: 0 auto;
+	padding: 1em;
+
+	@media only screen and (max-width: $width-mobile) {
+		grid-template-columns: 1fr;
+	}
+
+	.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 {
+		display: grid;
+		gap: 1em;
+
+		&>div {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: .5em;
+			padding-left: 1em;
+			border-radius: .5em;
+			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 }
+
+			.meta {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.title {
+					font-weight: bold;
+				}
+			}
+
+			.links {
+				display: flex;
+				gap: .5em;
+
+				&>* {
+					height: 3em;
+					width: 3em;
+					background-position: center;
+					background-repeat: no-repeat;
+					background-size: auto 1.5em;
+					border-radius: .25em;
+				}
+
+				.html {
+					background-color: #335872;
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM17.6569 12L14.1213 8.46447L12.7071 9.87868L14.8284 12L12.7071 14.1213L14.1213 15.5355L17.6569 12ZM6.34315 12L9.87868 15.5355L11.2929 14.1213L9.17157 12L11.2929 9.87868L9.87868 8.46447L6.34315 12Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+
+				.pdf {
+					background-color: #67503a;
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.5 7.5H12.5C12.5 9.98994 14.6436 12.6604 17.3162 13.5513L16.8586 15.49C13.7234 15.0421 10.4821 16.3804 7.5547 18.3321L6.3753 16.7191C7.46149 15.8502 8.50293 14.3757 9.27499 12.6534C10.0443 10.9373 10.5 9.07749 10.5 7.5ZM11.1 13.4716C11.3673 12.8752 11.6043 12.2563 11.8037 11.6285C12.2754 12.3531 12.8553 13.0182 13.5102 13.5953C12.5284 13.7711 11.5666 14.0596 10.6353 14.4276C10.8 14.1143 10.9551 13.7948 11.1 13.4716Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+			}
+		}
+	}
 }
 
 iframe.song {

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

@@ -1,3 +1,4 @@
+{% import "macros.html" as macros %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -8,13 +9,37 @@
 	<link rel="icon" href="favicon.svg">
 </head>
 <body>
-	{% block content %}
-		<ul>
+{% block content %}
+	<main class="songs">
+		<section class="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 %}
-				<li><a href="{{ song.permalink }}">{{ song.title }}</a></li>
+				<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"] %}
+							<div class="artist">{{ song.taxonomies["artist"][0] }}</div>
+						{% endif %}
+					</div>
+					<div class="links">
+						<a href="{{ song.permalink }}" class="html"></a>
+						{% for asset in song.assets %}
+							{% if asset is matching(song.slug~"[.](pdf)$") %}
+								<a href="{{ asset }}" class="pdf"></a>
+							{% endif %}
+						{% endfor %}
+					</div>
+				</div>
 			{% endfor %}
-		</ul>
-	{% endblock %}
-	{% block script %}{% endblock %}
+		</section>
+	</main>
+{% endblock %}
+{% block script %}
+	<script src="{{ get_url(path="/js/filter.js") }}"></script>
+{% endblock %}
 </body>
 </html>

templates/macros.html

@@ -0,0 +1,5 @@
+{% macro primary_category(song) %}
+	{%- if song.taxonomies["category"] -%}
+		{{ song.taxonomies["category"][0] }}
+	{%- endif -%}
+{% endmacro %}