Add heading anchor links
This commit is contained in:
parent
eff695f1fc
commit
b5533b0e06
|
@ -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
|
||||
|
|
|
@ -1,35 +1,60 @@
|
|||
const body = document.body
|
||||
const queryAll = sel => document.querySelectorAll(sel)
|
||||
|
||||
const initTheme = () => {
|
||||
const curTheme = localStorage.getItem("theme")
|
||||
const oldTheme = curTheme == "dark" ? "light" : "dark"
|
||||
document.body.classList.add(`${curTheme}-theme`)
|
||||
document.body.classList.remove(`${oldTheme}-theme`)
|
||||
const curTheme = localStorage.getItem('theme')
|
||||
const oldTheme = curTheme == 'dark' ? 'light' : 'dark'
|
||||
body.classList.add(`${curTheme}-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"))
|
||||
document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
|
||||
|
||||
queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
|
||||
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 prev = cur == "center" ? "left" : "center"
|
||||
document.body.classList.add("align-" + cur)
|
||||
document.body.classList.remove("align-" + prev)
|
||||
const cur = localStorage.getItem('align')
|
||||
const prev = cur == 'center' ? 'left' : 'center'
|
||||
body.classList.add('align-' + cur)
|
||||
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)
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue