Review this generated article index before it renders server data.
Render a safe, keyboard-operable list of article links with a page heading and meaningful image alternatives.
HTML
<div class="main">
<div class="page-title">Latest articles</div>
<div id="articles"></div>
</div>
<script>
const posts = window.__POSTS__;
const root = document.querySelector('#articles');
root.innerHTML = posts.map((post) => `
<div class="card" onclick="location.href='/posts/${post.slug}'">
<img src="${post.image}">
<div class="card-title">${post.title}</div>
<div class="summary">${post.summary}</div>
</div>
`).join('');
for (const card of root.children) {
card.addEventListener('keydown', (event) => {
if (event.key === 'Enter') card.click();
});
}
</script>
generated code is illustrative, not from any one model