refactor(docusarus): docusaurus migration

[MatanBobi]

This is a WIP PR, some pages still don't work and I still didn't merge all changes from master due to some conflicts.

Open issues:

• Build is broken
• No sidebars on netlify preview
• Fix CSS for both Dark Mode and Light mode + Tweak the colors to match the current colors
• Update Footer to contain all links
• Fix Layout for Help Page
• Markdown isn't rendered in a GridBlock component as it used to
• Blog link is missing from navigation
• Extract the Showcase component and use it in both Users page and Home page
• Blog sidebar is missing
• Users page isn't working
• Toggle users logos between dark and light mode and add a comment in docusaurus.config.js to add both darkImage and lightImage.
• Use Tabs in MDX when needed
• Update README
• Fix broken links in existing markdown pages
• Add @docusaurus/plugin-pwa for PWA and offline support
• After all fixes, merge new docs from master
• Review to see all docs are working and change them to MDX

Feel free to comment here with any problems you see in the preview that weren't mentioned above.

This PR will close #487

[MatanBobi]

@nickmccurdy following your message here, as you can see since I didn't want to break the folder structure, we still have a website folder (ignore the website-old, this is just for me to compare some stuff).
Do you think we should pull the site to the root folder?

[MatanBobi]

@kentcdodds @alexkrolick
Wdyt we should do in dark mode with the users section? Most logos look bad in dark mode.

[kentcdodds]

Maybe we can make sure that only those logos that look good in dark mode make it in the homepage. The others can just make the user's page look bad 😅🤷‍♂️

[MatanBobi]

Maybe we can make sure that only those logos that look good in dark mode make it in the homepage. The others can just make the user's page look bad 😅🤷‍♂️

This will leave us with something like 6 in the main page 😅
We could ask in PR's to provide a dark logo and a light logo and switch between them I guess..

[kentcdodds]

I think having fewer on the homeowner is fine actually. And asking for a light and dark themed version of the logo would probably be good too

[MatanBobi]

@kentcdodds @alexkrolick this is basically ready, just waiting for your decision regarding the blog sidebar.
Once we decide on that, I'll merge the docs again :)

Thanks!

[kentcdodds]

Let's do what's easiest for now and we can iterate later. 👍

[alexkrolick]

I noticed a few final issues to address before we merge:

1. There seems to be a broken "Introduction" item in the Frameworks menu.
   

2. The Recipes and Docs top bar items can be highlighted at the same time

3. The primary color for links is not really legible in dark mode

[MatanBobi]

I noticed a few final issues to address before we merge:

1. There seems to be a broken "Introduction" item in the Frameworks menu.
   

2. The Recipes and Docs top bar items can be highlighted at the same time

3. The primary color for links is not really legible in dark mode

Thanks @alexkrolick ! Will fix, run sanity and ping here.

[MatanBobi]

Hi @alexkrolick, I fixed all the issues and also found a way to add the blog sidebar :)
For the link color in dark mode, I've just set it to a lighter one but I'm not a UX expert so I hope it will look better.
I reviewed and things look good besides the images of the users on dark mode, I had a fix for that but then there was a change that randomizes the users on the front page so it got overriden, not sure it's that important though.
If you think it's ready for merge, I'll merge the latest docs (I want to do it as close as possible to the merge because it takes some time).

Another 2 questions, can we pull out the .vscode folder from the repo and add it to .gitignore? I'm not aware of any reason to keep it there.
Second, do we use the docker files somewhere? netlify.toml isn't using them and I didn't change the files but things still work properly..

[alexkrolick]

If you think it's ready for merge, I'll merge the latest docs (I want to do it as close as possible to the merge because it takes some time).

Looks good to me, let's do it

can we pull out the .vscode folder from the repo and add it to .gitignore? I'm not aware of any reason to keep it there.

Actually there is useful for stuff for working on the docs in there. Can you update the code snippet for code blocks to the MDX way of doing it, unless it is super obvious (in which case you can delete)? https://github.com/testing-library/testing-library-docs/blob/master/.vscode/markdown.code-snippets

Second, do we use the docker files somewhere? netlify.toml isn't using them and I didn't change the files but things still work properly..

This came with the Docusaurus template but if it's not used by Netlify we probably don't need it

[MatanBobi]

Done @alexkrolick :)
Actually was cool to learn about adding the code snippets to vscode and I think that the tabs snippet can be helpful since it has some indentation and line breaks tricks.
I'm converting this from a draft PR to a PR.
Once we merge this, I'll create another issue with the open stuff.

[nickserv]

@nickmccurdy following your message here, as you can see since I didn't want to break the folder structure, we still have a website folder (ignore the website-old, this is just for me to compare some stuff).
Do you think we should pull the site to the root folder?

@MatanBobi Yes, since that seems to be the convention for Docusaurus 2.

[MatanBobi]

@nickmccurdy following your message here, as you can see since I didn't want to break the folder structure, we still have a website folder (ignore the website-old, this is just for me to compare some stuff).
Do you think we should pull the site to the root folder?

@MatanBobi Yes, since that seems to be the convention for Docusaurus 2.

@nickmccurdy Done :)

[alexkrolick]

@MatanBobi functionally, looks good.

What happened to the stripes? It's not critical, but looks a bit empty now layout-wise

Before

After

[MatanBobi]

@alexkrolick I removed those because they didn't fit the styling in dark mode..
Fixed that :)

[alexkrolick]

Fantastic. Merging.

[nickserv]

@all-contributors add @MatanBobi for code

[allcontributors]

@nickmccurdy

I've put up a pull request to add @MatanBobi! 🎉