rameshvarun / blog-cells Goto Github PK
View Code? Open in Web Editor NEWAdd interactive code snippets to any blog or webpage.
Home Page: https://rameshvarun.github.io/blog-cells/
License: MIT License
Add interactive code snippets to any blog or webpage.
Home Page: https://rameshvarun.github.io/blog-cells/
License: MIT License
It would be great if you could simply import the scripts from a CDN, but by default, this doesn't seem to be possible since workers from remote domains can't be loaded without explicit CSP headers (which many people can't control).
There are maybe some workarounds but if there's a chance browsers could break them in the future, the best thing to do is make it easy for people to download the JS / CSS into their own site's folder.
Right now, we only support languages where the compiler/interpreter itself can run in WASM. For many languages, this will never be well supported (even if it's possible to hack it together).
We can support a wider variety of languages by emulating a RISC-V, linux-based machine. This should work particularly well for C, C++, and Rust, and allow code to use I/O, threading, and more that wouldn't be possible in pure WASM.
To keep machine images small, we should create minimal linux images using buildroot/busybox.
Example: https://bellard.org/jslinux/vm.html?cpu=riscv64&url=buildroot-riscv64.cfg&mem=256
x86 emulation could also be used (example: https://supabase.com/blog/postgres-wasm), but due to the complexity of the ISA, most x86 emulators only emulate a portion of the spec.
There are three ways to get rid of the $
requirement, but all have trade-offs.
globalThis
. This could clobber built-ins and break things For example, if someone writes the code export const postMessage = () => {}
, the worker won't be able communicate with the main page anymore.$
, eg add "const a = $.a" to the prelude. However this would make values early bound, whereas we want them to be late bound (lookup on use).Already implemented 3 in 283d100, but removed since I didn't have time to fully test.
Allow top level await, mainly for things like installing packages through micropip. Ideally this would happen automatically, but worst-case let the user mark a specific cell as an async cell.
The first step is to simply support type annotations that are unchecked (should be pretty easy with Babel). The next step (more complex) is to actually typecheck.
It should be possible but may require some parsing + creation of .d.ts
files.
Right now, with Javascript disabled, the code simply doesn't show at all. We should handle this better. Maybe let people create code cells in <pre>
tags and transform them in-place into cells?
Already implemented here: https://blog.varunramesh.net/posts/simple-python-tips/
Currently there are no stack traces. Possibly use https://github.com/stacktracejs/stacktrace.js/ to parse errors and format them so that they make sense to user.
In looking at the demo page I see:
data-autorun=true
data-hidden=true
added to the script tag. Are there more?
Make micropip available to Python cells.
When a new output line appears, we should auto-scroll to the bottom.
You should be able to define your own Kernel in a script tag and use it. Something like this:
<!-- Import Blog Cells -->
<script type="module" src="blog-cells.js" />
<!-- Define Kernel -->
<script>
class CustomKernel extends BlogCells.Kernel {
async run(code, onOutput) {
...
}
}
BlogCells.registerKernel("custom", () => new CustomKernel());
</script>
<!-- Create Cell -->
<script type="text/notebook-cell" data-kernel="custom">
code_in_a_custom_language()
</script>
We don't need to import font-awesome for just a few icons.
Awesome work. It will be even more awesome if it supports C#.
I would like to run: let name = "Danny"
And then have my code in the main document check what value name
is.
Preferable as a property bag or something on the blog-cell itself, as there will be multiple on the page.
Brings me to the second feature request; can the blog-cell emit a Event, so I now calculation was done.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.