From 55062a3fd38d2ec305a191d3b1c0c1f2f599ff22 Mon Sep 17 00:00:00 2001
From: Bryan Braun <bbraun7@gmail.com>
Date: Fri, 10 Feb 2017 17:29:11 -0500
Subject: [PATCH] Replace the header_links plugin with client-side generated
 anchors.

Fixes facebook/react#4124
---
 docs/_layouts/default.html    | 30 ++++++++++++++++++++++++++++++
 docs/_plugins/header_links.rb | 20 --------------------
 docs/css/react.scss           |  1 +
 3 files changed, 31 insertions(+), 20 deletions(-)
 delete mode 100644 docs/_plugins/header_links.rb

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 5e10b98444..4be3397dbd 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -61,6 +61,36 @@
   </div>
 
   <div id="fb-root"></div>
+  <script>
+    (function() {
+      var selector = '.inner-content h2, .inner-content h3, .inner-content h4';
+      var elements = document.querySelectorAll(selector);
+      for (var i = 0; i < elements.length; i++) {
+        var textMethod = document.body.textContent ? "textContent" : "innerText";
+        var roughText = elements[i][textMethod];
+
+        // Regex rule for making the title URL-friendly.
+        var urlFriendlyText = roughText.trim()
+              .toLowerCase()
+              .replace(/\s+/g, '-')
+              .replace(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/g, '');
+
+        // Create the anchor we'll jump to.
+        var anchor = document.createElement('a');
+        anchor.className = 'anchor';
+        anchor.name = urlFriendlyText;
+        elements[i].insertBefore(anchor, elements[i].firstChild);
+
+        // Create the clickable "#" icon.
+        var hashLink = document.createElement('a');
+        var icon = document.createTextNode("#");
+        hashLink.appendChild(icon);
+        hashLink.className = 'hash-link';
+        hashLink.href = '#' + urlFriendlyText;
+        elements[i].appendChild(hashLink);
+      }
+    }());
+  </script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/_plugins/header_links.rb b/docs/_plugins/header_links.rb
deleted file mode 100644
index e275f8bd05..0000000000
--- a/docs/_plugins/header_links.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-require 'redcarpet'
-require 'sanitize'
-
-# Simple converter that is probably better than RedCarpet's built in TOC id
-# generator (which ends up with things like id="toc_1"... terrible).
-
-class Redcarpet::Render::HTML
-  def header(title, level)
-    # \p{Common} does not seem to include some of the Japanese alphabets and also includes
-    # some undesired characters like colon and parentheses, so we have to write out the
-    # necessary Unicode scripts individually.
-    clean_title = Sanitize.clean(title)
-      .downcase
-      .gsub(/\s+/, "-")
-      .gsub(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/, "")
-
-    return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
-  end
-end
-
diff --git a/docs/css/react.scss b/docs/css/react.scss
index 39dae8b1a9..3201a9df33 100644
--- a/docs/css/react.scss
+++ b/docs/css/react.scss
@@ -122,6 +122,7 @@ h1, h2, h3, h4, h5, h6 {
 .hash-link {
   color: $mediumTextColor;
   display: none;
+  padding-left: 8px;
 }
 
 // Main Nav