New Site: Setup/Tools page

Basically the same idea as in https://github.com/babel/website/issues/1522

This one might be a little more involved

We need to port the setup page in the new site since the old one used jekyll ({% for category in site.data.tools %}) and bootstrap css

This would be targeting the docusaurus branch, not master.

I would read through some of the docs: https://docusaurus.io/docs/en/installation.html + and check out the branch

We can probably just redo how this works? Not sure the time investment though.

---

If we port:

• we need to basically convert the setup page - https://github.com/babel/website/blob/docusaurus/docs/setup.md and https://github.com/babel/website/blob/docusaurus/_includes/tools/items.md
• should probably move the data into a different file or just in the tools.js file itself (doesn’t matter to me right now). Same with https://github.com/babel/website/blob/docusaurus/_includes/tools
• will need to re-create/create styling for that page: current styling at https://github.com/babel/website/blob/docusaurus/_sass/pages/_tools.scss. Totally fine if you can improve on what’s there as well so it doesn’t “have” to look the same

[JoelMarcey]

@azz Hi. Yes. This is something we are looking at supporting. I would really like if we could design it in the constructs of our current build system. I //think// we can take some clues from some of the customizations that were done with React Native and maybe even Prettier.

[JoelMarcey]

@QC-L I was talking it over with another core Docusaurus team member, @rickyvetter, and he reminded me that onclick can’t work out of the box since Docusaurus sites are server rendered.

the html is generated at build time through a node process as opposed to on the browser when someone loads the page. Since we are just shipping the markup output then dynamic things like click handlers won’t work. We would have to ship the whole application to the client if we wanted that.

Your best option here is probably just including a script tag in vanilla JavaScript that handles your click events (there are some other options, but they might not be as amenable).

@rickyvetter has a Docusaurus site, Reason-React, where he did something similar. https://github.com/reasonml/reason-react/blob/master/website/core/Footer.js