adding permalinks

Signed-off-by: Vanessa Sochat <[email protected]>

Author: vsoch

_docs/getting-started.md

@@ -11,9 +11,9 @@ tags:
 
 ### User Interaction
 
-If you look at any header field on the page, you'll notice three little dots 
-(called an elipsis) that if you mouse over, will open up to give you options
-for Permalink, Edit this Page, and Ask a Question. 
+
+On the right side of any page, you'll notice links to edit the page, or
+open an issue. The sections also have permalinks added.
 These are to ensure that a user is able to link someone else directly to a section
 of interest (Permalink), contribute a fix or suggestion to the documentation itself on GitHub
 (Edit this page) or open up an issue that links directly to where the user has

_includes/permalinks.html

@@ -0,0 +1,12 @@
+<script>
+var headers = ["h1", "h2", "h3", "h4"]
+var colors = ["red", "orange", "green", "blue"]
+
+$.each(headers, function(i, header){
+    var color = colors[i];
+    $(header).each(function () {
+        var href=$(this).attr("id");
+        $(this).append('<a class="headerlink" style="color:' + color + '" href="#' + href + '" title="Permanent link">¶</a>')
+    });
+})
+</script>

_includes/toc.html

@@ -9,7 +9,7 @@
     var toc = $('#TOC');
 
     // Select each header
-    sections = $('#md-container-pancakes h1');
+    sections = $('.td-content h1');
         $.each(sections, function(idx, v) {
             section = $(v);
             var div_id = $(section).attr('id');
@@ -20,9 +20,9 @@
 
             // Add section code to subnavigation
             var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
-            var contenders = $("#" + div_id).nextUntil( "h1" );
+            var contenders = $("#" + div_id).nextUntil("h1");
             $.each(contenders, function(idx, contender){
-               if($(contender).is('h2')) {
+               if($(contender).is('h2') || $(contender).is('h3')) {
                    var contender_id = $(contender).attr('id');
                    var contender_text = $(contender).text().split('¶')[0];
                    var content = '<li class="md-nav__item"><a class="md-nav__link" href="#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';

_layouts/page.html

@@ -3,3 +3,4 @@
 ---
 {{ content }}
 {% include toc.html %}
+{% include permalinks.html %}

assets/css/main.css

@@ -17946,6 +17946,34 @@ a.text-dark:focus {
     min-width: 100px
 }
 
+.headerlink {
+    display: inline-block;
+    margin-left: 1rem;
+    -webkit-transform: translateY(.5rem);
+    transform: translateY(.5rem);
+    transition: color .25s, opacity .125s .25s, -webkit-transform .25s .25s;
+    transition: transform .25s .25s, color .25s, opacity .125s .25s;
+    transition: transform .25s .25s, color .25s, opacity .125s .25s, -webkit-transform .25s .25s;
+    opacity: 0;
+}
+[dir=rtl] .headerlink {
+    margin-right: 1rem;
+    margin-left: 0;
+}
+html body .md-typeset .headerlink {
+    color: rgba(0, 0, 0, .26);
+}
+
+.headerlink {
+  opacity: 0;
+}
+
+.headerlink:focus, .headerlink:hover {
+    -webkit-transform: translate(0);
+    transform: translate(0);
+    opacity: 1;
+}
+
 @media(max-width:991.98px) {
     .td-navbar {
         padding-right: .5rem;