Support minimal theme to strip out the header (for the chrome extension)

app/components/CodeEditor.tsx

@@ -6,6 +6,7 @@ import {
   ViewUpdate,
 } from "@uiw/react-codemirror";
 import { useRef, useEffect } from "react";
+import { useJsonDoc } from "~/hooks/useJsonDoc";
 import { getEditorSetup } from "~/utilities/codeMirrorSetup";
 import { darkTheme, lightTheme } from "~/utilities/codeMirrorTheme";
 import { useTheme } from "./ThemeProvider";
@@ -92,10 +93,14 @@ export function CodeEditor(opts: CodeEditorProps) {
     }
   }, [selection, view, setSelectionRef.current]);
 
+  const { minimal } = useJsonDoc();
+
   return (
     <div>
       <div
-        className="h-jsonViewerHeight overflow-y-auto no-scrollbar"
+        className={`${
+          minimal ? "h-jsonViewerHeightMinimal" : "h-jsonViewerHeight"
+        } overflow-y-auto no-scrollbar`}
         ref={editor}
       />
     </div>

app/components/Column.tsx

@@ -3,6 +3,7 @@ import { colorForItemAtPath } from "~/utilities/colors";
 import { IconComponent } from "~/useColumnView";
 import { useJson } from "../hooks/useJson";
 import { memo, useMemo } from "react";
+import { useJsonDoc } from "~/hooks/useJsonDoc";
 
 export type ColumnProps = {
   id: string;
@@ -15,6 +16,7 @@ export type ColumnProps = {
 function ColumnElement(column: ColumnProps) {
   const { id, title, children } = column;
   const [json] = useJson();
+  const { minimal } = useJsonDoc();
   const iconColor = useMemo(() => colorForItemAtPath(id, json), [id, json]);
 
   return (
@@ -27,7 +29,11 @@ function ColumnElement(column: ColumnProps) {
         {column.icon && <column.icon className="h-6 w-6 mr-1" />}
         <Title className="">{title}</Title>
       </div>
-      <div className="overflow-y-auto h-viewerHeight no-scrollbar">
+      <div
+        className={`overflow-y-auto ${
+          minimal ? "h-viewerHeightMinimal" : "h-viewerHeight"
+        } no-scrollbar`}
+      >
         {children}
       </div>
     </div>

app/components/InfoPanel.tsx

@@ -5,8 +5,10 @@ import { InfoHeader } from "./InfoHeader";
 import { ContainerInfo } from "./ContainerInfo";
 import { useSelectedInfo } from "~/hooks/useSelectedInfo";
 import { useRelatedPaths } from "~/hooks/useRelatedPaths";
+import { useJsonDoc } from "~/hooks/useJsonDoc";
 
 export function InfoPanel() {
+  const { minimal } = useJsonDoc();
   const selectedInfo = useSelectedInfo();
   const relatedPaths = useRelatedPaths();
 
@@ -16,7 +18,11 @@ export function InfoPanel() {
 
   return (
     <>
-      <div className="h-inspectorHeight p-4 bg-white border-l-[1px] border-slate-300 overflow-y-auto no-scrollbar transition dark:bg-slate-800 dark:border-slate-600">
+      <div
+        className={`${
+          minimal ? "h-inspectorHeightMinimal" : "h-inspectorHeight"
+        } p-4 bg-white border-l-[1px] border-slate-300 overflow-y-auto no-scrollbar transition dark:bg-slate-800 dark:border-slate-600`}
+      >
         <InfoHeader relatedPaths={relatedPaths} />
 
         <div className="mb-4">

app/components/SideBar.tsx

@@ -6,6 +6,7 @@ import { useJsonDoc } from "~/hooks/useJsonDoc";
 import { ToolTip } from "./ToolTip";
 import { Body } from "./Primitives/Body";
 import { ShortcutIcon } from "./Icons/ShortcutIcon";
+import { useTheme } from "./ThemeProvider";
 
 export function SideBar() {
   const { doc } = useJsonDoc();
@@ -81,6 +82,23 @@ function SidebarLink({
 
   const isActive = location.pathname === to;
 
+  const { minimal } = useJsonDoc();
+  const [theme] = useTheme();
+
+  const queryParams = new URLSearchParams();
+
+  if (typeof minimal === "boolean") {
+    queryParams.set("minimal", String(minimal));
+
+    if (theme) {
+      queryParams.set("theme", theme);
+    }
+  }
+
+  const href = `${to}${
+    queryParams.toString().length > 0 ? `?${queryParams.toString()}` : ""
+  }`;
+
   if (hotKey) {
     const navigate = useNavigate();
     useHotkeys(
@@ -88,7 +106,7 @@ function SidebarLink({
       (e) => {
         e.preventDefault();
         if (!isActive && to) {
-          navigate(to);
+          navigate(href);
         }
       },
       [navigate, isActive, to]
@@ -100,7 +118,7 @@ function SidebarLink({
     : "relative w-10 h-10 mb-1 text-slate-700 hover:bg-slate-300 rounded-sm cursor:pointer transition dark:text-white dark:hover:bg-slate-700";
 
   return !!to ? (
-    <Link to={to} prefetch={isActive ? "none" : "render"}>
+    <Link to={href} prefetch={isActive ? "none" : "render"}>
       <li className={classes}>{children}</li>
     </Link>
   ) : (

app/hooks/useJsonDoc.tsx

@@ -5,6 +5,7 @@ import { JSONDocument } from "~/jsonDoc.server";
 type JsonDocType = {
   doc: JSONDocument;
   path?: string;
+  minimal?: boolean;
 };
 
 const JsonDocContext = createContext<JsonDocType | undefined>(undefined);
@@ -13,13 +14,15 @@ export function JsonDocProvider({
   children,
   doc,
   path,
+  minimal,
 }: {
   children: ReactNode;
   doc: JSONDocument;
   path?: string;
+  minimal?: boolean;
 }) {
   return (
-    <JsonDocContext.Provider value={{ doc, path }}>
+    <JsonDocContext.Provider value={{ doc, path, minimal }}>
       {children}
     </JsonDocContext.Provider>
   );

app/routes/j/$id.tsx

@@ -41,6 +41,7 @@ export const loader: LoaderFunction = async ({ params, request }) => {
   }
 
   const path = getPathFromRequest(request);
+  const minimal = getMinimalFromRequest(request);
 
   if (doc.type == "url") {
     console.log(`Fetching ${doc.url}...`);
@@ -65,12 +66,14 @@ export const loader: LoaderFunction = async ({ params, request }) => {
       doc,
       json,
       path,
+      minimal,
     };
   } else {
     return {
       doc,
       json: JSON.parse(doc.contents),
       path,
+      minimal,
     };
   }
 };
@@ -91,7 +94,24 @@ function getPathFromRequest(request: Request): string | null {
   return `$.${path}`;
 }
 
-type LoaderData = { doc: JSONDocument; json: unknown; path?: string };
+function getMinimalFromRequest(request: Request): boolean | undefined {
+  const url = new URL(request.url);
+
+  const minimal = url.searchParams.get("minimal");
+
+  if (!minimal) {
+    return;
+  }
+
+  return minimal === "true";
+}
+
+type LoaderData = {
+  doc: JSONDocument;
+  json: unknown;
+  path?: string;
+  minimal?: boolean;
+};
 
 export const meta: MetaFunction = ({
   data,
@@ -124,6 +144,7 @@ export default function JsonDocumentRoute() {
       doc={loaderData.doc}
       path={loaderData.path}
       key={loaderData.doc.id}
+      minimal={loaderData.minimal}
     >
       <JsonProvider initialJson={loaderData.json}>
         <JsonSchemaProvider>
@@ -145,7 +166,7 @@ export default function JsonDocumentRoute() {
                     </div>
                   </div>
                   <div className="h-screen flex flex-col sm:overflow-hidden">
-                    <Header />
+                    {!loaderData.minimal && <Header />}
                     <div className="bg-slate-50 flex-grow transition dark:bg-slate-900">
                       <div className="main-container flex justify-items-stretch h-full">
                         <SideBar />

tailwind.config.js

@@ -16,13 +16,15 @@ module.exports = {
       "6xl": ["2.625rem", "3rem"], // 42px
       "7xl": "4rem", // 64px
       "8xl": "8rem", // 128px
-
     },
     extend: {
       height: {
         viewerHeight: "calc(100vh - 146px)",
         inspectorHeight: "calc(100vh - 70px)",
         jsonViewerHeight: "calc(100vh - 106px)",
+        viewerHeightMinimal: "calc(100vh - 106px)",
+        inspectorHeightMinimal: "calc(100vh - 30px)",
+        jsonViewerHeightMinimal: "calc(100vh - 66px)",
       },
       fontFamily: {
         sans: ["Source Sans Pro", "sans-serif"],