From f61b35b14c3f121ca10bcfdd626f939017c82b7f Mon Sep 17 00:00:00 2001
From: Anastasiya Shamray <a.shamray@yadro.com>
Date: Tue, 23 May 2023 18:33:59 +0300
Subject: [PATCH] [#9] Add table of contents

---
 assets/css/style.css          | 28 ++++++++++++++++++++++++++++
 assets/js/script.js           | 12 ++++++++++++
 layouts/partials/default.html |  8 ++++++++
 3 files changed, 48 insertions(+)

diff --git a/assets/css/style.css b/assets/css/style.css
index 4b9d929..b653dab 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -22,6 +22,10 @@
   src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
   font-family: var(--font-family), sans-serif;
@@ -606,6 +610,30 @@ textarea.form-control {
   top: 8px;
 }
 
+.content ol li,
+.content ol li ol {
+  list-style-type: disc;
+  margin-bottom: 0;
+}
+
+.content h3:before,
+.content h4:before,
+.content h5:before {
+  display: block;
+  content: "";
+  height: 75px;
+  margin: -75px 0 0;
+}
+
+.content .title-link {
+  opacity: 0;
+  transition: 0.7s;
+}
+
+.content .title-link.active {
+  opacity: 1;
+}
+
 .list-styled li {
   position: relative;
 }
diff --git a/assets/js/script.js b/assets/js/script.js
index 4b46685..d377d56 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -128,6 +128,18 @@
   })
 
 
+  // table of contents
+  $('h3, h4, h5', '.content').each(function () {
+    $(this).append('<a class="title-link" href="#' + $(this).attr('id') + '"> #</a>');
+
+    $(this).hover(function(){
+      $(this).find('a').addClass('active');
+    }, function(){
+      $(this).find('a').removeClass('active');
+    });
+  });
+
+
   // Download page to pdf format
   window.onload = function() {
       var generatePDF = document.getElementById('generatePDF');
diff --git a/layouts/partials/default.html b/layouts/partials/default.html
index a69fccd..f105c75 100644
--- a/layouts/partials/default.html
+++ b/layouts/partials/default.html
@@ -50,6 +50,14 @@
                     </tr>
                   </tbody>
                 </table>
+                {{ if .Params.toc }}
+                  <details>
+                    <summary>Table of Contents</summary>
+                    <aside>
+                      {{ .TableOfContents }}
+                    </aside>
+                  </details>
+                {{ end }}
               {{ end }}
               {{.Content}}
             </div>