feat(v2): Style debug pages

[Drewbi]

Motivation

@slorber made an initial debug PR recently (#3229). This adds some nice styling to those pages.

Have you read the Contributing Guidelines on pull requests?

Yup

Design

My goal was to recreate the feel of some of the components of docusaurus without using any themes or infima variables. This is why dark/light mode is not implemented as it is non-essential and would add a lot of bulk for not much reason.
I added a basic responsive nav that should support most mobile devices as long as they aren't smaller than around an iPhone SE.

Mobile support

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit a7b6cf1

https://deploy-preview-3296--docusaurus-2.netlify.app

[Drewbi]

This page is showing the resolved path weird, not sure if that's a netlify thing or an error.

[slorber]

thanks @Drewbi , is it ready to review and merge?

About this part here: https://deploy-preview-3296--docusaurus-2.netlify.app/build/__docusaurus/debug/routes

I think it's a bit weird to have the first level routes be displayed with custom views, and subroutes to be displayed with json view, we should rather choose one way or the other imho to keep it consistant.

---

@SamChou19815 @yangshun do you think we should document the plugin and make it "official" with these improvements?

[Drewbi]

I wasn't sure about what content would be useful on the homepage apart from a explanation of each page and the copy all metadata button so I just left this PR as mainly styling. I can definitely add the home page if you let me know what kind of content you want however.

In terms of the child routes being json, I liked having the main route separated visually with a title. I feel having the whole page being separate cards with json displayed might not be easy to skim as there is no visual hierarchy. I would like to have custom styling for the child routes but since they are recursive I figured just using json would be suitable enough. Maybe an alternative would be to leave the title for each route but include the whole json for that route to be consistent with the child routes.

[SamChou19815]

@SamChou19815 @yangshun do you think we should document the plugin and make it "official" with these improvements?

@slorber I think it's quality is good enough to make it official. I think the only thing left is to document it in the docs.
While I make the tool initially, I don't actually know how it can be useful. Since you used the tool to debug some docusaurus internals, maybe you have more insights on its use cases?

[yangshun]

Yeah I think would be good to make it official :)

[slorber]

Thanks for the feedback.

@Drewbi do you want to write some basic doc? (also worth documenting the classic preset debug option to "force" it in production mode).

I think we could write a blog post about why this tool is useful:

• UI to browse the content that is generated in .docusaurus folder (routes, global data, registry, site config etc)
• we can inspect content loaded by the plugin. As this content only lives in memory it's the only way to inspect it and can help plugin authors
• we can ask people reporting bugs to turn on the debug flag in production (if there's no sensitive info) so that we have additional info about their env and can help debug the issue
• also we can see the site config after the normalization process, which may contain useful info about how the user provided side config ends up after being normalized

[nebrelbug]

Looks sweet! It looks like there might be some UI bugs when light mode is on?

The problem is fixed when you go to the main site and toggle onto dark mode.

[Drewbi]

I'm thinking since we're trying to stay theme agnostic and can't rely on any css variables I'll just force the dark mode by setting the background to a dark color. Will also have to lock text coloring as well.

[slorber]

Yes I'm fine with this solution.

Unfortunately the usage of theme classic and the color mode impacts the background color globally ^^

[slorber]

@Drewbi tell me if you have time to write some doc, otherwise I'll do it, as it would be cool to release that plugin.

[Drewbi]

@slorber I think you might have a better understanding around why you would want this information and forcing the debug in production so if you aren't too busy that could be helpful, otherwise I'll give it a go and you can tell me what I've missed.

[slorber]

Closing in favor of #3392

[slorber]

Released in alpha 63 🎊 please spread the word 🙏 and tell me if this works fine for you
https://twitter.com/docusaurus/status/1301562737693138944
https://github.com/facebook/docusaurus/releases/tag/v2.0.0-alpha.63