datalog-theme 0.6.1 → 0.8.0

data/_includes/components/advanced-search.html

@@ -1,682 +0,0 @@
-{%- 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>