Switch to GFM-style heading anchors (#164)

docs/api-doc-markdown.md

@@ -5,7 +5,7 @@ title: Markdown Features
 
 ## Markdown Headers
 
-## Documents
+### Documents
 
 Documents use the following markdown header fields that are enclosed by a line `---` on either side:
 
@@ -38,7 +38,7 @@ original_id: doc1
 ---
 ```
 
-## Blog Posts
+### Blog Posts
 
 Blog Posts use the following markdown header fields that are enclosed by a line `---` on either side:
 
@@ -65,7 +65,7 @@ authorFBID: 100002976521003
 
 Docusaurus supports some extra features when writing documentation in markdown.
 
-## Linking other Documents
+### Linking other Documents
 
 You can use relative urls to other documentation files which will automatically get converted to the corresponding html links when they get rendered.
 
@@ -78,7 +78,7 @@ This markdown will automatically get converted into a link to `/docs/other-docum
 
 This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct html links when they get rendered.
 
-## Linking to Images and Other Assets
+### Linking to Images and Other Assets
 
 Static assets can be linked to in the same way that documents are, using relative urls. Static assets used in documents and blogs should go into `docs/assets` and `website/blog/assets`, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.
 
@@ -89,7 +89,7 @@ Example:
 ```
 
 
-## Generating Table of Contents
+### Generating Table of Contents
 
 You can make an autogenerated list of links, which can be useful as a table of contents for API docs.
 

lib/core/Remarkable.js

@@ -12,10 +12,8 @@ const CWD = process.cwd();
  */
 function anchors(md) {
   md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
-    return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
+    const textToken = tokens[idx+1];
-  };
+    return '<h' + tokens[idx].hLevel + '><a class="anchor" aria-hidden="true" name="' + toSlug(textToken.content) + '"></a><a href="#' + toSlug(textToken.content) + '" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
-  md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
-    return ' <a class="hash-link" href="#' + toSlug(tokens[idx-1].content) + '">#</a>' + '</h' + tokens[idx].hLevel + '>\n';
   };
 }
 
@@ -75,7 +73,6 @@ class Remarkable extends React.Component {
       }
 
     }
-
     const html = this.md.render(source);
 
     // Ensure fenced code blocks use Highlight.js hljs class

lib/core/Site.js

@@ -128,7 +128,7 @@ class Site extends React.Component {
                 }}
               />
             ))}
-
+            
         </body>
       </html>
     );

lib/static/css/main.css

@@ -82,13 +82,19 @@ a.anchor {
 }
 
 a.hash-link {
+  float: left;
+  padding-right: 4px;
+  margin-top: 4px;
+  margin-left: -20px;
+  line-height: 1.2;
   opacity: 0;
   transition: opacity 0.3s;
 }
-h1:hover a.hash-link,
+
-h2:hover a.hash-link,
+h1:hover .hash-link,
-h3:hover a.hash-link,
+h2:hover .hash-link,
-h4:hover a.hash-link {
+h3:hover .hash-link,
+h4:hover .hash-link {
   opacity: 0.5;
   transition: none;
 }
@@ -158,7 +164,7 @@ header h2 {
 .wrapper {
   margin: 0px auto;
   max-width: 1024px;
-  padding: 0 10px;
+  padding: 0 20px;
 }
 
 .projectLogo {
@@ -1262,6 +1268,10 @@ nav.toc:last-child {
   nav.toc:last-child {
     padding-bottom: 0;
   }
+
+  a.anchor {
+    top: -144px;
+  }
 }
 .docsNavContainer nav.toc .navWrapper {
   padding: 0;