litruv 10e9f7ac2f Port Docs-Viewer to slatehtml as the docs-viewer package.
Replace the classic DOM shell with slate widgets, markdown→slate rendering, and a CI index build that uses build-docs.cjs.
2026-08-02 20:48:31 +10:00
2025-03-24 16:29:34 +11:00
2025-03-26 22:20:19 +11:00
2025-02-12 22:09:08 +11:00
2025-02-10 13:46:06 +11:00

Docs Viewer

Static documentation viewer built on slatehtml + slatehtml-ui: panel shell, live search, wiki links, and markdown as slate blocks (inline via slate-rich-text).

Install (consumer sites)

npm install github:litruv/Docs-Viewer#slatehtml
# peers / siblings as needed:
npm install slatehtml slatehtml-ui

Local sibling checkout:

{
  "dependencies": {
    "docs-viewer": "file:../Docs-Viewer",
    "slatehtml": "file:../slatehtml",
    "slatehtml-ui": "file:../slatehtml/packages/slatehtml-ui"
  }
}

App usage

<body>
  <slate-docs-viewer index="./index.json"></slate-docs-viewer>
  <script type="module" src="./main.js"></script>
</body>
import "slatehtml";
import "slatehtml-ui/app-bar";
import "slatehtml-ui/icon";
import "slatehtml-ui/text-field";
import "slatehtml-ui/side-bar";
import "slatehtml-ui/text";
import "slatehtml-ui/progress";
import "slatehtml-ui/alert";
import "slatehtml-ui/divider";
import { configure } from "slatehtml-ui/configure";
import { fontAwesomeSvg } from "slatehtml-ui/icons/fontawesome";
import { mountDocs } from "docs-viewer";
import "docs-viewer/prose.css";

configure({ icons: fontAwesomeSvg });
await mountDocs("slate-docs-viewer");

Vite needs the UMC plugin with UI + this packages src:

import { umc } from "slatehtml/umc/vite";
import { createRequire } from "node:module";
import { dirname, join } from "node:path";

const require = createRequire(import.meta.url);
const uiSrc = join(dirname(require.resolve("slatehtml-ui/package.json")), "src");
const docsSrc = join(dirname(require.resolve("docs-viewer/package.json")), "src");

export default {
  plugins: [umc({ roots: [uiSrc, docsSrc] })],
};

Develop this repo

npm install   # expects ../slatehtml checkout
npm run build:index
npm run dev

Content contract

Same as before:

  • docs/**/*.md + YAML frontmatter
  • index.json metadata; documents from npm run build:index
  • Wiki [[Page Title]], embeds ![[image.png]]
Languages
JavaScript 95.5%
CSS 3.5%
HTML 1%