React-leaflet: Help improve the website!

[PaulLeCam]

React-Leaflet now has a website serving the documentation: https://react-leaflet.js.org

If you want to contribute, now is a great time, there are still lots of things to do to improve this website:

• ~A better design: I just used Leaflet's colors out of simplicity but others might look better.~
• ~A real logo~
• Translations: the project is added to Crowdin so you can help translate it using this link: https://crwd.in/react-leaflet
• Fixing dead links, grammar, making sentences more explicit...
• Any other idea?

Thanks for your help!

[keul]

Another idea: provide a live example page instead of referring only to local hosted examples. Seems that docusaurus can do this: https://docusaurus.io/docs/en/custom-pages.html

[PaulLeCam]

Yes, once Docusaurus supports client-side components (https://github.com/facebook/Docusaurus/issues/292) that would be a good thing to add.

[tanvirraj]

Hey @PaulLeCam . First of All Thanks for this Project . I use this everyday in my daily job.
Today i come here to find some issues , so that i can contribute, And Found this .

I think there are many ways we can improve this.
First think about documentation. Currently there are 15 examples. but the problem is if i have to see what examples do what i have to pull it and run . One thing we can do is to give a https://codesandbox.io/ link so anyone can see live example.

If you agree i will run all the example code in codesandbox and make doc little bit update with like

• simple Marker with Popup (source code)(demo)

• Event handling (source code)(demo)

this way .
what do you think.

[PaulLeCam]

Hey, thanks for your comment and your offer to help!

I've never used CodeSandbox so I don't know if it's the best solution, but please don't hesitate to try it out! Maybe it can be used at least as a temporary thing, if it integrates well with Docusaurus.

Ideally the examples could be updated when building the website, using the latest version of the library rather than using the published files from a CDN, but I don't know if it is possible with a third-party solution like CodeSandbox, that's why I was more thinking about using a tool like component-playground or similar once it's possible do provide client-side components with Docusaurus.

[tanvirraj]

Thanks. i like your idea . i will also search if we can do with Docusaurus.
you can have look on codesandbox with embedding .
just like this https://codesandbox.io/docs/embedding/

[koltclassic]

I'd love to help out with improving the site / documentation! It looks like the makers of component-playground have a react-specific implementation here. Would that make sense for this use case? Something like Storybook may also be useful.

[koltclassic]

I have a partially-completed Storybook version of the documentation in progress; would this be useful in the meantime? It seems like a relatively simple process to deploy Storybook to a static site (using something like storybook-deployer)

[TroySchmidt]

+1 For using Storybook to push to a static site. Also, the project MaterialUI has a very good site with example demos + API setup. It is good that the documentation is building off the source code so as the code updates the API documentation site updates from that and then demo examples are added adhoc.

[PaulLeCam]

I agree Storybook is great for component demos, the issue is more how to integrate it with Docusaurus?
At the moment the publication process with Docusaurus is very simple and I'd rather keep it that way rather than rolling a custom setup adding maintainance.

Material UI is a good example as well, that's what I had in mind originally, but until Docusaurus supports hydrating components client-side, this kind of solution is not possible.

[moklick]

Hey! Did you saw the Open Logos project? Maybe you can get a logo there :)

[colbyfayock]

@koltclassic is that branch public I can see the story you put together of the map example? i'm trying to create a story component and the map gets super messed up and doesn't respect the properties I'm passing in (not blaming react-leaflet here). but when i render it out on a standard page it works just fine

[koltclassic]

@colbyfayock Sure! I just pushed my code up; you can find it here. That issue does sound familiar, but I honestly can't remember how I went about solving it (it has been a while since I've interacted with this code 😅 ). Feel free to reach out as needed!

[colbyfayock]

@koltclassic thank you! realized the age of the thread after posting 🤦‍♂️

[PaulLeCam]

Thanks to @colbyfayock for the logo and branding changes, now published on the website!