1 files changed, 81 insertions, 0 deletions

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..52db7eb
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,81 @@
+{{ define "main" }}
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        for (const e of document.getElementsByClassName("js-only")) {
+            e.classList.remove("js-only");
+        }
+
+        const songs = document.querySelectorAll("li");
+        const search = document.getElementById("search");
+        const songlist = document.getElementById("song-list");
+
+        const normalize = str => str.normalize('NFD').replace(/\p{Diacritic}/gu, "");
+
+        search.addEventListener("input", () => {
+            const searchText = search.value.toLowerCase().trim();
+            const searchTerms = normalize(searchText).split(" ");
+            const hasFilter = searchText.length > 0;
+            songlist.classList.toggle("list-searched", hasFilter);
+
+            songs.forEach(song => {
+                const songText = normalize(`${song.textContent} ${song.dataset.alias}`).toLowerCase();
+                const isMatch = searchTerms.every(term => songText.includes(term));
+                song.hidden = !isMatch;
+            });
+        });
+
+        const clearSearch = document.getElementById("clear-search");
+        clearSearch.addEventListener("click", () => {
+            search.value = "";
+            songs.forEach(song => {
+                song.hidden = false;
+            });
+            songlist.classList.remove("list-searched");
+        });
+    });
+</script>
+
+<div class="list-container">
+
+
+    {{ $tagsPage := eq .Title "Tags"}}
+
+    <h2 class="center">What do you want to sing?</h2>
+    <div class="search-bar-container">
+         <div class="search-wrapper">
+        <input type="text" id="search" class="search-bar" placeholder="Search ALL Songs...">
+        <button id="clear-search" class="js-only">
+            <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>
+    </div>
+
+    <ul id="song-list">
+        {{ range .Pages }}
+        <li data-alias={{ if .Params.alias }}{{ .Params.alias }}{{ else }}{{ .Params.title }}{{ end }}>
+            <a href="{{ .RelPermalink }}">
+                {{ .Title }}
+            </a>
+        </li>
+        {{ end }}
+    </ul>
+</div>
+
+<div class="about">
+        {{ .Content }}
+</div>
+
+<div class="back-to-top">
+<a href="#top">
+    back to top
+</a>
+</div>
+
+{{ end }}
\ No newline at end of file