Docs

tcmts.site.Docs · #dnqa3fyf · term · runs in the browser

uses tcmts.react.useAppLinks, which uses tcmts.react.router, which uses tcmts.react.createRouter, which uses IntersectionObserver

tcm's docs site, as an app: the page the URL names (pageAt; the index for any other path), with a menu that filters in the browser. The frame and the menu render in the browser, from the index; what's rendered on the server from the codebase's pages is a page's text (DocsPage) and its sections in the menu (PageToc), so going to another page reads only those. A link to another page is followed in the app, and other links (the code browser, the examples) are the browser's. tcm dev tcmts.site.Docs serves it while you write; pnpm docs:site builds it as a static site, every page rendered as it's built.

import { README } from "#codebase/tcmts/docs";
import { Stylesheet, useAppLinks, useLocation } from "#codebase/tcmts/react";
import { Layout, pageAt, pageList, STYLE } from "#codebase/tcmts/site";

export function Docs() {
  const pages = pageList(README);
  useAppLinks((p) => pageAt(p, pages) !== undefined);
  const page = pageAt(useLocation().path, pages) ?? pages[0]!;
  return (
    <>
      <Stylesheet css={STYLE} />
      <Layout pages={pages} here={page.file} />
    </>
  );
}