1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42

/** @jsxImportSource ../jsx */
import { el, fragment, prop } from "../ef.js";

import { NavGroup, NavItem } from "../components/nav.js";
import { type Route } from "../route.js";
import type { OutlineItem } from "../plugins/markdown";

interface DocsProps {
  html: string;
  title: string;
  outline: readonly OutlineItem[];
}

export function docs({ html, title: t, outline }: DocsProps): Route {
  return {
    title: t,
    content() {
      return <div>{el("div", [prop("innerHTML", html)])}</div>;
    },
    outline() {
      return fragment(outline.map((item) => <OutlineEntry item={item} />));
    },
  };
}

interface OutlineEntryProps {
  item: OutlineItem;
}

function OutlineEntry({ item }: OutlineEntryProps) {
  if (item.children.length > 0) {
    return (
      <NavGroup label={item.content} href={`#${item.id}`}>
        {item.children.map((child) => (
          <OutlineEntry item={child} />
        ))}
      </NavGroup>
    );
  }

  return <NavItem href={`#${item.id}`}>{item.content}</NavItem>;
}