Add heading anchor links

src/stylus/core.styl

@@ -34,6 +34,30 @@ body
 		> h1, > h2, > h3, > h4, > h5, > h6 { color: var(--heading-fg) }
 		*:first-child { margin-top: 0 }
 
+		> h1, > h2, > h3, > h4, > h5, > h6
+			.anchor-link
+				padding-left 0.5em
+				font-weight normal
+				font-size 75%
+				text-decoration none
+				display none
+				position absolute
+
+			&:hover
+				.anchor-link
+					display inline-flex
+
+		@media (max-width: 600px)
+			> h1, > h2, > h3, > h4, > h5, > h6
+				.anchor-link
+					padding-right 0.25em
+					font-weight normal
+					font-size 75%
+					text-decoration none
+					display inline-flex
+					position absolute
+					right 0
+
 		> p code
 			padding 0.1em 0.25em
 			border-radius 0.25em

static/global.js

@@ -1,35 +1,60 @@
+const body = document.body
+const queryAll = sel => document.querySelectorAll(sel)
+
 const initTheme = () => {
-	const curTheme = localStorage.getItem("theme")
+	const curTheme = localStorage.getItem('theme')
-	const oldTheme = curTheme	== "dark" ? "light" : "dark"
+	const oldTheme = curTheme	== 'dark' ? 'light' : 'dark'
-	document.body.classList.add(`${curTheme}-theme`)
+	body.classList.add(`${curTheme}-theme`)
-	document.body.classList.remove(`${oldTheme}-theme`)
+	body.classList.remove(`${oldTheme}-theme`)
 }
-if (localStorage.getItem("theme") === null) {
+
-	localStorage.setItem("theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+if (localStorage.getItem('theme') === null) {
+	localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
 }
+
 initTheme()
+
 const toggleTheme = ev => {
-	localStorage.setItem("theme", localStorage.getItem("theme") == "dark" ? "light" : "dark")
+	localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark')
 	initTheme()
 	if (!!ev.target) ev.preventDefault()
 	return false
 }
-document.querySelectorAll(".theme-toggler").forEach(a => a.addEventListener("click", toggleTheme))
+
-document.querySelectorAll(".js-only").forEach(a => a.classList.remove("js-only"))
+queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
-document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
+queryAll('.js-only').forEach(a => a.classList.remove('js-only'))
+queryAll('.js-disabled-only').forEach(a => a.remove())
 
 const initAlign = () => {
-	const cur = localStorage.getItem("align")
+	const cur = localStorage.getItem('align')
-	const prev = cur == "center" ? "left" : "center"
+	const prev = cur == 'center' ? 'left' : 'center'
-	document.body.classList.add("align-" + cur)
+	body.classList.add('align-' + cur)
-	document.body.classList.remove("align-" + prev)
+	body.classList.remove('align-' + prev)
 }
-if (localStorage.getItem("align") === null) localStorage.setItem("align", "center")
+
+if (localStorage.getItem('align') === null) localStorage.setItem('align', 'center')
+
 initAlign()
+
 const toggleAlign = ev => {
-	localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
+	localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center')
 	initAlign()
 	if (!!ev.target) ev.preventDefault()
 	return false
 }
-document.querySelectorAll(".align-toggler").forEach(a => a.addEventListener("click", toggleAlign))
+
+queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign))
+
+window.addEventListener('load', _ev => {
+	console.log('loaded')
+	const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',')
+	console.log(selector)
+	queryAll(selector).forEach(el => {
+		console.log(el)
+		const anchorLink = document.createElement('a')
+		anchorLink.classList.add('anchor-link')
+		anchorLink.textContent = '§'
+		anchorLink.href = `#${el.id}`
+		el.appendChild(anchorLink)
+	})
+})