Add table of contents to skooma page
This commit is contained in:
parent
912909836c
commit
363c50d97d
3 changed files with 42 additions and 1 deletions
|
@ -3,6 +3,7 @@
|
||||||
<script type="module" src="codeblock.js"></script>
|
<script type="module" src="codeblock.js"></script>
|
||||||
<script type="module" src="filesize.js"></script>
|
<script type="module" src="filesize.js"></script>
|
||||||
<script type="module" src="scrollToTop.js"></script>
|
<script type="module" src="scrollToTop.js"></script>
|
||||||
|
<script type="module" src="toc.js"></script>
|
||||||
|
|
||||||
<scroll-to-top>
|
<scroll-to-top>
|
||||||
</scroll-to-top>
|
</scroll-to-top>
|
||||||
|
@ -11,6 +12,12 @@
|
||||||
|
|
||||||
<code-block>import {html} from 'skooma.js'</code-block>
|
<code-block>import {html} from 'skooma.js'</code-block>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Table of Contents</h2>
|
||||||
|
<table-of-contents>
|
||||||
|
</table-of-contents>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2 id="introduction">Introduction & Scope</h2>
|
<h2 id="introduction">Introduction & Scope</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -45,7 +45,8 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3::before {
|
h3::before {
|
||||||
content: "\2023" ' ';
|
content: "\2023";
|
||||||
|
margin-right: .6ch;
|
||||||
color: var(--color-ac);
|
color: var(--color-ac);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -151,3 +152,14 @@ dl>code>dt~dd { grid-column: 2/2; }
|
||||||
|
|
||||||
.all-unset { all: unset; }
|
.all-unset { all: unset; }
|
||||||
.full-width { grid-column: 1/-1; }
|
.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;
|
||||||
|
}
|
||||||
|
|
22
page/toc.js
Normal file
22
page/toc.js
Normal file
|
@ -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))
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in a new issue