babel / website

:globe_with_meridians: The Babel documentation website
https://babeljs.io/docs/en/index.html
MIT License
746 stars 1.3k forks source link

New Site: REPL page #1525

Closed hzoo closed 6 years ago

hzoo commented 6 years ago

Part of https://github.com/babel/website/pull/1521

Current REPL is at: https://babeljs.io/repl

TL;DR is that we need to load the REPL page in docusaurus somehow. Now since the repl is just a react component, it seemed like we could just add it to website/pages/en but because the current implementation using codemirror uses browser specific code like navigator etc it won't work when trying to render via docusarus on the server side.

Options: use a different module like react-codemirror (too much work), only load that part of the code on component mount (might be too much work), or just load the bundled version into a separate html page (like the current repl does).

Current JS code for it is at https://github.com/babel/website/tree/master/js/repl HTML is at https://github.com/babel/website/blob/master/repl.html webpack file is https://github.com/babel/website/blob/master/webpack.config.js makefile at https://github.com/babel/website/blob/master/Makefile (might want to keep the webpack commands)

It's simple enough to convert these to script tags:

https://github.com/babel/website/blob/master/repl.html#L6-L20

For this part:

https://github.com/babel/website/blob/50e09bdceeee658a621ce9a85ddc7ca4fa15c38f/repl.html#L21-L22

We'll have to look at https://github.com/babel/website/blob/50e09bdceeee658a621ce9a85ddc7ca4fa15c38f/_includes/scripts.html#L35-L53

nicolo-ribaudo commented 6 years ago

I'd like to work on this (it would be my first PR to the website I think)

hzoo commented 6 years ago

Ooh ok, let me know if you need context on the repl still - or just message in our slack

hzoo commented 6 years ago

Closed by https://github.com/babel/website/pull/1533