docs: upgrade docusaurus v2.0.1

[ndom91]

☕️ Reasoning

Docusaurus finally released their v2 stable! https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0

Upgraded the first party docusaurus dependencies as well as other compatible ones.

🧢 Checklist

• [x] Documentation
• [ ] Tests
• [ ] Ready to be merged

🎫 Affected issues

Please scout and link issues that might be solved by this PR.

Fixes: INSERT_ISSUE_LINK_HERE

📌 Resources

• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
next-auth	❌ Failed (Inspect)		Aug 6, 2022 at 9:14PM (UTC)

[ndom91]

The useCurrentSidebarCategory in the docs/guides/index.md broke with this version with the error Hook useDocsSidebar is called outside the <DocsSidebarProvider>. It was a non-public internal API we just happened to have been using :sweat_smile:

Will see if I can find an alternative or get it working again somehow.

[ndom91]

So at the moment, there was some custom code to show the cards for each sub-page in the /guides/* section, as well as a sentence or two of text above/below them.

However, docusaurus can autogenerate these category index pages for you, with the card's for the subpages by just setting the type: 'generated-index' in the category config in the sidebars.js file.

Unfortunately, theres no way to get any additional custom text on the page in this configuration.

For example, http://localhost:8000/category/guides

What do yall think? Okay like that ^^ ?

As opposed to what we have on prod, https://next-auth.js.org/guides

EDIT: So I was in the process of opening an issue on docusaurus, figured it might have been an issue with the new 2.0.1 GA release, but when I created a reproduction on Stackblitz it worked! Our example guides/index.md page rendered there correctly with the sub-page cards and our custom text :thinking: :sweat_smile:

EDIT 2: Made an issue on docusaurus anyway :sweat_smile: - https://github.com/facebook/docusaurus/issues/7880

[ndom91]

So the suggestion in the Docusaurus issue did help locally. However, I had to manually delete the second copy of the @docusaurus/theme-common out of the ../node_modules/.pnpm/ directory.

It's not something I'd like to recommend, but I'd like to point out that adding public-hoist-pattern[]=@docusaurus/theme-common* to your .npmrc will make it work.

Just modifying the .npmrc didn't seem to have the desired affect. Even when deleting all possible node_modules directories around the project and reinstalling with pnpm with the .npmrc in place. This also seems to be the case on Vercel itself, the build still fails :/

[ndom91]

Alright so the hoisting @docusaurus/theme-common issue is solved thanks to the help of the guy in the Docusaurus issue.

However, now react-marquee-slider doesn't want to work. Thats the component on our docs home page which generates the floating icons in the background of the hero section. It hadn't been updated in a very long time (+1 year), but then I noticed the maintainer pushed a few commits to the Git repo ~10 days ago, but hadn't published an update to npm.

So I'm trying the Github repo version, not holding my breath though..

EDIT: That didn't help.. The issue is that there's an invalid hook call (useState) inside of the packages Marquee component. When trying the newer Github version, it apparenlty can't resolve it, although there definitely is a node_modules/.pnpm/react-marquee-slider directory.