Support static notebook export & charts

Add CI workflows to build/deploy and schedule weekly data refresh; add an export script for notebooks. Switch Marimo iframe to load exported static HTML (HEAD check for 404), improve error UI, and remove local marimo server dependency. Convert insight pages to client components and simplify rendering, adjust layout scrolling. Add reusable chart UI components (DataTable, PlotlyChart, StatCard) and enable Next.js static export + unoptimized images. Update app package scripts and add Plotly dependencies; update .gitignore to ignore exported notebook assets. Various data/notebook model updates and other housekeeping (removed serve_notebooks.py).

Author: kenyiu

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Build and deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: astral-sh/setup-uv@v4
+      - run: uv python install 3.13
+
+      - name: Install Python deps
+        run: uv sync
+
+      - name: Check if notebooks changed
+        id: changed
+        run: |
+          git diff --name-only HEAD~1 HEAD 2>/dev/null | grep -q '^notebooks/' \
+            && echo "notebooks=true" >> $GITHUB_OUTPUT \
+            || echo "notebooks=false" >> $GITHUB_OUTPUT
+
+      - name: Export notebooks
+        if: steps.changed.outputs.notebooks == 'true' || github.event_name != 'push'
+        env:
+          OSO_API_KEY: ${{ secrets.OSO_API_KEY }}
+        run: uv run python scripts/export_notebooks.py
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          cache-dependency-path: app/pnpm-lock.yaml
+
+      - name: Install Node deps
+        run: cd app && pnpm install
+
+      - name: Build Next.js
+        run: cd app && pnpm build

.github/workflows/refresh-data.yml

@@ -0,0 +1,11 @@
+name: Weekly data refresh
+
+on:
+  schedule:
+    - cron: '0 3 * * 0'  # Sunday 3am UTC
+  workflow_dispatch:
+
+jobs:
+  refresh:
+    uses: ./.github/workflows/deploy.yml
+    secrets: inherit

.gitignore

@@ -14,11 +14,14 @@ __pycache__/
 # --- Environment variables ---
 .env
 .env.local
+app/.env.*
 
 # --- Next.js (app/) ---
 app/.next/
 app/out/
 app/node_modules/
+app/public/notebooks/
+app/public/data/
 
 # --- OS ---
 .DS_Store

app/app/insights/defi-developer-journeys/page.tsx

@@ -1,9 +1,5 @@
+'use client';
 import MarimoIframe from '@/components/MarimoIframe';
-
 export default function DefiDeveloperJourneys() {
-  return (
-    <div className="h-full w-full">
-      <MarimoIframe notebookName="notebooks/insights/defi-developer-journeys" />
-    </div>
-  );
+  return <MarimoIframe notebookName="notebooks/insights/defi-developer-journeys" />;
 }

app/app/insights/developer-lifecycle/page.tsx

@@ -1,9 +1,5 @@
+'use client';
 import MarimoIframe from '@/components/MarimoIframe';
-
 export default function DeveloperLifecycle() {
-  return (
-    <div className="h-full w-full">
-      <MarimoIframe notebookName="notebooks/insights/developer-lifecycle" />
-    </div>
-  );
+  return <MarimoIframe notebookName="notebooks/insights/developer-lifecycle" />;
 }

app/app/insights/developer-report-2025/page.tsx

@@ -1,9 +1,5 @@
+'use client';
 import MarimoIframe from '@/components/MarimoIframe';
-
 export default function DeveloperReport2025() {
-  return (
-    <div className="h-full w-full">
-      <MarimoIframe notebookName="notebooks/insights/developer-report-2025" />
-    </div>
-  );
+  return <MarimoIframe notebookName="notebooks/insights/developer-report-2025" />;
 }

app/app/insights/developer-retention/page.tsx

@@ -1,9 +1,5 @@
+'use client';
 import MarimoIframe from '@/components/MarimoIframe';
-
 export default function DeveloperRetention() {
-  return (
-    <div className="h-full w-full">
-      <MarimoIframe notebookName="notebooks/insights/developer-retention" />
-    </div>
-  );
+  return <MarimoIframe notebookName="notebooks/insights/developer-retention" />;
 }

app/app/insights/speedrun-ethereum/page.tsx

@@ -1,9 +1,5 @@
+'use client';
 import MarimoIframe from '@/components/MarimoIframe';
-
 export default function SpeedrunEthereum() {
-  return (
-    <div className="h-full w-full">
-      <MarimoIframe notebookName="notebooks/insights/speedrun-ethereum" />
-    </div>
-  );
+  return <MarimoIframe notebookName="notebooks/insights/speedrun-ethereum" />;
 }

app/app/layout.tsx

@@ -17,7 +17,7 @@ export default function RootLayout({
       <body className="bg-white">
         <div className="flex h-screen overflow-hidden">
           <Sidebar />
-          <main className="flex-1 flex flex-col overflow-hidden bg-white">
+          <main className="flex-1 flex flex-col overflow-y-auto bg-white">
             {children}
           </main>
         </div>

app/components/MarimoIframe.tsx

@@ -4,20 +4,33 @@ import { useEffect, useState } from 'react';
 
 interface MarimoIframeProps {
   notebookName: string;
-  marimoPort?: number;
 }
 
-export default function MarimoIframe({ notebookName, marimoPort = 8000 }: MarimoIframeProps) {
+export default function MarimoIframe({ notebookName }: MarimoIframeProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
-  // Remove .py extension if present, and construct URL
+  // Remove .py extension if present, and construct URL to static exported HTML
   const notebookPath = notebookName.replace(/\.py$/, '');
-  const marimoUrl = `http://localhost:${marimoPort}/${notebookPath}`;
+  const notebookUrl = `/${notebookPath}.html`;
 
   useEffect(() => {
     setIsLoading(true);
     setHasError(false);
-  }, [notebookName]);
+    // Use fetch HEAD to detect 404s — iframe onError only fires for network failures,
+    // not HTTP error responses, so a missing file would silently show a 404 page.
+    fetch(notebookUrl, { method: 'HEAD' })
+      .then(res => {
+        if (!res.ok) {
+          setHasError(true);
+          setIsLoading(false);
+        }
+        // If ok, let the iframe's onLoad handle clearing the loading state
+      })
+      .catch(() => {
+        setHasError(true);
+        setIsLoading(false);
+      });
+  }, [notebookUrl]);
 
   const handleLoad = () => {
     setIsLoading(false);
@@ -45,24 +58,23 @@ export default function MarimoIframe({ notebookName, marimoPort = 8000 }: Marimo
           </div>
           <div className="text-red-600 font-semibold text-lg mb-2">Failed to load notebook</div>
           <div className="text-gray-600 text-sm mb-6 text-center max-w-md">
-            Make sure the marimo server is running on port {marimoPort}
+            Notebook not exported yet — run <code className="bg-gray-100 px-1 rounded">pnpm export:notebooks</code>
           </div>
           <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-left max-w-md w-full">
-            <div className="text-xs font-semibold text-gray-500 mb-2">Expected URL:</div>
-            <code className="text-xs text-gray-700 break-all">{marimoUrl}</code>
-          </div>
-          <div className="mt-6 text-gray-500 text-sm">
-            Run: <code className="bg-gray-100 px-2 py-1 rounded text-xs">uv run python serve_notebooks.py</code> from the <code className="bg-gray-100 px-2 py-1 rounded text-xs">ddp</code> directory
+            <div className="text-xs font-semibold text-gray-500 mb-2">Expected path:</div>
+            <code className="text-xs text-gray-700 break-all">{notebookUrl}</code>
           </div>
         </div>
       )}
-      <iframe
-        src={marimoUrl}
-        className="w-full h-full border-0"
-        onLoad={handleLoad}
-        onError={handleError}
-        title={notebookName}
-      />
+      {!hasError && (
+        <iframe
+          src={notebookUrl}
+          className="w-full h-full border-0"
+          onLoad={handleLoad}
+          onError={handleError}
+          title={notebookName}
+        />
+      )}
     </div>
   );
 }