Let me preface the following suggestions by saying that I love this notebook and its UI!
However, I see a few problems with the current implementation:
1. The way _.once is used, the script gets attached on every cell evaluation. I recommend to reference the style element via ID instead.
2. lodash is only included for _.once and _.truncate, and both can be replaced with short pure JS implementations, which allows the dependency to be removed.
3. makeApi() only takes a class name as argument, requiring all style definitions to be present. I recommend to allow a second parameter that takes CSS and attaches it.
4. CSS selector conflicts are rare, but awkward when they happen. I suggest to use a configurable prefix that can either be inserted into stylesheets dynamically or set to a static value.
If you're open to these suggestions, I'd be happy to create an MR for you to review.
Thank you both for your comments! Martin, I agree that's a nice feature idea and sounds pretty simple. I'll look into that.
Fabian, MR welcome, although I've never seen one on Observable before, so we'll have to fumble through me learning that process together. More detailed responses below:
1. Once was used because I was having issues where the styles were being attached to the DOM multiple times. Happy to find a better solution, it was always kind of a hack. But, I'm pretty sure right now the style only gets attached once.
2. Happy to remove the lodash dep or keep it.
3. I think this makes a lot of sense!
4. This is wise, we should do this
Hi Zeke, Fabian. I came across this notebook while looking for a succinct way to add banner-style notes to my notebooks and was really taken with your concept of replacing my confusing mess of comments with explicit in-line notes and your simple interface for it.
One thing I felt was missing, however, was the ability to add arbitrary new note types, so I forked your notebook and implemented that, along with (more or less) Fabian's other recommendations. My javascript generally leaves much to be desired, but it does seems to be working, so do check it out if you feel inclined.
The markup seems odd here, the wrapper div tag closes within the button element's tag before the button element tag closes. Observable's HTML templating seems to handle it correctly but might be more clear to correctly nest the div and button tags.