Source

// The React app: "/" mounts the claim form, "Your pages" and the example page into the landing;
// "/e/<handle>" hides the landing and shows the editor.
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { Claim, YourPages } from "./Home";
import { EditPage } from "./Editor";
import { SAMPLE, pageHtml } from "./page";

function App() {
  const path = usePath();
  const edit = path.match(/^\/e\/([a-z0-9][a-z0-9-]{1,28}[a-z0-9])\/?$/);
  document.body.classList.toggle("app-mode", Boolean(edit));
  return (
    <>
      {edit ? <EditPage key={edit[1]} handle={edit[1]} /> : null}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
createRoot(document.getElementById("claim")!).render(<Claim />);
createRoot(document.getElementById("mine")!).render(<YourPages />);
const demo = document.getElementById("demo")!;
demo.innerHTML = pageHtml(SAMPLE, "maya", true);
demo.addEventListener("click", (e) => e.preventDefault());