toolbox: adds devtoolbox to easily manage debug components

2024-03-16 09:18:16 -06:00
parent 9cbd0a62ca
commit df20a47253
11 changed files with 181 additions and 32 deletions
--- a/app/client.tsx
+++ b/app/client.tsx
@@ -9,6 +9,8 @@ export const HomeClient: FC<{ body: Promise<string> }> = ({ body }) => {
  return (
    <TTCMD
      body={text}
+      parserId="home"
+      title="home"
    />
  );
 };
--- a/app/globals.css
+++ b/app/globals.css
@@ -31,7 +31,7 @@
  }

  .heading {
-    @apply pb-6 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
+    @apply pb-6 mb-6 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
  }
  .heading h1 {
    @apply text-5xl font-bold;
@@ -50,7 +50,7 @@
    @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg;
  }
  .p {
-    @apply py-1;
+    @apply pb-1;
  }

  .poppable {
--- a/app/help/[article]/client.tsx
+++ b/app/help/[article]/client.tsx
@@ -52,6 +52,8 @@ export const HelpClient: FC<{ body: Promise<string>; title: string }> = ({
          <TTCMD
            body={cleanBody}
            escapeTOC={escapeTOC}
+            parserId={title}
+            title={title}
          />
        </div>
        {toc && (
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import {
  QuestionMarkCircleIcon,
 } from "@heroicons/react/24/solid";
 import Link from "next/link";
+import { DevToolboxContextProvider } from "@/components/devtools/context";

 const inter = Inter({ subsets: ["latin"] });

@@ -50,6 +51,8 @@ export default function RootLayout({
    },
  ];

+  console.log(process.env.NODE_ENV);
+
  return (
    <html lang="en">
      <body className={inter.className + " flex min-h-[100vh]"}>
@@ -71,9 +74,13 @@ export default function RootLayout({
            ))}
          </ul>
        </nav>
-        <main className="p-8 w-full overflow-visible">
-          {children}
-        </main>
+        <DevToolboxContextProvider
+          isDev={process.env.NODE_ENV !== "production"}
+        >
+          <main className="p-8 w-full overflow-visible">
+            {children}
+          </main>
+        </DevToolboxContextProvider>
        <div id="root-portal"></div>
      </body>
    </html>