doc: add "Edit on GitHub" link

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 <[email protected]>
Reviewed-By: Franziska Hinkelmann <[email protected]>
Reviewed-By: Yuta Hiroto <[email protected]>
Reviewed-By: Minwoo Jung <[email protected]>
Reviewed-By: Roman Reiss <[email protected]>

Author: Trott

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;

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>

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>');

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>`;
+}