Add WASM examples to the website

[gold-silver-copper]

Problem

It would be nice to have WASM examples on the website, this would allow potential users to easily get a taste of ratatui without having to install anything themselves.

Solution

I created a backend for ratatui that uses egui and can be compiled to wasm.
You can see a sample site here: https://gold-silver-copper.github.io/
The source for the site is here: https://github.com/gold-silver-copper/gold-silver-copper.github.io
The source for compiling the wasm is here: https://github.com/gold-silver-copper/ratatui_egui_wasm/tree/main/examples

Additional context

Having too many wasm examples on one page causes most browsers to start killing the webgl contexts, if we want multiple examples on one page, it should be less than 10 wasm examples per page. Some of the examples require custom fonts to run which makes their binary bigger, without fonts the binary is currently 2.7 MB and can probably be brought down lower by someone more experienced than me. Some of the examples crash when the window size is too small, this happens in the original crossterm examples as well, so I think those examples should be avoided for now, notable gauge and calendar examples do this for me.

I think this could be additionally useful in the context of ratatui/ratatui#1075

I am not very familiar with astro so I think it would require the help of others to get everything done. Adding the wasm to a simple index.html is easy. First init the wasm with a script

  <script type="module">
            import init from "/constraints.js";
            init("/constraints_bg.wasm");
        </script>

Then insert the wasm into a canvas by setting the id. The ID itself is hardcoded in the relevant example source code, but is usually simply the name of the example

<canvas id="constraints"></canvas>
       

EDIT: I have fixed the input handling for the constraint_explorer example.

[joshka]

That's a really good idea to use it for the widget demos. Moving this to the website repo.