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
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
//
// SPDX-License-Identifier: Apache-2.0

/** @jsx h */

import { h } from "../../../../deps/esm.sh/hastscript/mod.ts";

import type { TocItem } from "../../../../lib/hast_util_toc/mod.ts";

import { buildClasses, css, cx } from "../css.ts";

const c = buildClasses("w-toc", ["root", "list", "item", "link"]);

export const tocStyles = css`
	.${c.root} {
		font-size: 0.8rem;
		line-height: 1.8;
	}

	.${c.list} {
		display: flex;
		flex-direction: column;
		padding-left: 0.75em;
		border-left: 2px solid var(--color-subtle-overlay);
	}

	.${c.item} {
		display: flex;
		flex-direction: column;
	}

	.${c.link} {
		text-decoration: none;

		color: var(--color-fg-sub);
	}
	.${c.link}[aria-current] {
		color: var(--color-fg);
		text-decoration: underline;
	}
	.${c.link}[aria-current="false"] {
		color: var(--color-fg-sub);
		text-decoration: none;

		opacity: 0.7;
	}
	.${c.link}:hover {
		text-decoration: underline;
	}
`;

export interface TocProps {
	className?: string;

	toc: readonly TocItem[];
}

export function toc({ className, toc }: TocProps) {
	return (
		<div class={cx(c.root, className)}>
			{items({ toc })}
		</div>
	);
}

export function items({ toc }: TocProps) {
	return (
		<ul className={c.list}>
			{toc.map((item) => (
				<li class={c.item}>
					<a class={c.link} href={`#${item.id}`}>{item.text}</a>
					{item.children.length > 0 ? items({ toc: item.children }) : null}
				</li>
			))}
		</ul>
	);
}