improve debug plugin:

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

packages/docusaurus-plugin-client-redirects/src/normalizePluginOptions.ts

@@ -8,8 +8,10 @@
 import {PluginOptions, RedirectOption, UserPluginOptions} from './types';
 import * as Joi from '@hapi/joi';
 import {PathnameValidator} from './redirectValidation';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 
 export const DefaultPluginOptions: PluginOptions = {
+  id: DEFAULT_PLUGIN_ID, // TODO temporary
   fromExtensions: [],
   toExtensions: [],
   redirects: [],
@@ -26,6 +28,7 @@ const RedirectPluginOptionValidation = Joi.object<RedirectOption>({
 const isString = Joi.string().required().not(null);
 
 const UserOptionsSchema = Joi.object<UserPluginOptions>({
+  id: Joi.string().optional(), // TODO remove once validation  migrated to new system
   fromExtensions: Joi.array().items(isString),
   toExtensions: Joi.array().items(isString),
   redirects: Joi.array().items(RedirectPluginOptionValidation),

packages/docusaurus-plugin-client-redirects/src/types.ts

@@ -8,6 +8,7 @@
 import {Props} from '@docusaurus/types';
 
 export type PluginOptions = {
+  id: string;
   fromExtensions: string[];
   toExtensions: string[];
   redirects: RedirectOption[];

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -28,7 +28,6 @@ import {
 import {PluginOptionSchema} from './pluginOptionSchema';
 import {
   LoadContext,
-  PluginContentLoadedActions,
   ConfigureWebpackUtils,
   Props,
   Plugin,
@@ -195,13 +194,7 @@ export default function pluginContentBlog(
       };
     },
 
-    async contentLoaded({
-      content: blogContents,
-      actions,
-    }: {
-      content: BlogContent;
-      actions: PluginContentLoadedActions;
-    }) {
+    async contentLoaded({content: blogContents, actions}) {
       if (!blogContents) {
         return;
       }

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

@@ -6,26 +6,84 @@
  */
 
 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',
 
     getThemePath() {
       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,
+          },
+        },
+      };
     },
   };
 }

packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import DebugLayout from '../DebugLayout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function DebugMetadata() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <DebugLayout>
+      <h2>Site config</h2>
+      <div>{JSON.stringify(siteConfig, null, 2)}</div>
+    </DebugLayout>
+  );
+}
+
+export default DebugMetadata;

packages/docusaurus-plugin-debug/src/theme/Debug/styles.module.css → packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css

@@ -5,13 +5,3 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.Container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: 1em;
-}
-
-.Section {
-  width: 500px;
-}

packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import DebugLayout from '../DebugLayout';
+
+function DebugContent({allContent}) {
+  return <DebugLayout>{JSON.stringify(allContent, null, 2)}</DebugLayout>;
+}
+
+export default DebugContent;

packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+

packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+// import styles from './styles.module.css';
+
+const DebugNavLink = ({to, children}) => (
+  <Link
+    style={{margin: 10}}
+    className="button button--primary"
+    isNavLink
+    activeClassName="button--active"
+    to={to}
+    exact>
+    {children}
+  </Link>
+);
+
+function DebugLayout({children}) {
+  return (
+    <div>
+      <nav style={{width: '100%', padding: 10, border: 'solid'}}>
+        <DebugNavLink to="/__docusaurus/debug">Config</DebugNavLink>
+        <DebugNavLink to="/__docusaurus/debug/metadata">Metadata</DebugNavLink>
+        <DebugNavLink to="/__docusaurus/debug/registry">Registry</DebugNavLink>
+        <DebugNavLink to="/__docusaurus/debug/routes">Routes</DebugNavLink>
+        <DebugNavLink to="/__docusaurus/debug/content">Content</DebugNavLink>
+      </nav>
+      <main style={{padding: 20}}>{children}</main>
+    </div>
+  );
+}
+
+export default DebugLayout;

packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

packages/docusaurus-plugin-debug/src/theme/DebugMetadata/index.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import DebugLayout from '../DebugLayout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function DebugMetadata() {
+  const {siteMetadata} = useDocusaurusContext();
+  return (
+    <DebugLayout>
+      <h2>Site Metadata</h2>
+      <div>Docusaurus Version: {siteMetadata.docusaurusVersion}</div>
+      <div>
+        Site Version: {siteMetadata.siteVersion || 'No version specified'}
+      </div>
+      <h3>Plugins and themes:</h3>
+      <ul>
+        {Object.entries(siteMetadata.pluginVersions).map(
+          ([name, versionInformation]) => (
+            <li key={name}>
+              <div>Name: {name}</div>
+              <div>Type: {versionInformation.type}</div>
+              {versionInformation.version && (
+                <div>Version: {versionInformation.version}</div>
+              )}
+            </li>
+          ),
+        )}
+      </ul>
+    </DebugLayout>
+  );
+}
+
+export default DebugMetadata;

packages/docusaurus-plugin-debug/src/theme/DebugMetadata/styles.module.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+

packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import DebugLayout from '../DebugLayout';
+import registry from '@generated/registry';
+
+function DebugRegistry() {
+  return (
+    <DebugLayout>
+      {' '}
+      <h2>Registry</h2>
+      <ul>
+        {Object.values(registry).map(([, aliasedPath, resolved]) => (
+          <li key={aliasedPath}>
+            <div>Aliased Path: {aliasedPath}</div>
+            <div>Resolved Path: {resolved}</div>
+          </li>
+        ))}
+      </ul>
+    </DebugLayout>
+  );
+}
+
+export default DebugRegistry;