babel
Docusaurus v2
This PR will contain changes needed for docusaurus v2. Use this PR for reviews and tracking file changes. I'll modify the existing site rather than creating a new copy of site (since this will be hard for tracking changes).
Related PRs:
- https://github.com/harish-sethuraman/website/pull/1
- https://github.com/harish-sethuraman/website/pull/2
- https://github.com/harish-sethuraman/website/pull/3
- https://github.com/harish-sethuraman/website/pull/4
- https://github.com/harish-sethuraman/website/pull/5
- https://github.com/harish-sethuraman/website/pull/6
- https://github.com/harish-sethuraman/website/pull/9
Builds succeed properly and pages work fine. Please report bugs if any.
❌ Deploy Preview for babel failed. Built without sensitive environment variables
🔨 Explore the source changes: 37e359f28473022115dda49dab1fc4af5346757b
🔍 Inspect the deploy log: https://app.netlify.com/sites/babel/deploys/6233677156259800085f3b92
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
@nicolo-ribaudo or @hzoo Can you help setup a netlify build for a new branch v2 with node version >= 14? (https://docusaurus.io/docs/installation#requirements)
@harish-sethuraman Thanks for the head-up. I specified the node version to 16 and let's see if that works.
Seems like with docusaurus v2 https://docusaurus.io/docs/migration/manual#update-references-to-the-build-directory the build directories have changed and we have to tweak the build directory to build rather than build/babel.
It works fine now but we might want to change the build directory to build instead of build/babel. If anyone changes build dirs you can revert https://github.com/babel/website/pull/2622/commits/c824b95b37bbf41657bceeb87e527b28f63c0722 and everything should work fine.
For now we have main page working and docs working as well.... I'll try to land other pages one at a time 😅
We have some customized stylesheets: https://github.com/babel/website/tree/main/website/static/css, it would be great if we can adapt them to docusaurus v2.
We have some customized stylesheets: https://github.com/babel/website/tree/main/website/static/css, it would be great if we can adapt them to docusaurus v2.
Will look into it tomorrow... Seems like the class names have changed...
The design for the top navigation has been changed in the docusaurus v2. Now there is a ham menu (in mobile) that pops a modal from the left instead of wrapping the menu items in the next line and adding a horizontal scroll :(
Shall we leave it as such for mobile view or should we try to bring back the older top nav?
There are only 2 pages remaining the repl page and setup page. Other than that I've migrated the existing pages to docusaurus v2. We might want to revamp pages for dark mode as well :)
The REPL is complex enough that we could leave it outside of docusaurus, just as a static page. Does docusaurus v2 support adding external links to the header?
Shall we leave it as such for mobile view or should we try to bring back the older top nav?
The new one looks ok to me.
It looks like this update breaks the custom components that we have (defined using vanilla JavaScript, not with React): the demo in the homepage doesn't work, and the editors at aren't interactive. Is it possible to make them work without rewriting them to React (codemirror doesn't integrate well with React, it works way better when it can fully manage its dom elements).
The REPL is complex enough that we could leave it outside of docusaurus, just as a static page. Does docusaurus v2 support adding external links to the header?
Yes it does. Shall I add a folder in the build and add static html to add repl scripts and style sheets?
It looks like this update breaks the custom components that we have (defined using vanilla JavaScript, not with React): the demo in the homepage doesn't work, and the editors at aren't interactive. Is it possible to make them work without rewriting them to React (codemirror doesn't integrate well with React, it works way better when it can fully manage its dom elements).
Will look into it
Shall I add a folder in the build and add static html to add repl scripts and style sheets?
Yes please! We can iterate in a follow-up PR to make it part of the main build, but there is no need to do it now (also I kinda want to rewrite the Repl state management, which is currently quite complex, with something like xstate).
@nicolo-ribaudo we might not be able to move repl as a static page. It has navbar which comes from docusaurus. If we want to move the repl page separately outside of docusaurus. We have to either remove the topnav or add the css for the navbar and functionality for dark mode toggle (languages dropdown if we plan to add languages too)
we might not be able to move repl as a static page. It has a navbar which comes from docusaurus. If we want to move the repl page separately outside of docusaurus. We have to either remove the top nav or add the CSS for the navbar and functionality for dark mode toggle (languages dropdown if we plan to add languages too)
@JLHwung @nicolo-ribaudo Any updates on this?
Or shall I move them to a separate page with basic nav layout (without dark mode toggle ? )
I tried porting repl to docusaurus v2: https://github.com/JLHwung/babel-website/commit/60c4a4ab495c5495dff39cfddb88c95a1abefc56 Currently it works only on Safari, both Chrome and Firefox complains that CodeMirror is not defined, which should not happen if the scripts are loaded in correct order.
The REPL is a React component which injects a #root DOM element and hands to external scripts for everything else, I think we don't have to exclude REPL.
@JLHwung I ported repl page to v2 https://deploy-preview-7--gracious-ardinghelli-43e471.netlify.app/repl/
https://github.com/harish-sethuraman/website/pull/7
We are not allowed to add scripts via scripts tag in docusaurus v2 that is why it doesn't detect codeMirror.
- We might probably want to extract the entire repl page into separate HTML and route the
/replto that static page that will contain nav html and scripts for that particular page. While doing so we might have to write some functionalities for the nav such as closing and opening for mobile view, dark mode toggle and dropdowns (languages and versions if we decide to add them). Would that be good or can we better have a basic nav that routes to other main pages alone?
@harish-sethuraman The REPL port looks promising. CodeMirrors seems working, too. Do we still need to extract the page?
@JLHwung Yea we have to extract the page since the scripts used for repl is being injected into all pages. https://github.com/harish-sethuraman/website/pull/9 I've actually chunked out the page 😅. I still have to add CSS and navbar functionality alone.
I've extracted the REPL page separately with htmlwebpackplugin. Can someone let me know if it is okay? URL: https://deploy-preview-2622--babel.netlify.app/repl @JLHwung @nicolo-ribaudo @hzoo