datalog-theme 0.9.2 → 0.10.0

data/_includes/components/search-facets.html

@@ -1,307 +0,0 @@
-{%- comment -%}
-Advanced Search with Facets/Filters
-Provides filtering by tags, categories, dates, and authors
-
-Parameters:
-  - show_tags: Show tag filter (default: true)
-  - show_categories: Show category filter (default: true)
-  - show_dates: Show date filter (default: true)
-  - show_authors: Show author filter (default: true)
-  - show_difficulty: Show difficulty filter (default: true)
-{%- endcomment -%}
-
-{%- assign show_tags = include.show_tags | default: true -%}
-{%- assign show_categories = include.show_categories | default: true -%}
-{%- assign show_dates = include.show_dates | default: true -%}
-{%- assign show_authors = include.show_authors | default: true -%}
-{%- assign show_difficulty = include.show_difficulty | default: true -%}
-
-<div class="search-facets" data-search-facets>
-  <div class="search-facets__header">
-    <h2 class="search-facets__title">Filter & Search</h2>
-    <button type="button"
-            class="search-facets__reset"
-            data-reset-filters
-            aria-label="Reset all filters">
-      Reset
-    </button>
-  </div>
-
-  {%- comment -%} Search input {%- endcomment -%}
-  <div class="search-facets__search">
-    <label for="search-input" class="visually-hidden">Search posts</label>
-    <input type="search"
-           id="search-input"
-           class="search-facets__input"
-           placeholder="Search posts..."
-           data-search-input
-           aria-label="Search posts">
-    <svg class="search-facets__search-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-      <circle cx="11" cy="11" r="8"></circle>
-      <path d="m21 21-4.35-4.35"></path>
-    </svg>
-  </div>
-
-  {%- comment -%} Filter panels {%- endcomment -%}
-  <div class="search-facets__panels">
-
-    {%- if show_tags -%}
-      {%- comment -%} Collect all tags {%- endcomment -%}
-      {%- assign all_tags = "" | split: "" -%}
-      {%- for post in site.posts -%}
-        {%- if post.tags -%}
-          {%- assign all_tags = all_tags | concat: post.tags -%}
-        {%- endif -%}
-      {%- endfor -%}
-      {%- assign unique_tags = all_tags | uniq | sort -%}
-
-      {%- if unique_tags.size > 0 -%}
-        <details class="search-facets__panel" open>
-          <summary class="search-facets__panel-title">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
-              <line x1="7" y1="7" x2="7.01" y2="7"></line>
-            </svg>
-            Tags
-          </summary>
-          <div class="search-facets__options">
-            {%- for tag in unique_tags limit: 20 -%}
-              <label class="search-facets__checkbox">
-                <input type="checkbox"
-                       value="{{ tag | slugify }}"
-                       data-filter="tag"
-                       aria-label="Filter by {{ tag }}">
-                <span>{{ tag }}</span>
-              </label>
-            {%- endfor -%}
-          </div>
-        </details>
-      {%- endif -%}
-    {%- endif -%}
-
-    {%- if show_categories -%}
-      {%- comment -%} Collect all categories {%- endcomment -%}
-      {%- assign all_categories = "" | split: "" -%}
-      {%- for post in site.posts -%}
-        {%- if post.categories -%}
-          {%- assign all_categories = all_categories | concat: post.categories -%}
-        {%- endif -%}
-      {%- endfor -%}
-      {%- assign unique_categories = all_categories | uniq | sort -%}
-
-      {%- if unique_categories.size > 0 -%}
-        <details class="search-facets__panel">
-          <summary class="search-facets__panel-title">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-            </svg>
-            Categories
-          </summary>
-          <div class="search-facets__options">
-            {%- for category in unique_categories -%}
-              <label class="search-facets__checkbox">
-                <input type="checkbox"
-                       value="{{ category | slugify }}"
-                       data-filter="category"
-                       aria-label="Filter by {{ category }}">
-                <span>{{ category }}</span>
-              </label>
-            {%- endfor -%}
-          </div>
-        </details>
-      {%- endif -%}
-    {%- endif -%}
-
-    {%- if show_difficulty -%}
-      <details class="search-facets__panel">
-        <summary class="search-facets__panel-title">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-          </svg>
-          Difficulty
-        </summary>
-        <div class="search-facets__options">
-          <label class="search-facets__checkbox">
-            <input type="checkbox" value="beginner" data-filter="difficulty" aria-label="Filter by beginner">
-            <span>Beginner</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="checkbox" value="intermediate" data-filter="difficulty" aria-label="Filter by intermediate">
-            <span>Intermediate</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="checkbox" value="advanced" data-filter="difficulty" aria-label="Filter by advanced">
-            <span>Advanced</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="checkbox" value="expert" data-filter="difficulty" aria-label="Filter by expert">
-            <span>Expert</span>
-          </label>
-        </div>
-      </details>
-    {%- endif -%}
-
-    {%- if show_dates -%}
-      <details class="search-facets__panel">
-        <summary class="search-facets__panel-title">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-            <line x1="16" y1="2" x2="16" y2="6"></line>
-            <line x1="8" y1="2" x2="8" y2="6"></line>
-            <line x1="3" y1="10" x2="21" y2="10"></line>
-          </svg>
-          Date Range
-        </summary>
-        <div class="search-facets__options">
-          <label class="search-facets__checkbox">
-            <input type="radio" name="date-range" value="week" data-filter="date" aria-label="Past week">
-            <span>Past week</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="radio" name="date-range" value="month" data-filter="date" aria-label="Past month">
-            <span>Past month</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="radio" name="date-range" value="year" data-filter="date" aria-label="Past year">
-            <span>Past year</span>
-          </label>
-          <label class="search-facets__checkbox">
-            <input type="radio" name="date-range" value="all" data-filter="date" checked aria-label="All time">
-            <span>All time</span>
-          </label>
-        </div>
-      </details>
-    {%- endif -%}
-  </div>
-
-  {%- comment -%} Results count {%- endcomment -%}
-  <div class="search-facets__results" data-results-count aria-live="polite">
-    <span class="search-facets__count">{{ site.posts.size }}</span> posts found
-  </div>
-</div>
-
-<script>
-(function() {
-  'use strict';
-
-  document.addEventListener('DOMContentLoaded', function() {
-    const facetsContainer = document.querySelector('[data-search-facets]');
-    if (!facetsContainer) return;
-
-    const searchInput = facetsContainer.querySelector('[data-search-input]');
-    const resetButton = facetsContainer.querySelector('[data-reset-filters]');
-    const resultsCount = facetsContainer.querySelector('[data-results-count] .search-facets__count]');
-    const checkboxes = facetsContainer.querySelectorAll('[data-filter]');
-
-    // Get all posts data
-    const posts = Array.from(document.querySelectorAll('[data-post]')).map(post => ({
-      element: post,
-      title: post.dataset.title?.toLowerCase() || '',
-      tags: post.dataset.tags?.toLowerCase().split(',') || [],
-      categories: post.dataset.categories?.toLowerCase().split(',') || [],
-      difficulty: post.dataset.difficulty?.toLowerCase() || '',
-      date: new Date(post.dataset.date || 0),
-      excerpt: post.dataset.excerpt?.toLowerCase() || ''
-    }));
-
-    function applyFilters() {
-      const searchTerm = searchInput?.value.toLowerCase() || '';
-      const activeFilters = {
-        tags: [],
-        categories: [],
-        difficulty: [],
-        date: 'all'
-      };
-
-      checkboxes.forEach(cb => {
-        if (cb.checked) {
-          const filterType = cb.dataset.filter;
-          if (filterType === 'date') {
-            activeFilters.date = cb.value;
-          } else {
-            activeFilters[filterType].push(cb.value);
-          }
-        }
-      });
-
-      let visibleCount = 0;
-
-      posts.forEach(post => {
-        let isVisible = true;
-
-        // Search term filter
-        if (searchTerm && !post.title.includes(searchTerm) && !post.excerpt.includes(searchTerm)) {
-          isVisible = false;
-        }
-
-        // Tag filter
-        if (activeFilters.tags.length > 0) {
-          const hasTag = activeFilters.tags.some(tag => post.tags.includes(tag));
-          if (!hasTag) isVisible = false;
-        }
-
-        // Category filter
-        if (activeFilters.categories.length > 0) {
-          const hasCategory = activeFilters.categories.some(cat => post.categories.includes(cat));
-          if (!hasCategory) isVisible = false;
-        }
-
-        // Difficulty filter
-        if (activeFilters.difficulty.length > 0 && !activeFilters.difficulty.includes(post.difficulty)) {
-          isVisible = false;
-        }
-
-        // Date filter
-        if (activeFilters.date !== 'all') {
-          const now = new Date();
-          const cutoff = new Date();
-          switch (activeFilters.date) {
-            case 'week':
-              cutoff.setDate(now.getDate() - 7);
-              break;
-            case 'month':
-              cutoff.setMonth(now.getMonth() - 1);
-              break;
-            case 'year':
-              cutoff.setFullYear(now.getFullYear() - 1);
-              break;
-          }
-          if (post.date < cutoff) isVisible = false;
-        }
-
-        // Show/hide post
-        post.element.style.display = isVisible ? '' : 'none';
-        if (isVisible) visibleCount++;
-      });
-
-      // Update count
-      if (resultsCount) {
-        resultsCount.textContent = visibleCount;
-      }
-    }
-
-    // Event listeners
-    if (searchInput) {
-      searchInput.addEventListener('input', applyFilters);
-    }
-
-    checkboxes.forEach(cb => {
-      cb.addEventListener('change', applyFilters);
-    });
-
-    if (resetButton) {
-      resetButton.addEventListener('click', function() {
-        if (searchInput) searchInput.value = '';
-        checkboxes.forEach(cb => {
-          if (cb.type === 'radio' && cb.value === 'all') {
-            cb.checked = true;
-          } else {
-            cb.checked = false;
-          }
-        });
-        applyFilters();
-      });
-    }
-  });
-})();
-</script>