Source

// Sign's entry. "/" keeps the static landing and mounts the start box into it; every other
// route hides the landing. The data client, pdf.js and pdf-lib load only when a page needs them.
import { lazy, Suspense, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster, OfflineNotice } from "./ui";
import { StartDocument } from "./Home";
import { PageSkeleton } from "./Skeleton";
import "./styles.css";

const WriteDocument = lazy(() => import("./Write").then((m) => ({ default: m.WriteDocument })));
const DocPage = lazy(() => import("./DocPage").then((m) => ({ default: m.DocPage })));
const SignPage = lazy(() => import("./SignPage").then((m) => ({ default: m.SignPage })));

const ID = "([A-Za-z0-9]{8,32})";

function App() {
  const path = usePath();
  const doc = path.match(new RegExp(`^/d/${ID}/?$`));
  const sign = path.match(new RegExp(`^/s/${ID}/${ID}/?$`));
  const write = path === "/new";
  const appMode = Boolean(doc || sign || write);
  document.body.classList.toggle("app-mode", appMode);
  useEffect(() => { if (!appMode) document.title = TITLE; }, [appMode]);
  return (
    <>
      <OfflineNotice />
      <Suspense fallback={write ? null : <PageSkeleton side={Boolean(doc)} />}>
        {write && <WriteDocument />}
        {doc && <DocPage key={doc[1]} docId={doc[1]} />}
        {sign && <SignPage key={sign[0]} docId={sign[1]} signerId={sign[2]} />}
      </Suspense>
      <Toaster />
    </>
  );
}

const TITLE = document.title;
createRoot(document.getElementById("app")!).render(<App />);
const start = document.getElementById("start");
if (start) createRoot(start).render(<StartDocument />);

// The header gets its hairline once the page scrolls under it.
const head = document.querySelector(".site-head");
const onScroll = () => head?.classList.toggle("scrolled", window.scrollY > 4);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();