Marcos Paulo
aae4d42229
Adds the agent-facing workspace and a 20-task plan for migrating the site to Astro. Nothing here implements the refactor; these are briefs, rules and templates that the task agents read. - .agents/ holds context, rules, checklists, skills, specialist agents, component/page/config templates and gate scripts. It is vendor-neutral so MiniMax, Gemini and Codex can all read it; CLAUDE.md just points at AGENTS.md. - .husky/ plus .lintstagedrc.json wire the three gate tiers. gate.sh locks on the shared git-common-dir so parallel worktrees serialise, and guards the assertion count in scripts/verify.mjs against a coverage drop. - plans/astro-refactor/ carries the phase graph, per-task briefs and the model-routing recommendation. These files must be tracked before fanning out: a worktree only checks out tracked files, so an untracked plan is invisible to every agent working in one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
---
|
|
// Interactive island template. Use ONLY when the component genuinely needs
|
|
// client-side behaviour, and write the justification in your PR description.
|
|
//
|
|
// Islands are LEAVES. Do not wrap static children that could have been
|
|
// server-rendered — hydrate the tab panel, not the page.
|
|
//
|
|
// Hydration preference, in order:
|
|
// (none) → client:visible → client:idle → client:load
|
|
//
|
|
// Usage: <Island client:visible items={items} />
|
|
|
|
interface Props {
|
|
items: { id: string; label: string; body: string }[];
|
|
initialId?: string;
|
|
}
|
|
|
|
const { items, initialId = items[0]?.id } = Astro.props;
|
|
---
|
|
|
|
<div class="island" data-initial={initialId}>
|
|
<div class="tabs" role="tablist" aria-label="Sections">
|
|
{items.map((item) => (
|
|
<button
|
|
role="tab"
|
|
id={`tab-${item.id}`}
|
|
aria-controls={`panel-${item.id}`}
|
|
aria-selected={item.id === initialId}
|
|
data-tab={item.id}
|
|
>{item.label}</button>
|
|
))}
|
|
</div>
|
|
{items.map((item) => (
|
|
<div
|
|
role="tabpanel"
|
|
id={`panel-${item.id}`}
|
|
aria-labelledby={`tab-${item.id}`}
|
|
data-panel={item.id}
|
|
hidden={item.id !== initialId}
|
|
>{item.body}</div>
|
|
))}
|
|
</div>
|
|
|
|
<script>
|
|
// Scoped to this island's own root so multiple instances never collide.
|
|
document.querySelectorAll<HTMLElement>('.island').forEach((root) => {
|
|
const tabs = root.querySelectorAll<HTMLButtonElement>('[data-tab]');
|
|
const select = (id: string) => {
|
|
tabs.forEach((tab) => tab.setAttribute('aria-selected', String(tab.dataset.tab === id)));
|
|
root.querySelectorAll<HTMLElement>('[data-panel]').forEach((panel) => {
|
|
panel.hidden = panel.dataset.panel !== id;
|
|
});
|
|
};
|
|
tabs.forEach((tab) => tab.addEventListener('click', () => select(tab.dataset.tab!)));
|
|
|
|
// Arrow-key navigation is required for role="tablist" — see
|
|
// .agents/rules/accessibility.md
|
|
root.querySelector('[role="tablist"]')?.addEventListener('keydown', (event) => {
|
|
const key = (event as KeyboardEvent).key;
|
|
if (key !== 'ArrowRight' && key !== 'ArrowLeft') return;
|
|
const list = [...tabs];
|
|
const current = list.findIndex((tab) => tab.getAttribute('aria-selected') === 'true');
|
|
const next = list[(current + (key === 'ArrowRight' ? 1 : -1) + list.length) % list.length];
|
|
select(next.dataset.tab!);
|
|
next.focus();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.tabs { display: grid; gap: 8px; }
|
|
|
|
button {
|
|
padding: 12px;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
/* transform/opacity only — never animate layout properties */
|
|
transition: background 180ms cubic-bezier(.2, 0, 0, 1);
|
|
}
|
|
|
|
button[aria-selected='true'] {
|
|
color: var(--paper);
|
|
background: var(--ink);
|
|
}
|
|
|
|
button:focus-visible {
|
|
outline: 3px solid var(--red);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
button { transition-duration: .01ms; }
|
|
}
|
|
</style>
|