Replace the header_links plugin with client-side generated anchors. (#…

…4165)

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

Fixes #4124

* Move anchor-link code into a separate script

Also adds a couple comments, for context.

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);
+  }
+}());

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),

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