Source

// Resume's entry. "/" keeps the static landing and mounts the editor and "Your shared resumes" into it;
// "/r/<id>" (the public view) and "/r/<id>/admin" (the owner's) hide the landing. The resume page and the
// Bounded client load only on those routes, so the landing stays light.
import { lazy, Suspense, type ReactNode } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { AskHost, ResumeSkeleton, Toaster } from "./ui";
import { Builder } from "./Builder";
import { YourResumes } from "./Mine";
import "./styles.css";

const ResumePage = lazy(() => import("./ResumePage").then((m) => ({ default: m.ResumePage })));
const resumeRoute = (path: string) => path.match(/^\/r\/([A-Za-z0-9]{8,32})(\/admin)?\/?$/);

/** Landing pieces render only on the landing, so a resume page does not run the editor behind it. */
function OnLanding({ children }: { children: ReactNode }) {
  return resumeRoute(usePath()) ? null : <>{children}</>;
}

function App() {
  const path = usePath();
  const route = resumeRoute(path);
  document.documentElement.classList.toggle("app-mode", Boolean(route));
  return (
    <>
      {route ? <Suspense fallback={<ResumeSkeleton />}><ResumePage key={path} id={route[1]} admin={Boolean(route[2])} /></Suspense> : null}
      <Toaster />
      <AskHost />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const editorSlot = document.getElementById("editor");
if (editorSlot) createRoot(editorSlot).render(<OnLanding><Builder /></OnLanding>);
const mineSlot = document.getElementById("mine");
if (mineSlot) createRoot(mineSlot).render(<OnLanding><YourResumes /></OnLanding>);