use IntersectionObserver for scrollspy

rather than using Bootstrap's scrollspy, we can do it ourselves pretty
easily with IntersectionObserver.  This also removes the final bit of
code using bootstrap or jquery, so we can remove those dependencies.

assets/css/year-in-review.scss

@@ -180,6 +180,7 @@ a.YIRnav-YIR-link:hover {
 }
 
 .nav li {
+  list-style: none;
   position: relative;
   transition: all 0.3s ease-out;
   margin-bottom: var(--feather-grid-medium);

layouts/_default/year-in-review.html

@@ -27,10 +27,6 @@
     <title>{{ .Title }}</title>
     <link rel="shortcut icon" type="image/png" href="{{ "assets/favicon.ico" | relURL }}"/>
 
-    <!-- Year in Review timeline effect CSS -->
-    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
-    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
-
     <!-- Main CSS -->
     {{- $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
@@ -385,14 +381,7 @@ <h1>@TwitterOSS</h1>
   {{ end }}
 </script>
 
-<!-- Year in Review timeline effect JS -->
-<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
-<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
-
-<!-- Twemoji -->
-<!-- <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script> -->
-
-<script src="{{ "js/main.js" | relURL }}"></script> 
+<script src="{{ "js/main.js" | relURL }}"></script>
 <script src="{{ printf "js/%s" .Params.custom_js | relURL }}"></script>
 {{ partial "ga.html" . }}
 </html>

static/js/year-in-review.js

@@ -48,12 +48,10 @@ renderTopRepos(allRepos);
 
 // Svg triggers using intersection observer
 // https://alligator.io/js/intersection-observer/
-const svgs = document.querySelectorAll('.YIR-wrapper svg');
 const config = {
   rootMargin: '50px 50px 50px 50px',
   threshold: [0, 0.25, 0.5]
 };
-
 observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.intersectionRatio > 0) {
@@ -63,11 +61,28 @@ observer = new IntersectionObserver((entries) => {
     }
   });
 }, config);
-svgs.forEach(image => {
+document.querySelectorAll('.YIR-wrapper svg').forEach(image => {
   observer.observe(image);
-}, config);
+});
 
-// Media query for Year in Review mobile navigation
+// show active section in nav menu
+const navEntries = document.querySelectorAll('.nav > li')
+observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      navEntries.forEach(n => {
+        if (n.querySelector(`a[href="#${entry.target.id}"]`)) {
+          n.classList.add('active')
+        } else {
+          n.classList.remove('active')
+        }
+      })
+    }
+  })
+}, {rootMargin: "-50% 0px"})
+document.querySelectorAll('section').forEach(e => {
+  observer.observe(e);
+})
 
 // Close nav-menu when menu item clicked (only effects mobile menu)
 document.querySelectorAll("#nav-menu a").forEach(e => {