chore: preview styles

wevm · Feb 9, 2024 · bdd419d · bdd419d
1 parent fef4bb4
commit bdd419d
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 25 deletions.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -14,7 +14,10 @@ app.frame('/', (context) => {
       <div
         style={{
           alignItems: 'center',
-          background: 'linear-gradient(to right, #432889, #17101F)',
+          background:
+            status === 'response'
+              ? 'linear-gradient(to right, #432889, #17101F)'
+              : 'black',
           backgroundSize: '100% 100%',
           display: 'flex',
           flexDirection: 'column',

diff --git a/src/index.tsx b/src/index.tsx
@@ -11,7 +11,7 @@ import { type Context, Hono } from 'hono'
 import { ImageResponse } from 'hono-og'
 import { type JSXNode } from 'hono/jsx'
 import { jsxRenderer } from 'hono/jsx-renderer'
-import type { HtmlEscapedString } from 'hono/utils/html'
+import { type HtmlEscapedString } from 'hono/utils/html'
 
 import { Preview, previewStyles } from './preview.js'
 import {
@@ -56,7 +56,7 @@ export class Farc extends Hono {
 
       const serializedContext = serializeJson(context)
       const serializedPreviousContext = serializeJson({
-        ...context,
+        ...previousContext,
         intents: parsedIntents,
       })
 
@@ -89,10 +89,12 @@ export class Farc extends Hono {
             {parsedIntents}
 
             <meta property="farc:context" content={serializedContext} />
-            <meta
-              property="farc:prev_context"
-              content={serializedPreviousContext}
-            />
+            {previousContext && (
+              <meta
+                property="farc:prev_context"
+                content={serializedPreviousContext}
+              />
+            )}
           </head>
         </html>,
       )

diff --git a/src/preview.tsx b/src/preview.tsx
@@ -299,28 +299,92 @@ async function Devtools(props: DevtoolsProps) {
   } = frame
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      <pre style={{ fontFamily: 'monospace' }}>
-        {JSON.stringify(state, null, 2)}
-      </pre>
-
-      <pre style={{ fontFamily: 'monospace' }}>
-        {JSON.stringify(rest, null, 2)}
-      </pre>
-
-      {htmlTags && (
-        <pre style={{ fontFamily: 'monospace' }}>
-          {htmlTags.map((x) => (
-            <code style={{ display: 'grid' }}>{x}</code>
-          ))}
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+      }}
+    >
+      <div
+        style={{
+          borderWidth: '1px',
+          borderRadius: '0.5rem',
+          display: 'grid',
+          gap: '10px',
+          gridTemplateColumns: 'repeat(2, minmax(0,1fr))',
+          maxWidth: '85vw',
+          maxHeight: '48vh',
+        }}
+      >
+        <pre
+          style={{
+            fontFamily: 'monospace',
+            overflow: 'auto',
+            padding: '0.5rem',
+          }}
+        >
+          <div
+            style={{
+              fontFamily: 'sans-serif',
+              fontSize: '0.85rem',
+              fontWeight: 'bold',
+            }}
+          >
+            Current
+          </div>
+          {JSON.stringify(state.context, null, 2)}
         </pre>
-      )}
+        <pre
+          style={{
+            fontFamily: 'monospace',
+            overflow: 'auto',
+            borderLeftWidth: '1px',
+            padding: '0.5rem',
+          }}
+        >
+          <div
+            style={{
+              fontFamily: 'sans-serif',
+              fontSize: '0.85rem',
+              fontWeight: 'bold',
+            }}
+          >
+            Previous
+          </div>
+          {JSON.stringify(state.previousContext, null, 2)}
+        </pre>
+      </div>
 
-      {debug && (
+      <div
+        style={{
+          borderRadius: '0.5rem',
+          borderWidth: '1px',
+          display: 'flex',
+          flexDirection: 'column',
+          maxWidth: '85vw',
+          overflow: 'auto',
+          padding: '0.5rem',
+        }}
+      >
         <pre style={{ fontFamily: 'monospace' }}>
-          {JSON.stringify(debug, null, 2)}
+          {JSON.stringify(rest, null, 2)}
         </pre>
-      )}
+
+        {htmlTags && (
+          <pre style={{ fontFamily: 'monospace' }}>
+            {htmlTags.map((x) => (
+              <code style={{ display: 'grid' }}>{x}</code>
+            ))}
+          </pre>
+        )}
+
+        {debug && (
+          <pre style={{ fontFamily: 'monospace' }}>
+            {JSON.stringify(debug, null, 2)}
+          </pre>
+        )}
+      </div>
     </div>
   )
 }