collapsible echos

[declann]

Hi,

```js echo

is neat for documentation. I'm also using it to expose code for some visualizations, example:

https://declann.observablehq.cloud/calculang-dx-pattern-exampling/graphing-calcs/graphing-calcs

Here I added a manual collapsible code block also, using details tag (what Quarto does).

For me collapsible is more ergonomic and even moreso for inclusion in dashboards.

With CSS it might be possible to achieve some similar effect.

But are there plans to add a echo collapsible option?

Thanks Declan

[Fil]

interesting idea; can you share the project publicly?

[declann]

It's here: https://github.com/declann/calculang-develop-with-framework/blob/main/docs/graphing-calcs/graphing-calcs.md

It's not a new idea. Quarto does this, example on my blog: https://calcwithdec.dev/posts/hearty-maths/

Observable notebooks also collapse code, but is a bit more elaborate obviously :)

[mythmon]

@declann if you want you can also make the project link from your original post public, so the link https://declann.observablehq.cloud/calculang-dx-pattern-exampling/graphing-calcs/graphing-calcs works for us.

To do that, you can go to https://observablehq.com/projects/@declann, and using the three-dots-menu on the right, open the "Share" modal. (way on the edge. In retrospect that's probably too hidden) From there you can set it to be viewable by the public:

[declann]

Oh, I had no idea my project was private!

It's public now!

Thanks @mythmon

[declann]

Hi,

A simple workaround to add collabsible echos is the following JS code block in a page:

```js
// wrap echoed source code by details tag
document.querySelectorAll('.observablehq-pre-container').forEach(el => {
  let wrapper = document.createElement('details');
  wrapper.className = 'code'
  let summary = document.createElement('summary')
  summary.textContent = "code 👀"
  wrapper.appendChild(summary)
  el.parentNode.insertBefore(wrapper, el);
  wrapper.appendChild(el);
});

used here. My rushed styling is trying to make the feature discreet: the important thing is that the code is present and accessible (in the right place) and I don't need to maintain a copy of it for presentation:

code where I include the block above: https://raw.githubusercontent.com/declann/calculang-develop-with-framework/main/docs/pi-lattice.md

Styling I currently use (no styling is better if you don't want to be as discreet as me):

.code > summary {
  opacity: 0.6;
  font-size: 0.8em;
  font-family: monospace;
}
.code > summary:hover {
  opacity: 1;
  font-size: 0.8em;
  font-family: monospace;
}

.code > summary::marker {
  content: '' 
}

In this exact case I show 3x JS blocks that are needed for reactivity purposes. An alternative workaround that lets me control the grouping is to simply put the blocks inside a html details tag - this works - so manual collapsing is easy.

This issue is really a cosmetic one. I do think collasible is a good option and perhaps a good default, but opinions will differ!