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
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67

/** @jsx h */
import { h, withStyles } from "../deps/nano_jsx.ts";

function cx(className: string): string {
  return `toc__${className}`;
}

type TocProps = {
  /**
   * Inner HTML.
   *
   * Must be `<nav><ol>...</ol></nav>`
   */
  children: unknown;
} | {
  /**
   * Inner HTML.
   *
   * Must be `<nav><ol>...</ol></nav>`
   */
  html: string;
};

/**
 * Table of Contents component.
 */
export const Toc = (props: TocProps) => {
  return withStyles(css)(
    "html" in props
      ? (
        <div
          class={cx("root")}
          dangerouslySetInnerHTML={{ __html: props.html }}
        />
      )
      : <div class={cx("root")}>{props.children}</div>,
  );
};

const css = `
  .${cx("root")} {
    min-width: 15rem;
  }

  .${cx("root")} ol {
    list-style: none;
  }
  .${cx("root")} ol ol {
    padding-left: var(--gutter-lg);

    list-style: square;
  }
  .${cx("root")} ol ol ol {
    list-style: circle;
  }

  .${cx("root")} a {
    font-size: var(--font-size-sm);
    color: hsl(var(--color-on-neutral));
    text-decoration: underline hsl(var(--color-border));

    opacity: 0.9;
  }
  .${cx("root")} a:hover {
    text-decoration: underline calc(var(--border-width) * 2) hsl(var(--color-primary));
  }
`;