refactored notes.js, search.js, single.js into application.js

assets/scripts/application.js

@@ -1,8 +1,9 @@
 import 'jquery';
 import 'popper.js';
 import 'bootstrap';
-import '@fortawesome/fontawesome-free';
+import '@fortawesome/fontawesome-free/js/all';
 
 import './core';
 import './features';
 import './sections';
+import './pages';

assets/scripts/pages/index.js

@@ -0,0 +1,3 @@
+import './note';
+import './search';
+import './single';

assets/scripts/pages/note.js

@@ -0,0 +1,32 @@
+import $ from 'jquery';
+import imagesLoaded from 'imagesloaded';
+
+$(document).ready(function () { 
+  function resizeGridItem(item) {
+      var grid = document.getElementsByClassName("note-card-holder")[0];
+      var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
+      var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
+      var rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
+      item.style.gridRowEnd = "span " + rowSpan;
+  }
+  
+  function resizeAllGridItems() {
+      var allItems = document.getElementsByClassName("note-card");
+      for (var x = 0; x < allItems.length; x++) {
+          resizeGridItem(allItems[x]);
+      }
+  }
+  
+  function resizeInstance(instance) {
+      var item = instance.elements[0];
+      resizeGridItem(item);
+  }
+  
+  // window.onload = resizeAllGridItems();
+  window.addEventListener("resize", resizeAllGridItems);
+  
+  var allItems = document.getElementsByClassName("note-card");
+  for (var x = 0; x < allItems.length; x++) {
+      imagesLoaded(allItems[x], resizeInstance);
+  }
+});

assets/scripts/pages/search.js

@@ -0,0 +1,132 @@
+import $ from 'jquery';
+import Fuse from 'fuse.js';
+import Mark from 'mark.js';
+
+window.addEventListener('DOMContentLoaded', () => {
+  var summaryInclude=60;
+
+  var fuseOptions = {
+    shouldSort: true,
+    includeMatches: true,
+    threshold: 0.0,
+    tokenize:true,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [
+      {name:"title",weight:0.8},
+      {name:"hero",weight:0.7},
+      {name:"summary",weight:0.6},
+      {name:"date",weight:0.5},
+      {name:"contents",weight:0.5},
+      {name:"tags",weight:0.3},
+      {name:"categories",weight:0.3}
+    ]
+  };
+  
+  var searchQuery = param("keyword");
+  if(searchQuery){
+    $("#search-query").val(searchQuery);
+    executeSearch(searchQuery);
+  }else {
+    $('#search-results').append("<p>Please enter a word or phrase above</p>");
+  }
+  
+  
+  
+  function executeSearch(searchQuery){
+    $.getJSON( window.location.href.split("/search/")[0] + "/index.json", function( data ) {
+      console.log(data);
+
+      var pages = data;
+      var fuse = new Fuse(pages, fuseOptions);
+      var result = fuse.search(searchQuery);
+      // console.log({"matches":result});
+      document.getElementById("search-box").value = searchQuery
+      if(result.length > 0){
+        populateResults(result);
+      }else{
+        $('#search-results').append("<p>No matches found</p>");
+      }
+    });
+  }
+  
+  function populateResults(result){
+    $.each(result,function(key,value){
+      var contents= value.item.contents;
+      var snippet = "";
+      var snippetHighlights=[];
+      var tags =[];
+      if( fuseOptions.tokenize ){
+        snippetHighlights.push(searchQuery);
+      }else{
+        $.each(value.matches,function(matchKey,mvalue){
+          if(mvalue.key == "tags" || mvalue.key == "categories" ){
+            snippetHighlights.push(mvalue.value);
+          }else if(mvalue.key == "contents"){
+            start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
+            end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
+            snippet += contents.substring(start,end);
+            snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
+          }
+        });
+      }
+  
+      if(snippet.length<1){
+        snippet += contents.substring(0,summaryInclude*2);
+      }
+      //pull template from hugo templarte definition
+      var templateDefinition = $('#search-result-template').html();
+      //replace values
+      var output = render(templateDefinition, {
+        key:key,
+        title:value.item.title,
+        hero:value.item.hero,
+        date:value.item.date,
+        summary:value.item.summary,
+        link:value.item.permalink,
+        tags:value.item.tags,
+        categories:value.item.categories,
+        snippet:snippet
+      });
+      $('#search-results').append(output);
+  
+      $.each(snippetHighlights,function(snipkey,snipvalue) {
+        const context = document.getElementById("#summary-"+key);
+        var instance = new Mark(context);
+        instance.mark(snipvalue);
+      });
+  
+    });
+  }
+  
+  function param(name) {
+      return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
+  }
+  
+  function render(templateString, data) {
+    var conditionalMatches,conditionalPattern,copy;
+    conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
+    //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
+    copy = templateString;
+    while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
+      if(data[conditionalMatches[1]]){
+        //valid key, remove conditionals, leave contents.
+        copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
+      }else{
+        //not valid, remove entire section
+        copy = copy.replace(conditionalMatches[0],'');
+      }
+    }
+    templateString = copy;
+    //now any conditionals removed we can do simple substitution
+    var key, find, re;
+    for (key in data) {
+      find = '\\$\\{\\s*' + key + '\\s*\\}';
+      re = new RegExp(find, 'g');
+      templateString = templateString.replace(re, data[key]);
+    }
+    return templateString;
+  }
+});

assets/scripts/pages/single.js

@@ -0,0 +1,58 @@
+import $ from 'jquery';
+
+window.addEventListener('DOMContentLoaded', () => {
+  // =========== Add anchor to the headers ================
+  function addAnchor(element) {
+    element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link fa-sm"></i></sup></a>`;
+  }
+
+  var postContent = document.getElementById("post-content");
+  if (postContent != null) {
+    var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    for (var i = 0; i < headerTypes.length; i++) {
+      var headers = postContent.querySelectorAll(headerTypes[i]);
+      if (headers) {
+        headers.forEach(addAnchor);
+      }
+    }
+  }
+
+  // =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
+  // add "navbar" class to the "nav" element
+  let toc = document.getElementById("TableOfContents");
+  if (toc) {
+    toc.classList.add("navbar");
+    // add "nav-pills" class to the "ul" elements
+    let elems = toc.getElementsByTagName("ul");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-pills");
+    }
+    // add "nav-item" class to the "li" elements
+    elems = toc.getElementsByTagName("li");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-item");
+    }
+    // add "nav-link" class to the "a" elements
+    elems = toc.getElementsByTagName("a");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-link");
+    }
+  }
+
+
+  // add scroll to top button
+  var btn = $('#scroll-to-top');
+
+  $(window).scroll(function () {
+    if ($(window).scrollTop() > 300) {
+      btn.addClass('show');
+    } else {
+      btn.removeClass('show');
+    }
+  });
+
+  btn.on('click', function (e) {
+    e.preventDefault();
+    $('html, body').animate({ scrollTop: 0 }, '300');
+  });
+});

content/notes/search.bn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.cn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.de.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.es.md

@@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
 \```
 
 ### Editar las opciones de fuse.js para buscar
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.fr.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.hi.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.id.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.it.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.jp.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.ko.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.md

@@ -41,7 +41,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.ru.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.vn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.bn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.cn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.de.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.es.md

@@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
 \```
 
 ### Editar las opciones de fuse.js para buscar
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.fr.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.hi.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.id.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.it.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.jp.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.ko.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.ru.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/search.vn.md

@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

layouts/_default/search.html

@@ -66,9 +66,3 @@
   </div>
 </section>
 {{ end }}
-
-{{ define "scripts" }}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
-<script src="{{ "/js/search.js" | absURL }}"></script>
-{{ end }}

layouts/_default/single.html

@@ -193,7 +193,6 @@
 
 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
-<script src="{{ "/js/single.js" | relURL }}"></script>
 <script>
   hljs.initHighlightingOnLoad();
 </script>

layouts/notes/list.html

@@ -58,8 +58,6 @@
 
 {{ define "scripts" }}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
-  <script src="{{ "/js/imagesloaded.pkgd.min.js" | relURL }}"></script>
-  <script src="{{ "/js/note.js" | relURL }}"></script>
   <script>
     hljs.initHighlightingOnLoad();
   </script>

layouts/notes/single.html

@@ -48,8 +48,6 @@
 
 {{ define "scripts" }}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
-  <script src="{{ "/js/imagesloaded.pkgd.min.js" | relURL }}"></script>
-  <script src="{{ "/js/note.js" | relURL }}"></script>
   <script>
     hljs.initHighlightingOnLoad();
   </script>

static/css/layouts/main.css

@@ -13,16 +13,29 @@ Green:   #2DCA73
 Yellow:  #FFC212
 */
 
-body {
-  background-color: #f9fafc;
-  font-family: "Muli";
-
 /* 
   Removed smooth scrolling implementation in main.js in favor of
   simpler css approach.
   See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
 */
-  scroll-behavior: smooth;
+*, 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";
 }
 
 h1,
@@ -283,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/js/note.js

@@ -1,32 +0,0 @@
-"use strict";
-(function ($) {
-  jQuery(document).ready(function () { 
-    function resizeGridItem(item) {
-        var grid = document.getElementsByClassName("note-card-holder")[0];
-        var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
-        var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
-        var rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
-        item.style.gridRowEnd = "span " + rowSpan;
-    }
-    
-    function resizeAllGridItems() {
-        var allItems = document.getElementsByClassName("note-card");
-        for (var x = 0; x < allItems.length; x++) {
-            resizeGridItem(allItems[x]);
-        }
-    }
-    
-    function resizeInstance(instance) {
-        var item = instance.elements[0];
-        resizeGridItem(item);
-    }
-    
-    // window.onload = resizeAllGridItems();
-    window.addEventListener("resize", resizeAllGridItems);
-    
-    var allItems = document.getElementsByClassName("note-card");
-    for (var x = 0; x < allItems.length; x++) {
-        imagesLoaded(allItems[x], resizeInstance);
-    }
-  });
-})(jQuery);

static/js/search.js

@@ -1,112 +0,0 @@
-summaryInclude=60;
-var fuseOptions = {
-  shouldSort: true,
-  includeMatches: true,
-  threshold: 0.0,
-  tokenize:true,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    {name:"title",weight:0.8},
-    {name:"hero",weight:0.7},
-    {name:"summary",weight:0.6},
-    {name:"date",weight:0.5},
-    {name:"contents",weight:0.5},
-    {name:"tags",weight:0.3},
-    {name:"categories",weight:0.3}
-  ]
-};
-
-
-var searchQuery = param("keyword");
-if(searchQuery){
-  $("#search-query").val(searchQuery);
-  executeSearch(searchQuery);
-}else {
-  $('#search-results').append("<p>Please enter a word or phrase above</p>");
-}
-
-
-
-function executeSearch(searchQuery){
-  $.getJSON( window.location.href.split("/search/")[0] + "/index.json", function( data ) {
-    var pages = data;
-    var fuse = new Fuse(pages, fuseOptions);
-    var result = fuse.search(searchQuery);
-    // console.log({"matches":result});
-    document.getElementById("search-box").value = searchQuery
-    if(result.length > 0){
-      populateResults(result);
-    }else{
-      $('#search-results').append("<p>No matches found</p>");
-    }
-  });
-}
-
-function populateResults(result){
-  $.each(result,function(key,value){
-    var contents= value.item.contents;
-    var snippet = "";
-    var snippetHighlights=[];
-    var tags =[];
-    if( fuseOptions.tokenize ){
-      snippetHighlights.push(searchQuery);
-    }else{
-      $.each(value.matches,function(matchKey,mvalue){
-        if(mvalue.key == "tags" || mvalue.key == "categories" ){
-          snippetHighlights.push(mvalue.value);
-        }else if(mvalue.key == "contents"){
-          start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
-          end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
-          snippet += contents.substring(start,end);
-          snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
-        }
-      });
-    }
-
-    if(snippet.length<1){
-      snippet += contents.substring(0,summaryInclude*2);
-    }
-    //pull template from hugo templarte definition
-    var templateDefinition = $('#search-result-template').html();
-    //replace values
-    var output = render(templateDefinition,{key:key,title:value.item.title,hero:value.item.hero,date:value.item.date,summary:value.item.summary,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet});
-    $('#search-results').append(output);
-
-    $.each(snippetHighlights,function(snipkey,snipvalue){
-      $("#summary-"+key).mark(snipvalue);
-    });
-
-  });
-}
-
-function param(name) {
-    return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
-}
-
-function render(templateString, data) {
-  var conditionalMatches,conditionalPattern,copy;
-  conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
-  //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
-  copy = templateString;
-  while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
-    if(data[conditionalMatches[1]]){
-      //valid key, remove conditionals, leave contents.
-      copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
-    }else{
-      //not valid, remove entire section
-      copy = copy.replace(conditionalMatches[0],'');
-    }
-  }
-  templateString = copy;
-  //now any conditionals removed we can do simple substitution
-  var key, find, re;
-  for (key in data) {
-    find = '\\$\\{\\s*' + key + '\\s*\\}';
-    re = new RegExp(find, 'g');
-    templateString = templateString.replace(re, data[key]);
-  }
-  return templateString;
-}

static/js/single.js

@@ -1,78 +0,0 @@
-"use strict";
-
-var isMobile = false, isTablet = false, isLaptop = false;
-(function ($) {
-  jQuery(document).ready(function () {
-    function detectDevice() {
-      if (window.innerWidth <= 425) {
-        isMobile = true;
-        isTablet = false;
-        isLaptop = false;
-      } else if (window.innerWidth <= 768) {
-        isMobile = false;
-        isTablet = true;
-        isLaptop = false;
-      } else {
-        isMobile = false;
-        isTablet = false;
-        isLaptop = true;
-      }
-    }
-    detectDevice();
-
-    // =========== Add anchor to the headers ================
-    function addAnchor(element) {
-      element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
-    }
-
-    var postContent = document.getElementById("post-content");
-    if (postContent != null) {
-      var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
-      for (var i = 0; i < headerTypes.length; i++) {
-        var headers = postContent.querySelectorAll(headerTypes[i]);
-        if (headers) {
-          headers.forEach(addAnchor);
-        }
-      }
-    }
-
-    // =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
-    // add "navbar" class to the "nav" element
-    let toc = document.getElementById("TableOfContents");
-    toc.classList.add("navbar");
-    // add "nav-pills" class to the "ul" elements
-    let elems = toc.getElementsByTagName("ul");
-    for (let i = 0; i < elems.length; i++) {
-      elems[i].classList.add("nav-pills");
-    }
-    // add "nav-item" class to the "li" elements
-    elems = toc.getElementsByTagName("li");
-    for (let i = 0; i < elems.length; i++) {
-      elems[i].classList.add("nav-item");
-    }
-    // add "nav-link" class to the "a" elements
-    elems = toc.getElementsByTagName("a");
-    for (let i = 0; i < elems.length; i++) {
-      elems[i].classList.add("nav-link");
-    }
-
-    // add scroll to top button
-    function scrollToTop() {
-      var btn = $('#scroll-to-top');
-      $(window).scroll(function () {
-        if ($(window).scrollTop() > 300) {
-          btn.addClass('show');
-        } else {
-          btn.removeClass('show');
-        }
-      });
-
-      btn.on('click', function (e) {
-        e.preventDefault();
-        $('html, body').animate({ scrollTop: 0 }, '300');
-      });
-    }
-    scrollToTop();
-
-  });
-})(jQuery);