diff --git a/docs.html b/docs.html index 37f7829..7af594f 100644 --- a/docs.html +++ b/docs.html @@ -16,7 +16,6 @@ -
diff --git a/index.html b/index.html index cfdd13d..f08c930 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,6 @@ -
diff --git a/keys.html b/keys.html index de4789b..01601c3 100644 --- a/keys.html +++ b/keys.html @@ -16,7 +16,6 @@ -
diff --git a/src/web/app.tsx b/src/web/app.tsx index e609393..08ca151 100644 --- a/src/web/app.tsx +++ b/src/web/app.tsx @@ -1,4 +1,3 @@ -import { createRoot } from "react-dom/client"; import { useState, useEffect, useCallback } from "react"; import { ReactFlow, @@ -13,7 +12,7 @@ import { } from "@xyflow/react"; import "@xyflow/react/dist/style.css"; import "./lockdown"; -import { renderNavbar } from "./navbar"; +import { renderPage } from "./layout"; const TEAM_ID = "T024F7C8B"; const slackLink = (channelId: string) => @@ -55,8 +54,6 @@ const highlightJson = (json: string): string => }, ); -renderNavbar("map"); - interface GraphNode { id: string; type: string; @@ -372,4 +369,4 @@ function App() { ); } -createRoot(document.getElementById("app")!).render(); +renderPage("map", ); diff --git a/src/web/docs.tsx b/src/web/docs.tsx index 3797fd6..86c5124 100644 --- a/src/web/docs.tsx +++ b/src/web/docs.tsx @@ -1,14 +1,22 @@ +import { useEffect } from "react"; import "./lockdown"; -import { renderNavbar } from "./navbar"; +import { renderPage } from "./layout"; -renderNavbar("docs"); +function DocsPage() { + useEffect(() => { + const script = document.createElement("script"); + script.src = "https://cdn.jsdelivr.net/npm/@scalar/api-reference"; + script.onload = () => { + const Scalar = (window as any).Scalar; + if (Scalar) { + Scalar.createApiReference("#scalar-api-reference", { url: "/spec.json" }); + } + }; + document.head.appendChild(script); + return () => script.remove(); + }, []); -const script = document.createElement("script"); -script.src = "https://cdn.jsdelivr.net/npm/@scalar/api-reference"; -script.onload = () => { - const Scalar = (window as any).Scalar; - if (Scalar) { - Scalar.createApiReference("#app", { url: "/spec.json" }); - } -}; -document.head.appendChild(script); + return
; +} + +renderPage("docs", ); diff --git a/src/web/keys.tsx b/src/web/keys.tsx index 8a18d36..6a4efbf 100644 --- a/src/web/keys.tsx +++ b/src/web/keys.tsx @@ -1,11 +1,8 @@ import { useState, useEffect } from "react"; -import { createRoot } from "react-dom/client"; -import { renderNavbar } from "./navbar"; +import { renderPage } from "./layout"; import { authClient } from "../lib/auth-client"; import "./lockdown"; -renderNavbar("usage"); - function KeysList() { const { data: session, isPending } = authClient.useSession(); const [channels, setChannels] = useState([]); @@ -157,10 +154,10 @@ function KeysList() { ); } -createRoot(document.getElementById("app")!).render( +renderPage("keys", (

integrate with indigest

{/**

for now, all keys are read-only

**/} -
, -); +
+)); diff --git a/src/web/layout.tsx b/src/web/layout.tsx new file mode 100644 index 0000000..934eef6 --- /dev/null +++ b/src/web/layout.tsx @@ -0,0 +1,33 @@ +import { StrictMode, type ReactNode } from "react"; +import { createRoot } from "react-dom/client"; +import posthog from "posthog-js"; +import { PostHogProvider } from "@posthog/react"; +import { Navbar } from "./navbar"; + +posthog.init("phc_BCfnEJYUncGL4otpd7a7MHdtRotSvn5t634cZcnnzbBq", { + api_host: "https://u.moldycrust.pizza", + defaults: "2026-05-30", +}); + +export function RootLayout({ + active, + children, +}: { + active: string; + children: ReactNode; +}) { + return ( + + + + {children} + + + ); +} + +export function renderPage(active: string, page: ReactNode) { + const el = document.getElementById("app"); + if (!el) throw new Error("Missing #app root element"); + createRoot(el).render({page}); +} diff --git a/src/web/navbar.tsx b/src/web/navbar.tsx index 61e9615..992238b 100644 --- a/src/web/navbar.tsx +++ b/src/web/navbar.tsx @@ -1,15 +1,7 @@ -import { useState, useEffect, StrictMode } from "react"; -import { createRoot } from "react-dom/client"; +import { useState, useEffect } from "react"; import { authClient } from "../lib/auth-client"; -import ReactDOM from 'react-dom/client' -import './index.css' -import posthog from 'posthog-js' -import { PostHogProvider } from '@posthog/react' - - - -function Navbar({ active }: { active: string }) { +export function Navbar({ active }: { active: string }) { const { data: session, isPending } = authClient.useSession(); const [stars, setStars] = useState(null); @@ -33,67 +25,54 @@ function Navbar({ active }: { active: string }) { .catch(() => { }); }, []); - posthog.init('phc_BCfnEJYUncGL4otpd7a7MHdtRotSvn5t634cZcnnzbBq', { - api_host: 'https://u.moldycrust.pizza', - defaults: '2026-05-30', - }) - return ( - + ); } - -export function renderNavbar(active: string) { - const el = document.getElementById("navbar"); - if (el) createRoot(el).render(); -} diff --git a/src/web/usage.tsx b/src/web/usage.tsx index 5ec30cf..2011b46 100644 --- a/src/web/usage.tsx +++ b/src/web/usage.tsx @@ -1,10 +1,7 @@ import Markdown from "react-markdown"; -import { createRoot } from "react-dom/client"; import remarkGfm from "remark-gfm"; import "./lockdown"; -import { renderNavbar } from "./navbar"; - -renderNavbar("usage"); +import { renderPage } from "./layout"; const markdown = `# Slack Bot Usage @@ -73,8 +70,8 @@ If you want to add an older message to the feed without waiting for the Yep!/No - \`/in status\` — Show channel status, feeds, and permissions.`; -createRoot(document.getElementById("app")!).render( +renderPage("usage", (
{markdown} -
, -); + +)); diff --git a/usage.html b/usage.html index 4ecd1d0..1e69494 100644 --- a/usage.html +++ b/usage.html @@ -16,7 +16,6 @@ -