Public
Edited
Mar 19, 2023
1 fork
Importers
// 2023.03: Christopher Rucinski: added note types with different colors
// 2022.06: Fabian Iwand's suggested improvement for Note:
function note(contents, type) {
const colors = {
yellow: {
background: "#FEF9E7",
text: "#856404"
},
red: {
background: "#F8D7DA",
text: "#721c24"
},
green: {
background: "#D4EDDA",
text: "#155724"
},
blue: {
background: "#D1ECF1",
text: "#0C5460"
},
black: {
background: "#E2E3E5",
text: "#383D41"
}
};
const color = colors[type] || colors["yellow"]; // fallback to "yellow" if type not recognized
const scope = type + "-" + DOM.uid("note").id;
const style = document.head.appendChild(htl.html`<style>
.${scope} {
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 0.8rem;
max-width: 640px;
border-radius: 8px;
font: 13px/1.5em var(--sans-serif);
color: ${color.text};
box-sizing: border-box;
background: ${color.background};
}
.${scope} code {
font-size: inherit;
}
`);
invalidation.then(() => style.remove());
return htl.html`<div class="${scope}">${contents}</div>`;
}
attention = (content) => { return note(content, "yellow"); }
attention("Hello World")
issue = (content) => {
return note(content, "red");
}
issue("Hello World")
information = (content) => {
return note(content, "blue");
}
information("Hello World")
extra = (content) => {
return note(content, "black");
}
extra("Hello World")
update = (content) => {
return note(content, "green");
}
update("Hello World")
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.
