Display LTS and Stable on the frontpage

build.js

@@ -21,6 +21,7 @@ const filterStylusPartials = require('./scripts/plugins/filter-stylus-partials')
 const mapHandlebarsPartials = require('./scripts/plugins/map-handlebars-partials')
 const anchorMarkdownHeadings = require('./scripts/plugins/anchor-markdown-headings')
 const loadVersions = require('./scripts/load-versions')
+const latestVersion = require('./scripts/helpers/latestversion')
 
 /** Build **/
 
@@ -181,8 +182,12 @@ function fullbuild () {
       project: {
         versions,
         currentVersion: versions[0].version,
+        currentVersions: {
+          stable: latestVersion.stable(versions),
+          lts: latestVersion.lts(versions)
+        },
         banner: {
-          visible: true,
+          visible: false,
           content: '<a href="https://nodejs.org/en/blog/release/v4.2.1/">Long Term Support Release</a>'
         }
       }

layouts/css/page-modules/_home.styl

@@ -12,8 +12,11 @@
     margin-top 1em
 
 .home-secondary-links
+    $home-secondary-links-color = saturation($node-green, 20%)
+
+    color $home-secondary-links-color
+
     a
-        $home-secondary-links-color = saturation($node-green, 20%)
         font-size 1rem
         color $home-secondary-links-color
 
@@ -27,13 +30,16 @@
     padding-top 30px
     text-align center
 
-#home-downloadbutton
+    h2
+        margin-bottom 0
+
+.home-downloadbutton
     display inline-block
     margin 10px 4px
     padding 0.2em 0.6em
 
     background-color $node-green
-    color #fff
+    color #fff !important
     border-radius 2px
     font-size 30px
     font-weight 400
@@ -43,4 +49,6 @@
     &:hover
         background-color saturation($node-green, 80%)
 
-
+    small
+        display block
+        font-size 1rem

layouts/index.hbs

@@ -17,14 +17,32 @@
                         {{ labels.current-version }}: {{ project.currentVersion }}<br>
                         {{{ project.banner.content }}}
                     </p>
-                {{else}}
-                      <p class="home-version">{{ labels.current-version }}: {{ project.currentVersion }}</p>
                 {{/if}}
 
-                <a href="https://nodejs.org/dist/{{ project.currentVersion }}/" id="home-downloadbutton" data-version="{{ project.currentVersion }}" data-dl-local="{{ labels.download-for }}">{{ labels.download }}</a>
+                <h2 id="home-downloadhead" data-dl-local="{{ labels.download-for }}">{{ labels.download }}</h2>
+
+                <a href="https://nodejs.org/dist/{{ project.currentVersions.lts }}/" class="home-downloadbutton" title="{{ labels.download }} {{ project.currentVersions.lts }} {{ labels.lts }}" data-version="{{ project.currentVersions.lts }}">
+                    {{ project.currentVersions.lts }} {{ labels.lts }}
+                    <small>{{ labels.tagline-lts }}</small>
+                </a>
+
+                {{#if project.currentVersions.stable}}
+                    <a href="https://nodejs.org/dist/{{ project.currentVersions.stable }}/" class="home-downloadbutton"  title="{{ labels.download }} {{ project.currentVersions.stable }} {{ labels.stable }}"  data-version="{{ project.currentVersions.stable }}">
+                        {{ project.currentVersions.stable }} {{ labels.stable }}
+                        <small>{{ labels.tagline-stable }}</small>
+                    </a>
+                {{/if}}
 
                 <ul class="list-divider-pipe home-secondary-links">
-                    <li><a href="https://nodejs.org/dist/{{ project.currentVersion }}/">{{ labels.other-downloads }}</a></li>
+                    <li>
+                        <a href="https://nodejs.org/dist/{{ project.currentVersions.lts }}/">{{ labels.other-lts-downloads }}</a>
+
+                        {{#if project.currentVersions.stable}}
+                            &#47; <a href="https://nodejs.org/dist/{{ project.currentVersions.stable }}/" title="{{ labels.other-stable-downloads }}">
+                                {{ labels.stable }}
+                            </a>
+                        {{/if}}
+                    </li>
                     <li><a href="https://github.com/nodejs/node/blob/{{ project.currentVersion }}/CHANGELOG.md">{{ labels.changelog }}</a></li>
                     <li><a href="{{ site.docs.api.link }}">{{ labels.api }}</a></li>
                 </ul>
@@ -73,5 +91,6 @@
 
     {{> footer }}
     <script src="/static/js/download.js" async defer></script>
+
 </body>
 </html>

locale/en/index.md

@@ -5,6 +5,12 @@ labels:
   download: Download
   download-for: Download for
   other-downloads: Other Downloads
+  other-lts-downloads: Other LTS Downloads
+  other-stable-downloads: Other Stable Downloads
+  stable: Stable
+  lts: LTS
+  tagline-stable: Latest Features
+  tagline-lts: Mature and Dependable
   changelog: Changelog
   api: API Docs
 ---

scripts/helpers/latestversion.js

@@ -0,0 +1,10 @@
+'use strict'
+
+const semver = require('semver')
+
+exports.stable = (releases) => {
+  const match = releases.find((release) => !release.lts && semver.gte(release.version, '5.0.0'))
+  return match && match.version
+}
+
+exports.lts = (releases) => releases.find((release) => release.lts).version

static/js/download.js

@@ -1,38 +1,80 @@
 ;
 (function (d, n) {
   'use strict';
-  var os = n.platform.match(/(Win|Mac|Linux)/);
-  var x = n.userAgent.match(/x86_64|Win64|WOW64/) ||
+
+  // document.querySelectorAll polyfill for ancient IEs
+  // https://gist.github.com/chrisjlee/8960575
+  if (!document.querySelectorAll) {
+    document.querySelectorAll = function (selectors) {
+      var style = document.createElement('style'), elements = [], element;
+      document.documentElement.firstChild.appendChild(style);
+      document._qsa = [];
+
+      style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
+      window.scrollBy(0, 0);
+      style.parentNode.removeChild(style);
+
+      while (document._qsa.length) {
+        element = document._qsa.shift();
+        element.style.removeAttribute('x-qsa');
+        elements.push(element);
+      }
+      document._qsa = null;
+      return elements;
+    };
+  }
+
+  var osMatch = n.platform.match(/(Win|Mac|Linux)/);
+  var os = (osMatch && osMatch[1]) || '';
+  var arch = n.userAgent.match(/x86_64|Win64|WOW64/) ||
     n.cpuClass === 'x64' ? 'x64' : 'x86';
   var text = 'textContent' in d ? 'textContent' : 'innerText';
-  var db = d.getElementById('home-downloadbutton');
-  var version;
-  if (db) {
-    version = db.getAttribute('data-version');
-    var dlLocal = db.getAttribute('data-dl-local');
-    switch (os && os[1]) {
+  var buttons = d.querySelectorAll('.home-downloadbutton');
+  var downloadHead = d.getElementById('home-downloadhead');
+  var dlLocal;
+
+  function versionIntoHref(nodeList, filename) {
+    var linkEls = Array.prototype.slice.call(nodeList);
+    var version;
+    var el;
+
+    for (var i = 0; i < linkEls.length; i++) {
+      version = linkEls[i].getAttribute('data-version');
+      el = linkEls[i]
+
+      // Windows 64-bit files for 0.x.x need to be prefixed with 'x64/'
+      if (os === 'Win' && (version[1] === '0' && arch === 'x64')) {
+        el.href += arch + '/';
+      }
+
+      el.href += filename.replace('%version%', version);
+    }
+  }
+
+  if (downloadHead && buttons) {
+    dlLocal = downloadHead.getAttribute('data-dl-local');
+    switch (os) {
       case 'Mac':
-        db.href += 'node-' + version + '.pkg';
-        db[text] = dlLocal + ' OS X (x64)';
+        versionIntoHref(buttons, 'node-%version%.pkg');
+        downloadHead[text] = dlLocal + ' OS X (x64)';
         break;
       case 'Win':
-        // Windows 64-bit files for 0.x.x need to be prefixed with 'x64/'
-        db.href += (version[1] == '0' && x == 'x64' ? x + '/' : '') + 'node-' + version + '-' + x + '.msi';
-        db[text] = dlLocal + ' Windows (' + x +')';
+        versionIntoHref(buttons, 'node-%version%-' + arch + '.msi');
+        downloadHead[text] = dlLocal + ' Windows (' + arch +')';
         break;
       case 'Linux':
-        db.href += 'node-' + version + '-linux-' + x + '.tar.gz';
-        db[text] = dlLocal + ' Linux (' + x + ')';
+        versionIntoHref(buttons, 'node-%version%-linux-' + arch + '.tar.gz');
+        downloadHead[text] = dlLocal + ' Linux (' + arch + ')';
         break;
     }
   }
 
   // Windows button on download page
   var winButton = d.getElementById('windows-downloadbutton');
-  if (winButton && os && os[1] === 'Win') {
+  if (winButton && os === 'Win') {
     var winText = winButton.getElementsByTagName('p')[0];
     version = winButton.getAttribute('data-version');
-    winButton.href = winButton.href.replace(/x(86|64)/, x);
-    winText[text] = winText[text].replace(/x(86|64)/, x);
+    winButton.href = winButton.href.replace(/x(86|64)/, arch);
+    winText[text] = winText[text].replace(/x(86|64)/, arch);
   }
 })(document, navigator);