Source

// Still's entry. "/" keeps the static landing and mounts the quick start into its hero. The app's
// routes (/today, /breathe, /meditate, /sounds, /sleep, /progress) hide the landing and load the app.
import { lazy, Suspense, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { useLocation } from "./lib/router";
import { A, Icon, Toaster } from "./ui";
import "./styles.css";

const App = lazy(() => import("./App"));
const APP_ROUTE = /^\/(today|breathe|meditate|sounds|sleep|progress)(\/|$)/;
const LANDING_TITLE = document.title;

function Root() {
  const { path } = useLocation();
  const inApp = APP_ROUTE.test(path);
  document.body.classList.toggle("app-mode", inApp);
  useEffect(() => { if (!inApp) document.title = LANDING_TITLE; }, [inApp]);
  return (
    <>
      {inApp && (
        <Suspense fallback={<div className="page wrap"><div className="spinner" /></div>}>
          <App />
        </Suspense>
      )}
      <Toaster />
    </>
  );
}

/** The landing hero's way in: four doors and one button. */
function Start() {
  return (
    <div className="start card">
      <p className="eyebrow">Start now, no sign-up</p>
      <ul className="start-list">
        <li><A href="/breathe/box?min=1"><Icon name="breathe" /><span><strong>Breathe for a minute</strong><small>Box breathing, 4-4-4-4</small></span></A></li>
        <li><A href="/meditate"><Icon name="meditate" /><span><strong>Meditate</strong><small>12 guided sessions and a timer</small></span></A></li>
        <li><A href="/sounds"><Icon name="sounds" /><span><strong>Sleep sounds</strong><small>Rain, ocean, fire, white noise</small></span></A></li>
        <li><A href="/sleep"><Icon name="sleep" /><span><strong>Sleep stories</strong><small>Six calm stories read aloud</small></span></A></li>
      </ul>
      <A className="btn btn-lg btn-block" href="/today">Open Still</A>
    </div>
  );
}

// The night look before the app has loaded, so sleep screens never flash bright.
document.body.classList.toggle("night", /^\/(sleep(\/|$)|meditate\/falling-asleep)/.test(location.pathname));
createRoot(document.getElementById("app")!).render(<Root />);
const startSlot = document.getElementById("start");
if (startSlot) createRoot(startSlot).render(<Start />);

if (import.meta.env.PROD && "serviceWorker" in navigator) {
  window.addEventListener("load", () => void navigator.serviceWorker.register("/sw.js").catch(() => null));
}

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