card({
href: 'https://duckduckgo.com',
image:
'https://pbs.twimg.com/profile_images/467502291415617536/SP8_ylk9_400x400.png',
title: 'DuckDuckGo',
description: 'The search engine that doesn’t track you.',
meta: [
userMeta({ name: 'Dax', href: 'https://spreadprivacy.com/author/dax' })
],
imageFit: 'contain'
})
card = ({
cellName,
href,
image,
title,
description,
meta,
value,
imageFit,
maxWidth
}) => {
const display = html`<div class="${id}" style="max-width: ${Math.min(
maxWidth || 350,
width
)}px; padding-bottom: 0.5em;">
${style}
${
cellName
? html`<var class="observablehq--inspect">${cellName} =</var>`
: ''
}
<div class=item>
${
image
? !imageFit || imageFit === 'fit'
? html`<a href=${href} target="_blank"><img class=image src="${image}">`
: html`
<a
class=image
style="--src: url('${image}'); --fit: ${imageFit || 'cover'}"
href="${href}"
target="_blank"
></a>`
: ''
}
<div class=body>
<a class=title href="${href}" target="_blank">
${title}
${
description ? html`<div class=description>${description}</div>` : ''
}
</a>
${meta ? html`<div class=meta>${meta}</div>` : ''}
</div>
</div>
`;
requestAnimationFrame(() => {
new DotDotDot(display.querySelector('.description'), { watch: true });
});
if (value && value.then) {
value
.then(value => {
display.value = value;
display.dispatchEvent(new CustomEvent('input'));
})
.catch(err => {
display.outerHTML = `<pre style="color: red"><code>${err.stack}</code></pre>`;
});
} else {
display.value = value;
}
return display;
}
dateMeta = (isoDate, rendered = new Date(isoDate).toLocaleDateString()) =>
html`<time datetime="${isoDate}">${rendered}</time>`
userMeta = ({ avatar, name, href }) => html`
<a
class="owner"
href="${href}"
style="--avatar: url(${avatar})"
>
${name}
</a>
`
id = 'data-card-' + Math.random().toString(36).slice(2)
DotDotDot = import('https://bundle.run/dotdotdot-js@4.0.9?format=esm').then(
m => m.default
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
