feat(v2): debug pages + debug layout + ability to debug content (#3229)

* improve debug plugin: - add multiple debug pages + debug layout - ability to debug plugin contentLoaded data * add missing dependency * fix broken test * improve content rendering a bit * create basic DebugJsonView * fix ReactJson SSR issues
2025-05-25 06:56:56 +02:00 · 2020-08-07 11:47:43 +02:00 · 2020-08-07 11:47:43 +02:00 · fe281a8ebe
commit fe281a8ebe
parent be210a1bc4
30 changed files with 511 additions and 110 deletions
--- a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js
+++ b/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.js
@ -0,0 +1,79 @@
+/**
+ * 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 Head from '@docusaurus/Head';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+
+function Layout(props) {
+  const {siteConfig = {}} = useDocusaurusContext();
+  const {
+    favicon,
+    title: siteTitle,
+    themeConfig: {image: defaultImage},
+    url: siteUrl,
+  } = siteConfig;
+  const {
+    children,
+    title,
+    noFooter,
+    description,
+    image,
+    keywords,
+    permalink,
+    version,
+  } = props;
+  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+
+  const metaImage = image || defaultImage;
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  if (!isInternalUrl(metaImage)) {
+    metaImageUrl = metaImage;
+  }
+  const faviconUrl = useBaseUrl(favicon);
+
+  return (
+    <div className="container-fluid vh-100 vw-100 row m-0 p-0">
+      <Head>
+        {/* TODO: Do not assume that it is in english language */}
+        <html lang="en" />
+
+        {metaTitle && <title>{metaTitle}</title>}
+        {metaTitle && <meta property="og:title" content={metaTitle} />}
+        {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+        {description && <meta name="description" content={description} />}
+        {description && (
+          <meta property="og:description" content={description} />
+        )}
+        {version && <meta name="docsearch:version" content={version} />}
+        {keywords && keywords.length && (
+          <meta name="keywords" content={keywords.join(',')} />
+        )}
+        {metaImage && <meta property="og:image" content={metaImageUrl} />}
+        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && (
+          <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
+        )}
+        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
+        <meta name="twitter:card" content="summary_large_image" />
+      </Head>
+      <Navbar />
+      <div className="container-fluid px-0 d-inline-flex flex-row">
+        {children}
+      </div>
+      {!noFooter && <Footer />}
+    </div>
+  );
+}
+
+export default Layout;