Add a demo page

[drgarlic]

Hi !

Awesome work, though the one thing that is missing is a page where we can actually try the components. I saw the examples directory but a page hosted on vercel/netlify/cloudflare/... would be much better.

Thanks a lot for your work

[lxsmnsyc]

Thanks for creating this issue!

Yes, definitely. I'm planning on deploying a doc site with interactive playground so that users may try the components while reading the docs. I have done this before so this could be a breeze to implement. Writing the docs, on the other hand, might be a lot of work, although no worries. This should probably come by late October as I have other plans to execute earlier.

I'll keep this issue open for a while to notify about the upcoming docs update.

Edit: I'm currently exploring Astro's doc template.

[vincentfretin]

@LXSMNSYC How is http://solid-headless.vercel.app maintained? The Modal example there is not the same as in this repo. And the vercel pipeline doesn't seem to work currently on this repo.

I see you added a link to codesandbox https://codesandbox.io/s/github/LXSMNSYC/solid-headless/tree/main/examples/tabs-example/ for the Tabs component in your release notes https://github.com/LXSMNSYC/solid-headless/releases/tag/v0.12.0 Codesandbox is getting the example from github directly? That's nice. We could add a codesandbox link for each component in the README. What do you think?

[lxsmnsyc]

How is http://solid-headless.vercel.app/ maintained? The Modal example there is not the same as in this repo. And the vercel pipeline doesn't seem to work currently on this repo.

The docs site is still experimental. I'm trying to design so that it looks like it has its own UI design but the thing blocking me is how each component is going to be documented (e.g. structure, things that needs to be explained, etc).

I see you added a link to codesandbox https://codesandbox.io/s/github/LXSMNSYC/solid-headless/tree/main/examples/tabs-example/ for the Tabs component in your release notes https://github.com/LXSMNSYC/solid-headless/releases/tag/v0.12.0 Codesandbox is getting the example from github directly? That's nice. We could add a codesandbox link for each component in the README. What do you think?

Yes we could add codesandbox badges. Weird that I do this in my other repos but not here, but yeah, it's good to be added.

[vincentfretin]

You're talking about codesandbox badge, is this a special button? I'm not used to codesandbox. Do you have an example in another repo? I'm willing to create a PR to add the links.

[lxsmnsyc]

Here's a demo badge

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-headless/tree/main/examples/accordion-example)

[matthiasbaldi]

For myself, I just took your examples and put them into a (many) multistage Dockerfile to build every example in parallel. Then I deployed it to fly.io for testing reasons https://solid-headless-demo.fly.dev/ This isn't really beautiful yet but maybe something like that would be enough. Each demo is loaded as an iframe to the single startpage.

If someone want to start it locally (it is just an alpine nginx):

docker pull matthiasbaldi/solid-headless-demo:latest
docker run --rm -p 8080:80 matthiasbaldi/solid-headless-demo:latest

I can make it a bit more beautiful if there is some interest and can also publish it on Github or create an PR for the two additional files I created (Dockerfile & index.html).