use better tree view in table of contents too

This commit is contained in:
2025-07-04 16:41:28 +02:00
parent f3d60f7ee3
commit f68854fd97
3 changed files with 20 additions and 14 deletions

View File

@@ -211,22 +211,28 @@
} }
#let table-of-contents() = { #let table-of-contents() = {
html-style(class:"table-of-contents", "", [ html-style(class:"table-of-contents", "", box(
#box(
stroke: black, stroke: black,
radius: 2pt, radius: 2pt,
inset: 3%, inset: 3%,
)[ [Table of contents\
Table of contents\ #let idx = state("stupid-gen-page-state", 0);
#context {
let idx = state("stupid-gen-page-state", 0); #context gen-tree-from-headings(query(heading),
gen-tree-from-headings(query(heading),
elemfn: (content, x) => { elemfn: (content, x) => {
[#content #context html-span((class:"headingr",id:"headingr-"+str(idx.get())), link(x.location(), x.body)) #context idx.update(x=> x + 1) #br()] [
}) #html-opt-elem("p", (style:"line-height:1.1"))[
} #html-style("display:flex; text-indent:0pt;")[
#html-style("margin-right: 11pt;", content)
#html-style("flex:1;")[
#context html-span((class:"headingr",id:"headingr-"+str(idx.get())), link(x.location(), x.body))
#context idx.update(x=> x + 1)
] ]
#html-script-dom-onload(" ]
]
]
})
])) + html-style(class:"table-of-contents", "", html-script-dom-onload("
let tags = ['h2','h3','h4'].flatMap(x => Array.from(document.getElementsByTagName(x))); let tags = ['h2','h3','h4'].flatMap(x => Array.from(document.getElementsByTagName(x)));
document.getElementById('headingr-0').classList.add('current') document.getElementById('headingr-0').classList.add('current')
document.addEventListener('scroll', (event) => { document.addEventListener('scroll', (event) => {
@@ -235,8 +241,7 @@
Array.from(document.getElementsByClassName('headingr')).map(x => x.classList.remove('current')) Array.from(document.getElementsByClassName('headingr')).map(x => x.classList.remove('current'))
document.getElementById('headingr-'+idx).classList.add('current') document.getElementById('headingr-'+idx).classList.add('current')
}); });
") ") + [
] + [
#context if is-html() { #context if is-html() {
html.elem("style", " html.elem("style", "
.table-of-contents > p > span { width: 100%; } .table-of-contents > p > span { width: 100%; }

View File

@@ -106,7 +106,7 @@
- they are easier and nicer to use and read than manual pattern matching in the compiler's source code. - they are easier and nicer to use and read than manual pattern matching in the compiler's source code.
\ \
There is however a even better alternative: There is however an even better alternative:
] ]
#section[ #section[

View File

@@ -42,6 +42,7 @@
#tree-list( #tree-list(
(level:1, body: [ Making a simple RegEx engine ]), (level:1, body: [ Making a simple RegEx engine ]),
(level:2, body: html-href("article-make-regex-engine-1.typ.desktop.html")[ Part 1: Introduction to RegEx ]), (level:2, body: html-href("article-make-regex-engine-1.typ.desktop.html")[ Part 1: Introduction to RegEx ]),
(level:1, body: html-href("compiler-pattern-matching.typ.desktop.html")[ Compiler Pattern Matching ]),
) )
#br() #br()