API examples and initial GH pages index

[mletic]

Moved all of the CodePen examples from our docs repository to this one.

Built an index.html page that should contain all of the examples listed here and links to open them in: docs, GitHub, VS Code and the app itself. I still have to link GH and VS Code.

After I did this I was able to publish this as GitHub pages from this branch: https://unfoldedinc.github.io/examples/

My plan is to add Jupyter Notebooks here too. After I clean this up all you have to do is add the new example in the toc.json and that's it.

Main benefits of this approach are:

• We won't have issues with loading CodePen on our Docs website. We will use iframe's to our examples from this GH Pages website.
• No more weird CodePen syntax in the examples
• All of the examples are now in one place so it makes it easier to maintain
• Easy to add new ones

NOTE: I still have some cleanup work to do, this PR was just the initial push to share the implementation of the idea we talked about yesterday.

[mletic]

What I could also do is to add the badges to open the examples in VS Code and GitHub in the rendered examples (iframe from this GH pages website) on our Docs. This way we will have similar thing as with CodePen. No live-changes but we can use Observable examples for that.

[ibgreen]

What I could also do is to add the badges to open the examples in VS Code and GitHub in the rendered examples (iframe from this GH pages website) on our Docs. This way we will have similar thing as with CodePen. No live-changes but we can use Observable examples for that.

Maybe stage something so we can see how it looks?

Maybe keep one or a few code pens for live editability?

Observable is great but can seem a bit alien at first for pure web app programmer.

[kylebarron]

Maybe stage something so we can see how it looks?

I think this is staged here: https://unfoldedinc.github.io/examples/

[kylebarron]

When you hover over a tile, the tile becomes shaded, but it looks like you can't click the tile, you can only click the icon in the center of the tile. (I was very confused at first of why my clicking wasn't doing anything)

[kylebarron]

It looks like the "Open in GitHub" and "Open in VS Code" links don't go anywhere? They link to the same page?

[ibgreen]

I like the functionality but the page is not very engaging. Maybe try to add a thumbnail (just one for now)?

[mletic]

New version is here: https://unfoldedinc.github.io/examples/

I switched to using Vue.js for this main page. Way easier to update and style than pure js, it's still very lightweight.

Individual example (that will be in the iframe) should have badges similar to this: https://unfoldedinc.github.io/examples/map-sdk/js/api/create-map/

@kylebarron As I mentioned above links for VSCode and GH are not still added as I have to merge to master first. I will clean up the full width for the table cell link.