collapsedCSS('Your Label here')`
blockquote {
border-left: 1px solid currentColor;
margin-left: 0;
padding-left: 0.5em;
}
`
collapsedCSS`
blockquote {
border-left: 1px solid currentColor;
margin-left: 0;
padding-left: 0.5em;
}
`
viewof style = css`
blockquote {
border-left: 1px solid currentColor;
margin-left: 0;
padding-left: 0.5em;
}
`
style
viewof style2 = css({ transform: css => css.replace(/:scope/g, '.foo') })`
:scope h3 {
font-size: 1.5em;
}
`
style2.textContent
viewof style3 = collapsedCSS({
transform: css => css.replace(/:scope/g, '.bar')
})`
:scope h3 {
font-size: 1.5em;
}
`
style3.textContent
css = tagWithOptions(({ transform }) => (...args) => {
const source = interpolate(...args);
const style = html`<style>`;
style.textContent = transform ? transform(source) : source;
const el = md`
~~~css
${source}
~~~
${style}
`;
el.value = style.cloneNode(true);
return el;
})
collapsedCSS = tagWithOptions(opts => (...args) => {
if (typeof opts === 'string') {
opts = { title: opts };
}
const content = css(opts)(...args);
const el = html`
<details>
<summary style="cursor: pointer; user-select: none">${opts.title ||
'CSS'}</summary>
${content}
</details>
`;
el.value = content.value;
return el;
})
tagWithOptions = impl => (...args) => {
if (!Array.isArray(args[0])) {
return impl(args[0]);
}
return impl({})(...args);
}
interpolate = (strings, ...interpolations) => {
let s = '';
for (let i = 0; i < strings.length; i++) {
s += strings[i];
if (i < interpolations.length && interpolations[i]) {
s += String(interpolations[i]);
}
}
return dedent(s);
}
dedent = (await import('https://unpkg.com/dentist@1.0.3/src/index.js')).dedent
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.
