Index page updated

css/style.css

@@ -32,7 +32,6 @@ div.nav ul li {
     text-transform: uppercase;
     font-weight: normal;
     font-size: 11pt;
-    color: #2B7CE9;
 
     list-style: none;
     margin-top: 5px;
@@ -48,12 +47,13 @@ div.nav ul li ul li {
     list-style: none;
 }
 
-a.nav {
-    color: #4D4D4D;
+div.nav a {
+    color: #2B7CE9;
 }
 
-a.nav:hover {
-    color: #2B7CE9;
+.download td {
+    border: none;
+    padding: 5px 20px 5px 0;
 }
 
 .gallery .thumb {

index.html

@@ -50,30 +50,45 @@
     <h2 id="install">Install</h2>
 
     <h3>npm</h3>
-    Install via npm:
 
 <pre class="prettyprint">
 npm install vis
 </pre>
 
     <h3>bower</h3>
-    Install via bower:
 
 <pre class="prettyprint">
 bower install vis
 </pre>
 
     <h3>download</h3>
-    Or download the library from the github project:
-    <a href="https://github.com/almende/vis.git" target="_blank">https://github.com/almende/vis.git</a>.
+
+    <table class="download">
+        <tr>
+            <td>
+                <a href="vis.js" target="_blank">Development
+                    (version <span class="version">0.0.9</span>)</a>
+            </td>
+            <td>
+                <span id="development-size">372 kB</span>, uncompressed with comments
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <a href="vis.min.js" target="_blank">Production
+                    (version <span class="version">0.0.9</span>)</a>
+            </td>
+            <td>
+                <span id="production-size">33 kB</span>, minified and gzipped
+            </td>
+        </tr>
+    </table>
+
 
     <h2 id="example">Example</h2>
 
     <p>
         A basic example demonstrating how to use the vis.js timeline is shown below.
-    </p>
-
-    <p>
         More examples can be found in the
         <a href="examples" target="_blank">examples directory</a>.
     </p>
@@ -112,8 +127,14 @@ bower install vis
 
 
     <h2 id="gallery">Gallery</h2>
+    This gallery gives an idea of the features and possibilities of the library.
+    The source code of the examples can be found in the
+    <a href="https://github.com/almende/vis/tree/master/examples" target="_blank">examples directory</a>.
 
     <h3 id="timeline">Timeline</h3>
+    <p>
+        The timeline from vis.js displays different types of data on a timeline.
+    </p>
     <div class="gallery">
         <div class="thumb">
             <a href="examples/timeline/01_basic.html">
@@ -148,6 +169,10 @@ bower install vis
     </div>
 
     <h3 id="graph">Graph</h3>
+    <p>
+        The graph from vis.js visualizes graphs and networks with
+        customizable styles.
+    </p>
 
     <div class="gallery">
         <div class="thumb">

updateversion.js

@@ -0,0 +1,102 @@
+// Update the version numbers and library sizes in index.md
+
+var fs = require('fs'),
+    zlib = require('zlib');
+
+var VIS = 'vis.js',
+    VIS_MIN = 'vis.min.js',
+    INDEX = 'index.html';
+
+// get development size
+function developmentSize(callback) {
+    fs.readFile(VIS, function (err, data) {
+        if (!err) {
+            var size = Math.round(data.length / 1024) + ' kB';
+            callback(null, size);
+        }
+        else {
+            callback(err);
+        }
+    });
+}
+
+// get (gzipped) production size
+function productionSize(callback) {
+    fs.readFile(VIS_MIN, function (err, data) {
+        if (!err) {
+            zlib.gzip(data, function (err, data) {
+                if (!err) {
+                    var size = Math.round(data.length / 1024) + ' kB';
+                    callback(null, size)
+                }
+                else {
+                    callback(err);
+                }
+            });
+        }
+        else {
+            callback(err);
+        }
+    });
+}
+
+// get version
+function version(callback) {
+    fs.readFile(VIS_MIN, function (err, data) {
+        if (!err) {
+            var match = /@version\s*([\w\.-]*)/i.exec(data);
+            var version = undefined;
+            if (match) {
+                version = match[1];
+            }
+            callback(null, version);
+        }
+        else {
+            callback(err);
+        }
+    });
+}
+
+// update version and library sizes in index.md
+function updateVersion(developmentSize, productionSize, version, callback) {
+    fs.readFile(INDEX, function (err, data) {
+        if (!err) {
+            data = String(data);
+            data = data.replace(/<span id="development-size">([\w\s]*)<\/span>/g,
+                '<span id="development-size">' + developmentSize + '</span>');
+
+            data = data.replace(/<span id="production-size">([\w\s]*)<\/span>/g,
+                '<span id="production-size">' + productionSize + '</span>');
+
+            data = data.replace(/<span class="version">([\w\.-]*)<\/span>/g,
+                '<span class="version">' + version + '</span>');
+
+            fs.writeFile(INDEX, data, callback);
+        }
+        else {
+            callback(err);
+        }
+    });
+}
+
+developmentSize(function (err, devSize) {
+    console.log('development size: ' + devSize);
+    productionSize(function (err, prodSize) {
+        console.log('production size: ' + prodSize);
+        version(function (err, version) {
+            console.log('version: ' + version);
+            if (devSize && prodSize && version) {
+                updateVersion(devSize, prodSize, version, function (err, res) {
+                    if (err) {
+                        console.log(err);
+                    }
+                    else {
+                        console.log('done');
+                    }
+                });
+            }
+            else {
+            }
+        });
+    });
+});