website: Improved install button behavior

Just install whatever's best for the OS. Detect host os and architecture from the navigator properties. If we can't make a good guess, then they get the tarball, and of course everything we have is on the full download page.
isaacs · Aug 16, 2012 · 060141c · 060141c
1 parent b7223ab
commit 060141c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 22 deletions.
diff --git a/doc/download/index.html b/doc/download/index.html
@@ -101,6 +101,20 @@
               <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-darwin-x64.tar.gz">64-bit</a></td>
             </tr>
 
+            <!-- TODO Uncomment when we have these
+            <tr>
+              <th>Linux Installer (.deb)</th>
+              <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x86.deb">32-bit</a></td>
+              <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x64.deb">64-bit</a></td>
+            </tr>
+
+            <tr>
+              <th>Linux Installer (.rpm)</th>
+              <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x86.rpm">32-bit</a></td>
+              <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x64.rpm">64-bit</a></td>
+            </tr>
+            -->
+
             <tr>
               <th>Linux Binaries (.tar.gz)</th>
               <td><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x86.tar.gz">32-bit</a></td>
@@ -132,6 +146,7 @@ <h2 style="margin-top:1em" id=other-info>Other Info</h2>
             <li><a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">Installing from package managers</a>
 
             <li><a href="http://nodejs.org/dist/__VERSION__">Other release files</a></li>
+            <li><a href="http://nodejs.org/dist/">Other releases</a></li>
         </ul>
         </div>
 

diff --git a/doc/index.html b/doc/index.html
@@ -29,12 +29,51 @@
         lightweight and efficient, perfect for data-intensive real-time
         applications that run across distributed devices.</p>
 
-        <a href="download/" class="button" id="downloadbutton">Download</a>
-        <a href="api/" class="button" id="docsbutton">Docs</a>
-        <p class="version">__VERSION__</p>
+        <div class=buttons>
+        <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz" class="button downloadbutton" id="downloadbutton">INSTALL</a>
+
+        <a href="download/" class=button id="all-dl-options">Downloads</a
+        ><a href="api/" class="button" id="docsbutton">API Docs</a>
+        </div>
 
         <a href="http://github.com/joyent/node"><img class="forkme" src="images/forkme.png" alt="Fork me on GitHub"></a>
     </div>
+
+    <script>;(function(d,n){
+    var os = n.platform.match(/(Win|Mac|Linux)/);
+    var x = n.userAgent.match(/x86_64|Win64|WOW64/) || n.cpuClass === 'x64' ?
+            'x64' : 'x86';
+    var base = 'http://nodejs.org/dist/__VERSION__/';
+    var href = 'node-__VERSION__.tar.gz';
+    var db = d.getElementById('downloadbutton');
+    var d2;
+    switch (os && os[1]) {
+      case 'Mac':
+        href = 'node-__VERSION__.pkg';
+        break;
+      case 'Win':
+        href = 'node-__VERSION__-x' + x + '.msi';
+        break;
+
+      // TODO uncomment when we have these
+      // case 'Linux':
+      //   // two buttons: .deb and .rpm
+      //   href = 'node-__VERSION__-' + x + '.rpm';
+      //   var d2 = document.createElement('a');
+      //   d2.href = base + 'node-__VERSION__-' + x + '.deb';
+      //   d2.className = 'button downloadbutton';
+      //   d2.innerHTML = 'INSTALL .deb';
+      //   db.innerHTML = 'INSTALL .rpm';
+      //   db.parentNode.insertBefore(d2, db);
+      //   break;
+    }
+
+    db.href = base + href;
+    // if there's one download option, then download it at #download
+    if (location.hash === '#download' && !d2)
+      location.replace(b.href);
+    })(document,navigator);</script>
+
     <div id="quotes" class="clearfix">
         <h2>Node.js in the Industry</h2>
         <ul>
@@ -148,13 +187,6 @@ <h2>Explore Node.js</h2>
     <script src="sh_javascript.min.js"></script>
     <script>highlight(undefined, undefined, 'pre');</script>
 
-    <script type="text/javascript">
-      if (location.hash === '#download') {
-        var n = location.href.replace(/(index.html)?#download/, 'download/$1')
-        location.replace(n);
-      }
-    </script>
-
     <script>
       window._gaq = [['_setAccount', 'UA-10874194-2'], ['_trackPageview']];
       (function(d, t) {

diff --git a/doc/pipe.css b/doc/pipe.css
@@ -65,18 +65,13 @@ h1 a, h2 a, h3 a, h4 a
     margin: 0 auto;
     text-align: center;
 	color: #d2d8ba;
-
-  /* preload platform-icons.png */
-  background-image: url(http://nodejs.org/images/platform-icons.png);
-  background-repeat: no-repeat;
-  background-position: -999em -999em;
 }
 
 #intro p {
     width: 680px;
     line-height: 180%;
     padding-top: 30px;
-    margin: 0 auto 30px auto;
+    margin: 0 auto;
     font-size: 14px;
 }
 
@@ -89,17 +84,27 @@ h1 a, h2 a, h3 a, h4 a
     font-size: 12px;
 }
 
+#intro .buttons {
+  height:auto;
+  overflow:hidden;
+  _zoom:1;
+  width:300px;
+  margin:0 auto;
+}
+
 #intro .button {
   font-weight: bold;
-  font-size: 14px;
-  text-transform: uppercase;
-  padding: 6px 12px;
+  font-size: 12px;
+  padding: 6px 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  margin: 0 1px;
+  margin: 30px 4px 0;
+
+  display:inline-block;
   color: #46483e;
   background-color: #9a9f8b;
+  width:96px;
 }
 
 #intro .forkme {
@@ -114,11 +119,17 @@ h1 a, h2 a, h3 a, h4 a
   background-color: #aab293;
 }
 
-#intro #downloadbutton {
+#intro #docsbutton {
+  clear:left;
+}
+
+#intro .downloadbutton {
   background-color: #8BC84B;
+  width:200px;
+  font-size:14px;
 }
 
-#intro #downloadbutton:hover {
+#intro .downloadbutton:hover {
   background-color: #73a53e;
 }