Add clickable anchor links in fleetdm.com/docs (#2010)

* added a default renderer for headings to keep the links consistent with the ids

* adjusted the render function to create a link for each heading

* added styles for the heading links and link icon

* changing variable names to be more specific, fixing sidebar links, hiding autogenerated <ul>s

* Removed lodash require, updated comment, removed px from icon filename, and updated link to image.

website/api/helpers/strings/to-html.js

@@ -73,8 +73,14 @@ module.exports = {
       smartLists: true,
       smartypants: false,
     };
-
-    if (inputs.addIdsToHeadings === false) {
+    if (inputs.addIdsToHeadings === true) {
+      var headingRenderer = new marked.Renderer();
+      headingRenderer.heading = function (text, level) {
+        var headingID = _.kebabCase(text);
+        return '<span class="docs-heading"><h'+level+' id="'+headingID+'">'+text+'<a href="#'+headingID+'" class="docs-link"></a></h'+level+'></span>';
+      };
+      markedOpts.renderer = headingRenderer;
+    } else  {
       var renderer = new marked.Renderer();
       renderer.heading = function (text, level) {
         return '<h'+level+'>'+text+'</h'+level+'>';

website/assets/js/pages/docs/basic-documentation.page.js

@@ -104,11 +104,13 @@ parasails.registerPage('basic-documentation', {
     // console.log(subtopics);
 
     this.subtopics = (() => {
-      let subtopics = $('#body-content').find('h2').map((_, el) => el.innerHTML);
+      let subtopics = $('#body-content').find('h2').map((_, el) => el.innerText);
       subtopics = $.makeArray(subtopics).map((title) => {
+        // Removing all apostrophes from the title to keep  _.kebabCase() from turning words like 'user’s' into 'user-s'
+        let kebabCaseFriendlyTitle = title.replace(/[\’]/g, '');
         return {
           title,
-          url: '#' + _.kebabCase(title),
+          url: '#' + _.kebabCase(kebabCaseFriendlyTitle),
         };
       });
       return subtopics;

website/assets/styles/pages/docs/basic-documentation.less

@@ -38,6 +38,17 @@
     }
 
   }
+  .docs-heading:hover {
+
+    .docs-link {
+      height: 16px;
+      vertical-align: middle;
+      margin-left: 8px;
+      content: url('/images/icon-link-16x16@2x.png');
+    }
+
+  }
+
 
   [purpose='search'] {
 
@@ -341,7 +352,7 @@
         padding-bottom: 24px;
       }
 
-      h1 + ul {
+      span + ul {
         display: none; // Hides links at top of some markdown files
       }