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>

static/css/sections/accomplishments.css

@@ -7,6 +7,7 @@
 .accomplishments-section .card {
   background: #fff;
   border-top: 2px solid #248aaa;
+  height: 100%;
 }
 .accomplishments-section .card .card-header {
   background: none;

static/css/sections/achievements.css

@@ -48,7 +48,7 @@
   margin-bottom: 8px;
 }
 
-#gallery i {
+#gallery .svg-inline--fa {
   color: #8392a5;
   background-color: rgba(0, 0, 0, 0.7);
   padding: 10px;
@@ -56,21 +56,21 @@
   opacity: 0;
 }
 
-#gallery .achievement-entry:hover i {
+#gallery .achievement-entry:hover .svg-inline--fa {
   opacity: 1;
   font-size: 1rem;
   transition: all 0.3s ease-out;
 }
 
-#gallery .img-type-1 i {
+#gallery .img-type-1 .svg-inline--fa {
   margin-top: 135px;
 }
-#gallery .img-type-2 i {
+#gallery .img-type-2 .svg-inline--fa {
   margin-top: 50px;
 }
 
-#gallery .achievement-details.img-type-1 i,
-.achievement-details.img-type-2 i {
+#gallery .achievement-details.img-type-1 .svg-inline--fa,
+.achievement-details.img-type-2 .svg-inline--fa {
   margin-top: 0px !important;
   transition: none !important;
   float: right;

static/css/sections/experiences.css

@@ -47,7 +47,7 @@
   left: 50%;
 }
 
-.vertical-line-left-adjustment::after {
+.timeline .vertical-line:nth-child(even)::after {
   left: calc(50% - 3px) !important;
 }
 
@@ -75,26 +75,26 @@
   border-radius: 15px;
 }
 
-.top-left {
-  left: -50%;
-  top: -50%;
-}
-
-.top-right {
+.timeline .row:nth-child(2n) div:nth-child(1) .corner {
   left: 50%;
   top: -50%;
 }
 
-.bottom-left {
+.timeline .row:nth-child(2n) div:nth-child(3) .corner {
   left: -50%;
   top: calc(50% - 3px);
 }
 
-.bottom-right {
+.timeline .row:nth-child(4n) div:nth-child(1) .corner {
   left: 50%;
   top: calc(50% - 3px);
 }
 
+.timeline .row:nth-child(4n) div:nth-child(3) .corner {
+  left: -50%;
+  top: -50%;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */

static/css/sections/recent-posts.css

@@ -8,6 +8,11 @@
   display: block; 
 }
 
+.recent-posts-section .card {
+  height: 100%;
+  min-height: 100%;
+}
+
 .recent-posts-section .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;