From 7a878d27e3b30eface2a751e88a0ff46d41e1fec Mon Sep 17 00:00:00 2001
From: Bryan Braun <bbraun7@gmail.com>
Date: Wed, 1 Mar 2017 14:52:54 -0500
Subject: [PATCH] Replace the header_links plugin with client-side generated
 anchors. (#4165)

* Replace the header_links plugin with client-side generated anchors.

Fixes facebook/react#4124

* Move anchor-link code into a separate script

Also adds a couple comments, for context.
---
 docs/_js/anchor-links.js      | 30 ++++++++++++++++++++++++++++++
 docs/_layouts/default.html    |  1 +
 docs/_plugins/header_links.rb | 20 --------------------
 docs/css/react.scss           |  1 +
 4 files changed, 32 insertions(+), 20 deletions(-)
 create mode 100644 docs/_js/anchor-links.js
 delete mode 100644 docs/_plugins/header_links.rb

diff --git a/docs/_js/anchor-links.js b/docs/_js/anchor-links.js
new file mode 100644
index 0000000000..c8a1c86890
--- /dev/null
+++ b/docs/_js/anchor-links.js
@@ -0,0 +1,30 @@
+// Add anchors to headings client-side, which prevents them from showing up
+// in RSS feeds. See https://github.com/facebook/react/issues/4124.
+(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);
+  }
+}());
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 5e10b98444..1819afec42 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -61,6 +61,7 @@
   </div>
 
   <div id="fb-root"></div>
+  <script src="/react/js/anchor-links.js"></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