function preview({ path, title, author, thumbnail, date }) {
return html`<a href="https://observablehq.com/${encodeURI(
path
)}" target="_blank" title="${title} by ${author}" style="display: flex; align-items: center; font-family: var(--sans-serif); max-width: 600px; margin-bottom: 1rem;" onmouseover=${event =>
(event.currentTarget.firstElementChild.style.borderColor =
"#1b1e23")} onmouseout=${event =>
(event.currentTarget.firstElementChild.style.borderColor = "#e8e8e8")}>
<div style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 200px; height: 100px; background-size: cover; background-image: url(https://static.observableusercontent.com/thumbnail/${encodeURI(
thumbnail
)}.jpg);"></div>
<div style="width: 100%; padding-left: 1rem;"><div style="font-size: 0.875rem; font-weight: 600; color: #1c1c1c;">${title}</div><div style="font-size: 0.75rem; color: #929292; font-weight: 500;">${formatDate(
date
)}</div></div>
</a>`;
}