feat(v2): debug pages + debug layout + ability to debug content (#3229)

* improve debug plugin:
- add multiple debug pages + debug layout
- ability to debug plugin contentLoaded data

* add missing dependency

* fix broken test

* improve content rendering a bit

* create basic DebugJsonView

* fix ReactJson SSR issues

packages/docusaurus-plugin-debug/src/index.ts

@@ -6,13 +6,20 @@
  */
 
 import {LoadContext, Plugin} from '@docusaurus/types';
-import {normalizeUrl} from '@docusaurus/utils';
-
+import {docuHash, normalizeUrl} from '@docusaurus/utils';
 import path from 'path';
 
 export default function pluginContentPages({
   siteConfig: {baseUrl},
+  generatedFilesDir,
 }: LoadContext): Plugin<void> {
+  const pluginDataDirRoot = path.join(
+    generatedFilesDir,
+    'docusaurus-plugin-debug',
+  );
+  const aliasedSource = (source: string) =>
+    `~debug/${path.relative(pluginDataDirRoot, source)}`;
+
   return {
     name: 'docusaurus-plugin-debug',
 
@@ -20,12 +27,63 @@ export default function pluginContentPages({
       return path.resolve(__dirname, '../src/theme');
     },
 
-    contentLoaded({actions: {addRoute}}) {
+    async contentLoaded({actions: {createData, addRoute}, allContent}) {
+      const allContentPath = await createData(
+        // Note that this created data path must be in sync with
+        // metadataPath provided to mdx-loader.
+        `${docuHash('docusaurus-debug-allContent')}.json`,
+        JSON.stringify(allContent, null, 2),
+      );
+
+      // Home is config (duplicate for now)
       addRoute({
         path: normalizeUrl([baseUrl, '__docusaurus/debug']),
-        component: '@theme/Debug',
+        component: '@theme/DebugConfig',
         exact: true,
       });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/config']),
+        component: '@theme/DebugConfig',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/metadata']),
+        component: '@theme/DebugMetadata',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/registry']),
+        component: '@theme/DebugRegistry',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/routes']),
+        component: '@theme/DebugRoutes',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/content']),
+        component: '@theme/DebugContent',
+        exact: true,
+        modules: {
+          allContent: aliasedSource(allContentPath),
+        },
+      });
+    },
+
+    configureWebpack() {
+      return {
+        resolve: {
+          alias: {
+            '~debug': pluginDataDirRoot,
+          },
+        },
+      };
     },
   };
 }