feat: standalone examples (CodeSandbox) #48
Conversation
mrMetalWood
commented
Nov 2, 2023
mrMetalWood
commented
- restructure examples to be able to run the standalone on a service like CodeSandbox so that users can play with the examples right away
| @@ -2,13 +2,19 @@ import * as React from 'react'; | |||
|
|
|||
| function ControlPanel() { | |||
| return ( | |||
| <div className="control-panel"> | |||
| <div className="control-panel-basic-map"> | |||
There was a problem hiding this comment.
I think this will interfere with the embedded rendering in the website. Would probably be better to keep it at just control-panel or add another class if needed.
| @@ -13,7 +13,7 @@ function ControlPanel({ | |||
| onMapConfigIdChange | |||
| }: ControlPanelProps) { | |||
| return ( | |||
| <div className="control-panel"> | |||
| <div className="control-panel-change-map-id"> | |||
There was a problem hiding this comment.
I think adding a lib directory just for this one file is a bit much and it could just be in the src folder, but its fine by me either way
website/src/examples/basic-map.mdx
Outdated
| import App from 'website-examples/basic-map/src/app'; | ||
|
|
||
| <App /> | ||
| <BrowserOnly>{() => <App />}</BrowserOnly> |
There was a problem hiding this comment.
Is this the fix to get the build process to work again? I remember that at some point I thought I needed the BrowserOnly wrapper, but it turned out the reason for the problem was something completely different. Let's have a look if we find another way to solve this.
|
First of all, I'm very excited about this feature and I think this will make the examples on our site so much more user-friendly. About the styles for standalone examples, how about we just load a special stylesheet for the examples (or maybe even the full stylesheet) from something like We'd only have to figure out how to build/deploy the file during the website-build and we would be fine. I would maybe even consider doing the same for other shared code like the |
