Merge branch 'feature/toki-search'

lipu-tenpo · Jan 30, 2024 · cb06ed3 · cb06ed3
2 parents 23929c6 + fb5690e
commit cb06ed3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/_includes/page.hbs b/_includes/page.hbs
@@ -4,6 +4,7 @@ description: lipu tenpo
 css:
   - stylesheet.css
 og-image: null
+scripts: []
 ---
 
 <!DOCTYPE html>
@@ -58,6 +59,11 @@ og-image: null
   <!-- analytics -->
   <script data-goatcounter="https://liputenpo.goatcounter.com/count"
         async src="//gc.zgo.at/count.js"></script>
+
+  <!-- scripts -->
+  {{#each scripts}}
+    {{{ this }}}
+  {{/each}}
 </head>
 
 <body>

diff --git a/public/alpine.min.js b/public/alpine.min.js
diff --git a/public/stylesheet-toki.css b/public/stylesheet-toki.css
@@ -15,6 +15,31 @@ h2 {
   width: auto;
 }
 
+search {
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+search > label {
+  margin-right: 1rem;
+}
+search > label.sitelen-pona {
+  font-size: 2rem;
+}
+search > input {
+  width: 100%;
+  max-width: 20rem;
+  padding: 0.5rem;
+  border: 1px solid var(--text-subtle);
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  color: var(--text-colour);
+  background-color: var(--background-colour);
+}
+
 .sitelen-pona {
   font-family: "sitelen seli kiwen", sans-serif;
 }
@@ -59,6 +84,10 @@ h2 {
   color: var(--text-colour);
 }
 
+.article.hidden {
+  display: none;
+}
+
 .article .nimi-suli {
   font-size: 2rem;
   text-decoration: underline;

diff --git a/toki/toki.hbs b/toki/toki.hbs
@@ -5,6 +5,8 @@ eleventyExcludeFromCollections: true
 permalink: /toki/
 css:
   - stylesheet-toki.css
+scripts:
+  - '<script defer src="/alpine.min.js"></script>'
 categories:
   - name: musi
     collection: musi
@@ -28,15 +30,20 @@ categories:
     </a>
 </h2>
 
-<section class="categories">
+<section class="categories" x-data="{search: ''}">
+  <search>
+    <label for="search">alasa</label>
+    <label for="search" class="sitelen-pona">alasa</label>
+    <input type="search" id="search" x-model="search" />
+  </search>
     {{#each categories}}
         <h3 id="{{slugify name}}">
             {{name}}
         </h3>
         <span class="category-title sitelen-pona">{{name}}</span>
         <div class="articles">
             {{#each (reversed (getkey ../collections collection))}}
-            <a class="article" href="{{page.url}}">
+            <a class="article" href="{{page.url}}" :class="{'hidden': !('{{data.[nimi-suli]}}'.toLowerCase().includes(search.toLowerCase()) || '{{data.[jan-pali]}}'.toLowerCase().includes(search.toLowerCase()) || '{{getIssueTag data.tags}}'.toLowerCase().includes(search.toLowerCase()))}">
                 <span class="nimi-suli">{{data.[nimi-suli]}}</span>
                 <div class="meta">
                     <span class="jan-pali">