Docs Layout

A complete documentation site in the three-column layout developers already know: a section-grouped sidebar on the left, the page in the middle and an "On this page" outline on the right that follows your scroll. It ships with ten realistic pages for a fictional job-queue library, so you can see every building block in context before writing your own.

Pages are data, not HTML. Each one is a list of typed blocks (headings, paragraphs, lists, tables, callouts, code and tabbed code groups, link cards) in src/docs.ts, with a tiny inline syntax for code, bold and cross-page links. The table of contents, search index and previous/next links are all derived from that same data, so adding a page means adding one object.

It is built to be used, not just looked at. Search filters the navigation by title and page content and highlights matches; press / or Cmd+K to focus it and Enter to open the first result. On phones the sidebar becomes an accessible drawer with a focus trap and Esc to close, the outline collapses into a panel, and code tabs support arrow-key navigation. No router, no dependencies beyond Vue.