doc-system

<tosi-doc-system> turns a folder of pre-rendered, statically-served pages into a fast, SPA-like documentation site without giving up SEO or web-1.0 fallback.

Each page is plain HTML — optimized <head>, the doc's markdown already rendered to HTML, and a real <ul> of links to every other page — so search engines and no-JS browsers get everything. When the library's IIFE bundle loads, the <tosi-doc-system> element upgrades that static content into the interactive doc-browser: client-side navigation (no full reloads), live code examples, search, responsive navigation, and a settings menu (theme + language).

<body>
  <tosi-doc-system docs="/docs.json" config='{"projectName":"My Project"}'>
    <article class="doc-content"><!-- markdown pre-rendered to HTML --></article>
    <ul class="doc-nav"><!-- links to every page --></ul>
    <ul class="doc-navbar"><!-- header-bar links --></ul>
  </tosi-doc-system>
  <script src="/iife.js"></script>
</body>

Attributes

docs — URL of the generated docs.json (default /docs.json). The whole doc corpus is the size of a JPEG, so the client fetches it once and renders any page instantly.
config — inline JSON { projectName, projectLinks } baked in at build time.
localized — URL of a tab-separated translation table; when set, it powers the settings menu's language picker.
accent / background / text — base theme colors (most of the palette is derived from accent via color math).

The element is light-DOM (no shadow root) so the pre-rendered markdown remains the real, indexable page content until hydration replaces it with the live browser. Live-example modules default to the xinjs / xinjsui IIFE globals; override by setting the element's context property before it connects.