Merge pull request #439 from nunocoracao/feature-412-sparkles-page-indicator-in-navigation-bar

✨ Page indicator in navigation bar

assets/css/compiled/main.css

@@ -1177,15 +1177,20 @@ select {
 
 .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 :where(p.active):not(:where([class~="not-prose"] *)) {
+  text-decoration-color: rgba(var(--color-primary-600), 1);
 }
 
 .prose-invert :where(a.active):not(:where([class~="not-prose"] *)) {
   text-decoration-color: rgba(var(--color-primary-400), 1);
 }
 
+.prose-invert :where(p.active):not(:where([class~="not-prose"] *)) {
+  text-decoration-color: rgba(var(--color-primary-400), 1);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -3091,6 +3096,12 @@ body:has(#menu-controller:checked) {
   z-index: 1000;
 }
 
+.active {
+  text-decoration-line: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 4px;
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
@@ -3437,6 +3448,10 @@ body:has(#menu-controller:checked) {
   text-decoration-color: rgba(var(--color-primary-400), 1);
 }
 
+.dark .dark\:prose-invert :where(p.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/css/main.css

@@ -441,3 +441,9 @@ body:has(#menu-controller:checked) {
   transition: visibility 0.3s, opacity 0.3s ease-in-out ;
   z-index: 1000;
 }
+
+.active {
+  text-decoration-line: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 4px;
+}

assets/js/main.js

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

config/_default/params.toml

@@ -19,6 +19,10 @@ enableCodeCopy = true
 
 # defaultBackgroundImage = "IMAGE.jpg" # used as default for background images 
 
+# highlightCurrentMenuArea = true
+# smartTOC = true
+# smartTOCHideUnfocusedChildren = true
+
 [header]
   layout = "basic" # valid options: basic, fixed
 

exampleSite/config/_default/params.toml

@@ -19,6 +19,10 @@ disableImageOptimization = true
 
 defaultBackgroundImage = "/img/iceland.jpg"
 
+highlightCurrentMenuArea = true
+smartTOC = true
+smartTOCHideUnfocusedChildren = false
+
 [header]
   layout = "fixed" # valid options: basic, fixed
 

exampleSite/content/docs/configuration/index.md

@@ -129,7 +129,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 ### Global
 
 | Name                            | Default      | Description                                                                                                                                                                                                                                       |
-| -------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.                              |
 | `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                           |
 | `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                 |
@@ -143,6 +143,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `disableImageZoom`              | `false`      | Disables image zoom feature across all the images in the site.                                                                                                                                                                                    |
 | `disableImageOptimization`      | `false`      | Disables image resize and optimization features across all the images in the site.                                                                                                                                                                |
 | `defaultBackgroundImage`        | _Not set_    | Default background image for both `background` homepage layout and `background` hero style                                                                                                                                                        |
+| `defaultBackgroundImage`        | _Not set_    | Marks menu entries in the main manu when selected                                                                                                                                                                                                 |
+| `smartTOC`                      | _Not set_    | Activate smart Table of Contents, items in view will be highlighted.                                                                                                                                                                              |
+| `smartTOCHideUnfocusedChildren` | _Not set_    | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus.                                                                                                                                  |
 
 ### Header
 

layouts/partials/head.html

@@ -49,9 +49,6 @@
   "sha512" }}
   <link type="text/css" rel="stylesheet" href="{{ $bundleCSS.RelPermalink }}"
     integrity="{{ $bundleCSS.Data.Integrity }}" />
-  {{ $jsMain := resources.Get "js/main.js" }}
-  {{ $jsMain = $jsMain | resources.Minify | resources.Fingerprint "sha512" }}
-  <script type="text/javascript" src="{{ $jsMain.RelPermalink }}" integrity="{{ $jsMain.Data.Integrity }}"></script>
   {{ $jsAppearance := resources.Get "js/appearance.js" }}
   {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }}
   <script type="text/javascript" src="{{ $jsAppearance.RelPermalink }}"

layouts/partials/header/basic.html

@@ -1,5 +1,5 @@
 <div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
-    class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
     {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -144,7 +144,8 @@
 </div>
 
 {{ if .Site.Menus.subnavigation }}
-<div class="flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo }} style="margin-top:-15px" {{ end }}>
+<div class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo
+    }} style="margin-top:-15px" {{ end }}>
     <div class="hidden md:flex items-center space-x-5">
         {{ range .Site.Menus.subnavigation }}
         <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
@@ -162,3 +163,16 @@
     </div>
 </div>
 {{ end }}
+
+{{ if .Site.Params.highlightCurrentMenuArea }}
+<script>
+    (function () {
+        var $mainmenu = $('.main-menu');
+        var path = window.location.pathname;
+        $mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
+            console.log($(e).children('a'))
+            $(e).children('p').addClass('active');
+        });
+    })();
+</script>
+{{ end }}

layouts/partials/toc.html

@@ -18,8 +18,9 @@
     {{ .TableOfContents | emojify }}
   </div>
 </details>
-<script>
 
+{{ if .Site.Params.smartTOC }} 
+<script>
   (function () {
     var $toc = $('#TableOfContents');
     if ($toc.length > 0) {
@@ -31,27 +32,34 @@
         var id = "";
         h.each(function (i, e) {
           e = $(e);
-          if (e.offset().top - $(window).height()/2 <= currentScroll) {
+          if (e.offset().top - $(window).height()/3 <= 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) {
+          {{ if .Site.Params.smartTOCHideUnfocusedChildren }} 
             $(e).removeClass('active').siblings('ul').hide();
+          {{ else }}
+            $(e).removeClass('active');
+          {{ end }}
         });
+        $toc.find('a[href="#' + id + '"]').addClass('active')
         $toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
-          console.log($(e).children('a'))
+          $(e).children('a').parents('ul').show();          
-          $(e).children('a').addClass('active').parents('ul').show();          
         });
       }
 
       $window.on('scroll', onScroll);
       $(document).ready(function () {
+        {{ if .Site.Params.smartTOCHideUnfocusedChildren }} 
           $toc.find('a').parent('li').find('ul').hide();
+        {{ end }}
         onScroll();
       });
     }
   })();
-
 </script>
+{{ end }}

tailwind.config.js

@@ -138,9 +138,9 @@ module.exports = {
             },
             'a.active': {
               "text-decoration-color": theme("colors.primary.600 / 1"),
-              "text-decoration-line": "underline",
+            },
-              "text-decoration-thickness": "3px",
+            'p.active': {
-              "text-underline-offset": "4px"
+              "text-decoration-color": theme("colors.primary.600 / 1"),
             }
           },
         },
@@ -161,6 +161,9 @@ module.exports = {
             },
             'a.active': {
               "text-decoration-color": theme("colors.primary.400 / 1")
+            },
+            'p.active': {
+              "text-decoration-color": theme("colors.primary.400 / 1")
             }
           },
         },