Merge pull request #92 from skipgu/91-add-search-to-blogs

Add search to blogs

Author: streetzy

_includes/blog-filters.html

@@ -1,7 +1,11 @@
 {% assign postsByYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
 {% assign all_tags = site.posts | map: 'tags' | flatten | uniq | sort %}
 
-<h2>Filters</h2>
+<h3>Search & Filters</h3>
+<div class="filter-group">
+  <span class="filter-label">Title:</span>
+  <input type="text" class="filter-search" placeholder="Search blog posts...">
+</div>
 <div class="filter-bar">
   <div class="filter-group" data-filter-type="year">
     <span class="filter-label">Year:</span>

assets/js/filter.js

@@ -6,6 +6,8 @@ document.addEventListener('DOMContentLoaded', function () {
     let groups = filterBar.querySelectorAll('.filter-group');
     let entries = document.querySelectorAll('.entry');
     let noResults = document.querySelector('.no-results');
+    let searchInput = document.querySelector('.filter-search');
+    let searchTerm = '';
     let selected = {};
 
     function applyFilters() {
@@ -14,6 +16,11 @@ document.addEventListener('DOMContentLoaded', function () {
             let entryYear = entry.getAttribute('data-year');
             let entryTags = (entry.getAttribute('data-tags') || '').split(',');
             let show = true;
+            
+            let title = entry.querySelector('.entry-title').textContent.toLowerCase();
+            if (searchTerm && title.indexOf(searchTerm) === -1) {
+                show = false;
+            }
 
             groups.forEach(function (group) {
                 if (!show) return;
@@ -57,4 +64,11 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         });
     });
+
+    if (searchInput) {
+        searchInput.addEventListener('input', function () {
+            searchTerm = this.value.toLowerCase();
+            applyFilters();
+        });
+    }
 });

assets/stylesheets/main.scss

@@ -210,16 +210,35 @@ $gray: #555;
 .filter-bar {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 2rem;
   padding-bottom: 1rem;
-  gap: 1rem;
+  margin-bottom: 1rem;
   border-bottom: 1px solid rgba(234, 234, 234, 0.5);
 }
 
+.filter-search {
+  margin-left: 0.5rem;
+  padding: 0.4rem 0.8rem;
+  border: 1px solid $white;
+  border-radius: 10px;
+  background: transparent;
+  font-size: 0.9rem;
+  color: $white;
+
+  &::placeholder {
+    color: $white;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    border-color: $skip-red;
+  }
+}
+
 .filter-group {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-bottom: 1rem;
   gap: 0.5rem;
 }