tcmts.site

Apps

Docs () => Element
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.

Types

Browsable type
A codebase the docs site lets you browse: by `name` under `code/`, everything under the `root` namespace.
CodePage type
What a code page shows of a definition's page (`definitionPage`): its kinds of page share these.
Highlighter type
What highlights the pages' code.
Page type
A page of the docs site.
Rendered type
A page rendered: its HTML, title and sections, the anchors it has, the links it makes to other pages (to check that their anchors resolve), and what's wrong with it.
TocEntry type
An entry of a page's table of contents: one of its `##` sections.

Server

DocsPage ({ file }: { file: string; }) => Promise<Element>
The page kept in `file` (`apps.html`), rendered on the server: its text, and the pages before and after it. The published site (`pnpm docs:site`, which sets `TCM_SITE_VERSION`) says the commit it was built from, and links definitions to its code browser.
PageToc ({ file }: { file: string; }) => Promise<Element | null>
The sections of the page kept in `file`, for the menu, rendered on the server from the page.
SiteLinks () => Promise<Element | null>
The published site's link to its code browser, beside the site's name (not the app's: `rel="external"`).
finishSite (out: string) => string
Make a built static site (`out`, its stylesheet `style.css`) quick to go through: the stylesheet is named by its content (`style.<digest>.css`, which `tcm serve --site` says to keep for good) in every page's link to it, and each page gets SPECULATION_RULES. Returns the stylesheet's new name.
writeCodeBrowser (b: Browsable, out: string, hl: HighlighterGeneric<BundledLanguage, BundledTheme>) => number
Write the pages to browse a codebase into `out` (`code/<name>/` in the docs site): one per namespace (what's in it, its README first) and one per definition (its doc, its code with every reference a link, where it runs, what it uses and what uses it), as tcm's editor pages show them. Returns how many definitions.

Browser

Menu ({ pages, here, toc }: { pages: Page[]; here: string; toc: ReactNode; }) => Element
The menu down the side: every page, numbered, under its section, and the sections of the one being read (`toc`). A filter at the top narrows it to the pages whose names have what's typed; it's kept as the pages change.

Shared

IMAGES Record<string, string>
The images pages show (`![what it shows](images/tcm.svg)`), by where they're kept in the repository, as tcmts.site.SOURCES has the pages: SVGs, shown in the page itself, so the site has no files to serve for them.
LANGS string[]
Languages code blocks are highlighted in.
Layout ({ pages, here }: { pages: Page[]; here: string; }) => Element
A page of the site: the menu down the side, with the sections of the page being read, and the page.
SOURCES Record<string, string>
The site's pages as the codebase has them, by where they're kept in the repository: tcm's docs, and the examples' page. They're values, so the site depends on each by hash: changing a page changes the site.
SPECULATION_RULES string
Chrome's speculation rules for a static site: a page is prerendered while a link to it is pointed at (or pressed), so following it shows it at once. Downloads aren't.
STYLE "/* tcm-ts docs: a text file with a menu */\n:root { --bg: #fff; --fg: #111; --dim: #777; --rule: #…
esc (s: string) => string
highlighter () => Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
The code highlighter: a light and a dark theme, as CSS variables, so the colours follow the system like the rest of the page.
highlighters Map<string, Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>>
The highlighters made, one per process: making one loads every language's grammar.
hrefFor (file: string, live: boolean) => string
Where a link to the page kept in `file` goes: the file itself in the static site, and its path without the `.html` in the app (`apps`, and `./` for the index), which renders it on the server.
pageAt (path: string, pages: Page[]) => Page | undefined
The page of the site a path of the docs app is: `/` (the index), `/apps` or `/apps.html`; undefined for any other path (the code browser's, an example's), which isn't the app's.
pageList (index: string) => Page[]
The site's pages, in the order the index (`docs/README.md`) lists them: its `## headings` are sections, the links in their tables pages.
plain (s: string) => string
renderPage (page: Page, pages: Page[], md: string, hl: HighlighterGeneric<BundledLanguage, BundledTheme>, else…
One page, Markdown `md`, as plain, text-file-looking HTML: headings numbered like sections of a text file, code highlighted, two-column tables as lists of terms, images (IMAGES) in the page. Links to other pages go to their files; a link to something not on the site is shown as its path if `elsewhere` says it's a file of the repository, and is a problem otherwise.
renderedDoc any
A page of the site (`file`), rendered from its Markdown: once per request, however many server components show part of it (React's `cache`, which tcm keeps for the request). `codeBrowser`: link definitions to the code browser.
resolvePath (dir: string, rel: string) => string
`rel` resolved against the directory `dir`, both relative to the repository (`docs`, `../examples/README.md` is `examples/README.md`).
slug (text: string) => string
GitHub's heading anchors (what the docs' own links use).
titleOf (page: Page, rendered: Rendered) => string
A page's title, as the browser's tab shows it.

Tests

testCodeLinksInPages () => Promise<void>
A page's {@link} to a definition is a link to its page in the code browser on the static site (shown as code in the app), with its own text if it gives one; one written in code stays as it's written
testFinishSiteNamesTheStylesheet () => void
finishSite names the stylesheet by its content in every page, at any depth, and adds the speculation rules
testImagesInPages () => Promise<void>
An image in a page is one of IMAGES, shown in the page (a data URL, so the site serves no file for it), and the target that shows it full size; an image that isn't one is a problem
testPageLinksInTheAppAndStatically () => Promise<void>
A page links to the others by their files in the static site, and by paths without `.html` in the app (which renders only those on the server); code is highlighted, and a link to nothing is a problem.
testPagesFollowTheIndex () => void
The site's pages are the index's, in its order and sections, and every one is a page the site has.