Table-of-Content-Notebook.jl

### A Pluto.jl notebook ###
# v0.11.14

using Markdown
using InteractiveUtils

# ╔═╡ 823571c6-065e-11eb-3ef7-317b596d0dd2
html"""
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
<script>
let current_cell = currentScript.closest('pluto-cell');
let pluto_notebook = current_cell.closest('pluto-notebook');

let make_header = (header) => {
	return html`
		<a
			class="${header.nodeName}"
			href="#${header.closest('pluto-cell').id}"
		>${header.innerText}</a>
	`
}
let make_headers = () => {
	let headers = [...pluto_notebook.querySelectorAll('h1,h2,h3')];

	return html`
		<h1>Table of Contents</h1>
		<div class="table-of-contents">
			${headers.map(header => make_header(header))}
		</div>
	`
}

let element = make_headers()
let update_headers = _.debounce(() => {
	let old_element = element
	element = make_headers()
	old_element.replaceWith(element)
}, 200)
invalidation.then(() => {
	update_headers.cancel()
})

let mutation_observer = new MutationObserver(() => {
	update_headers()
})
invalidation.then(() => {
	mutation_observer.disconnect()
})

let connect_mutation_observer = _.debounce(() => {
	mutation_observer.disconnect()
	for (let cell of pluto_notebook.querySelectorAll('pluto-cell')) {
		if (cell === current_cell) continue;

		mutation_observer.observe(cell.querySelector('pluto-output'), {
			subtree: true,
			childList: true,
			characterData: true,
		});
	}
}, 200)
invalidation.then(() => {
	connect_mutation_observer.cancel()
})

let output_updated_handler = () => {
	update_headers()
	connect_mutation_observer()
}

// When new cells get added, modify them too
let observer = new MutationObserver(() => {
	output_updated_handler();
});
observer.observe(pluto_notebook, {
	childList: true,
});
invalidation.then(() => {
	observer.disconnect()
})

connect_mutation_observer()
return element;
</script>

<style>
.table-of-contents a {
	display: block;
	font-weight: normal;
	text-decoration: none;

	--vertical-padding: 20px;
}
.table-of-contents a:hover {
	opacity: 0.7;
}
.table-of-contents {
  	counter-reset: h1 h2 h3;
}

.table-of-contents .H1 {
  counter-reset: h2;
  counter-increment: h1;
  padding: 0px 0px;
}
.table-of-contents .H1:before {
  content: "" counter(h1) ". ";
}

.table-of-contents .H2 {
	counter-reset: h3;
	counter-increment: h2;
    padding: 0px var(--vertical-padding);
}
.table-of-contents .H2:before {
  content:  "" counter(h1) ". " counter(h2) ". ";
}

.table-of-contents .H3 {
	counter-increment: h3;
	counter-reset: h4;
    padding: 0px calc(var(--vertical-padding) * 2);
}
.table-of-contents .H3:before {
  content: "" counter(h1) ". " counter(h2) ". " counter(h3) ". ";
}
</style>
"""


# ╔═╡ 5c24a254-065e-11eb-018b-c7d76cfbec22
md"""
# Me nec incessit

## Pressit perculit procul

Lorem markdownum alias numquam. O currus illa vivum solidis, qui adiuro ait
Phoebus elige sparsaque, pervenit exilium cara, cum qua socero.

- Criminis donec
- Quid qua dixit doceri
- Fiunt nec ipsoque melius crimine viam vires
- Utrumque victu letum precaria in argento fragosis
- Illos fuit ubi ut ortu quod pariter
- Dianae et pariter vocis undis dignus violentaque

Penates genu magnorum corpora tot *orasse* quisque et ossibus fumantia et membra
parili. Inficit *Iuppiter pereant virescere*: quoque qui locum lupo domumque:
erepta: expulit pariterque. Quod forte sternitur dum Solis, ab mora petebat in
dextrae poscat caede, **nec**. Pro dum servire pater semine blanditias tellus
patremque Autumnus clamavit columbas.

## Cursus stolidas ictu

Aevum Aiax successu moram, indiciique tamen, Noemonaque et quondam herba quatit
illius. Inania Echo nomina concrescere latet nostro muneris sanguine meus venam
accinctus ante vobis medio. Pars querulas evocet militiae victorque substitit
tenet Palladias: nec freta finita adlevat cognovit aquarum indigenae et exiguo.

    defragment += 2;
    cps_requirements += 2 + 5;
    if (4 + 3) {
        array += 4;
        jqueryRepository(base, 13);
    } else {
        sdk_mamp(latencyNorthbridge, mpeg, 3);
        pciNtfs -= format_sidebar_computer;
        standalone += thirdRaidHorse;
    }

Utero saltus Editus dextrae olivae pectore niteant adulantes neque in adeunda et
profunda. Argentea habebam caelo.

Libro ille haud omnia galeamque regale Bacchus parentis sede, in flebam timuit.
Cerva adeo verba, primus cute venae Aeson regale, *nova ture* relevare divino
Memnonides quoquam, utinam. Saepe quos tergum invitaque pararet. Dixit invictos
**inertes**, postquam, se et voco genetrix leve sum nec laqueos iuvet.
"""

# ╔═╡ 6b53ec44-065e-11eb-2b97-914296d366d0
md"""
# In anguicomae vidit

## Secundo pluma

Lorem markdownum cineres. Dabuntur levi imperium conubia memorant pharetram
numquam. Sub suae Penthea Achilli. Rursus locorum [palmis agitabilis
fertur](http://quatenus.com/mortaliaet) non patria constitit linguaque fixit
tempus facta, non Terea convivia saxum.

1. Arvo partes
2. Longoque praesentit supplex morientis ora terraeque frustra
3. Habet ut enim tangit erat Thestiadae primum
4. Infans patruo natamque Poeante referebat dolores referuntur
5. Ille poteram palles obvertit pisce

Capillos decimae decebat inducta est tenues verba triplex negant meminisse
solvit. Totam se sic poplite erat, et alium insidiaeque, accipiunt easdem;
feram. Enim si quae aut dicenda coniugiale mihi lactantia Cycnus horamque, nihil
ex viridem Romuleos nimbos recipit, imitata? E **vobis curis**, respondit mearum
et Hiberis umeris in tot iuvenes inutile parsque! Salientis sed noxae atque
corporis Cumaea, relinquam illud Iapeto perde diffidunt, rerum Hectora.

1. Caeleste sed quem summis in oscula et
2. Concursum fratri
3. Tibi spuma Phaethon medioque
4. Mansit pariter cantato frondator capillis formatus parentque
5. Lapsa conprendere et quin
6. Sors popularia modo gratantur magis albentibus quoque

## Illum diversis amat miserorum habebimus nati sequentes

Inde vincla stipitis adessent restabant falsam permulcens sic locum effugit
strenua illic **quod duorum** interea sentibus. Oreada parentis. Nec
[formam](http://ferit.org/), gyrum, dum magna credas centum. Forma trahentem
freta: saevaque quod, Cytherea, fuerat certamine ponti, haec caput, reparabat.
Vitiorum crede?

Fiet non ingentem stantes. Frondes semperque quos, non in aliquod dixit, ille
altos suis. Picae magnum; regina tanto grata laesasque lyncas.

### studiosior edere capacibus ante pendebat

1. Sequuntur flammasque tamen
2. Vocanti intulit simul ecce
3. Vera toris gerit ferae poenaeque te quod
4. Placandam opprobria pudore

Caelo ille natorum detegeret utque, ipsumque sed esse longa, et imitatur dat.
Iovem forte sub dabatur avidusque serius uni iubet malo recursus. Pro dubius
trepidoque ferrum, capillos? Habendus occupat limum illa paventem Peleus; fuit
dixerat reddit: senex turba [vulnere](http://auroraossa.org/fruge), adhuc.
Amantem torus cortinaque sole Ascalaphus mihi percussit serva despectare nulla
ac quique, virgo, tu.

Haec labori, te harena et Copia orbes, in nulla Nyseides, pars confisa per
pereat relicta. Capillos quantum orbe ait
[Orneus](http://revincta-servato.org/suntothemis.html) demens Propoetidas rara
terrenaque gemitus, quaque feruntur opibusque. Fugant Ditem Aiacem: captus
Pallas usus voce tibi stellae quem: crurum ipse oculos variis! Septem quam,
tradidit alto terreno curre aer amans vertice cista.
"""

# ╔═╡ 74474876-065e-11eb-2fd6-413a8e4dde01
html"""
<script>
await new Promise(resolve => {
  setTimeout(resolve, 500);
})
return html`<h1>Dynamically added header</h1>`
"""

# ╔═╡ 7a5a9db4-065e-11eb-3e5f-0947c98a22d5
html"""
<script>
await new Promise(resolve => {
  setTimeout(resolve, 5000);
})
return html`<h2>With an even more dynamic subheader</h2>`
"""

# ╔═╡ Cell order:
# ╠═823571c6-065e-11eb-3ef7-317b596d0dd2
# ╟─5c24a254-065e-11eb-018b-c7d76cfbec22
# ╟─6b53ec44-065e-11eb-2b97-914296d366d0
# ╟─74474876-065e-11eb-2fd6-413a8e4dde01
# ╟─7a5a9db4-065e-11eb-3e5f-0947c98a22d5