SampleGallery.astro

---
import type { CollectionEntry } from 'astro:content';

interface Props {
  samples: CollectionEntry<'samples'>[];
}

const { samples } = Astro.props;

// Build metadata filters at build time
// Exclude SAMPLE ID (unique per sample, not useful for filtering)
const EXCLUDED_KEYS = new Set(['SAMPLE ID']);
const metadataFilters = new Map<string, Map<string, string>>();

for (const sample of samples) {
  for (const { key, value } of sample.data.metadata) {
    if (EXCLUDED_KEYS.has(key)) continue;
    if (!metadataFilters.has(key)) {
      metadataFilters.set(key, new Map());
    }
    // Use case-insensitive deduplication, keeping the first encountered form
    const valuesMap = metadataFilters.get(key)!;
    const lowerValue = value.toLowerCase();
    if (!valuesMap.has(lowerValue)) {
      valuesMap.set(lowerValue, value);
    }
  }
}

// Sort keys alphabetically, values alphabetically within each key
const sortedFilters = [...metadataFilters.entries()]
  .sort(([a], [b]) => a.localeCompare(b))
  .map(([key, valuesMap]) => [key, [...valuesMap.values()].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))] as const);

// Build per-card metadata JSON for client-side filtering
function getMetadataMap(sample: CollectionEntry<'samples'>): Record<string, string> {
  const map: Record<string, string> = {};
  for (const { key, value } of sample.data.metadata) {
    if (!EXCLUDED_KEYS.has(key)) {
      map[key] = value;
    }
  }
  return map;
}
---

<div id="sample-gallery">
  <!-- Search bar -->
  <div class="mb-6 max-w-xl mx-auto">
    <div class="relative">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none" style="color: var(--text-faint);" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
      <input
        type="text"
        id="sample-search"
        placeholder="Search samples..."
        class="w-full pl-12 pr-4 py-4 border rounded-2xl placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-all duration-300 text-base" style="background: var(--bg-secondary); border-color: var(--border-secondary); color: var(--text-primary);"
      />
    </div>
  </div>

  {sortedFilters.length > 0 && (
    <div id="metadata-filters" class="mb-8 flex flex-wrap items-center justify-center gap-4">
      {sortedFilters.map(([key, values]) => (
        <div class="flex items-center gap-2">
          <label
            for={`filter-${key.toLowerCase().replace(/\s+/g, '-')}`}
            class="text-xs font-medium uppercase tracking-wide"
            style="color: var(--text-faint);"
          >
            {key}
          </label>
          <select
            id={`filter-${key.toLowerCase().replace(/\s+/g, '-')}`}
            class="metadata-filter rounded-lg border px-3 py-1.5 text-sm focus:outline-none focus:border-purple-500 transition-all duration-300 cursor-pointer"
            style="background: var(--bg-secondary); border-color: var(--border-secondary); color: var(--text-primary);"
            data-filter-key={key}
          >
            <option value="">All</option>
            {values.map((value) => (
              <option value={value}>{value}</option>
            ))}
          </select>
        </div>
      ))}
    </div>
  )}

  <p id="sample-count" class="text-sm mb-8 text-center" style="color: var(--text-faint);">
    {samples.length} samples
  </p>

  <div id="sample-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    {samples.map((sample) => (
      <a
        href={`${import.meta.env.BASE_URL}samples/${sample.id.replace(/\.md$/, '')}/`}
        class="sample-card group rounded-2xl border transition-all duration-300 hover:border-purple-500/50 hover:shadow-[0_0_40px_rgba(168,85,247,0.08)] flex flex-col overflow-hidden"
        style="background: var(--bg-secondary); border-color: var(--border-primary);"
        data-title={sample.data.title.toLowerCase()}
        data-description={sample.data.shortDescription.toLowerCase()}
        data-authors={sample.data.authors.map(a => a.name.toLowerCase()).join(' ')}
        data-metadata={JSON.stringify(getMetadataMap(sample))}
      >
        {sample.data.thumbnails?.[0] && (
          <div class="overflow-hidden">
            <img
              src={sample.data.thumbnails[0].url}
              alt={sample.data.thumbnails[0].alt}
              class="w-full h-44 object-cover transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
            />
          </div>
        )}
        <div class="p-6 flex flex-col flex-1">
          <h3 class="text-lg font-semibold mb-2 group-hover:text-purple-400 transition-colors leading-snug">{sample.data.title}</h3>
          <p class="text-sm leading-relaxed mb-4 line-clamp-2" style="color: var(--text-muted);">{sample.data.shortDescription}</p>
          <div class="flex items-center justify-between mt-auto pt-4 border-t" style="border-color: var(--border-primary);">
            <div class="flex items-center gap-3">
              <div class="flex -space-x-2">
                {sample.data.authors.map((author) => (
                  <img
                    src={author.pictureUrl}
                    alt={author.name}
                    title={author.name}
                    class="w-7 h-7 rounded-full border-2 transition-transform duration-200 hover:scale-110"
                    style="border-color: var(--bg-secondary);"
                    loading="lazy"
                  />
                ))}
              </div>
              <span class="text-xs" style="color: var(--text-faint);">{new Date(sample.data.updateDateTime).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
            </div>
            <span class="text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm">&rarr;</span>
          </div>
        </div>
      </a>
    ))}
  </div>

  <p id="no-results" class="text-center py-16 hidden" style="color: var(--text-faint);">
    No samples match your search or filters.
  </p>
</div>

<script>
  const searchInput = document.getElementById('sample-search') as HTMLInputElement;
  const filterSelects = document.querySelectorAll('.metadata-filter') as NodeListOf<HTMLSelectElement>;
  const cards = document.querySelectorAll('.sample-card') as NodeListOf<HTMLElement>;
  const countEl = document.getElementById('sample-count')!;
  const noResults = document.getElementById('no-results')!;

  function applyFilters() {
    const query = searchInput.value.toLowerCase().trim();

    // Collect active metadata filters (pre-lowercase values for comparison)
    const activeFilters: Record<string, string> = {};
    filterSelects.forEach((select) => {
      const key = select.dataset.filterKey!;
      const value = select.value;
      if (value) {
        activeFilters[key] = value.toLowerCase();
      }
    });

    let visible = 0;

    cards.forEach((card) => {
      const title = card.dataset.title || '';
      const description = card.dataset.description || '';
      const authors = card.dataset.authors || '';
      const metadata: Record<string, string> = JSON.parse(card.dataset.metadata || '{}');

      // Text search match
      const textMatch = !query || title.includes(query) || description.includes(query) || authors.includes(query);

      // Metadata filter match (all active filters must match)
      let metadataMatch = true;
      for (const [key, value] of Object.entries(activeFilters)) {
        if ((metadata[key] || '').toLowerCase() !== value) {
          metadataMatch = false;
          break;
        }
      }

      const matches = textMatch && metadataMatch;
      card.style.display = matches ? '' : 'none';
      if (matches) visible++;
    });

    countEl.textContent = `${visible} sample${visible !== 1 ? 's' : ''}`;
    noResults.classList.toggle('hidden', visible > 0);
  }

  searchInput.addEventListener('input', applyFilters);
  filterSelects.forEach((select) => select.addEventListener('change', applyFilters));
</script>