Table of contents menu for wikis

app/assets/stylesheets/wiki.css

@@ -73,6 +73,57 @@ a.navbar-offset {
     visibility: hidden;
 }
 
+#toc-menu:hover, .toc-active {
+  background-color: #cbd5e0;
+}
+
+.js-toc {
+  max-height: 339px;
+  max-width: 298px;
+  top: 40px;
+  overflow: auto;
+  line-height: 2;
+  border: 1px solid #e1e4e8;
+}
+
+.toc-list {
+  list-style: none;
+  background-color: #fff;
+  z-index: 2000;
+  margin-bottom: 0;
+  padding: 0px 15px 15px 15px;
+}
+
+.is-collapsible {
+  padding-left: 20px;
+  padding-bottom: 5px;
+  list-style: none;
+}
+
+.toc-list-item {
+  padding: 0;
+  font-weight: initial;
+  text-align: start;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.toc-list-item a {
+  color: #343a40;
+  text-decoration: none;
+}
+
+.toc-list-item a:hover {
+  color: #0c82c4;
+}
+
+@media (max-width: 606px) {
+  .js-toc {
+    max-width: 260px;
+  }
+}
+
 @media (max-width: 768px) {
   .add-subscriptions {
     margin-top:10px;

app/javascript/packs/application.js

@@ -20,3 +20,4 @@ console.log('Hello World from Webpacker')
 var componentRequireContext = require.context("components", true);
 var ReactRailsUJS = require("react_ujs");
 ReactRailsUJS.useContext(componentRequireContext);
+const tocbot = require('tocbot');

app/views/wiki/_header.html.erb

@@ -42,6 +42,10 @@
         <a aria-label="Practice in a realtime doc" href="/talk/<%= @node.slug_from_path %>" rel="tooltip" title="Practice in a realtime doc." data-placement="top"><i class="fa fa-comment"></i></a> |
         <a aria-label="Link to wiki" href="/n/<%= @node.id %>"><i style="color:#888;" class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
       </span>
+      <details class="d-inline-flex flex-column position-relative">
+        <summary id="toc-menu" class="btn btn-light" role="button" aria-label="Table of Contents" aria-haspopup="menu"><i class="fa fa-list-ul" aria-hidden="true"></i></summary>
+        <span class="js-toc position-absolute shadow p-0 pt-4 rounded" role="menu"></span>
+      </details>
     </div>
   </div>
 </div>

app/views/wiki/show.html.erb

@@ -20,7 +20,7 @@
 
 <div class="row">
 
-<div class="col-lg-9">
+<div class="col-lg-9" id="main-content">
 
   <%= render partial: "wiki/header" %>
 
@@ -75,5 +75,35 @@
     <% end %>
 
     setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);
+
+    $('#main-content h1, h2, h3, h4, h5, h6').each(function (){
+      //convert the heading's text to lowercase and remove all spaces
+      let headingId = $(this).text().toLowerCase().replace(/\s/g, '');
+      $(this).attr('id', headingId);
+    });
+
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '.js-toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '#main-content',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: 'h1, h2, h3, h4, h5, h6',
+      // For headings inside relative or absolute positioned containers within content.
+      hasInnerContainers: true,
+    });
+
+    $('.toc-list li').first().css('font-weight', '600');
+
+    $(document).on('click', function (e) {
+      let tocBtn = $('#toc-menu')
+      if(!tocBtn.is(e.target) && tocBtn.has(e.target).length === 0) {
+        //closes the menu when there's a click outside the menu
+        $('details').removeAttr('open');
+        tocBtn.removeClass('toc-active');
+      } else {
+        tocBtn.addClass('toc-active');
+      }
+    });
   });
 </script>

package.json

@@ -62,6 +62,7 @@
     "react_ujs": "^2.6.1",
     "short-code-forms": "jywarren/short-code-forms#~0.0.1",
     "simple-data-grapher": "^2.0.0",
+    "tocbot": "^4.12.3",
     "typeahead.js": "^0.11.1",
     "typeahead.js-browserify": "Javier-Rotelli/typeahead.js-browserify#~1.0.7",
     "urlhash": "^0.1.3",

yarn.lock

@@ -12893,6 +12893,11 @@ to-space-case@0.1.2:
   dependencies:
     to-no-case "0.1.1"
 
+tocbot@^4.12.3:
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.12.3.tgz#173dd144835d54f4c60cc57b2dbe569e10df0b74"
+  integrity sha512-1uA4rNZgY3a9OjwmIV076ksNr72PdxlLj7DD+0pKXUh1vNf6/GRL8nJT4ZtmhX9NRVPLPOehe0NEmwf2ukDTSg==
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"