Automatically add nice header linking behavior (sass#280)

* Make link headers look and work more like GitHub's * Automatically generate links for all headers * Flash headers when they're selected * update readme
asaf400 · Mar 4, 2019 · ed3ea91 · ed3ea91
1 parent 92bcf4f
commit ed3ea91
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -3,5 +3,7 @@
 The Sass website is open source. See a typo? Have a UX improvement? Check out
 the [Contributing guide][contrib]! Also, check out the [Style Guide][sg].
 
+Thanks!
+
 [contrib]: https://github.com/sass/sass-site/blob/master/CONTRIBUTING.md
 [sg]:      http://sass-lang.com/styleguide
diff --git a/config.rb b/config.rb
@@ -76,3 +76,15 @@
     body
   end
 end
+
+after_render do |content, path, locs|
+  # Only modify the original page's rendering.
+  next if path.include?("source/layouts/")
+
+  content.gsub(%r{^<(h[0-6])(.*?)</\1>}m) do |header_text|
+    header = Nokogiri::HTML::DocumentFragment.parse(header_text).children.first
+    id = header.attr(:id)
+    header.children.before("<a class='anchor' href='##{id}'></a>") if id
+    header.to_html
+  end
+end
diff --git a/source/assets/css/components/_link-header.scss b/source/assets/css/components/_link-header.scss
@@ -1,26 +1,42 @@
-.sl-c-link-header {
-
-  a {
+h1, h2, h3, h4, h5, h6 {
+  a.anchor {
+    display: block;
+    float: left;
+    vertical-align: middle;
+    margin: {
+      left: -1.5rem;
+      top: -3px;
+    }
+    width: 1.5rem;
+    background: none;
     border: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 
-    &:after {
-      margin: {
-        right: .5rem;
-        left: 1rem;
-      };
-      font-size: 1rem;
-      content: "\1F517";
+    &::after {
       visibility: hidden;
+      font: {
+        size: 1rem;
+        weight: normal;
+      }
+      content: "\1F517";
     }
+  }
+
+  &:hover a.anchor::after {
+    visibility: visible;
+  }
+
+  &:target {
+    animation-name: highlight-header;
+    animation-duration: 5s;
+  }
+}
 
-    &:hover,
-    &:focus {
-      background: none;
+@keyframes highlight-header {
+  from {
+    background-color: $sl-color--dawn-pink;
+  }
 
-      &:after { visibility: visible; }
-    }
+  to {
+    background-color: unset;
   }
 }
diff --git a/source/styleguide/components.html.haml b/source/styleguide/components.html.haml
@@ -37,17 +37,14 @@ title: Components
 .sl-c-introduction
   %p= lorem.paragraph
 
-%h2.sl-c-link-header
-  = link_to '#' do
-    %span Link Header 2
+%h2#link-header-2
+  Link Header 2
 
-%h3.sl-c-link-header
-  = link_to '#' do
-    %span Link Header 3
+%h3#link-header-3
+  Link Header 3
 
-%h4.sl-c-link-header
-  = link_to '#' do
-    %span Link Header 4
+%h4#link-header-4
+  Link Header 4
 
 .sl-c-list-navigation-wrapper
   :markdown