✨ Progress Indicator in TOC

assets/css/compiled/main.css

@@ -684,6 +684,11 @@ select {
   max-width: 65ch;
 }
 
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
 .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-lead);
   font-size: 1.25em;
@@ -1051,11 +1056,6 @@ select {
   line-height: 1.75;
 }
 
-.prose :where(p):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
 .prose :where(video):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
@@ -1175,6 +1175,17 @@ select {
   display: none;
 }
 
+.prose :where(a.active):not(:where([class~="not-prose"] *)) {
+  text-decoration-color: rgba(var(--color-primary-600), 1);
+  text-decoration-line: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 4px;
+}
+
+.prose-invert :where(a.active):not(:where([class~="not-prose"] *)) {
+  text-decoration-color: rgba(var(--color-primary-400), 1);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1433,10 +1444,6 @@ select {
   margin-right: -0.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -3426,6 +3433,10 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-neutral-700), 1);
 }
 
+.dark .dark\:prose-invert :where(a.active):not(:where([class~="not-prose"] *)) {
+  text-decoration-color: rgba(var(--color-primary-400), 1);
+}
+
 .dark .dark\:text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));

assets/js/main.js

@@ -0,0 +1 @@
+//for future

layouts/partials/toc.html

@@ -1,24 +1,57 @@
 <details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
-    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
+    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
-  >
     {{ i18n "article.table_of_contents" }}
   </summary>
   <div
-    class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
+    class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
-  >
     {{ .TableOfContents | emojify }}
   </div>
 </details>
 <details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
   <summary
-    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
+    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
-  >
     {{ i18n "article.table_of_contents" }}
   </summary>
   <div
-    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
+    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
-  >
     {{ .TableOfContents | emojify }}
   </div>
 </details>
+<script>
+
+  (function () {
+    var $toc = $('#TableOfContents');
+    if ($toc.length > 0) {
+      var $window = $(window);
+
+      function onScroll() {
+        var currentScroll = $window.scrollTop();
+        var h = $('.anchor');
+        var id = "";
+        h.each(function (i, e) {
+          e = $(e);
+          if (e.offset().top - $(window).height()/2 <= currentScroll) {
+            id = e.attr('id');
+          }
+        });
+        var active = $toc.find('a.active');      
+        if (active.length == 1 && active.eq(0).attr('href') == '#' + id) return true;
+        active.each(function (i, e) {
+          $(e).removeClass('active').siblings('ul').hide();
+        });
+        $toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
+          console.log($(e).children('a'))
+          $(e).children('a').addClass('active').parents('ul').show();          
+        });
+      }
+
+      $window.on('scroll', onScroll);
+      $(document).ready(function () {
+        $toc.find('a').parent('li').find('ul').hide();
+        onScroll();
+      });
+    }
+  })();
+
+</script>

layouts/partials/vendor.html

@@ -1,3 +1,7 @@
+{{/* jQuery */}}
+{{ $jqueryLib := resources.Get "lib/jquery/jquery.slim.min.js" }}
+<script src="{{ $jqueryLib.RelPermalink }}" integrity="{{ $jqueryLib.Data.Integrity }}"></script>
+
 {{/* Mermaid */}}
 {{ if .Page.HasShortcode "mermaid" }}
 {{ $mermaidLib := resources.Get "lib/mermaid/mermaid.min.js" }}

package-lock.json

@@ -19,6 +19,7 @@
         "@tailwindcss/typography": "^0.5.9",
         "chart.js": "^4.1.2",
         "fuse.js": "^6.6.2",
+        "jquery": "^3.6.3",
         "katex": "^0.16.4",
         "mermaid": "^9.3.0",
         "prettier": "^2.8.2",
@@ -904,6 +905,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
+      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
+      "dev": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2224,6 +2231,12 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "jquery": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
+      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "chart.js": "^4.1.2",
     "fuse.js": "^6.6.2",
+    "jquery": "^3.6.3",
     "katex": "^0.16.4",
     "mermaid": "^9.3.0",
     "prettier": "^2.8.2",
@@ -80,6 +81,10 @@
     {
       "from": "node_modules/typeit/dist/index.umd.js",
       "to": "assets/lib/typeit/typeit.umd.js"
+    },
+    {
+      "from": "node_modules/jquery/dist/jquery.slim.min.js",
+      "to": "assets/lib/jquery/jquery.slim.min.js"
     }
   ],
   "dependencies": {

tailwind.config.js

@@ -136,6 +136,12 @@ module.exports = {
             'p::after': {
               display: 'none'
             },
+            'a.active': {
+              "text-decoration-color": theme("colors.primary.600 / 1"),
+              "text-decoration-line": "underline",
+              "text-decoration-thickness": "3px",
+              "text-underline-offset": "4px"
+            }
           },
         },
         invert: {
@@ -153,6 +159,9 @@ module.exports = {
             code:{
               backgroundColor: theme("colors.neutral.700 / 1"),
             },
+            'a.active': {
+              "text-decoration-color": theme("colors.primary.400 / 1")
+            }
           },
         },
       }),