mirror of
https://github.com/litruv/Docs-Viewer.git
synced 2026-09-10 01:59:44 +10:00
litruv
f4b40e0d97
Show a top bar with menu/logo/title when the nav drawer is active, hide the outline at the same breakpoint, fix the FA hamburger icon, and use a message glyph for Discord socials.
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
# 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 package’s 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 frontmatterindex.jsonmetadata;documentsfromnpm run build:index- Wiki
[[Page Title]], embeds![[image.png]]