Version number and author at the bottom of the page

Author: Andre Medeiros

TODO

@@ -23,37 +23,37 @@
 + DONE RxMarbles title and proposition value
 + DONE Examples for Observable Instance Methods
 + DONE OperatorsMenu should stretch its height
-- TODO Version number and author at the bottom of the page
-  - from package.json
++ DONE Version number and author at the bottom of the page
 >>> v0.2.0
 
-- TODO Webpage footer
 - TODO README.md
 - TODO Styling for dragging a marble
   - z-depth and side arrows
->>> v0.2.1
+- TODO Fix bugs for first release
+  - cross browser issues, etc
+>>> v1.0.0
 
 - TODO Render each stream with a different regular polygon?
 - TODO Render also the stream completion time marker?
->>> v0.2.2
+>>> v1.1.0
 
 - TODO Render metastreams in 'window' example
 - TODO Add examples groupBy, flatMap, concatMap, switch
->>> v0.3.0
+>>> v1.2.0
 
 - TODO Interactively add marbles to an InputStream
 - TODO Interactively remove marbles from an InputStream
->>> v0.4.0
+>>> v1.3.0
 
 - TODO Render lists of marbles for the buffer example
->>> v0.5.0
-
-- TODO Fix bugs for first release
-  - cross browser issues, etc
->>> v1.0.0
+>>> v1.4.0
 
 - TODO Interactively add errors to an InputStream
+>>> v1.5.0
+
 - TODO Hovering over a diagram shows mapping arrows
+>>> v1.6.0
+
 - TODO Use virtual-dom for all views, only when virtual-dom events work
   - See modules under Raynos/mercury
   - TODO Refactor to conform to MVC philosophy

dist/css/main.css

@@ -216,10 +216,14 @@
   transform: rotate(-45deg);
 }
 body {
+  position: relative;
   background: #ececec;
   color: #323232;
   font-family: 'Source Sans Pro', sans-serif;
 }
+a {
+  color: #3ea1cb;
+}
 .page-row {
   position: relative;
   width: 1060px;
@@ -276,3 +280,12 @@ ul.operators-menu li > a:hover:after {
   position: absolute;
   right: 5px;
 }
+.footer {
+  position: absolute;
+  bottom: 0;
+  right: 20px;
+  color: #7c7c7c;
+}
+.footer #app-version {
+  margin-right: 0.3em;
+}

dist/js/app.js

@@ -27,6 +27,9 @@ <h3 class="value-proposition">Interactive diagrams of Rx Observables</h3>
       <section class="operators-menu-container"></section>
       <section class="sandbox"></section>
     </div>
+    <section class="footer">
+      <span id="app-version"></span>by <a href="https://twitter.com/andrestaltz">@andrestaltz</a>
+    </section>
     <script src="dist/js/app.js"></script>
   </body>
 </html>

index.html

@@ -1,6 +1,6 @@
 {
   "name": "rxmarbles",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Andre Staltz",
   "repository": {
     "type": "git",
@@ -29,6 +29,6 @@
   },
   "scripts": {
     "preinstall": "rm -rf build && rm -rf node_modules",
-    "postinstall": "mkdir build && mkdir build/src && ln -s ../build/src node_modules/rxmarbles"
+    "postinstall": "mkdir build && mkdir build/src && ln -s ../build/src node_modules/rxmarbles && ln -s ../package.json node_modules/package.json"
   }
 }

package.json

@@ -1,8 +1,11 @@
 Sandbox = require 'rxmarbles/views/sandbox'
 OperatorsMenu = require 'rxmarbles/views/operators-menu'
+Package = require 'package.json'
 
 sandboxContainer = document.querySelector(".sandbox")
 sandboxContainer.appendChild(Sandbox.render())
 
 operatorsMenuContainer = document.querySelector(".operators-menu-container")
 operatorsMenuContainer.appendChild(OperatorsMenu.render())
+
+document.querySelector("#app-version").textContent = "v#{Package.version}"

src/app.coffee

@@ -16,13 +16,18 @@
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 body {
+  position: relative;
   background: @color-almost-white;
 
   // Default typography
   color: @color-black;
   font-family: 'Source Sans Pro', sans-serif;
 }
 
+a {
+  color: @color-blue;
+}
+
 .page-row {
   position: relative;
 	width: @page-row-width;
@@ -82,4 +87,14 @@ ul.operators-menu {
       right: 5px;
     }
   }
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  right: 20px;
+  color: @color-grey-dark;
+  #app-version {
+    margin-right: 0.3em;
+  }
 }