feat(v2): Collect plugin versions to allow them to be inspected in debug plugin (#3050)

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

@@ -10,6 +10,7 @@ import Layout from '@theme/Layout';
 
 import registry from '@generated/registry';
 import routes from '@generated/routes';
+import siteMetadata from '@generated/site-metadata';
 
 import styles from './styles.module.css';
 
@@ -17,7 +18,28 @@ function Debug() {
   return (
     <Layout permalink="__docusaurus/debug" title="Debug">
       <main className={styles.Container}>
-        <section>
+        <section className={styles.Section}>
+          <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>
+        </section>
+        <section className={styles.Section}>
           <h2>Registry</h2>
           <ul>
             {Object.values(registry).map(([, aliasedPath, resolved]) => (
@@ -28,7 +50,7 @@ function Debug() {
             ))}
           </ul>
         </section>
-        <section>
+        <section className={styles.Section}>
           <h2>Routes</h2>
           <ul>
             {routes.map(({path, exact}) => (

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

@@ -7,5 +7,11 @@
 
 .Container {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   margin: 1em;
 }
+
+.Section {
+  width: 500px;
+}