doc: add "Edit on GitHub" link

Trott · Trott · commit 61cd101e1282 · 2018-07-13T20:37:05.000-07:00
Proof of concept for an "Edit on GitHub" link, inspired by the Serverless docs. One issue is that the link is to the version of the docs on the master branch even if the person was reading a different version of the doc. I don't consider that a big problem, although we can always remove the link if it turns out to be a big problem. I don't think there is a good solution. PRs need to be opened against the master branch generally. Having a bunch of PRs against staging branches is probably not what we want. If there's an update to one version of the doc, there will usually be an update to other versions. PR-URL: #21703 Reviewed-By: Anatoli Papirovski <apapirovski@mac.com> Reviewed-By: Franziska Hinkelmann <franziska.hinkelmann@gmail.com> Reviewed-By: Yuta Hiroto <hello@hiroppy.me> Reviewed-By: Minwoo Jung <minwoo@nodesource.com> Reviewed-By: Roman Reiss <me@silverwind.io>
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -504,6 +504,11 @@ th > *:last-child, td > *:last-child {
   visibility: hidden;
 }
 
+.github_icon {
+  vertical-align: middle;
+  margin: -2px 3px 0 0;
+}
+
 @media only screen and (max-width: 1024px) {
   #content {
     overflow: visible;
diff --git a/doc/template.html b/doc/template.html
@@ -35,6 +35,7 @@ <h1>Node.js __VERSION__ Documentation</h1>
               <a href="__FILENAME__.json">View as JSON</a>
             </li>
             __ALTDOCS__
+            __EDIT_ON_GITHUB__
           </ul>
         </div>
         <hr>
diff --git a/tools/doc/allhtml.js b/tools/doc/allhtml.js
@@ -52,7 +52,8 @@ let all = toc.replace(/index\.html/g, 'all.html')
   .replace('<a href="all.html" name="toc">', '<a href="index.html" name="toc">')
   .replace('index.json', 'all.json')
   .replace('api-section-index', 'api-section-all')
-  .replace('data-id="index"', 'data-id="all"');
+  .replace('data-id="index"', 'data-id="all"')
+  .replace(/<li class="edit_on_github">.*?<\/li>/, '');
 
 // Clean up the title.
 all = all.replace(/<title>.*?\| /, '<title>');
diff --git a/tools/doc/html.js b/tools/doc/html.js
@@ -96,6 +96,8 @@ function toHTML({ input, filename, nodeVersion, analytics }, cb) {
     HTML = HTML.replace('__ALTDOCS__', '');
   }
 
+  HTML = HTML.replace('__EDIT_ON_GITHUB__', editOnGitHub(filename));
+
   // Content insertion has to be the last thing we do with the lexed tokens,
   // because it's destructive.
   HTML = HTML.replace('__CONTENT__', marked.parser(lexed));
@@ -377,3 +379,9 @@ function altDocs(filename, docCreated) {
     </li>
   ` : '';
 }
+
+// eslint-disable-next-line max-len
+const githubLogo = '<span class="github_icon"><svg height="16" width="16" viewBox="0 0 16.1 16.1" fill="currentColor"><path d="M8 0a8 8 0 0 0-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2 .4-2.5-.5-2.7-1 0-.1-.5-.9-.8-1-.3-.2-.7-.6 0-.6.6 0 1 .6 1.2.8.7 1.2 1.9 1 2.4.7 0-.5.2-.9.5-1-1.8-.3-3.7-1-3.7-4 0-.9.3-1.6.8-2.2 0-.2-.3-1 .1-2 0 0 .7-.3 2.2.7a7.4 7.4 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.5 1.1.2 2 .1 2.1.5.6.8 1.3.8 2.2 0 3-1.9 3.7-3.6 4 .3.2.5.7.5 1.4v2.2c0 .2.1.5.5.4A8 8 0 0 0 16 8a8 8 0 0 0-8-8z"/></svg></span>';
+function editOnGitHub(filename) {
+  return `<li class="edit_on_github"><a href="https://github.com/nodejs/node/edit/master/doc/api/${filename}.md">${githubLogo}Edit on GitHub</a></li>`;
+}
