Show a permalink anchor when hovering over headings in main content (m…

…mistakes#2251)

* Implement heading permalinks, close mmistakes#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

@@ -1,5 +1,3 @@
-.vscode
-.idea
 *.gem
 *.sublime-project
 *.sublime-workspace
@@ -15,5 +13,4 @@ example/_site
 Gemfile.lock
 node_modules
 npm-debug.log*
-desktop.ini
-vendor
+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

@@ -92,7 +92,7 @@ $(document).ready(function() {
  events: true // if true, emit custom events
  });
  }
- 
+
  // add lightbox class to all image links
  $(
  "a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']"
@@ -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);
+ }
+ });
 });