add ES5/ESnext switcher on about page

Author: rvagg

layouts/about.hbs

@@ -44,6 +44,84 @@
         </div>
     </div>
 
+    <style>
+        .es-switcher > p.active, .es-switcher > p:hover {
+            color: #FFF;
+            background-color: rgb(51, 51, 51);
+            border-color: rgb(51, 51, 51);
+        }
+        .es-switcher > p {
+            display: inline-block;
+            margin: 0px;
+            cursor: pointer;
+            padding: 0em 21px;
+            border-style: solid;
+            border-color: rgb(255, 255, 255);
+            border-width: 3px;
+            background-color: rgb(238, 238, 238);
+            border-top-right-radius: 3px;
+            border-top-left-radius: 3px;
+        }
+        .es-switcher > pre {
+            border-top-left-radius: 0px !important;
+            margin: 0px;
+        }
+    </style>
+
+    <script>
+var esNextText = 'Modern JavaScript:'
+var es5Text = 'ES5:'
+
+function nextSiblingMatch (e, name, text) {
+  var sib = e.nextSibling
+  while (sib) {
+    if (sib.nodeType == 1) {
+      if (sib.nodeName == name && (!text || sib.textContent == text))
+        return sib
+      return null
+    }
+    sib = sib.nextSibling
+  }
+}
+
+Array.prototype.slice.call(document.querySelectorAll('p'))
+  .filter(function (p) { return p.textContent == esNextText })
+  .map(function (esNextP) {
+    var esNextPre = nextSiblingMatch(esNextP, 'PRE')
+    if (!esNextPre) return null
+    var es5P = nextSiblingMatch(esNextPre, 'P')
+    if (!es5P) return null
+    var es5Pre = nextSiblingMatch(es5P, 'PRE')
+    if (!es5Pre) return null
+    return { esNextP: esNextP, esNextPre: esNextPre, es5P: es5P, es5Pre: es5Pre }
+  })
+  .filter(Boolean)
+  .forEach(function (block) {
+    var div = document.createElement('div')
+    div.className = 'es-switcher'
+    block.esNextP.parentElement.insertBefore(div, block.esNextP)
+    block.esNextP.textContent = esNextText.replace(/:$/, '')
+    block.es5P.textContent = es5Text.replace(/:$/, '')
+    block.esNextP.className = 'active'
+    div.appendChild(block.esNextP)
+    div.appendChild(block.es5P)
+    div.appendChild(block.esNextPre)
+    div.appendChild(block.es5Pre)
+    block.es5Pre.style.display = 'none'
+    block.esNextP.addEventListener('click', function () {
+      block.esNextPre.style.display = 'block'
+      block.es5Pre.style.display = 'none'
+      block.esNextP.className = 'active'
+      block.es5P.className = ''
+    })
+    block.es5P.addEventListener('click', function () {
+      block.esNextPre.style.display = 'none'
+      block.es5Pre.style.display = 'block'
+      block.esNextP.className = ''
+      block.es5P.className = 'active'
+    })
+  })
+    </script>
     {{> footer }}
 </body>
 </html>

locale/en/about/index.md

@@ -10,6 +10,8 @@ scalable network applications. In the following "hello world" example, many
 connections can be handled concurrently. Upon each connection the callback is
 fired, but if there is no work to be done Node is sleeping.
 
+Modern JavaScript:
+
 ```javascript
 const http = require('http');
 
@@ -24,6 +26,22 @@ http.createServer((req, res) => {
 });
 ```
 
+ES5:
+
+```javascript
+var http = require('http');
+
+var hostname = '127.0.0.1';
+var port = 1337;
+
+http.createServer(function(req, res) {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('Hello World\n');
+}).listen(port, hostname, function() {
+  console.log('Server running at http://%s:%d/', hostname, port);
+});
+```
+
 This is in contrast to today's more common concurrency model where OS threads
 are employed. Thread-based networking is relatively inefficient and very
 difficult to use. Furthermore, users of Node are free from worries of