Bundling JS with ESBuild (#702)

* 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>

assets/scripts/sections/navbar.js

@@ -0,0 +1,60 @@
+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()
+})