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/layouts/main.css

@@ -13,6 +13,26 @@ Green:   #2DCA73
 Yellow:  #FFC212
 */
 
+/* 
+  Removed smooth scrolling implementation in main.js in favor of
+  simpler css approach.
+  See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
+*/
+*, html {
+  scroll-behavior: smooth !important;
+}
+
+/*
+Fixes anchor overlapping with header.
+See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors 
+*/
+:target::before {
+  content: "";
+  display: block;
+  height: 2em; /* fixed header height*/
+  margin: -2em 0 0; /* negative fixed header height */
+}
+
 body {
   background-color: #f9fafc;
   font-family: "Muli";
@@ -276,13 +296,13 @@ a.header-anchor {
   color: #1c2d41;
 }
 
-a.header-anchor i {
+a.header-anchor i, a.header-anchor svg {
   font-size: 10pt;
   color: #3c4858;
   display: none;
   margin-left: 0.5rem;
 }
-a.header-anchor:hover i {
+a.header-anchor:hover i, a.header-anchor:hover svg {
   display: inline-block;
 }
 a.header-anchor code {

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;