datalog-theme 0.6.0

data/_includes/components/reading-progress.html

@@ -0,0 +1,133 @@
+{%- comment -%}
+Reading Progress Tracker
+Displays a visual indicator of reading progress with time estimate
+
+Parameters:
+  - position: Position on page (top, bottom, sticky)
+  - show_time: Show time remaining estimate (default: true)
+  - show_percentage: Show percentage complete (default: true)
+{%- endcomment -%}
+
+{%- assign position = include.position | default: "top" -%}
+{%- assign show_time = include.show_time | default: true -%}
+{%- assign show_percentage = include.show_percentage | default: true -%}
+
+<div class="reading-progress reading-progress--{{ position }}" data-reading-progress aria-label="Reading progress">
+  {%- comment -%} Progress bar {%- endcomment -%}
+  <div class="reading-progress__bar">
+    <div class="reading-progress__fill"
+         data-progress-fill
+         role="progressbar"
+         aria-valuenow="0"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         aria-label="Reading progress percentage">
+    </div>
+  </div>
+
+  {%- comment -%} Progress stats {%- endcomment -%}
+  <div class="reading-progress__stats">
+    {%- if show_percentage -%}
+      <span class="reading-progress__percentage" data-progress-percentage aria-live="polite">
+        <span data-percentage-value>0</span>% complete
+      </span>
+    {%- endif -%}
+
+    {%- if show_time -%}
+      <span class="reading-progress__time" data-progress-time aria-live="polite">
+        <svg class="reading-progress__icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10"></circle>
+          <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        <span data-time-value>...</span> remaining
+      </span>
+    {%- endif -%}
+  </div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function() {
+    const progressContainer = document.querySelector('[data-reading-progress]');
+    if (!progressContainer) return;
+
+    const progressFill = progressContainer.querySelector('[data-progress-fill]');
+    const percentageValue = progressContainer.querySelector('[data-percentage-value]');
+    const timeValue = progressContainer.querySelector('[data-time-value]');
+
+    // Get article content for calculation
+    const articleContent = document.querySelector('.post-content, .article-content, article, main');
+    if (!articleContent) return;
+
+    // Calculate reading time (words per minute)
+    const wordsPerMinute = 200;
+    const text = articleContent.textContent || articleContent.innerText;
+    const wordCount = text.trim().split(/\s+/).length;
+    const totalReadingTime = Math.ceil(wordCount / wordsPerMinute);
+
+    // Track scroll position
+    let ticking = false;
+
+    function updateProgress() {
+      // Get scroll position
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      // Calculate progress percentage
+      const scrollableDistance = documentHeight - windowHeight;
+      const scrollPercentage = scrollableDistance > 0
+        ? Math.min(Math.max((scrollTop / scrollableDistance) * 100, 0), 100)
+        : 0;
+
+      // Update progress bar
+      if (progressFill) {
+        progressFill.style.width = scrollPercentage + '%';
+        progressFill.setAttribute('aria-valuenow', Math.round(scrollPercentage));
+      }
+
+      // Update percentage text
+      if (percentageValue) {
+        percentageValue.textContent = Math.round(scrollPercentage);
+      }
+
+      // Update time remaining
+      if (timeValue) {
+        const timeRemaining = Math.max(
+          Math.ceil(totalReadingTime * (1 - scrollPercentage / 100)),
+          0
+        );
+
+        if (timeRemaining === 0) {
+          timeValue.textContent = 'Complete!';
+        } else if (timeRemaining === 1) {
+          timeValue.textContent = '1 min';
+        } else {
+          timeValue.textContent = timeRemaining + ' min';
+        }
+      }
+
+      ticking = false;
+    }
+
+    function requestTick() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateProgress);
+        ticking = true;
+      }
+    }
+
+    // Listen to scroll events
+    window.addEventListener('scroll', requestTick, { passive: true });
+    window.addEventListener('resize', requestTick, { passive: true });
+
+    // Initial update
+    updateProgress();
+
+    // Update when images load
+    window.addEventListener('load', updateProgress);
+  });
+})();
+</script>

data/_includes/components/reading-time.html

@@ -0,0 +1,121 @@
+{%- comment -%}
+Reading Time Estimate Component
+Calculates and displays estimated reading time with metadata
+
+Parameters:
+  - content: Content to analyze (default: page.content)
+  - words_per_minute: Reading speed (default: 200)
+  - show_word_count: Show word count (default: false)
+  - show_icon: Show clock icon (default: true)
+  - variant: Display variant (inline, badge, detailed) (default: inline)
+{%- endcomment -%}
+
+{%- assign content_to_analyze = include.content | default: page.content -%}
+{%- assign words_per_minute = include.words_per_minute | default: 200 -%}
+{%- assign show_word_count = include.show_word_count | default: false -%}
+{%- assign show_icon = include.show_icon | default: true -%}
+{%- assign variant = include.variant | default: "inline" -%}
+
+{%- comment -%} Calculate word count {%- endcomment -%}
+{%- assign words = content_to_analyze | strip_html | number_of_words -%}
+
+{%- comment -%} Calculate reading time in minutes {%- endcomment -%}
+{%- assign reading_time_float = words | divided_by: words_per_minute | plus: 0.0 -%}
+{%- assign reading_time = reading_time_float | ceil -%}
+
+{%- comment -%} Handle edge cases {%- endcomment -%}
+{%- if reading_time < 1 -%}
+  {%- assign reading_time = 1 -%}
+{%- endif -%}
+
+{%- comment -%} Format reading time display {%- endcomment -%}
+{%- if reading_time == 1 -%}
+  {%- assign time_label = "1 min read" -%}
+{%- else -%}
+  {%- assign time_label = reading_time | append: " min read" -%}
+{%- endif -%}
+
+{%- comment -%} Calculate additional metrics for detailed variant {%- endcomment -%}
+{%- if variant == "detailed" -%}
+  {%- assign hours = reading_time | divided_by: 60 -%}
+  {%- assign remaining_minutes = reading_time | modulo: 60 -%}
+
+  {%- comment -%} Estimate based on different reading speeds {%- endcomment -%}
+  {%- assign slow_reading_time = words | divided_by: 150 | ceil -%}
+  {%- assign fast_reading_time = words | divided_by: 250 | ceil -%}
+{%- endif -%}
+
+<span class="reading-time reading-time--{{ variant }}"
+      data-reading-time
+      data-words="{{ words }}"
+      data-minutes="{{ reading_time }}"
+      itemscope
+      itemtype="https://schema.org/Article">
+
+  {%- if show_icon -%}
+    <svg class="reading-time__icon"
+         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">
+      <circle cx="12" cy="12" r="10"></circle>
+      <polyline points="12 6 12 12 16 14"></polyline>
+    </svg>
+  {%- endif -%}
+
+  {%- if variant == "detailed" -%}
+    <span class="reading-time__details">
+      <span class="reading-time__primary">
+        <strong class="reading-time__time" itemprop="timeRequired" content="PT{{ reading_time }}M">
+          {{ time_label }}
+        </strong>
+      </span>
+
+      <span class="reading-time__secondary">
+        <span class="reading-time__word-count">
+          {{ words }} words
+        </span>
+
+        {%- if hours >= 1 -%}
+          <span class="reading-time__alternative">
+            ({{ hours }}h {{ remaining_minutes }}m)
+          </span>
+        {%- endif -%}
+      </span>
+
+      <span class="reading-time__range">
+        <small>{{ fast_reading_time }}-{{ slow_reading_time }} min depending on speed</small>
+      </span>
+    </span>
+
+  {%- elsif variant == "badge" -%}
+    <span class="reading-time__badge">
+      <span class="reading-time__time" itemprop="timeRequired" content="PT{{ reading_time }}M">
+        {{ time_label }}
+      </span>
+      {%- if show_word_count -%}
+        <span class="reading-time__word-count">
+          {{ words }} words
+        </span>
+      {%- endif -%}
+    </span>
+
+  {%- else -%}
+    {%- comment -%} Inline variant (default) {%- endcomment -%}
+    <span class="reading-time__time" itemprop="timeRequired" content="PT{{ reading_time }}M">
+      {{ time_label }}
+    </span>
+    {%- if show_word_count -%}
+      <span class="reading-time__separator" aria-hidden="true">•</span>
+      <span class="reading-time__word-count">
+        {{ words }} words
+      </span>
+    {%- endif -%}
+  {%- endif -%}
+</span>

data/_includes/components/responsive-image.html

@@ -0,0 +1,63 @@
+{% assign image_src = include.src | to_s | strip %}
+{% assign alt_text = include.alt | to_s %}
+{% if image_src == '' or alt_text == '' %}
+  {% comment %}Missing required parameters{% endcomment %}
+  {% assign fallback_loading = include.loading | default: site.config.datalog_image_config.lazy_loading | default: 'lazy' %}
+  <img src="{{ image_src }}" alt="{{ alt_text }}" loading="{{ fallback_loading }}" decoding="async" />
+{% else %}
+  {% assign baseurl = site.baseurl | default: '' %}
+  {% assign manifest = site.data.datalog_responsive_images | default: {} %}
+  {% assign normalized_src = image_src %}
+  {% if normalized_src contains '://' %}
+    {% assign responsive_entry = nil %}
+  {% else %}
+    {% if baseurl != '' %}
+      {% assign normalized_src = normalized_src | replace_first: baseurl, '' %}
+    {% endif %}
+    {% assign site_url = site.url | default: '' %}
+    {% if site_url != '' %}
+      {% assign normalized_src = normalized_src | replace_first: site_url, '' %}
+    {% endif %}
+    {% assign normalized_src = normalized_src | prepend: '/' %}
+    {% assign normalized_src = normalized_src | replace: '//', '/' %}
+    {% assign responsive_entry = manifest[normalized_src] %}
+  {% endif %}
+  {% assign requested_sizes = include.sizes | default: site.config.datalog_image_config.default_sizes | default: '100vw' %}
+  {% assign loading_mode = include.loading | default: site.config.datalog_image_config.lazy_loading | default: 'lazy' %}
+  {% if responsive_entry %}
+    <picture>
+      {% for source in responsive_entry.sources %}
+        {% assign srcset_items = '' %}
+        {% for variant in source.variants %}
+          {% assign variant_url = variant.url | relative_url %}
+          {% assign descriptor = variant.width | append: 'w' %}
+          {% if forloop.first %}
+            {% assign srcset_items = variant_url | append: ' ' | append: descriptor %}
+          {% else %}
+            {% assign srcset_items = srcset_items | append: ', ' | append: variant_url | append: ' ' | append: descriptor %}
+          {% endif %}
+        {% endfor %}
+        <source type="{{ source.type }}" srcset="{{ srcset_items }}" sizes="{{ requested_sizes }}">
+      {% endfor %}
+      {% assign fallback_srcset = '' %}
+      {% for variant in responsive_entry.fallback.variants %}
+        {% assign variant_url = variant.url | relative_url %}
+        {% assign descriptor = variant.width | append: 'w' %}
+        {% if forloop.first %}
+          {% assign fallback_srcset = variant_url | append: ' ' | append: descriptor %}
+        {% else %}
+          {% assign fallback_srcset = fallback_srcset | append: ', ' | append: variant_url | append: ' ' | append: descriptor %}
+        {% endif %}
+      {% endfor %}
+      {% assign fallback_default = responsive_entry.fallback.variants | last %}
+      {% assign fallback_src = fallback_default.url | relative_url %}
+      <img src="{{ fallback_src }}" srcset="{{ fallback_srcset }}" sizes="{{ requested_sizes }}" alt="{{ alt_text }}" loading="{{ loading_mode }}" decoding="async"{% if responsive_entry.width %} width="{{ responsive_entry.width }}"{% endif %}{% if responsive_entry.height %} height="{{ responsive_entry.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %}>
+    </picture>
+  {% else %}
+    {% assign resolved_src = image_src %}
+    {% unless image_src contains '://' %}
+      {% assign resolved_src = image_src | relative_url %}
+    {% endunless %}
+    <img src="{{ resolved_src }}" alt="{{ alt_text }}" sizes="{{ requested_sizes }}" loading="{{ loading_mode }}" decoding="async"{% if include.class %} class="{{ include.class }}"{% endif %}>
+  {% endif %}
+{% endif %}

data/_includes/components/search-facets.html

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