signal in toc the current section

assets/scss/pages/post.scss

@@ -138,6 +138,11 @@
     color: #9b9b9b;
   }
 
+  a.active {
+    font-weight: 500;
+    color: rgb(51, 51, 51);
+  }
+
   @media screen and (max-width:800px) {
     visibility: hidden;
     width: 0;

layouts/_default/single.html

@@ -35,5 +35,6 @@
 {{ end }} 
 
 {{ define "scripts" }}
+  <script src="/js/table-of-contents.js"></script>
   <script src="https://unpkg.com/prismjs@^1.2"></script>
 {{ end }}

static/js/table-of-contents.js

@@ -0,0 +1,26 @@
+function clearActiveStatesInTableOfContents() {
+	document.querySelectorAll('#TableOfContents ul li a').forEach((section) => {
+		section.classList.remove('active');
+	});
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+
+	const observer = new IntersectionObserver(entries => {
+		var currentIR = 0;
+		entries.forEach(entry => {
+			const id = entry.target.getAttribute('id');
+			if (entry.intersectionRatio > currentIR) {
+				currentIR = entry.intersectionRatio;
+				clearActiveStatesInTableOfContents();
+				document.querySelector(`#TableOfContents ul li a[href="#${id}"]`).classList.add('active');
+			}
+		});
+
+	});
+
+	// Track all headers that have an `id` applied
+	document.querySelectorAll('article h3[id], article h2[id]').forEach((section) => {
+		observer.observe(section);
+	});
+});