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: https://github.com/nodejs/node/pull/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>

4 files changed, 16 insertions, 1 deletions

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index b4da3375d5..f59f377004 100644
--- 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
index bb3e2bf8b4..fdcf0d5821 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -35,6 +35,7 @@
               <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
index 1c84e13d0a..d185538ab6 100644
--- 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
index 0e254f1203..0f3293dadd 100644
--- 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>`;
+}