ensnode/docs/ensnode.io/src/components/molecules/ScalarTableOfContents.astro at 02fa7e81ce0bcec241fb7cfdd99f6d8666d6faf8 · namehash/ensnode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
---
---

<nav class="scalar-toc">
  <h2 class="scalar-toc-heading">On this page</h2>
  <ul class="scalar-toc-list"></ul>
</nav>

<script>
  function buildToc() {
    const list = document.querySelector('.scalar-toc-list');
    if (!list) return;

    const headings = document.querySelectorAll('h2.section-header-label[id]');
    if (headings.length === 0) return false;

    list.innerHTML = '';
    headings.forEach((h2) => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = `#${h2.id}`;
      a.textContent = h2.textContent?.trim() ?? '';
      li.appendChild(a);

      // Find h3s that belong to this h2's section
      const section = h2.closest('.section');
      if (section) {
        const h3s = section.querySelectorAll('h3[id]');
        if (h3s.length > 0) {
          const subList = document.createElement('ul');
          subList.className = 'scalar-toc-sublist';
          h3s.forEach((h3) => {
            const subLi = document.createElement('li');
            const subA = document.createElement('a');
            subA.href = `#${h3.id}`;
            subA.textContent = h3.textContent?.trim() ?? '';
            subLi.appendChild(subA);
            subList.appendChild(subLi);
          });
          li.appendChild(subList);
        }
      }

      list.appendChild(li);
    });

    return true;
  }

  // Scalar renders async, so observe for headings to appear
  if (!buildToc()) {
    const observer = new MutationObserver(() => {
      if (buildToc()) observer.disconnect();
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
</script>

<style>
  .scalar-toc {
    padding: 1rem 0;
  }

  .scalar-toc-heading {
    color: var(--sl-color-white);
    font-size: var(--sl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
  }

  .scalar-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-inline-start: 1px solid var(--sl-color-hairline);
  }

  .scalar-toc-list li a {
    display: block;
    padding: 0.25rem 0 0.25rem 0.75rem;
    color: var(--sl-color-gray-3);
    font-size: var(--sl-text-xs);
    text-decoration: none;
    line-height: 1.5;
  }

  .scalar-toc-list li a:hover {
    color: var(--sl-color-white);
  }

  .scalar-toc-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .scalar-toc-sublist li a {
    padding-inline-start: 1.5rem;
  }
</style>