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.
Bryan Braun committed
Mar 1, 2017 at 14:52 UTC
7a878d27e3b30eface2a751e88a0ff46d41e1fec
4 files changed
+32
-20
docs/_js/anchor-links.js
new
+30
@@ -0,0 +1,30 @@
1
+// Add anchors to headings client-side, which prevents them from showing up
2
+// in RSS feeds. See https://github.com/facebook/react/issues/4124.
3
+(function() {
4
+ var selector = '.inner-content h2, .inner-content h3, .inner-content h4';
5
+ var elements = document.querySelectorAll(selector);
6
+ for (var i = 0; i < elements.length; i++) {
7
+ var textMethod = document.body.textContent ? "textContent" : "innerText";
8
+ var roughText = elements[i][textMethod];
9
+
10
+ // Regex rule for making the title URL-friendly.
11
+ var urlFriendlyText = roughText.trim()
12
+ .toLowerCase()
13
+ .replace(/\s+/g, '-')
14
+ .replace(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/g, '');
15
+
16
+ // Create the anchor we'll jump to.
17
+ var anchor = document.createElement('a');
18
+ anchor.className = 'anchor';
19
+ anchor.name = urlFriendlyText;
20
+ elements[i].insertBefore(anchor, elements[i].firstChild);
21
+
22
+ // Create the clickable "#" icon.
23
+ var hashLink = document.createElement('a');
24
+ var icon = document.createTextNode("#");
25
+ hashLink.appendChild(icon);
26
+ hashLink.className = 'hash-link';
27
+ hashLink.href = '#' + urlFriendlyText;
28
+ elements[i].appendChild(hashLink);
29
+ }
30
+}());
docs/_layouts/default.html
+1
@@ -61,6 +61,7 @@
61
</div>
62
63
<div id="fb-root"></div>
64
+ <script src="/react/js/anchor-links.js"></script>
65
<script>
66
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
67
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
docs/_plugins/header_links.rb
deleted
-20
@@ -1,20 +0,0 @@
1
-require 'redcarpet'
2
-require 'sanitize'
3
-
4
-# Simple converter that is probably better than RedCarpet's built in TOC id
5
-# generator (which ends up with things like id="toc_1"... terrible).
6
-
7
-class Redcarpet::Render::HTML
8
- def header(title, level)
9
- # \p{Common} does not seem to include some of the Japanese alphabets and also includes
10
- # some undesired characters like colon and parentheses, so we have to write out the
11
- # necessary Unicode scripts individually.
12
- clean_title = Sanitize.clean(title)
13
- .downcase
14
- .gsub(/\s+/, "-")
15
- .gsub(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/, "")
16
-
17
- return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
18
- end
19
-end
20
-
docs/css/react.scss
+1
@@ -122,6 +122,7 @@ h1, h2, h3, h4, h5, h6 {
122
.hash-link {
123
color: $mediumTextColor;
124
display: none;
125
+ padding-left: 8px;
126
}
127
128
// Main Nav