Added inspector-only layout

lib/GlobalState.ts

@@ -30,6 +30,10 @@ export const globalStateMachine = createMachine<
                 cond: 'isHorizontalLayout',
                 target: 'horizontal',
               },
+              {
+                cond: 'isInspectorLayout',
+                target: 'inspector',
+              },
               {
                 target: 'blog',
               },
@@ -49,6 +53,12 @@ export const globalStateMachine = createMachine<
           },
           vertical: {
             entry: ['saveVerticalLayoutToLocalStorage'],
+            on: {
+              TOGGLE_LAYOUT: 'inspector',
+            },
+          },
+          inspector: {
+            entry: ['saveInspectorLayoutToLocalStorage'],
             on: {
               TOGGLE_LAYOUT: 'blog',
             },
@@ -62,6 +72,9 @@ export const globalStateMachine = createMachine<
       isVerticalLayout: () => {
         return localStorage?.getItem('XSTATE_CATALOGUE_LAYOUT') === 'vertical';
       },
+      isInspectorLayout: () => {
+        return localStorage?.getItem('XSTATE_CATALOGUE_LAYOUT') === 'inspector';
+      },
       isHorizontalLayout: () => {
         return (
           localStorage?.getItem('XSTATE_CATALOGUE_LAYOUT') === 'horizontal'
@@ -72,6 +85,9 @@ export const globalStateMachine = createMachine<
       saveBlogLayoutToLocalStorage: () => {
         localStorage?.setItem('XSTATE_CATALOGUE_LAYOUT', 'blog');
       },
+      saveInspectorLayoutToLocalStorage: () => {
+        localStorage?.setItem('XSTATE_CATALOGUE_LAYOUT', 'inspector');
+      },
       saveHorizontalLayoutToLocalStorage: () => {
         localStorage?.setItem('XSTATE_CATALOGUE_LAYOUT', 'horizontal');
       },
@@ -101,6 +117,9 @@ export const useLayout = () => {
     if (state.matches('layout.vertical')) {
       return 'vertical';
     }
+    if (state.matches('layout.inspector')) {
+      return 'inspector';
+    }
     if (state.matches('layout.horizontal')) {
       return 'horizontal';
     }

lib/Layout.tsx

@@ -110,6 +110,23 @@ export const Layout: React.FC = ({ children }) => {
                   />
                 </svg>
               )}
+              {layout === 'inspector' && (
+                <svg
+                  className="w-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  key="3"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 10h16M4 14h16M4 18h16"
+                  />
+                </svg>
+              )}
             </button>
           )}
           <a

pages/machines/[id].tsx

@@ -86,12 +86,13 @@ const MachinePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
 
   const iframeRef = useRef(null);
   useEffect(() => {
-    const { disconnect } = inspect({
+    const sub = inspect({
       iframe: () => iframeRef.current,
+      url: 'http://localhost:3000/viz',
     });
 
     return () => {
-      disconnect();
+      sub?.disconnect();
     };
   }, [layout, props.slug]);
 
@@ -142,6 +143,19 @@ const Layout = (props: {
       </div>
     );
   }
+  if (layout === 'inspector') {
+    return (
+      <div className="h-full overflow-hidden">
+        <div
+          style={{ height: 'calc(100vh - 50px)' }}
+          className="hidden mb-16 bg-black md:block"
+        >
+          {props.iframe}
+        </div>
+        <div className="hidden">{props.content}</div>
+      </div>
+    );
+  }
   if (layout === 'blog') {
     return (
       <div className="h-full overflow-y-scroll">
@@ -260,15 +274,15 @@ const ShowMachinePage = (props: {
         </div>
       </div>
       <div className="mt-16">
-        <div className="p-6 xl:p-12 -mb-20 text-gray-100 bg-gray-900">
+        <div className="p-6 -mb-20 text-gray-100 bg-gray-900 xl:p-12">
           <div className="container relative max-w-6xl mx-auto">
             <pre>
               <code ref={fileTextRef} className="lang-ts">
                 {props.fileText}
               </code>
             </pre>
             <button
-              className="invisible md:visible absolute top-0 right-0 px-6 py-3 mr-8 font-bold tracking-tight text-gray-100 bg-blue-700 rounded-lg"
+              className="absolute top-0 right-0 invisible px-6 py-3 mr-8 font-bold tracking-tight text-gray-100 bg-blue-700 rounded-lg md:visible"
               onClick={() => {
                 copyToClipboard(props.fileText);
               }}