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

@@ -0,0 +1,60 @@
+const PERSISTENCE_KEY = 'darkmode:color-scheme'
+
+async function getService () {
+  if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
+    return await import('./darkreader')
+  }
+
+  throw Error(' No service defined for feature darkMode.')
+}
+
+window.addEventListener('DOMContentLoaded', async () => {
+  const menu = document.getElementById('themeMenu')
+  const $icon = document.getElementById('navbar-theme-icon-svg')
+  if (menu == null || $icon == null) return
+
+  const btns = menu.getElementsByTagName('a')
+  const iconMap = Array.from(btns).reduce((map, btn) => {
+    const $img = btn.getElementsByTagName('img')[0]
+    map[btn.dataset.scheme] = $img.src
+    return map
+  }, {})
+
+  const {
+    setSchemeDark,
+    setSchemeLight,
+    setSchemeSystem,
+    defaultColorScheme
+  } = await getService()
+
+  function loadScheme () {
+    return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
+  }
+
+  function saveScheme (scheme) {
+    localStorage.setItem(PERSISTENCE_KEY, scheme)
+  }
+
+  function setScheme (newScheme) {
+    $icon.src = iconMap[newScheme]
+
+    if (newScheme === 'dark') {
+      setSchemeDark()
+    } else if (newScheme === 'system') {
+      setSchemeSystem()
+    } else {
+      setSchemeLight()
+    }
+
+    saveScheme(newScheme)
+  }
+
+  setScheme(loadScheme())
+
+  Array.from(menu.getElementsByTagName('a')).forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const { scheme } = btn.dataset
+      setScheme(scheme)
+    })
+  })
+})