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/features/toc/index.js

@@ -0,0 +1,48 @@
+import { getDeviceState } from '../../core'
+
+// Toggle Table of Contents on click. Here, class "hide" open the toc
+function toggleTOC () {
+  const toc = document.getElementById('toc-section')
+  if (toc == null) {
+    return
+  }
+
+  if (toc.classList.contains('hide')) {
+    toc.classList.remove('hide')
+  } else {
+    // if sidebar-section is open, then close it first
+    const sidebar = document.getElementById('sidebar-section')
+    if (sidebar != null && sidebar.classList.contains('hide')) {
+      sidebar.classList.remove('hide')
+    }
+    // add "hide" class
+    toc.classList.add('hide')
+    // if it is mobile device. then scroll to top.
+    const { isMobile } = getDeviceState()
+    if (isMobile && toc.classList.contains('hide')) {
+      document.body.scrollTop = 0
+      document.documentElement.scrollTop = 0
+    }
+  }
+  if (document.getElementById('hero-area') != null) {
+    document.getElementById('hero-area').classList.toggle('hide')
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  // bind click event to #toc-toggle in navbar-2.html
+  const toggle = document.getElementById('toc-toggler')
+  if (toggle) toggle.addEventListener('click', toggleTOC)
+
+  // hide TOC when user clicks on a TOC link.
+  // Only applies if it's mobile.
+  const toc = document.getElementById('TableOfContents')
+  if (toc) {
+    toc.addEventListener('click', (event) => {
+      const { isMobile } = getDeviceState()
+      if (isMobile && event.target.nodeName === 'A') {
+        toggleTOC()
+      }
+    })
+  }
+})