Remove: code formatters, Add: Table of content component on 4x api page

Author: ShubhamOulkar

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-ruby '3.3.5'
+ruby '3.4.1'
 
 gem 'github-pages', group: :jekyll_plugins
 gem 'webrick'

Gemfile.lock

@@ -40,8 +40,7 @@ GEM
       logger
     faraday-net_http (3.3.0)
       net-http
-    ffi (1.17.0-x64-mingw-ucrt)
-    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.0)
     forwardable-extended (2.6.0)
     gemoji (4.1.0)
     github-pages (232)
@@ -222,16 +221,16 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     logger (1.6.1)
     mercenary (0.3.6)
+    mini_portile2 (2.8.8)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.25.1)
     net-http (0.4.1)
       uri
-    nokogiri (1.16.7-x64-mingw-ucrt)
-      racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.7)
+      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
@@ -276,7 +275,7 @@ DEPENDENCIES
   webrick
 
 RUBY VERSION
-   ruby 3.3.5p100
+   ruby 3.4.1p0
 
 BUNDLED WITH
    2.5.16

_includes/api/en/4x/menu.md

@@ -1,5 +1,5 @@
 <ul id="menu">
-
+    <li><em>On this page</em>
     <li id="express-api"><a href="#express">express()</a>
     <ul id="express-menu">
         <li><em>Methods</em></li>
@@ -204,4 +204,6 @@
             </li>
         </ul>
     </li>
+    </li>
 </ul>
+<button id="menu-toggle" title="show table of content">Table of content &#x25BC</button>

css/dark-theme.css

@@ -278,3 +278,11 @@ html.dark-mode #blog-side-menu-container h3 a{
 html.dark-mode #blog-side-menu > li > a{
   color: var(--dark_inner_text);
 }
+
+@media all and (max-width: 1440px) {
+  html.dark-mode #menu,
+  #tags-side-menu,
+  #blog-side-menu-container {
+    background-color: var(--second_dark_bg);
+  }
+}

css/style.css

@@ -705,12 +705,12 @@ footer {
 #blog-side-menu-container {
   position: fixed;
   margin: 0;
-  padding: 0 10px 0 0;
+  padding: 0;
   top: 153px;
-  left: 30px;
+  right: 0;
   height: 500px;
   text-align: left;
-  font-size: 13px;
+  font-size: 1rem;
   overflow-y: auto;
 }
 
@@ -840,9 +840,80 @@ h2 a {
   }
 }
 
+/* table of content btn */
+#menu-toggle {
+  cursor: pointer;
+  display: none;
+  margin-block: 1.5rem;
+  font-size: 1rem;
+  padding: 0.5rem;
+  opacity: 0;
+}
+
 /* responsive */
 
+@media all and (max-width: 1440px) {
+  #menu,
+  #tags-side-menu,
+  #blog-side-menu-container {
+    position: sticky;
+    max-height: 0;
+    top: 57px;
+    left: 0;
+    background-color: #eee;
+    z-index: 100;
+  }
+
+  #menu.open {
+    max-height: 50vh;
+    padding: 1rem;
+  }
+
+  #menu-toggle.show{
+    display: block;
+    opacity: 1;
+  }
+
+  #menu-toggle.position-fixed {
+    position: fixed;
+    right: 1rem;
+    top: 57px;
+    margin-block: 1rem;
+    border-radius: 50%;
+    background-color: #eeeeee56;
+    padding: 1rem;
+    border: 1px solid rgb(202, 199, 199);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .content {
+    margin: 57px 3% 7%;
+  }
+
+  #menu li {
+    cursor: pointer;
+    border-bottom: 1px solid #cdcdcd;
+  }
+
+  #overlay.blurs{
+    display: block;
+  }
+}
+
 @media all and (max-width: 1110px) {
+  #menu,
+  #tags-side-menu,
+  #blog-side-menu-container {
+    position: fixed;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .content {
+    margin: 80px 3% 7%;
+  }
+
   #boxes {
     grid-template-columns: 1fr 1fr;
   }
@@ -908,12 +979,6 @@ h2 a {
     font-weight: normal;
   }
 
-  #menu,
-  #tags-side-menu,
-  #blog-side-menu-container {
-    display: none;
-  }
-
   .content {
     padding-left: 0;
   }
@@ -1020,6 +1085,16 @@ h2 a {
   #boxes {
     grid-template-columns: 1fr;
   }
+
+  #menu-toggle.position-fixed {
+    left: 0;
+    top: 57px;
+    margin-block: 0rem;
+    width: 100vw;
+    padding: 0.5rem;
+    border-radius: 0;
+    background-color: #eeeeeec9;
+  }
 }
 
 @media all and (max-width: 420px) {

js/menu.js

@@ -115,4 +115,92 @@ overlay?.addEventListener("click", () => {
 
 document
 	.querySelector(`.submenu-content a[href="${document.location.pathname}"]`)
-	?.classList.add("current");
+	?.classList.add("current");
+
+// TOC
+const tocScreen = window.matchMedia("(max-width: 1440px)");
+let isTocScreen = tocScreen.matches;
+const toggleBtn = document.getElementById("menu-toggle");
+const menuList = document.getElementById("menu");
+// ! important note add scroll observer element common to all pages that include TOC component 👇🏻 remove id to "scroll-obsever"
+const firstHeader = document.getElementById("express");
+let observer;
+
+
+// Scroll observer (perform better than window scroll event listener)
+function createScrollObserver() {
+  if (observer) observer.disconnect();
+
+  let options = {
+    root: null, // Observe relative to viewport
+    rootMargin: "-57px 0px 0px 0px", // Slight offset to ensure intersection triggers correctly
+    threshold: 0, // Trigger when the element is fully out of view (i.e. behind header)
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  // observe intersection of TOC btn with header bar
+  observer.observe(firstHeader);
+}
+
+// Update button visibility based on screen size
+function updateButtonVisibility() {
+	if (isTocScreen) {
+	  toggleBtn?.classList.add("show");
+	  createScrollObserver();
+	} else {
+	  toggleBtn?.classList.remove("show");
+	  if (observer) observer.disconnect();
+	}
+  }
+
+function handleIntersect(entries) {
+  const [entry] = entries
+  const clientWidth = entry.boundingClientRect.width
+  // first header in invisible then show floating TOC btn
+  if(!entry.isIntersecting) {
+		if(toggleBtn) {
+			if(clientWidth >= 540) {
+				toggleBtn.innerHTML = "&#x25BC"; 
+			} else {
+				toggleBtn.innerHTML = "Table of content &#x25BC";
+			};
+		}
+		toggleBtn?.classList.add("position-fixed");
+	};
+  // first header is visible then show static TOC btn 
+  if(entry.isIntersecting) {
+		if(toggleBtn) toggleBtn.innerHTML = "Table of content &#x25BC";
+		toggleBtn?.classList.remove("position-fixed");
+  };
+};
+
+// Show button on page load
+updateButtonVisibility();
+
+// Listen for changes in screen size
+tocScreen.addEventListener("change", (event) => {
+  isTocScreen = event.matches;
+  updateButtonVisibility();
+});
+
+// Toggle menu on button click
+toggleBtn?.addEventListener("click", () => {
+  menuList?.classList.toggle("open");
+  overlay?.classList.toggle("blurs");
+  document.body.classList.toggle("no-scroll");
+  if (isTocScreen) {
+    toggleBtn?.classList.remove("show");
+  }
+});
+
+// Close menu on link click
+document.querySelectorAll("#menu a").forEach((link) => {
+  link.addEventListener("click", function () {
+    menuList?.classList.remove("open");
+    overlay?.classList.remove("blurs");
+    document.body.classList.remove("no-scroll");
+    if (isTocScreen) {
+      toggleBtn?.classList.add("show");
+    }
+  });
+});