Blog-cells: Interactive code cells for static sites

https://rameshvarun.github.io/blog-cells/

by todsacerdoti • 3 years ago

132 30 3 years ago

rameshvarun.github.io

kolme2• 3 years ago

This looks great, if anything I think it's a shame it's not implemented using Web-Components, as they would be a perfect fit here for several reasons: intuitive, ease of use and maybe would even solve some security concerns.

sesm• 3 years ago

How would you allow cells to communicate with each other while being isolated from the rest of the page?

microflash• 3 years ago

Through events. You can add reactivity and state propagation through events.

tommiegannert• 3 years ago

What are your security concerns?

kolme2• 3 years ago

Code in the cells breaking out and manipulating the page where they are embedded.

benno1282• 3 years ago

I have a project that does this: https://runno.dev

No shared state between elements, but it’s an interesting idea.

Edit: It runs other languages as well, like Python, C, Ruby.

ldelossa• 3 years ago

Wow this is cool.

I've been looking for 'runnable C examples' on my blog.

Do you know if I can integrate this with Hugo easily?

tlarkworthy2• 3 years ago

Oh this would be such a good fit for my dream of serving federated backend code from web readable hosting https://webcode.run/

jraph• 3 years ago

I could not see any cell because I have JS disabled by default. blog-cells's readme addresses this:

Using pre tags instead of script tags
Script tags are great for defining notebook cells since they can hold pretty much any code without escaping. However, they are invisible by default, meaning that readers won't see anything until blog-cells loads. You can get around this by using <pre class="notebook-cell"> tags instead, however reserved HTML characters should be escaped using HTML entities.

     <pre class="notebook-cell">
     console.log("&lt;b&gt;HELLO&lt;/b&gt;");
     </pre>

I was pleasantly surprised to see this. I know it's a bit less convenient to type because of the entities, but I believe this is the way to go and this should be the main, advertised, method. Progressive enhancement. Keep your content as accessible as possible :-)

Now, I do think the result blocks would be better statically rendered if it's going to yield the same result each time they are run. The code runs once, at generation time, and the page is totally readable without JS. It indeed requires a generation step, but I think it's worth it, and blogs usually already have one.

I think Emacs has something like this with Org mode.

scepheo• 3 years ago

The no-JS problem could also be solved by some CSS instead:

  script[type="text/notebook-cell"] {
    display: block;
  }

Which stops you from having to type out all those entities.

Once fully supported, you could even put this behind a media query (`@media (scripting: none)`) so you don't have to change the display with JavaScript after load.

swiftcoder• 3 years ago

In the context of a static site generator, you'd usually render all those entities with a markdown processor + syntax highlighter anyway.

bArray• 3 years ago

This really nice, it has me thinking about running other languages too - very cool!

spacebuffer• 3 years ago

Reminds me of org-babel[0] for org-mode on emacs, it basically does the same thing. it lets you run code inside your org files.

[0] https://orgmode.org/worg/org-contrib/babel/

robust-cactus• 3 years ago

This is awesome, the only thing I'd recommend tweaking is that $ global. I think every post using this would have to explain it to its reader.

Two options: 1. Make every exported function a global, or just look like a global. 2. Force users to import and name the blocks

I think option 1 for this use case might actually be just fine.

Vox_Leone• 3 years ago

It is cool. But doesn't it kind of defeat the whole point of static pages?

ladberg• 3 years ago

The point of static sites is to avoid the need for any rendering/compute server-side, which this accomplishes!

E.g. you could use this in your GitHub Pages site, which is just served from a CDN without any real backend.

skybrian• 3 years ago

Is there anything like this for Observable's variation on JavaScript?

nlunbeck• 3 years ago

Really cool project! The API call functionality could be a good feature for docs, feels cleaner showing the sample response there instead of a dropdown.

cobertos• 3 years ago

How does this allow queries against CORS enabled endpoints?

I don't see anything special for that. No CORS proxy, no fetch monkey patching, nothing

Blog-cells: Interactive code cells for static sites

Related Stories