Software engineer, available for freelance work! • he/him/his
Published
Edited
Oct 6, 2019
Importers
message({
header:'This is a header',
msg:html`And here is a really long body message where I describe something in more detail with maybe a <a href="www.google.com">link</a>`
})
avoidDarkMode({fakeIt:true})
underConstruction()
signOff()
// 1 passed to fake a forked repo - normally corsWarning() only shows when it's not a notebook owned by @asg017
corsWarning({fakeIt:true, rainbow:false})
message = function*(params={}) {
let {rainbow=true} = params
const header = params.header || params.title || params.head;
const msg = params.msg || params.body || params.message || (typeof params === 'string' && params) || '';
let container = html`
<div style="color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-weight: 750; border-radius:10px; padding:3px; text-align:center;">
<div style="font-size:32px;">${header||''}</div>
<div style="font-size:18px;">${msg}</div>
</div>`
if(rainbow) {
let i = 0
while(true) {
container.style.backgroundColor = rb(++i/1000)
yield container
}
}
yield container
}
avoidDarkMode = function(params={}) {
const {fakeIt=false} = params;
const hasDarkMode = document.querySelector('body').classList.contains('observablehq--dark');
if(fakeIt || hasDarkMode) {
return html`
<div style="background-color:var(--near-black); text-align:center;">
<span style="color:white; font-weight:700;font-size:28px;">WARNING</span>
<div>
This Notebook doesn't look that great in Observable's Dark mode - sorry! 😞
</div>
<div style="text-align:right; font-size:16px;">
<a href="https://beta.observablehq.com/settings"> Toggle your dark mode on/off here!</a>
</div>
</div>`
}
return html``
}
underConstruction = function*(params = {}) {
let { rainbow = true, toolbox = false, style = '' } = params;
let msg = html`
<div style="color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 32px; font-weight: 750; border-radius:10px; padding:3px; text-align:center;
${style}">
WARNING: This notebook is still under construction!
<br>
<a href="https://twitter.com/asg_027" style="color:#0ff;"><u>Follow me to hear when it's ready to go! @agarcia_me</u></a>
</div>
`;
if (rainbow) {
let i = 0;
while (true) {
msg.style.backgroundColor = rb(++i / 1000);
yield msg;
}
}
yield msg;
}
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.
