added toc to the sidebar

- added table of content to the sidebar
- added js to highlight current position

Author: Franz-Kafka

_config.yml

@@ -62,7 +62,7 @@ defaults:
       path: ""
     values:
       image: /images/sharingduckdb.jpg
-      #toc: true
+      toc: true
 
 repository: "duckdb/duckdb-web"
 
@@ -82,7 +82,7 @@ star_count: "14.4k"
 
 toc:
   min_level: 1
-  max_level: 3
-  ordered_list: true
+  max_level: 2
+  ordered_list: false
 
 exclude: ['Gemfile', 'Gemfile.lock', 'node_modules', 'vendor/bundle', 'vendor/cache', 'vendor/gems', 'vendor/ruby', 'bundle']

_layouts/docu.html

@@ -146,7 +146,7 @@
 				</div>
 
 				{% assign ct = content | toc %}
-				{% include anchor_headings.html html=ct %}
+				{% include anchor_headings.html html=content %}
 
 				{% if page.url contains 'overview' %}
 				<div class="index">
@@ -172,7 +172,16 @@ <h5>About this page</h5>
 
 			</div>
 
-			<div id="sidebar"></div>
+			<div id="sidebar">
+				{% assign toc_only = content | toc_only %}
+				{% assign toc_text_only = toc_only | strip_html | remove: ' ' %}
+				{% if toc_text_only.size > 10 %}
+					<div class="toc_menu">
+						<h5>In this article</h5>
+						{{ toc_only }}
+					</div>
+				{% endif %}
+			</div>
 
 
 

_plugins/toc.rb

@@ -5,7 +5,7 @@ def inject_anchors_into_html
     @entries.each do |entry|
       # NOTE: `entry[:id]` is automatically URL encoded by Nokogiri
       entry[:text].replace(
-        %(<a class="anchor" style="text-decoration: none;" href="##{entry[:id]}">#{entry[:text]}</a>)
+        %(<a class="anchor" href="##{entry[:id]}">#{entry[:text]}</a>)
       )
     end
 

css/docu.scss

@@ -249,10 +249,55 @@ body.documentation{
       background: $black50;
       position: relative;
       width: 22%;
+      padding: 100px 20px 20px 20px;
       @media only screen and (max-width: 1200px) {
          display: none;
       }
    }
+   .toc_menu{
+      position: sticky;
+      top: 100px;
+      h5{
+         color: $black400;
+         font-size: 12px;
+         font-style: normal;
+         font-weight: 450;
+         text-transform: uppercase;
+         margin-left: 12px;
+      }
+      ul#toc{
+         list-style: none;
+         padding: 0;
+         margin: 0;
+         margin-top: 20px;
+         font-size: 14px;
+         position: relative;
+         li{
+            line-height: 1;
+            &.current a{
+               background: #EFEFEF;
+               color: black;
+               font-weight: 600;
+            }
+         }
+         a{
+            color: $black400;
+            text-decoration: none;
+            padding: 8px 12px;
+            background: $black50;
+            border-radius: 100px;
+            display: inline-block;
+            text-overflow: ellipsis; 
+            overflow: hidden; 
+            white-space: nowrap;
+            max-width: 100%;
+            line-height: 1;
+            &:hover{
+               background: $black100;
+            }
+         }
+      }
+   }
    blockquote {
        border-radius: 10px;
        margin: 0;

js/script.js

@@ -683,4 +683,34 @@ $(document).ready(function(){
 		})
 	}
 
+	/** HIGHLIGHT TOC MENU **/
+	if ($('body').hasClass('documentation')) {
+		var headings = $('#main_content_wrap h2');
+		var tocEntries = $('.toc-entry');
+	
+		$(window).on('scroll', function() {
+			var scrollPos = $(window).scrollTop() + 150; // top offset
+			var documentHeight = $(document).height();
+	
+			headings.each(function(index, element) {
+				var id = $(element).attr('id');
+				var offset = $(element).offset().top;
+	
+				if (scrollPos >= offset) {
+					tocEntries.removeClass('current');
+					$('.toc-entry a[href="#' + id + '"]').parent().addClass('current');
+				}
+			});
+
+			if (scrollPos + $(window).height() >= documentHeight - 20) {
+				tocEntries.removeClass('current'); 
+				$('.toc-entry:last').addClass('current'); 
+			}
+
+		});
+	}
+
+
+
+	
 });