Auto-id on help headers

organon/templates/flatpages/default.html

@@ -50,19 +50,13 @@
             .replace(/-+$/, '');            // Trim - from end of text
     }
 
-    // var $toc = $('<ol class="help__toc"></ol>')
-
-    // $("h2").each(function() {
-    //      var txt = $(this).text();
-    //      var id =  slugify(txt);
-    //      $(this).attr('id', id);
-    //      var $li = $('<li></li>');
-    //      var $a = $('<a></a>').attr('href', '#' + id).text(txt);
-    //      $li.append($a);
-    //      $toc.append($li);
-    // });
-
-    // $toc.insertBefore($("h2").first());
+    $("h2, h3, h4").each(function() {
+         var txt = $(this).text();
+         var id =  slugify(txt);
+         $(this).attr('id', id).append(" ");
+         var $a = $('<a>¶</a>').attr('href', '#' + id).addClass('permalink');
+         $(this).append($a);
+    });
 </script>
 </body>
 </html>

playground/static/playground/css/styles.css

@@ -1581,6 +1581,18 @@ ol[data-alternative]:before {
 
 .help__section--closed + .help__inner { display: none; }
 
+.help__content h2 .permalink,
+.help__content h3 .permalink,
+.help__content h4 .permalink {
+    display: none;
+}
+
+.help__content h2:hover .permalink,
+.help__content h3:hover .permalink,
+.help__content h4:hover .permalink {
+    display: inline;
+}
+
 .help__content img,
 .help__content pre { 
     overflow: hidden;