Refactor to D7460N architecture: separate structure from data

[Copilot]

JSON files contained formulaic HTML structure in content fields. This couples presentation with data and prevents proper separation of concerns.

Changes

Structure → HTML

Created index.html at root with semantic custom elements as data targets:

<app-container>
  <header>
    <app-logo>🎭 EASTER Knowledge Base</app-logo>
  </header>
  <nav>
    <label>
      Introduction
      <input type="radio" name="nav" value="introduction" checked>
    </label>
    <!-- ... -->
  </nav>
  <main>
    <article>
      <app-document-list><ol></ol></app-document-list>
    </article>
  </main>
  <aside>
    <app-document-detail>
      <app-document-title></app-document-title>
      <app-document-content></app-document-content>
    </app-document-detail>
  </aside>
</app-container>

UI Logic → CSS

All state management via CSS using :checked, :has(), :empty:

/* Navigation state */
nav label:has(input:checked) {
  background: var(--color-primary);
  font-weight: 600;
}

/* Show aside when document loaded */
aside:has(app-document-title:not(:empty)) {
  display: block;
}

/* Holy Grail layout */
app-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 3fr) minmax(200px, 1fr);
  grid-template-rows: auto auto 1fr auto;
}

Data Transport → JS

Minimal JavaScript for CRUD only:

// Data fetch + inject, no UI logic
async function loadCategory(categoryName) {
  const response = await fetch(`./assets/data/${categoryName}.json`);
  const data = await response.json();
  
  // Inject into empty semantic tags
  document.querySelector('app-category-name').textContent = data.name;
  
  const list = document.querySelector('app-document-list ol');
  data.documents.forEach(doc => {
    const li = document.createElement('li');
    li.setAttribute('data-id', doc.id);
    // ... inject doc elements
    list.appendChild(li);
  });
}

Data Structure

JSON remains unchanged - content field still contains HTML for document bodies, but structural elements moved to index.html.

Architecture Adherence

• ✅ HTML = structure (semantic custom elements, no classes/IDs)
• ✅ CSS = all UI logic, layout, state (Grid, :checked, :has())
• ✅ JS = data transport only (fetch, inject, oninput)
• ✅ Zero dependencies, no inline styles/scripts
• ✅ Progressive enhancement (structure exists without JS)

Screenshots

Category view with document list:

Document detail in aside:

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.