improve: add "EditOnGitHub" on every necessary page (#3971)

For the previous version of "Edit on GitHub", we find there're some pages (such as "Download","Index"...ect), it doesn't have this link, because the original code depends on the <h1> generated from "#" in the markable file, but "Download" and "Index" without any "#", so we cannot generate these links.

Now the solution is we've generated URL at githubLink.js, with a hiddenfield generated for each body content, and then we read it out by main.js with which we can fulfill the "Edit On GitHub" link with the correct URL.

Besides, we've also some other changes:

1. Move "Edit On GitHub" onto the footer.
2. Add "EditOnGithub" instead of hard coding for 'en' site pages.
3. Use 'spe' instead of hard coding for character '/' at 'scripts/plugins/githubLinks.js'.
4. Add "{{{contents}}}" for "Download" and "Download Current", because gitHubLinks.js will save and return the content, we need to show it outside by appending the hidden field.

Author: Maledong

layouts/download-current.hbs

@@ -11,7 +11,7 @@
         <div class="download-header">
           <h1>{{downloads.headline}}</h1>
         </div>
-
+        {{{contents}}}
         {{> primary-download-matrix version=project.latestVersions.current versionTypeCurrent="true"}}
         {{> secondary-download-matrix version=project.latestVersions.current versionTypeCurrent="true"}}
 

layouts/download.hbs

@@ -11,7 +11,7 @@
         <div class="download-header">
           <h1>{{downloads.headline}}</h1>
         </div>
-
+        {{{contents}}}
         {{> primary-download-matrix version=project.latestVersions.lts versionTypeLts="true"}}
         {{> secondary-download-matrix version=project.latestVersions.lts versionTypeLts="true"}}
 

layouts/partials/footer.hbs

@@ -9,6 +9,7 @@
           <img src="/static/images/openjs_foundation-logo.svg" alt="OpenJS Foundation" width="120" height="38">
         </a>
         <ul class="list-divider-pipe issue-link">
+          <li><a id="editOnGitHubLink" href="#">{{site.editOnGithub}}</a></li>
           <li><a href="https://github.com/nodejs/node/issues">{{site.reportNodeIssue}}</a></li>
           <li><a href="https://github.com/nodejs/nodejs.org/issues">{{site.reportWebsiteIssue}}</a></li>
           <li><a href="https://github.com/nodejs/help/issues">{{site.getHelpIssue}}</a></li>

locale/en/site.json

@@ -1,5 +1,6 @@
 {
   "title": "Node.js",
+  "editOnGithub":"Edit On GitHub",
   "author": "Node.js",
   "url": "https://nodejs.org/en/",
   "locale": "en",

scripts/plugins/githubLinks.js

@@ -1,24 +1,25 @@
 'use strict'
 
+const sep = require('path').sep
+// add suffix (".html" or sep for windows test) to each part of regex
+// to ignore possible occurrences in titles (e.g. blog posts)
+const isEditable = `(security|index).html|(about|download|docs|foundation|get-involved|knowledge)\\${sep}`
+const isEditableReg = new RegExp(isEditable)
+
 // This middleware adds "Edit on GitHub" links to every editable page
 function githubLinks (options) {
   return (files, m, next) => {
-    // add suffix (".html" or "/") to each part of regex
-    // to ignore possible occurrences in titles (e.g. blog posts)
-    const isEditable = /security\.html|about\/|docs\/|foundation\/|get-involved\/|knowledge\//
-
     Object.keys(files).forEach((path) => {
-      if (!isEditable.test(path)) {
+      if (!isEditableReg.test(path)) {
         return
       }
 
       const file = files[path]
-      const url = `https://github.com/nodejs/nodejs.org/edit/master/locale/${options.locale}/${path.replace('.html', '.md')}`
-      const editText = options.site.editOnGithub || 'Edit on GitHub'
+      path = path.replace('.html', '.md').replace(/\\/g, '/')
+      const url = `https://github.com/nodejs/nodejs.org/edit/master/locale/${options.locale}/${path}`
 
-      const contents = file.contents.toString().replace(/<h1(.*?)>(.*?)<\/h1>/, (match, $1, $2) => {
-        return `<a class="edit-link" href="${url}">${editText}</a> <h1${$1}>${$2}</h1>`
-      })
+      const contents = file.contents.toString() +
+      ` <input type = "hidden" id = "editOnGitHubUrl" value="${url}"/> `
 
       file.contents = Buffer.from(contents)
     })

static/js/main.js

@@ -246,3 +246,17 @@
     winText.textContent = winText.textContent.replace(/x(86|64)/, arch)
   }
 })()
+
+;(function () {
+  // This function is used to replace the anchor
+  // link of Edit on GitHub
+
+  var editOnGitHubElement = document.getElementById('editOnGitHubLink')
+  var editOnGitHubUrlElement = document.getElementById('editOnGitHubUrl')
+
+  if (editOnGitHubUrlElement) {
+    editOnGitHubElement.setAttribute('href', editOnGitHubUrlElement.value)
+  } else {
+    editOnGitHubElement.parentNode.parentNode.removeChild(editOnGitHubElement.parentNode)
+  }
+})()