@azerion/bunosaurus-plugin-debug 0.0.0-stage → 4.0.0-canary-6927

package/lib/theme/DebugSiteMetadata/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+.sectionTitle {
+  margin-top: 20px;
+}
+
+.listItem {
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.version {
+  float: right;
+}
+
+.name {
+  font-weight: 800;
+  color: #e06b6b;
+}

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@azerion/bunosaurus-plugin-debug",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0-canary-6927+e0f3c69e5",
+  "description": "Debug plugin for Docusaurus.",
+  "main": "lib/index.js",
+  "types": "src/plugin-debug.d.ts",
+  "scripts": {
+    "build": "tsc --build && copy-untyped-files && oxfmt \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "copy-untyped-files --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/azerion/bunosaurus.git",
+    "directory": "packages/docusaurus-plugin-debug"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@docusaurus/core": "npm:@azerion/bunosaurus-core@4.0.0-canary-6927+e0f3c69e5",
+    "@docusaurus/module-type-aliases": "npm:@azerion/bunosaurus-module-type-aliases@4.0.0-canary-6927+e0f3c69e5",
+    "@docusaurus/types": "npm:@azerion/bunosaurus-types@4.0.0-canary-6927+e0f3c69e5",
+    "@docusaurus/utils": "npm:@azerion/bunosaurus-utils@4.0.0-canary-6927+e0f3c69e5",
+    "react-json-view-lite": "^2.5.0",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "engines": {
+    "bun": ">=1.4.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,72 @@
+/**
+ * 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 {normalizeUrl} from '@docusaurus/utils';
+import type {LoadContext, Plugin} from '@docusaurus/types';
+
+export default function pluginDebug({
+  siteConfig: {baseUrl},
+}: LoadContext): Plugin<undefined> {
+  return {
+    name: 'docusaurus-plugin-debug',
+
+    getThemePath() {
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+
+    async allContentLoaded({actions: {addRoute}, allContent}) {
+      // Home is config (duplicate for now)
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/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/DebugSiteMetadata',
+        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,
+        props: {
+          allContent,
+        },
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/globalData']),
+        component: '@theme/DebugGlobalData',
+        exact: true,
+      });
+    },
+  };
+}

package/src/plugin-debug.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@docusaurus/plugin-debug' {
+  import type {LoadContext, Plugin} from '@docusaurus/types';
+
+  export default function pluginDebug(context: LoadContext): Plugin<undefined>;
+}
+
+declare module '@theme/DebugConfig' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugMetadata(): ReactNode;
+}
+
+declare module '@theme/DebugContent' {
+  import type {ReactNode} from 'react';
+  import type {AllContent} from '@docusaurus/types';
+
+  export interface Props {
+    readonly allContent: AllContent;
+  }
+  export default function DebugContent(props: Props): ReactNode;
+}
+
+declare module '@theme/DebugGlobalData' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugGlobalData(): ReactNode;
+}
+
+declare module '@theme/DebugJsonView' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly src: unknown;
+    readonly collapseDepth?: number;
+  }
+  export default function DebugJsonView(props: Props): ReactNode;
+}
+
+declare module '@theme/DebugLayout' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugLayout(props: {children: ReactNode}): ReactNode;
+}
+
+declare module '@theme/DebugRegistry' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugRegistry(): ReactNode;
+}
+
+declare module '@theme/DebugRoutes' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugRoutes(): ReactNode;
+}
+
+declare module '@theme/DebugSiteMetadata' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugSiteMetadata(): ReactNode;
+}

package/src/theme/DebugConfig/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 type {ReactNode} from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+
+export default function DebugMetadata(): ReactNode {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <DebugLayout>
+      <h2>Site config</h2>
+      <DebugJsonView src={siteConfig} collapseDepth={3} />
+    </DebugLayout>
+  );
+}

package/src/theme/DebugContent/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 type {ReactNode} from 'react';
+
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+import type {Props} from '@theme/DebugContent';
+
+function PluginInstanceContent({
+  pluginId,
+  pluginInstanceContent,
+}: {
+  pluginId: string;
+  pluginInstanceContent: unknown;
+}) {
+  return (
+    <section style={{marginBottom: 30}}>
+      <code>{pluginId}</code>
+      <DebugJsonView src={pluginInstanceContent} collapseDepth={2} />
+    </section>
+  );
+}
+
+function PluginContent({
+  pluginName,
+  pluginContent,
+}: {
+  pluginName: string;
+  pluginContent: {[pluginId: string]: unknown};
+}) {
+  return (
+    <section style={{marginBottom: 60}}>
+      <h3>{pluginName}</h3>
+      <div>
+        {Object.entries(pluginContent)
+          // Filter plugin instances with no content
+          .filter(([, pluginInstanceContent]) => !!pluginInstanceContent)
+          .map(([pluginId, pluginInstanceContent]) => (
+            <PluginInstanceContent
+              key={pluginId}
+              pluginId={pluginId}
+              pluginInstanceContent={pluginInstanceContent}
+            />
+          ))}
+      </div>
+    </section>
+  );
+}
+
+export default function DebugContent({allContent}: Props): ReactNode {
+  return (
+    <DebugLayout>
+      <h2>Plugin content</h2>
+      <div>
+        {Object.entries(allContent)
+          // Filter plugins with no content
+          .filter(([, pluginContent]) =>
+            Object.values(pluginContent).some(
+              (instanceContent) => !!instanceContent,
+            ),
+          )
+          .map(([pluginName, pluginContent]) => (
+            <PluginContent
+              key={pluginName}
+              pluginName={pluginName}
+              pluginContent={pluginContent}
+            />
+          ))}
+      </div>
+    </DebugLayout>
+  );
+}

package/src/theme/DebugGlobalData/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 type {ReactNode} from 'react';
+import useGlobalData from '@docusaurus/useGlobalData';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+
+export default function DebugMetadata(): ReactNode {
+  const globalData = useGlobalData();
+  return (
+    <DebugLayout>
+      <h2>Global data</h2>
+      <DebugJsonView src={globalData} collapseDepth={3} />
+    </DebugLayout>
+  );
+}

package/src/theme/DebugJsonView/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 type {ReactNode} from 'react';
+import {
+  JsonView,
+  defaultStyles,
+  type Props as JsonViewProps,
+} from 'react-json-view-lite';
+import type {Props} from '@theme/DebugJsonView';
+import styles from './styles.module.css';
+
+const paraisoStyles: JsonViewProps['style'] = {
+  clickableLabel: defaultStyles.clickableLabel,
+  noQuotesForStringValues: false,
+  container: styles.containerParaiso!,
+  basicChildStyle: styles.basicElementParaiso!,
+  label: styles.labelParaiso!,
+  nullValue: styles.nullValueParaiso!,
+  undefinedValue: styles.undefinedValueParaiso!,
+  stringValue: styles.stringValueParaiso!,
+  booleanValue: styles.booleanValueParaiso!,
+  numberValue: styles.numberValueParaiso!,
+  otherValue: styles.otherValueParaiso!,
+  punctuation: styles.punctuationParaiso!,
+  collapseIcon: styles.collapseIconParaiso!,
+  expandIcon: styles.expandIconParaiso!,
+  collapsedContent: styles.collapseContentParaiso!,
+  childFieldsContainer: styles.childFieldsContainerParaiso!,
+};
+
+export default function DebugJsonView({src, collapseDepth}: Props): ReactNode {
+  return (
+    <JsonView
+      data={src as object}
+      shouldExpandNode={(idx, value) => {
+        if (Array.isArray(value)) {
+          return value.length < 5;
+        }
+
+        return collapseDepth !== undefined && idx < collapseDepth;
+      }}
+      style={paraisoStyles}
+    />
+  );
+}

package/src/theme/DebugJsonView/styles.module.css

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+.containerParaiso {
+  font-family: monospace;
+  cursor: default;
+  background-color: rgb(41 42 43);
+  position: relative;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.basicElementParaiso {
+  color: white;
+  padding: 3px 5px 3px 20px;
+  border-left: 1px solid rgb(79 66 76);
+}
+
+.labelParaiso {
+  color: rgb(231 233 219);
+  letter-spacing: 0.5px;
+  margin-right: 3px;
+}
+
+.nullValueParaiso {
+  display: inline-block;
+  color: rgb(254 196 24);
+  font-size: 11px;
+  font-weight: bold;
+  background-color: rgb(79 66 76);
+  padding: 1px 2px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+.undefinedValueParaiso {
+  color: rgb(141 134 135);
+}
+
+.stringValueParaiso {
+  color: rgb(249 155 21);
+}
+
+.booleanValueParaiso {
+  color: rgb(129 91 164);
+}
+
+.numberValueParaiso {
+  color: rgb(233 107 168);
+}
+
+.otherValueParaiso {
+  color: white;
+}
+
+.punctuationParaiso {
+  color: white;
+}
+
+.expandIconParaiso {
+  display: inline-block;
+  color: rgb(129 91 164);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.collapseIconParaiso::after {
+  content: '\25BE';
+}
+
+.collapseIconParaiso {
+  display: inline-block;
+  color: rgb(6 182 239);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.expandIconParaiso::after {
+  content: '\25B8';
+}
+
+.collapseContentParaiso {
+  color: rgb(249 155 21);
+  font-size: 18px;
+  line-height: 10px;
+  cursor: pointer;
+}
+
+.collapseContentParaiso::after {
+  content: '...';
+}
+
+/*
+Overrides default ul style from Infima
+See https://github.com/AnyRoad/react-json-view-lite/issues/38
+*/
+.childFieldsContainerParaiso {
+  margin: 0;
+  padding: 0;
+}

package/src/theme/DebugLayout/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 type {ReactNode} from 'react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
+  return (
+    <Link
+      className={styles.navlink}
+      isNavLink
+      to={to}
+      exact
+      activeStyle={{
+        backgroundColor: '#363739',
+      }}>
+      {children}
+    </Link>
+  );
+}
+
+export default function DebugLayout({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <>
+      <Head>
+        <html lang="en" />
+        <title>Docusaurus debug panel</title>
+        <meta name="robots" content="noindex" />
+      </Head>
+
+      <div>
+        <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 className={styles.container}>{children}</main>
+      </div>
+    </>
+  );
+}

package/src/theme/DebugLayout/styles.module.css

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+.container {
+  padding: 20px;
+  padding-top: 80px;
+  overflow-x: hidden;
+  background-color: #18191a;
+  color: white;
+  min-height: 100vh;
+}
+
+.container code {
+  color: white;
+  background-color: #444950;
+}
+
+.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;
+}
+
+.navlink:hover {
+  text-decoration: none;
+  background-color: #292a2b;
+}
+
+.active {
+  background-color: #363739;
+}
+
+@media screen and (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);
+  }
+}

package/src/theme/DebugRegistry/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 type {ReactNode} from 'react';
+import registry from '@generated/registry';
+import DebugLayout from '@theme/DebugLayout';
+import styles from './styles.module.css';
+
+export default function DebugRegistry(): ReactNode {
+  return (
+    <DebugLayout>
+      <h2>Registry</h2>
+      <ul className="clean-list">
+        {Object.entries(registry).map(([chunkName, [, aliasedPath]]) => (
+          <li key={chunkName} className={styles.listItem}>
+            <div style={{marginBottom: '10px'}}>
+              Chunk Name: <code>{chunkName}</code>
+            </div>
+            <div>
+              Aliased Path: <code>{aliasedPath}</code>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </DebugLayout>
+  );
+}

package/src/theme/DebugRegistry/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+.listItem {
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}