Source

// Canvas's entry. "/" keeps the static landing and mounts the board starter and "Your boards" into it.
// "/b/<id>" is a board (view only, or editable with "#edit=<key>"), "/b/<id>/admin#k=<key>" the admin
// link, and "/new" or "/new/<template>" make a board and open it.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { StartBoard, YourBoards, NewBoard } from "./Home";

// The board page brings the data client and, after it, the editor; the landing page loads neither.
const BoardPage = lazy(() => import("./BoardPage").then((m) => ({ default: m.BoardPage })));
import "./styles.css";

// The editor's fonts are served from this site, not a CDN.
(window as unknown as { EXCALIDRAW_ASSET_PATH: string }).EXCALIDRAW_ASSET_PATH = "/";

const LANDING_TITLE = document.title;

function App() {
  const path = usePath();
  const board = path.match(/^\/b\/([A-Za-z0-9]{16,32})(\/admin)?\/?$/);
  const make = path.match(/^\/new(?:\/([a-z-]+))?\/?$/);
  document.body.classList.toggle("app-mode", Boolean(board || make));
  if (!board && !make) document.title = LANDING_TITLE;
  return (
    <>
      {board ? (
        <Suspense fallback={<div className="board-loading"><span className="spinner" /> Opening the board...</div>}>
          <BoardPage key={board[1]} boardId={board[1]} admin={Boolean(board[2])} />
        </Suspense>
      ) : make ? <NewBoard key={path} template={make[1] ?? null} /> : null}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const startSlot = document.getElementById("start");
if (startSlot) createRoot(startSlot).render(<StartBoard />);
const yoursSlot = document.getElementById("your-boards");
if (yoursSlot) createRoot(yoursSlot).render(<YourBoards />);

const head = document.querySelector(".site-head");
const onScroll = () => head?.classList.toggle("scrolled", window.scrollY > 4);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();