// ----- Documentation app -----
const { useState, useEffect, useRef } = React;
function getSlugFromHash() {
const h = location.hash.replace(/^#\/?/, "").replace(/^\/?/, "");
if (!h) return "overview";
return h.split("?")[0].split("/")[0] || "overview";
}
function DocsHeader() {
return (
);
}
function Sidebar({ currentSlug, onNavigate }) {
return (
);
}
function TableOfContents({ slug }) {
const [headings, setHeadings] = useState([]);
const [activeId, setActiveId] = useState("");
useEffect(() => {
const t = setTimeout(() => {
const article = document.querySelector(".doc-prose");
if (!article) { setHeadings([]); return; }
const list = Array.from(article.querySelectorAll("h2, h3"))
.filter((el) => el.id)
.map((el) => ({
id: el.id,
text: el.textContent,
level: parseInt(el.tagName[1], 10)
}));
setHeadings(list);
}, 50);
return () => clearTimeout(t);
}, [slug]);
useEffect(() => {
if (headings.length === 0) return;
const observer = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) {
setActiveId(e.target.id);
break;
}
}
}, { rootMargin: "-90px 0px -70% 0px" });
headings.forEach((h) => {
const el = document.getElementById(h.id);
if (el) observer.observe(el);
});
return () => observer.disconnect();
}, [headings]);
if (headings.length === 0) return ;
return (
);
}
function DocPagination({ slug, onNavigate }) {
const { prev, next } = getAdjacentDocs(slug);
const card = (doc, dir) => {
if (!doc) return ;
return (
{ e.preventDefault(); onNavigate(doc.slug); }}
style={{
display: "block",
background: "var(--surface)",
border: "1px solid var(--line)",
borderRadius: 16,
padding: "18px 20px",
textDecoration: "none",
textAlign: dir === "next" ? "right" : "left",
transition: "all 200ms"
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "var(--blue)";
e.currentTarget.style.background = "rgba(41,98,239,0.04)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "var(--line)";
e.currentTarget.style.background = "var(--surface)";
}}>
{dir === "next" ? "Next โ" : "โ Previous"}
{doc.title}
);
};
return (
{card(prev, "prev")}
{card(next, "next")}
);
}
function DocsApp() {
const [slug, setSlug] = useState(getSlugFromHash());
function navigate(newSlug) {
setSlug(newSlug);
history.pushState(null, "", "#/" + newSlug);
window.scrollTo({ top: 0, behavior: "smooth" });
}
useEffect(() => {
const onHash = () => setSlug(getSlugFromHash());
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
useEffect(() => {
const navInfo = findDocBySlug(slug);
document.title = navInfo ? (navInfo.title + " ยท OmnisysX docs") : "OmnisysX docs";
}, [slug]);
const navInfo = findDocBySlug(slug);
const content = getDoc(slug);
return (
<>
{!content ? (
) : (
<>
{navInfo && (
{navInfo.description}
)}
{content}
)}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();