diff --git a/packages/docusaurus-plugin-debug/src/index.ts b/packages/docusaurus-plugin-debug/src/index.ts index 1ca9d6f0e1af..ac406dbf8d01 100644 --- 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 index 99a4191bc8ea..83ec1e386f8a 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js +++ b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js @@ -8,6 +8,8 @@ import React from 'react'; import DebugLayout from '../DebugLayout'; +import DebugJsonView from '../DebugJsonView'; + import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; function DebugMetadata() { @@ -15,7 +17,7 @@ function DebugMetadata() { return (

Site config

-
{JSON.stringify(siteConfig, null, 2)}
+ ); } diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css deleted file mode 100644 index 99ba01cb7753..000000000000 --- a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * 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. - */ - diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js index c79f7899c4ed..e798dd0f7d61 100644 --- 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}) => (
-

{`>> ${pluginId}`}

-
- -
+ {pluginId} +
); const PluginContent = ({pluginName, pluginContent}) => { - const [visible, setVisible] = useState(true); return (
-

setVisible((v) => !v)} style={{cursor: 'pointer'}}> - {pluginName} -

- {visible && ( -
- {Object.entries(pluginContent) - // filter plugin instances with no content - .filter( - ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent, - ) - .map(([pluginId, pluginInstanceContent]) => { - return ( - - ); - })} -
- )} +

{pluginName}

+
+ {Object.entries(pluginContent) + // filter plugin instances with no content + .filter( + ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent, + ) + .map(([pluginId, pluginInstanceContent]) => { + return ( + + ); + })} +
); }; diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css deleted file mode 100644 index 99ba01cb7753..000000000000 --- a/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * 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. - */ - diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.js new file mode 100644 index 000000000000..84b4c7599c1f --- /dev/null +++ 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 ( + +

Global data

+ + + ); +} + +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 index 558b31c71c50..f8ec854d97cc 100644 --- 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 ( { // 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 deleted file mode 100644 index 99ba01cb7753..000000000000 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * 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. - */ - diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js index 02c2eb7f869b..9e281e011b10 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js +++ b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.js @@ -7,16 +7,17 @@ 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}) => ( + exact + activeStyle={{ + backgroundColor: '#363739', + }}> {children} ); @@ -24,14 +25,17 @@ const DebugNavLink = ({to, children}) => ( function DebugLayout({children}) { return (
-
); } diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css index b5c0e33b4a5b..cd076b67a13d 100644 --- 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 deleted file mode 100644 index 99ba01cb7753..000000000000 --- a/packages/docusaurus-plugin-debug/src/theme/DebugMetadata/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * 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. - */ - diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.js index f10a53a8a6f2..5df4c763fc58 100644 --- 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 ( - {' '}

Registry

-