02db3d3044
* add npm dependencies used in this theme * implement helper to configure JS and ESBuild * migrate jquery popper.js bootstrap fontawesome to js bundle * refactor main.js into smaller pieces, and moved navbar.js to assets * remove list.js. It adjusts post card height to be the same, but is actually not needed. * refactored notes.js, search.js, single.js into application.js * move ityped to js asset, implement experiences horizontal vertical line in css * align recent post height via css * migrated home.js and refactored into various sections * migrated darkMode feature to js bundle * moved mermaid feature to js bundle * migrate syntax highlight to js bundle * migrate katex ( js portion ) to js bundle * migrate pdf-js to js bundle by delegating to cdn * set explicit comparisions for feature envvars so js can properly optimize * removed goat-counter * more fixes for broken achievements and small bugs * more bug fixes * allow configuration of hightlight.js, fix video-player shortcode * remove jquery all together * add null handling and fix merge conflicts Co-authored-by: Aaron Qian <aaron@yeet.io>
60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
const updateNavBar = () => {
|
|
const topNavbar = document.getElementById('top-navbar')
|
|
const navbarToggler = document.getElementById('navbar-toggler')
|
|
const themeIcon = document.getElementById('navbar-theme-icon-svg')
|
|
|
|
if (window.scrollY > 40) {
|
|
topNavbar?.classList.remove('initial-navbar')
|
|
topNavbar?.classList.add('final-navbar', 'shadow')
|
|
|
|
navbarToggler?.classList.remove('navbar-dark')
|
|
navbarToggler?.classList.add('navbar-light')
|
|
|
|
// color theme selector a.k.a. dark mode
|
|
themeIcon?.classList.remove('navbar-icon-svg-dark')
|
|
|
|
// get the main logo from hidden img tag
|
|
const mainLogo = document.getElementById('main-logo')
|
|
if (mainLogo) {
|
|
const logoURL = mainLogo.getAttribute('src')
|
|
document.getElementById('logo')?.setAttribute('src', logoURL)
|
|
}
|
|
} else {
|
|
topNavbar?.classList.remove('final-navbar', 'shadow')
|
|
topNavbar?.classList.add('initial-navbar')
|
|
|
|
navbarToggler?.classList.remove('navbar-light')
|
|
navbarToggler?.classList.add('navbar-dark')
|
|
|
|
// color theme selector a.k.a. dark mode
|
|
themeIcon?.classList.add('navbar-icon-svg-dark')
|
|
|
|
// get the inverted logo from hidden img tag
|
|
const invertedLogo = document.getElementById('inverted-logo')
|
|
if (invertedLogo) {
|
|
const logoURL = invertedLogo.getAttribute('src')
|
|
document.getElementById('logo')?.setAttribute('src', logoURL)
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// change navbar style on scroll
|
|
// ==================================================
|
|
// When the user scrolls down 80px from the top of the document,
|
|
// resize the navbar's padding and the logo's font size
|
|
document.addEventListener('scroll', updateNavBar)
|
|
|
|
// Creates a click handler to collapse the navigation when
|
|
// anchors in the mobile nav pop up are clicked
|
|
const navMain =document.getElementsByClassName('navbar-collapse')
|
|
Array.from(navMain).forEach(function(el) {
|
|
el.addEventListener('click', function (e) {
|
|
if (e.target.tagName === 'A') {
|
|
el.classList.add('collapse')
|
|
}
|
|
})
|
|
})
|
|
|
|
updateNavBar()
|
|
})
|