scripts.js

// Minimal client-side search & filters (no deps)
const state = { data: [], section: 'All', tag: null, q: '' };

const $ = (sel) => document.querySelector(sel);
const el = (tag, props = {}, ...children) => {
  const n = document.createElement(tag);
  Object.entries(props).forEach(([k, v]) => {
    if (k === 'class') n.className = v;
    else if (k === 'html') n.innerHTML = v;
    else n.setAttribute(k, v);
  });
  children.forEach(c => n.append(c));
  return n;
};

async function load() {
  // Load data/papers.json; if missing, fall back to a tiny embedded sample
  let data = [];
  try {
    const res = await fetch('data/papers.json', { cache: 'no-store' });
    if (res.ok) data = await res.json();
  } catch (_) {}
  if (!data.length) {
    data = [
      {
        "title": "Attention Is All You Need",
        "authors": ["Vaswani et al."],
        "venue": "NeurIPS",
        "year": 2017,
        "section": "Machine Learning",
        "tags": ["Transformers", "Sequence Modeling"],
        "link": "https://arxiv.org/abs/1706.03762",
        "reflection": "Why transformers beat RNNs for long dependencies; key insight: self-attention scales O(n^2) but parallelizes beautifully."
      }
    ];
  }
  state.data = data;

  // Auto-fill repo link if hosted on GitHub Pages
  const m = location.href.match(/^https:\/\/([^.]+)\.github\.io\/([^/?#]+)\//);
  if (m) {
    const [, user, repo] = m;
    const a = document.getElementById('repoLink');
    a.href = `https://github.com/${user}/${repo}`;
    a.hidden = false;
  }

  const sections = Array.from(new Set(state.data.map(x => x.section))).sort();
  renderSections(['All', ...sections]);
  renderTags();
  applyHash();
  render();
}

function renderSections(sections) {
  const wrap = $('#sections'); wrap.innerHTML = '';
  sections.forEach(name => {
    const active = state.section === name;
    const chip = el('button', { class: `chip ${active ? 'active' : ''}`, 'aria-pressed': active }, name);
    chip.onclick = () => { state.section = name; state.tag = null; updateHash(); render(); };
    wrap.append(chip);
  });
}

function renderTags() {
  const wrap = $('#tags'); wrap.innerHTML = '';
  const tags = new Map(); // tag -> count
  state.data.forEach(x => (x.tags || []).forEach(t => tags.set(t, (tags.get(t) || 0) + 1)));
  [...tags.entries()].sort((a,b)=>a[0].localeCompare(b[0])).forEach(([tag, count]) => {
    const active = state.tag === tag;
    const chip = el('button', { class: `chip ${active ? 'active':''}` }, `${tag} (${count})`);
    chip.onclick = () => { state.tag = active ? null : tag; updateHash(); render(); };
    wrap.append(chip);
  });
}

function searchFilter(item) {
  const q = state.q.trim().toLowerCase();
  if (!q) return true;
  const hay = [
    item.title, item.authors?.join(' '), item.venue, item.year, item.abstract,
    (item.tags||[]).join(' '), item.reflection
  ].filter(Boolean).join(' ').toLowerCase();
  return hay.includes(q);
}

function render() {
  const list = $('#list'); list.innerHTML = '';
  const filtered = state.data
    .filter(x => state.section === 'All' || x.section === state.section)
    .filter(x => !state.tag || (x.tags||[]).includes(state.tag))
    .filter(searchFilter);

  $('#stats').textContent = `${filtered.length} item(s) • Section: ${state.section}${state.tag ? ` • Tag: ${state.tag}` : ''}${state.q ? ` • Query: “${state.q}”` : ''}`;

  filtered
    .sort((a,b) => (b.year||0) - (a.year||0) || a.title.localeCompare(b.title))
    .forEach(p => {
      const card = el('article', { class:'card' });
      card.append(el('h3', {}, p.title));

      const metaBits = [
        p.authors?.join(', ') || '—',
        p.venue ? ` • ${p.venue}` : '',
        p.year ? ` • ${p.year}` : ''
      ].join('');
      card.append(el('div', { class:'meta' }, metaBits));

      if (p.abstract) card.append(el('p', {}, p.abstract));

      const badges = el('div', { class:'badges' });
      (p.tags || []).forEach(t => badges.append(el('span', { class:'badge'}, t)));
      badges.append(el('span', { class:'badge'}, p.section));
      card.append(badges);

      const links = el('div', {});
      if (p.pdf)  links.append(el('a', { class:'btn', href:p.pdf,  target:'_blank', rel:'noopener' }, 'PDF'));
      if (p.link) links.append(el('a', { class:'btn', href:p.link, target:'_blank', rel:'noopener' }, 'Publisher'));
      if (p.code) links.append(el('a', { class:'btn', href:p.code, target:'_blank', rel:'noopener' }, 'Code'));
      if (p.notes)links.append(el('a', { class:'btn', href:p.notes,target:'_blank', rel:'noopener' }, 'Notes'));
      card.append(links);

      // Paper Reflections (collapsible)
      if (p.reflection) {
        const details = el('details', { class: 'reflect' });
        const sum = el('summary', {}, 'Paper Reflections');
        const body = el('div', { class: 'reflect-body' }, p.reflection);
        details.append(sum, body);
        card.append(details);
      }

      list.append(card);
    });
}

function updateHash() {
  const params = new URLSearchParams();
  if (state.section && state.section !== 'All') params.set('section', state.section);
  if (state.tag) params.set('tag', state.tag);
  if (state.q) params.set('q', state.q);
  const hash = params.toString();
  history.replaceState(null, '', hash ? `#${hash}` : location.pathname);
}

function applyHash() {
  const params = new URLSearchParams(location.hash.replace(/^#/, ''));
  state.section = params.get('section') || state.section;
  state.tag = params.get('tag');
  state.q = params.get('q') || '';
  $('#search').value = state.q;
}

$('#search').addEventListener('input', (e) => { state.q = e.target.value; updateHash(); render(); });
window.addEventListener('hashchange', () => { applyHash(); render(); });

load();