feat(v2): officially release @docusaurus/plugin-debug (#3392)

* Add json styling to config debug * Style debug content page * Add style and collapse depth to json viewer * Add style to debug layout * Add style to metadata debug * Add style support to registry debugger * Remove default content if other instances are present * Change colors for more contrast * Add debug routes styles * Add active link style * Fix container css issues * Style registry debug page * Remove unused style modules * Add white space to style files * Add font scaling * Fix prettier errors * Add child routes to route debug * Readd default content plugin json * Add empty home page to debug * Prettier * Revert "Add empty home page to debug" This should be included in a separate PR This reverts commit 9c43c9f. * Set colors to dark theme * Add plugin debug doc + minor fixes + expose global data * more debug plugin doc Co-authored-by: Drewbi <drewalexander986@gmail.com>
facebook · Sep 2, 2020 · 9857f7b · 9857f7b
1 parent 8f24a0a
commit 9857f7b
Show file tree

Hide file tree

Showing 19 changed files with 301 additions and 104 deletions.
diff --git a/packages/docusaurus-plugin-debug/src/index.ts b/packages/docusaurus-plugin-debug/src/index.ts
@@ -50,7 +50,7 @@ export default function pluginContentPages({
 
       addRoute({
         path: normalizeUrl([baseUrl, '__docusaurus/debug/metadata']),
-        component: '@theme/DebugMetadata',
+        component: '@theme/DebugSiteMetadata',
         exact: true,
       });
 
@@ -74,6 +74,12 @@ export default function pluginContentPages({
           allContent: aliasedSource(allContentPath),
         },
       });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/globalData']),
+        component: '@theme/DebugGlobalData',
+        exact: true,
+      });
     },
 
     configureWebpack() {

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js
@@ -8,14 +8,16 @@
 import React from 'react';
 
 import DebugLayout from '../DebugLayout';
+import DebugJsonView from '../DebugJsonView';
+
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function DebugMetadata() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <DebugLayout>
       <h2>Site config</h2>
-      <div>{JSON.stringify(siteConfig, null, 2)}</div>
+      <DebugJsonView src={siteConfig} collapseDepth="3" />
     </DebugLayout>
   );
 }

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js
@@ -5,52 +5,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React from 'react';
 
 import DebugLayout from '../DebugLayout';
 import DebugJsonView from '../DebugJsonView';
 
 const PluginInstanceContent = ({pluginId, pluginInstanceContent}) => (
   <section style={{marginBottom: 30}}>
-    <h4>{`>> ${pluginId}`}</h4>
-    <div
-      style={{
-        marginTop: 10,
-        padding: 10,
-        border: 'thin cyan solid',
-        borderRadius: 5,
-        backgroundColor: 'lightgrey',
-      }}>
-      <DebugJsonView src={pluginInstanceContent} />
-    </div>
+    <code>{pluginId}</code>
+    <DebugJsonView src={pluginInstanceContent} collapseDepth="2" />
   </section>
 );
 
 const PluginContent = ({pluginName, pluginContent}) => {
-  const [visible, setVisible] = useState(true);
   return (
     <section style={{marginBottom: 60}}>
-      <h3 onClick={() => setVisible((v) => !v)} style={{cursor: 'pointer'}}>
-        {pluginName}
-      </h3>
-      {visible && (
-        <div>
-          {Object.entries(pluginContent)
-            // filter plugin instances with no content
-            .filter(
-              ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent,
-            )
-            .map(([pluginId, pluginInstanceContent]) => {
-              return (
-                <PluginInstanceContent
-                  key={pluginId}
-                  pluginId={pluginId}
-                  pluginInstanceContent={pluginInstanceContent}
-                />
-              );
-            })}
-        </div>
-      )}
+      <h3>{pluginName}</h3>
+      <div>
+        {Object.entries(pluginContent)
+          // filter plugin instances with no content
+          .filter(
+            ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent,
+          )
+          .map(([pluginId, pluginInstanceContent]) => {
+            return (
+              <PluginInstanceContent
+                key={pluginId}
+                pluginId={pluginId}
+                pluginInstanceContent={pluginInstanceContent}
+              />
+            );
+          })}
+      </div>
     </section>
   );
 };

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.js
@@ -0,0 +1,24 @@
+/**
+ * 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 DebugJsonView from '../DebugJsonView';
+import useGlobalData from '@docusaurus/useGlobalData';
+
+function DebugMetadata() {
+  const globalData = useGlobalData();
+  return (
+    <DebugLayout>
+      <h2>Global data</h2>
+      <DebugJsonView src={globalData} collapseDepth="3" />
+    </DebugLayout>
+  );
+}
+
+export default DebugMetadata;
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.js
@@ -25,17 +25,28 @@ const BrowserOnlyReactJson = (props) => {
   );
 };
 
-function DebugJsonView({src}) {
+function DebugJsonView({src, collapseDepth}) {
   return (
     <BrowserOnlyReactJson
       src={src}
+      style={{
+        marginTop: '10px',
+        padding: '10px',
+        borderRadius: '4px',
+        backgroundColor: '#292a2b',
+      }}
       name={RootName}
+      theme="paraiso"
       shouldCollapse={(field) => {
         // By default, we collapse the json for performance reasons
         // See https://github.com/mac-s-g/react-json-view/issues/235
-        // only the "root" is not collapsed
-        return field.name !== RootName;
+        // Non-root elements that are larger than 50 fields are collapsed
+        return field.name !== RootName && Object.keys(field.src).length > 50;
       }}
+      collapsed={collapseDepth}
+      groupArraysAfterLength="5"
+      enableClipboard={false}
+      displayDataTypes={false}
     />
   );
 }

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js
@@ -7,31 +7,35 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
-// import styles from './styles.module.css';
+import styles from './styles.module.css';
 
 const DebugNavLink = ({to, children}) => (
   <Link
-    style={{margin: 10}}
-    className="button button--primary"
+    className={styles.navlink}
     isNavLink
-    activeClassName="button--active"
     to={to}
-    exact>
+    exact
+    activeStyle={{
+      backgroundColor: '#363739',
+    }}>
     {children}
   </Link>
 );
 
 function DebugLayout({children}) {
   return (
     <div>
-      <nav style={{width: '100%', padding: 10, border: 'solid'}}>
+      <nav className={styles.nav}>
         <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>
+        <DebugNavLink to="/__docusaurus/debug/globalData">
+          Global data
+        </DebugNavLink>
       </nav>
-      <main style={{padding: 20}}>{children}</main>
+      <main className={styles.container}>{children}</main>
     </div>
   );
 }

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css
@@ -4,3 +4,72 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+.container {
+  padding: 20px;
+  padding-top: 80px;
+  overflow-x: hidden;
+  background-color: #18191a;
+  color: white;
+  min-height: 100vh;
+}
+
+.nav {
+  position: fixed;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 3.75rem;
+  background-color: #242526;
+  width: 100%;
+  z-index: 1;
+}
+
+.navlink {
+  color: white;
+  font-weight: 500;
+  font-size: clamp(12px, 4vw, 16px);
+  text-align: center;
+  border-radius: 4px;
+  padding: 6px 6px;
+}
+
+.navlink:hover {
+  text-decoration: none;
+  background-color: #292a2b;
+}
+
+code {
+  color: white;
+  background-color: #444950;
+}
+
+.active {
+  background-color: #363739;
+}
+
+@media screen and (min-width: 800px) {
+  .nav {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100vh;
+    width: 200px;
+    float: left;
+    background-color: #18191a;
+    border-right: 1px solid #606770;
+    padding-top: 20px;
+  }
+
+  .navlink {
+    width: 80%;
+    margin-top: 20px;
+    text-align: left;
+  }
+
+  .container {
+    padding-top: 40px;
+    float: right;
+    width: calc(100% - 200px);
+  }
+}
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugMetadata/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugMetadata/styles.module.css
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.js
@@ -9,17 +9,21 @@ import React from 'react';
 
 import DebugLayout from '../DebugLayout';
 import registry from '@generated/registry';
+import styles from './styles.module.css';
 
 function DebugRegistry() {
   return (
     <DebugLayout>
-      {' '}
       <h2>Registry</h2>
-      <ul>
+      <ul className={styles.list}>
         {Object.values(registry).map(([, aliasedPath, resolved]) => (
-          <li key={aliasedPath}>
-            <div>Aliased Path: {aliasedPath}</div>
-            <div>Resolved Path: {resolved}</div>
+          <li key={aliasedPath} className={styles.listItem}>
+            <div style={{marginBottom: '10px'}}>
+              Aliased Path: <code>{aliasedPath}</code>
+            </div>
+            <div>
+              Resolved Path: <code>{resolved}</code>
+            </div>
           </li>
         ))}
       </ul>

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css
@@ -5,3 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.list {
+  padding: 0;
+}
+
+.listItem {
+  list-style: none;
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.js
@@ -8,17 +8,29 @@
 import React from 'react';
 
 import DebugLayout from '../DebugLayout';
+import DebugJsonView from '../DebugJsonView';
 import routes from '@generated/routes';
+import styles from './styles.module.css';
 
 function DebugRoutes() {
   return (
     <DebugLayout>
       <h2>Routes</h2>
-      <ul>
-        {routes.map(({path, exact}) => (
-          <li key={path}>
-            <div>Route: {path}</div>
-            <div>Is exact: {String(Boolean(exact))}</div>
+      <ul className={styles.list}>
+        {routes.map(({path, exact, routes: childRoutes}) => (
+          <li key={path} className={styles.listItem}>
+            <div className={styles.route}>
+              <code className={styles.routeName}>{path}</code>
+            </div>
+            <div>
+              Is exact: <code>{String(Boolean(exact))}</code>
+            </div>
+            {childRoutes && (
+              <div>
+                Child Routes:
+                <DebugJsonView src={childRoutes} />
+              </div>
+            )}
           </li>
         ))}
       </ul>