Show a permalink anchor when hovering over headings in main content (#2251)

* Implement heading permalinks, close #2246

Thanks to jekyll/jekyll for CSS.
Link anchor is visible when the mouse hovers over the title line.

* Build the updated _main.js

.gitignore

@@ -13,3 +13,4 @@ example/_site
 Gemfile.lock
 node_modules
 npm-debug.log*
+vendor/bundle

_sass/minimal-mistakes/_page.scss

@@ -72,6 +72,23 @@
     border-bottom: 1px solid $border-color;
   }
 
+	h1, h2, h3, h4, h5, h6 {
+		.header-link {
+			position: relative;
+			left: 0.5em;
+			opacity: 0;
+			font-size: 0.8em;
+			-webkit-transition: opacity 0.2s ease-in-out 0.1s;
+			-moz-transition: opacity 0.2s ease-in-out 0.1s;
+			-o-transition: opacity 0.2s ease-in-out 0.1s;
+			transition: opacity 0.2s ease-in-out 0.1s;
+		}
+
+		&:hover .header-link {
+			opacity: 1;
+		}
+	}
+
   p,
   li,
   dl {

assets/js/_main.js

@@ -132,4 +132,17 @@ $(document).ready(function() {
     closeOnContentClick: true,
     midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
   });
+
+  // Add anchors for headings
+  $('.page__content').find('h1, h2, h3, h4, h5, h6').each(function() {
+    var id = $(this).attr('id');
+    if (id) {
+      var anchor = document.createElement("a");
+      anchor.className = 'header-link';
+      anchor.href = '#' + id;
+      anchor.innerHTML = '<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>';
+      anchor.title = "Permalink";
+      $(this).append(anchor);
+    }
+  });
 });