datalog-theme 0.6.0

data/_includes/components/advanced-search.html

@@ -0,0 +1,682 @@
+{%- comment -%}
+Advanced Search System Component
+Full-text search with filters, highlighting, and sorting
+
+Parameters:
+  - show_filters: Show filter panel (default: true)
+  - show_sort: Show sort options (default: true)
+  - show_results_count: Show results count (default: true)
+  - highlight_matches: Highlight search matches (default: true)
+  - results_per_page: Results per page (default: 10)
+{%- endcomment -%}
+
+{%- assign show_filters = include.show_filters | default: true -%}
+{%- assign show_sort = include.show_sort | default: true -%}
+{%- assign show_results_count = include.show_results_count | default: true -%}
+{%- assign highlight_matches = include.highlight_matches | default: true -%}
+{%- assign results_per_page = include.results_per_page | default: 10 -%}
+
+<div class="advanced-search"
+     data-advanced-search
+     role="search"
+     aria-label="Advanced search">
+
+  <div class="advanced-search__header">
+    <div class="search-input-wrapper">
+      <svg class="search-input-wrapper__icon"
+           xmlns="http://www.w3.org/2000/svg"
+           width="20"
+           height="20"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           aria-hidden="true">
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+
+      <input type="search"
+             class="search-input-wrapper__input"
+             data-search-input
+             placeholder="Search posts, tags, categories..."
+             aria-label="Search"
+             autocomplete="off">
+
+      <button type="button"
+              class="search-input-wrapper__clear"
+              data-search-clear
+              aria-label="Clear search"
+              hidden>
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="18"
+             height="18"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <button type="button"
+            class="advanced-search__filter-toggle"
+            data-filter-toggle
+            aria-label="Toggle filters"
+            aria-expanded="false">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           width="18"
+           height="18"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           aria-hidden="true">
+        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+      </svg>
+      <span>Filters</span>
+      <span class="filter-count" data-filter-count hidden>0</span>
+    </button>
+  </div>
+
+  {%- if show_filters -%}
+    <div class="advanced-search__filters"
+         data-search-filters
+         hidden>
+
+      <div class="search-filter">
+        <h4 class="search-filter__title">Categories</h4>
+        <div class="search-filter__options" data-filter-group="category">
+          {%- assign all_categories = site.posts | map: "categories" | join: "," | split: "," | uniq | sort -%}
+          {%- for category in all_categories -%}
+            {%- if category != "" -%}
+              <label class="filter-checkbox">
+                <input type="checkbox"
+                       value="{{ category | slugify }}"
+                       data-filter="category">
+                <span>{{ category }}</span>
+                <span class="filter-checkbox__count">
+                  {%- assign cat_count = 0 -%}
+                  {%- for post in site.posts -%}
+                    {%- if post.categories contains category -%}
+                      {%- assign cat_count = cat_count | plus: 1 -%}
+                    {%- endif -%}
+                  {%- endfor -%}
+                  ({{ cat_count }})
+                </span>
+              </label>
+            {%- endif -%}
+          {%- endfor -%}
+        </div>
+      </div>
+
+      <div class="search-filter">
+        <h4 class="search-filter__title">Tags</h4>
+        <div class="search-filter__options search-filter__options--scrollable"
+             data-filter-group="tag">
+          {%- assign all_tags = site.posts | map: "tags" | join: "," | split: "," | uniq | sort -%}
+          {%- for tag in all_tags limit: 20 -%}
+            {%- if tag != "" -%}
+              <label class="filter-checkbox">
+                <input type="checkbox"
+                       value="{{ tag | slugify }}"
+                       data-filter="tag">
+                <span>{{ tag }}</span>
+              </label>
+            {%- endif -%}
+          {%- endfor -%}
+        </div>
+      </div>
+
+      <div class="search-filter">
+        <h4 class="search-filter__title">Difficulty</h4>
+        <div class="search-filter__options" data-filter-group="difficulty">
+          {%- assign difficulties = "beginner,intermediate,advanced,expert" | split: "," -%}
+          {%- for difficulty in difficulties -%}
+            <label class="filter-checkbox">
+              <input type="checkbox"
+                     value="{{ difficulty }}"
+                     data-filter="difficulty">
+              <span>{{ difficulty | capitalize }}</span>
+            </label>
+          {%- endfor -%}
+        </div>
+      </div>
+
+      <div class="search-filter">
+        <h4 class="search-filter__title">Date Range</h4>
+        <div class="search-filter__options">
+          <label class="filter-radio">
+            <input type="radio"
+                   name="dateRange"
+                   value="all"
+                   data-filter="date"
+                   checked>
+            <span>All time</span>
+          </label>
+          <label class="filter-radio">
+            <input type="radio"
+                   name="dateRange"
+                   value="week"
+                   data-filter="date">
+            <span>Past week</span>
+          </label>
+          <label class="filter-radio">
+            <input type="radio"
+                   name="dateRange"
+                   value="month"
+                   data-filter="date">
+            <span>Past month</span>
+          </label>
+          <label class="filter-radio">
+            <input type="radio"
+                   name="dateRange"
+                   value="year"
+                   data-filter="date">
+            <span>Past year</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="search-filter__actions">
+        <button type="button"
+                class="button button--secondary"
+                data-clear-filters>
+          Clear all filters
+        </button>
+      </div>
+    </div>
+  {%- endif -%}
+
+  <div class="advanced-search__toolbar">
+    {%- if show_results_count -%}
+      <div class="search-results-count" data-results-count>
+        <span data-count>0</span> results
+      </div>
+    {%- endif -%}
+
+    {%- if show_sort -%}
+      <div class="search-sort">
+        <label for="search-sort-select">Sort by:</label>
+        <select id="search-sort-select"
+                class="search-sort__select"
+                data-sort-select>
+          <option value="relevance">Relevance</option>
+          <option value="date-desc">Newest first</option>
+          <option value="date-asc">Oldest first</option>
+          <option value="title">Title (A-Z)</option>
+        </select>
+      </div>
+    {%- endif -%}
+  </div>
+
+  <div class="advanced-search__results" data-search-results>
+    <div class="search-empty-state" data-empty-state>
+      <svg xmlns="http://www.w3.org/2000/svg"
+           width="64"
+           height="64"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="1.5"
+           aria-hidden="true">
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+      <h3>Start searching</h3>
+      <p>Enter keywords to find relevant posts</p>
+    </div>
+
+    <div class="search-no-results" data-no-results hidden>
+      <svg xmlns="http://www.w3.org/2000/svg"
+           width="64"
+           height="64"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="1.5"
+           aria-hidden="true">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="8" x2="12" y2="12"></line>
+        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      </svg>
+      <h3>No results found</h3>
+      <p>Try adjusting your search or filters</p>
+    </div>
+
+    <div class="search-results-list" data-results-list></div>
+
+    <div class="search-pagination" data-pagination hidden></div>
+  </div>
+</div>
+
+{%- comment -%} Generate search index {%- endcomment -%}
+<script type="application/json" data-search-index>
+[
+  {%- for post in site.posts -%}
+    {
+      "id": "{{ post.id | slugify }}",
+      "title": {{ post.title | jsonify }},
+      "url": "{{ post.url | relative_url }}",
+      "excerpt": {{ post.excerpt | strip_html | truncatewords: 50 | jsonify }},
+      "content": {{ post.content | strip_html | jsonify }},
+      "date": "{{ post.date | date_to_xmlschema }}",
+      "categories": {{ post.categories | jsonify }},
+      "tags": {{ post.tags | jsonify }},
+      "difficulty": "{{ post.difficulty | default: '' }}",
+      "author": "{{ post.author | default: site.author.name }}",
+      "readingTime": {{ post.content | strip_html | number_of_words | divided_by: 200 | ceil }}
+    }{% unless forloop.last %},{% endunless %}
+  {%- endfor -%}
+]
+</script>
+
+<script>
+(function() {
+  'use strict';
+
+  class AdvancedSearch {
+    constructor() {
+      this.searchIndex = [];
+      this.filteredResults = [];
+      this.currentQuery = '';
+      this.filters = {
+        category: [],
+        tag: [],
+        difficulty: [],
+        date: 'all'
+      };
+      this.sortBy = 'relevance';
+      this.currentPage = 1;
+      this.resultsPerPage = {{ results_per_page }};
+
+      this.init();
+    }
+
+    init() {
+      this.loadSearchIndex();
+      this.cacheElements();
+      this.attachEventListeners();
+    }
+
+    loadSearchIndex() {
+      const indexEl = document.querySelector('[data-search-index]');
+      if (indexEl) {
+        try {
+          this.searchIndex = JSON.parse(indexEl.textContent);
+        } catch (e) {
+          console.error('Failed to load search index:', e);
+        }
+      }
+    }
+
+    cacheElements() {
+      this.container = document.querySelector('[data-advanced-search]');
+      if (!this.container) return;
+
+      this.input = this.container.querySelector('[data-search-input]');
+      this.clearBtn = this.container.querySelector('[data-search-clear]');
+      this.filterToggle = this.container.querySelector('[data-filter-toggle]');
+      this.filtersPanel = this.container.querySelector('[data-search-filters]');
+      this.resultsList = this.container.querySelector('[data-results-list]');
+      this.resultsCount = this.container.querySelector('[data-results-count]');
+      this.sortSelect = this.container.querySelector('[data-sort-select]');
+      this.emptyState = this.container.querySelector('[data-empty-state]');
+      this.noResults = this.container.querySelector('[data-no-results]');
+      this.pagination = this.container.querySelector('[data-pagination]');
+      this.filterCount = this.container.querySelector('[data-filter-count]');
+    }
+
+    attachEventListeners() {
+      if (!this.input) return;
+
+      // Search input
+      let searchTimeout;
+      this.input.addEventListener('input', (e) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          this.currentQuery = e.target.value.trim();
+          this.search();
+        }, 300);
+
+        this.clearBtn.hidden = !e.target.value;
+      });
+
+      // Clear button
+      this.clearBtn?.addEventListener('click', () => {
+        this.input.value = '';
+        this.currentQuery = '';
+        this.clearBtn.hidden = true;
+        this.search();
+      });
+
+      // Filter toggle
+      this.filterToggle?.addEventListener('click', () => {
+        const isHidden = this.filtersPanel.hidden;
+        this.filtersPanel.hidden = !isHidden;
+        this.filterToggle.setAttribute('aria-expanded', !isHidden);
+      });
+
+      // Filter checkboxes
+      const filterCheckboxes = this.container.querySelectorAll('[data-filter]');
+      filterCheckboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', () => {
+          this.updateFilters();
+          this.search();
+        });
+      });
+
+      // Clear filters
+      const clearFiltersBtn = this.container.querySelector('[data-clear-filters]');
+      clearFiltersBtn?.addEventListener('click', () => {
+        this.clearFilters();
+        this.search();
+      });
+
+      // Sort
+      this.sortSelect?.addEventListener('change', (e) => {
+        this.sortBy = e.target.value;
+        this.sortResults();
+        this.renderResults();
+      });
+    }
+
+    updateFilters() {
+      // Category filters
+      const categoryFilters = Array.from(
+        this.container.querySelectorAll('[data-filter="category"]:checked')
+      ).map(cb => cb.value);
+
+      // Tag filters
+      const tagFilters = Array.from(
+        this.container.querySelectorAll('[data-filter="tag"]:checked')
+      ).map(cb => cb.value);
+
+      // Difficulty filters
+      const difficultyFilters = Array.from(
+        this.container.querySelectorAll('[data-filter="difficulty"]:checked')
+      ).map(cb => cb.value);
+
+      // Date filter
+      const dateFilter = this.container.querySelector('[data-filter="date"]:checked')?.value || 'all';
+
+      this.filters = {
+        category: categoryFilters,
+        tag: tagFilters,
+        difficulty: difficultyFilters,
+        date: dateFilter
+      };
+
+      // Update filter count
+      const totalFilters = categoryFilters.length + tagFilters.length + difficultyFilters.length +
+                           (dateFilter !== 'all' ? 1 : 0);
+      if (this.filterCount) {
+        this.filterCount.textContent = totalFilters;
+        this.filterCount.hidden = totalFilters === 0;
+      }
+    }
+
+    clearFilters() {
+      const allCheckboxes = this.container.querySelectorAll('[data-filter]:checked');
+      allCheckboxes.forEach(cb => {
+        if (cb.type === 'checkbox') {
+          cb.checked = false;
+        } else if (cb.type === 'radio' && cb.value !== 'all') {
+          cb.checked = false;
+        } else if (cb.value === 'all') {
+          cb.checked = true;
+        }
+      });
+
+      this.filters = {
+        category: [],
+        tag: [],
+        difficulty: [],
+        date: 'all'
+      };
+
+      if (this.filterCount) {
+        this.filterCount.hidden = true;
+      }
+    }
+
+    search() {
+      if (!this.currentQuery && this.isFiltersEmpty()) {
+        this.showEmptyState();
+        return;
+      }
+
+      // Filter results
+      this.filteredResults = this.searchIndex.filter(post => {
+        // Text search
+        if (this.currentQuery) {
+          const query = this.currentQuery.toLowerCase();
+          const searchableText = `${post.title} ${post.excerpt} ${post.content} ${post.tags.join(' ')} ${post.categories.join(' ')}`.toLowerCase();
+          if (!searchableText.includes(query)) {
+            return false;
+          }
+        }
+
+        // Category filter
+        if (this.filters.category.length > 0) {
+          const postCategories = post.categories.map(c => c.toLowerCase().replace(/\s+/g, '-'));
+          if (!this.filters.category.some(f => postCategories.includes(f))) {
+            return false;
+          }
+        }
+
+        // Tag filter
+        if (this.filters.tag.length > 0) {
+          const postTags = post.tags.map(t => t.toLowerCase().replace(/\s+/g, '-'));
+          if (!this.filters.tag.some(f => postTags.includes(f))) {
+            return false;
+          }
+        }
+
+        // Difficulty filter
+        if (this.filters.difficulty.length > 0) {
+          if (!this.filters.difficulty.includes(post.difficulty.toLowerCase())) {
+            return false;
+          }
+        }
+
+        // Date filter
+        if (this.filters.date !== 'all') {
+          const postDate = new Date(post.date);
+          const now = new Date();
+          const daysDiff = (now - postDate) / (1000 * 60 * 60 * 24);
+
+          if (this.filters.date === 'week' && daysDiff > 7) return false;
+          if (this.filters.date === 'month' && daysDiff > 30) return false;
+          if (this.filters.date === 'year' && daysDiff > 365) return false;
+        }
+
+        return true;
+      });
+
+      // Calculate relevance scores for text search
+      if (this.currentQuery) {
+        this.filteredResults = this.filteredResults.map(post => {
+          const query = this.currentQuery.toLowerCase();
+          let score = 0;
+
+          // Title match (highest weight)
+          if (post.title.toLowerCase().includes(query)) score += 10;
+
+          // Exact title match
+          if (post.title.toLowerCase() === query) score += 50;
+
+          // Tags match
+          if (post.tags.some(t => t.toLowerCase().includes(query))) score += 5;
+
+          // Categories match
+          if (post.categories.some(c => c.toLowerCase().includes(query))) score += 5;
+
+          // Content match (lower weight)
+          const contentMatches = (post.content.toLowerCase().match(new RegExp(query, 'g')) || []).length;
+          score += Math.min(contentMatches, 10);
+
+          return { ...post, relevanceScore: score };
+        });
+      }
+
+      this.sortResults();
+      this.currentPage = 1;
+      this.renderResults();
+    }
+
+    sortResults() {
+      switch (this.sortBy) {
+        case 'relevance':
+          if (this.currentQuery) {
+            this.filteredResults.sort((a, b) => (b.relevanceScore || 0) - (a.relevanceScore || 0));
+          }
+          break;
+        case 'date-desc':
+          this.filteredResults.sort((a, b) => new Date(b.date) - new Date(a.date));
+          break;
+        case 'date-asc':
+          this.filteredResults.sort((a, b) => new Date(a.date) - new Date(b.date));
+          break;
+        case 'title':
+          this.filteredResults.sort((a, b) => a.title.localeCompare(b.title));
+          break;
+      }
+    }
+
+    renderResults() {
+      if (this.filteredResults.length === 0) {
+        this.showNoResults();
+        return;
+      }
+
+      this.emptyState.hidden = true;
+      this.noResults.hidden = true;
+      this.resultsList.hidden = false;
+
+      // Update count
+      if (this.resultsCount) {
+        const countEl = this.resultsCount.querySelector('[data-count]');
+        if (countEl) countEl.textContent = this.filteredResults.length;
+      }
+
+      // Pagination
+      const start = (this.currentPage - 1) * this.resultsPerPage;
+      const end = start + this.resultsPerPage;
+      const pageResults = this.filteredResults.slice(start, end);
+
+      // Render results
+      this.resultsList.innerHTML = pageResults.map(post => this.renderResultItem(post)).join('');
+
+      // Render pagination
+      this.renderPagination();
+    }
+
+    renderResultItem(post) {
+      const excerpt = this.highlightMatches(post.excerpt);
+      const title = this.highlightMatches(post.title);
+
+      return `
+        <article class="search-result">
+          <h3 class="search-result__title">
+            <a href="${post.url}">${title}</a>
+          </h3>
+          <p class="search-result__excerpt">${excerpt}</p>
+          <div class="search-result__meta">
+            <time datetime="${post.date}">
+              ${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
+            </time>
+            <span>•</span>
+            <span>${post.readingTime} min read</span>
+            ${post.difficulty ? `<span>•</span><span class="difficulty-badge difficulty-badge--${post.difficulty}">${post.difficulty}</span>` : ''}
+          </div>
+        </article>
+      `;
+    }
+
+    highlightMatches(text) {
+      if (!this.currentQuery || !{{ highlight_matches }}) return text;
+
+      const query = this.currentQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`(${query})`, 'gi');
+      return text.replace(regex, '<mark>$1</mark>');
+    }
+
+    renderPagination() {
+      const totalPages = Math.ceil(this.filteredResults.length / this.resultsPerPage);
+
+      if (totalPages <= 1) {
+        this.pagination.hidden = true;
+        return;
+      }
+
+      this.pagination.hidden = false;
+
+      const buttons = [];
+      for (let i = 1; i <= totalPages; i++) {
+        const isActive = i === this.currentPage;
+        buttons.push(`
+          <button type="button"
+                  class="pagination__button${isActive ? ' pagination__button--active' : ''}"
+                  data-page="${i}"
+                  ${isActive ? 'aria-current="page"' : ''}>
+            ${i}
+          </button>
+        `);
+      }
+
+      this.pagination.innerHTML = buttons.join('');
+
+      // Attach click handlers
+      this.pagination.querySelectorAll('[data-page]').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          this.currentPage = parseInt(e.target.dataset.page, 10);
+          this.renderResults();
+          this.resultsList.scrollIntoView({ behavior: 'smooth' });
+        });
+      });
+    }
+
+    showEmptyState() {
+      this.emptyState.hidden = false;
+      this.noResults.hidden = true;
+      this.resultsList.hidden = true;
+      this.pagination.hidden = true;
+
+      if (this.resultsCount) {
+        const countEl = this.resultsCount.querySelector('[data-count]');
+        if (countEl) countEl.textContent = '0';
+      }
+    }
+
+    showNoResults() {
+      this.emptyState.hidden = true;
+      this.noResults.hidden = false;
+      this.resultsList.hidden = true;
+      this.pagination.hidden = true;
+
+      if (this.resultsCount) {
+        const countEl = this.resultsCount.querySelector('[data-count]');
+        if (countEl) countEl.textContent = '0';
+      }
+    }
+
+    isFiltersEmpty() {
+      return this.filters.category.length === 0 &&
+             this.filters.tag.length === 0 &&
+             this.filters.difficulty.length === 0 &&
+             this.filters.date === 'all';
+    }
+  }
+
+  // Initialize
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => new AdvancedSearch());
+  } else {
+    new AdvancedSearch();
+  }
+})();
+</script>