diff --git a/page/skooma.html b/page/skooma.html index 731b171..5c45838 100644 --- a/page/skooma.html +++ b/page/skooma.html @@ -3,6 +3,7 @@ + @@ -11,6 +12,12 @@ import {html} from 'skooma.js' +
+

Table of Contents

+ + +
+

Introduction & Scope

diff --git a/page/style.css b/page/style.css index 5df2f8f..6b86c0a 100644 --- a/page/style.css +++ b/page/style.css @@ -45,7 +45,8 @@ h2 { } h3::before { - content: "\2023" ' '; + content: "\2023"; + margin-right: .6ch; color: var(--color-ac); } @@ -151,3 +152,14 @@ dl>code>dt~dd { grid-column: 2/2; } .all-unset { all: unset; } .full-width { grid-column: 1/-1; } + +table-of-contents ul { + list-style: none; + padding: 0; +} + +table-of-contents ul li::before { + content: "\2023"; + color: var(--color-hl); + margin-right: 1ch; +} diff --git a/page/toc.js b/page/toc.js new file mode 100644 index 0000000..07d9d79 --- /dev/null +++ b/page/toc.js @@ -0,0 +1,22 @@ +import element from '../element.js' +import {html} from '../skooma.js' + +element(class TableOfContents extends HTMLElement { + connectedCallback() { + this.generate() + } + + generate() { + const entries = Array.from(document.querySelectorAll("h2[id]")) + .map(heading => html.li( + html.a( + heading.innerText, + { + href: `#${heading.id}`, + class: ["fancy"] + }) + ) + ) + this.replaceChildren(html.ul(entries)) + } +})