Skip to content
This repository has been archived by the owner on Apr 22, 2023. It is now read-only.

Commit

Permalink
website: download page
Browse files Browse the repository at this point in the history 
- Improved styling of download links.
- index.html#download now redirects to /download/
- Added missing hyphens, and added the missing "and 64-bit" for the Mac
  Installer.
  • Loading branch information
@isaacs
Golo Roden authored and isaacs committed Aug 15, 2012
1 parent 3ccee08 commit 15c6c0e
Show file tree
Hide file tree
Showing 10 changed files with 111 additions and 185 deletions.
3 changes: 2 additions & 1 deletion Makefile
View file
Expand Up @@ -114,7 +114,7 @@ apidoc_sources = $(wildcard doc/api/*.markdown)
apidocs = $(addprefix out/,$(apidoc_sources:.markdown=.html)) \
$(addprefix out/,$(apidoc_sources:.markdown=.json))

apidoc_dirs = out/doc out/doc/api/ out/doc/api/assets out/doc/about out/doc/community out/doc/logos out/doc/images
apidoc_dirs = out/doc out/doc/api/ out/doc/api/assets out/doc/about out/doc/community out/doc/download out/doc/logos out/doc/images

apiassets = $(subst api_assets,api/assets,$(addprefix out/,$(wildcard doc/api_assets/*)))

Expand All @@ -132,6 +132,7 @@ website_files = \
out/doc/pipe.css \
out/doc/about/index.html \
out/doc/community/index.html \
out/doc/download/index.html \
out/doc/logos/index.html \
out/doc/changelog.html \
$(doc_images)
Expand Down
2 changes: 1 addition & 1 deletion doc/about/index.html
View file
Expand Up @@ -28,7 +28,7 @@
<div id="column2" class="interior">
<ul>
<li><a href="/" class="home">Home</a></li>
<li><a href="/#download" class="download">Download</a></li>
<li><a href="/download/" class="download">Download</a></li>
<li><a href="/about/" class="about current">About</a></li>
<li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
<li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
Expand Down
2 changes: 1 addition & 1 deletion doc/blog.html
View file
Expand Up @@ -81,7 +81,7 @@
<ul>
<li><a href="http://nodejs.org/" class="home">Home</a></li>

<li><a href="http://nodejs.org/#download" class=
<li><a href="http://nodejs.org/download/" class=
"download">Download</a></li>

<li><a href="http://nodejs.org/about/" class="about">About</a></li>
Expand Down
2 changes: 1 addition & 1 deletion doc/changelog-foot.html
View file
Expand Up @@ -4,7 +4,7 @@
<div id="footer">
<ul class="clearfix">
<li><a href="/">Node.js</a></li>
<li><a href="/#download">Download</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://search.npmjs.org/">npm Registry</a></li>
<li><a href="http://nodejs.org/api/">Docs</a></li>
Expand Down
2 changes: 1 addition & 1 deletion doc/changelog-head.html
View file
Expand Up @@ -17,7 +17,7 @@
<div id="column2" class="interior">
<ul>
<li><a href="/" class="home">Home</a></li>
<li><a href="/#download" class="download">Download</a></li>
<li><a href="/download/" class="download">Download</a></li>
<li><a href="/about/" class="about">About</a></li>
<li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
<li><a href="http://nodejs.org/api/" class="docs current">Docs</a></li>
Expand Down
4 changes: 2 additions & 2 deletions doc/community/index.html
View file
Expand Up @@ -30,7 +30,7 @@
<div id="column2" class="interior">
<ul>
<li><a href="/" class="home">Home</a></li>
<li><a href="/#download" class="download">Download</a></li>
<li><a href="/download/" class="download">Download</a></li>
<li><a href="/about/" class="about">About</a></li>
<li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
<li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
Expand Down Expand Up @@ -179,7 +179,7 @@ <h2 class="irc">IRC</h2>
<div id="footer">
<ul class="clearfix">
<li><a href="/">Node.js</a></li>
<li><a href="/#download">Download</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://search.npmjs.org/">npm Registry</a></li>
<li><a href="http://nodejs.org/api/">Docs</a></li>
Expand Down
86 changes: 86 additions & 0 deletions doc/download/index.html
View file
@@ -0,0 +1,86 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {
padding: 0;
margin: 0;
}
</style>
<link type="image/x-icon" rel="icon" href="../favicon.ico">
<link type="image/x-icon" rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="../pipe.css">
<link rel="stylesheet" href="../sh_vim-dark.css">
<link rel="alternate"
type="application/rss+xml"
title="node blog"
href="http://feeds.feedburner.com/nodejs/123123123">
<title>node.js</title>
</head>
<body class="int">
<div id="intro" class="interior">
<a href="/" title="Go back to the home page">
<img id="logo" src="http://nodejs.org/images/logo.png" alt="node.js">
</a>
</div>
<div id="content" class="clearfix">
<div id="column2" class="interior">
<ul>
<li><a href="/" class="home">Home</a></li>
<li><a href="/download/" class="download current">Download</a></li>
<li><a href="/about/" class="about">About</a></li>
<li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
<li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
<li><a href="http://blog.nodejs.org" class="blog">Blog</a></li>
<li><a href="/community/" class="community">Community</a></li>
<li><a href="/logos/" class="logos">Logos</a></li>
<li><a href="http://jobs.nodejs.org/" class="jobs">Jobs</a></li>
</ul>
<p class="twitter"><a href="http://twitter.com/nodejs">@nodejs</a></p>
</div>
<div id="column1" class="interior row">
<p>
Download the Node.js source code or a pre-built installer for your platform, and start developing today.
</p>
</div>
<div id="column1" class="interior row">
<h2 id="installers" class="installers">Installers</h2>
<p>
To install Node.js and npm use the appropriate installer for your platform, or discover <a href="https://raw.github.com/joyent/node/__VERSION__/ChangeLog">what's new</a> in <strong>Node.js __VERSION__</strong>.
</p>
<p>
<strong>Mac OS X Installer</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.pkg">32- and 64-bit (.pkg)</a><br />
<strong>Windows Installer</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-x86.msi">32-bit (.msi)</a> or
<a href="http://nodejs.org/dist/__VERSION__/x64/node-__VERSION__-x64.msi">64-bit (.msi)</a><br />
<strong>Linux Binaries</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x86.tar.gz">32-bit (.tar.gz)</a> or
<a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x64.tar.gz">64-bit (.tar.gz)</a><br />
<strong>Solaris Binaries</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-sunos-x86.tar.gz">32-bit (.tar.gz)</a> or
<a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-sunos-x64.tar.gz">64-bit (.tar.gz)</a>
</p>
<p>
Alternatively, you can install Node.js using various <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">package managers</a>.
</p>
</div>
<div id="column1" class="interior row">
<h2 id="apiDocumentationAndSourceCode">API Documentation and Source Code</h2>
<p>
If you are unsure about how to use Node.js, the <a href="http://nodejs.org/docs/__VERSION__/api/">API documentation</a> is there to help.
</p>
<p>
You can also have a look at the <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz">source code</a>, or contribute to Node.js by
forking the <a href="https://github.com/joyent/node">GitHub repository</a> and creating pull requests.
</p>
<p>
There exist some <a href="http://nodejs.org/dist/__VERSION__">other release files</a> as well.
</p>
</div>
<div id="column1" class="interior row">
<h2 id="license">License</h2>
<p>
You may also be interested in the <a href="https://raw.github.com/joyent/node/__VERSION__/LICENSE">license</a> of Node.js.
</p>
</div>
</div>
</body>
</html>
85 changes: 8 additions & 77 deletions doc/index.html
View file
Expand Up @@ -29,7 +29,7 @@
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="download/" class="button" id="downloadbutton">Download</a>
<a href="api/" class="button" id="docsbutton">Docs</a>
<p class="version">__VERSION__</p>

Expand Down Expand Up @@ -77,81 +77,6 @@ <h2>Node.js in the Industry</h2>
</ul>
</div>

<div id="download">
<a href="#" id="download-close">X</a>
<img id="download-logo" src="http://nodejs.org/images/download-logo.png" alt="node.js">
<ul id="installers" class="clearfix">
<li><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-x86.msi">Windows Installer</a><br>node-__VERSION__-x86.msi</li>
<li><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.pkg">Macintosh Installer</a><br>node-__VERSION__.pkg</li>
<li id="source"><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz">Source Code</a><br>node-__VERSION__.tar.gz</li>
</ul>
<ul id="documentation">
<li><a href="https://raw.github.com/joyent/node/__VERSION__/ChangeLog">Change Log</a></li>
<li><a href="http://nodejs.org/docs/__VERSION__/api/">Documentation</a></li>
<li><a href="http://nodejs.org/dist/__VERSION__">Other release files</a></li>
<li><a href="http://nodejs.org/dist/__VERSION__/x64/node-__VERSION__-x64.msi">Windows x64 Installer</a></li>
<li><a href="https://raw.github.com/joyent/node/__VERSION__/LICENSE">License</a></li>
<li><a href="https://github.com/joyent/node">Git Repository</a></li>
<li><a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">Installing
with a Package Manager</a>
</ul>
</div>

<script>;(function() {
// attach as soon as the required elements are in the DOM.
// don't need to wait for entire document to be ready, since we're
// not adding any *new* nodes to the <body>, so there's no threat
// of 'Invalid operation' errors in old MSIE 6.
document.getElementById('downloadbutton').onclick = function(e) {
e = e || window.event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
// need to give the hash a tick to update
setTimeout(downloadDialogUpdate, 0);
};

document.getElementById('download-close').onclick =
document.documentElement.onclick = function(e) {
e = e || window.event;
if (location.hash === '#download') location.hash = '';
downloadDialogUpdate();
};

document.getElementById('download').onclick = function(e) {
e = e || window.event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
};

// I keep expecting <Esc> to close the dialog...
document.documentElement.onkeydown = function(e) {
e = e || window.event;
var k = e.which || e.keyCode || e.keyIdentifier;
if (typeof k === 'string') k = k.charCodeAt(0);
if (k === 27) document.documentElement.onclick(e);
};

// hacky workaround for old ie browsers that don't support :target css.
function downloadDialogUpdate () {
var div = document.getElementById('download');
if (!div) return;
var expect = location.hash === '#download' ? 'block' : 'none';
var actual = div.currentStyle ? div.currentStyle.display
: window.getComputedStyle
? document.defaultView.getComputedStyle(div, null).getPropertyValue('display')
: null;

// it looks like a string, but it might not actually be a string.
// explicitly cast for MSIE 6 and 7.
actual = '' + actual;
expect = '' + expect;
if (actual !== expect) {
div.style.display = expect;
}
}
downloadDialogUpdate();
})();</script>

<div id="content" class="clearfix">
<div id="column1">
<h2>An example: Webserver</h2>
Expand Down Expand Up @@ -204,7 +129,7 @@ <h2>Explore Node.js</h2>
<div id="footer">
<ul class="clearfix">
<li><a href="/">Node.js</a></li>
<li><a href="/#download">Download</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://search.npmjs.org/">npm Registry</a></li>
<li><a href="http://nodejs.org/api/">Docs</a></li>
Expand All @@ -223,6 +148,12 @@ <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') {
location.href = 'download/';
}
</script>

<script>
window._gaq = [['_setAccount', 'UA-10874194-2'], ['_trackPageview']];
(function(d, t) {
Expand Down
106 changes: 7 additions & 99 deletions doc/pipe.css
View file
Expand Up @@ -308,6 +308,7 @@ h1 a, h2 a, h3 a, h4 a
.row h2.conferences { background-position: left -522px; }
.row h2.localized { background-position: left -414px; }
.row h2.irc { background-position: left -626px; }
.row h2.installers { background-position: left -522px; }

.block {
width: 280px;
Expand Down Expand Up @@ -447,111 +448,18 @@ h1 a, h2 a, h3 a, h4 a
}



div#download {
position: absolute;
width: 580px;
text-align: center;
top: 0;
left: 50%;
margin-left: -290px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding-top: 40px;
-webkit-box-shadow: 0 0 32px #000;
-moz-box-shadow: 0 0 32px #000;
box-shadow: 0 0 32px #000;
background:white;
display: none;
}

div#download:target {
display: block;
}

#download-close {
background: url(http://nodejs.org/images/close-downloads.png) no-repeat top right;
width: 64px;
height: 64px;
position: absolute;
display: block;
top:0;
right:0;
text-indent:-999em;
}

div#download ul#installers {
width: 550px;
text-align: center;
margin: 0 auto;
background: url(http://nodejs.org/images/platform-icons.png) no-repeat top center;
padding-top: 65px;
padding-bottom: 50px;
}

div#download ul#installers li {
list-style-type: none;
width: 165px;
padding-left: 18px;
float: left;
display: block;
color: #33342d;
font-size: 10px;
}

div#download ul#installers li#source {
padding-left: 0;
}

div#download ul#installers li a {
font-size: 16px;
padding-top: 50px;
margin-top: -50px;
}

div#download ul#documentation {
background-color: #d4d7c3;
padding: 20px 0 20px 40px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

div#download ul#documentation li {
margin-left: 40px;
text-align: left;
color: #33342d;
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
}

div#download ul#documentation li a {
color: #76a83f;
}

#download-logo {
margin-bottom: 37px;
}

pre, tt, code {
color: #d2d8ba;
pre, tt, code {
color: #d2d8ba;
font-size: 14px;
line-height: 22px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
margin: 0; padding: 0;
}
#front pre, #front tt, #front code {
}

#front pre, #front tt, #front code {
font-size:12px;
line-height:22px;
}
}

pre {
padding-left: 1em;
Expand Down

0 comments on commit 15c6c0e

Please sign in to comment.