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]>
nodejs · Jul 14, 2018 · 0de0f89 · 0de0f89
1 parent 1502651
commit 0de0f89
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
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>`;
+}