- Grunt.js

- Twitter Bootstrap
- Clearer homepage
- Automated builds
- Navigating to rooms with bad IDs redirects home
- Removed generated files
- Removed dependencies - devs can install those with `grunt `

.gitignore

@@ -10,7 +10,12 @@ lib-cov
 pids
 logs
 results
+.DS_Store
 
 npm-debug.log
 node_modules
 data
+.sass-cache
+build/
+lib
+public/bootstrap

Gruntfile.js

@@ -0,0 +1,93 @@
+module.exports = function(grunt) {
+
+	grunt.initConfig({
+
+		pkg: grunt.file.readJSON('package.json'),
+
+		concat: {
+			dist: {
+				src: [
+					'pubic/javascripts/libs/*.js',
+					'public/javascripts/*.js'
+				],
+				dest: 'public/javascripts/build/production.js',
+			}
+		},
+
+		uglify: {
+			build: {
+				src: 'public/javascripts/build/production.js',
+				dest: 'public/javascripts/build/production.min.js'
+			}
+		},
+
+		sass: {
+			dist: {
+				options: {
+					style: 'compressed'
+				},
+				files: {
+					'public/css/build/global.css': 'public/scss/main.scss'
+				}
+			} 
+		},
+
+		watch: {
+			scripts: {
+				files: ['public/javascripts/*.js', 'public/javascripts/libs/*.js'],
+				tasks: ['concat', 'uglify'],
+				options: {
+					spawn: false,
+					livereload: true,
+				},
+			},
+
+			css: {
+				files: ['public/scss/*.scss'],
+				tasks: ['sass'],
+				options: {
+					spawn: false,
+					livereload: true,
+				}
+			} 
+		},
+
+		curl: {
+			bootstrap_css: {
+				src: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css',
+				dest: 'public/lib/bootstrap/css/bootstrap.min.css'
+			},
+
+			bootstrap_js: {
+				src: 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js',
+				dest: 'public/lib/bootstrap/js/bootstrap.min.js'
+			}
+		},
+
+		nodemon: {
+			dev: {
+				options: {
+					file: 'app.js',
+					watchedFolders: ['routes'],
+					nodeArgs: ['--debug'],
+					env: {
+						PORT: '3000'
+					}
+				}
+			}
+		}
+
+	});
+
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-sass');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-curl');
+	grunt.loadNpmTasks('grunt-nodemon');
+
+	grunt.registerTask('default', ['concat', 'uglify', 'sass', 'imagemin', 'curl']);
+	grunt.registerTask('update', ['curl']);
+	grunt.registerTask('dev', ['watch']);
+
+};

README.md

@@ -10,5 +10,14 @@ Project is in beta. If you find any issues or have any feedback, open an issue.
 * `git clone git@github.com:a11yproject/Wordcast.git` or download the project
 * `cd path/to/Wordcast`
 * `npm install` the required modules
+* `grunt` to build the app
 * `node app.js` to run the app
 * Open `http://localhost:3000` in two different browser windows. Chrome 25+ required to broadcast.
+
+## Contributing
+
+If you'd like to help, fork the repo and make a pull request! To start working on things, simply:
+
+    $ grunt dev
+
+This will automate the build process, so you don't have to `grunt` everytime you make a change :)

app.js

@@ -93,7 +93,10 @@ io.sockets.on('connection', function(socket) {
 
 		var room = getRoomById(data);
 		if (!room)
+		{
+			socket.emit("no room exists");
 			return;
+		}
 
 		socket.emit("room name", room.name);
 	}

package.json

@@ -1,21 +1,31 @@
 {
-	"name": "Wordcast",
-	"version": "0.0.1",
-	"description": "A real-time captioning service over Google Chrome and Socket.IO",
-	"author": "A11yProject",
-	"contributors": [
-		{
-			"name": "Jordan Foreman",
-			"email": "me@jordanforeman.com"
-		}
-	],
-	"private": true,
-	"scripts": {
-		"start": "node app.js"
-	},
-	"dependencies": {
-		"express": "latest",
-		"jade": "latest",
-		"socket.io": "latest"
-	},
-}
+  "name": "wordcast",
+  "version": "0.0.1",
+  "description": "A real-time captioning service over Google Chrome and Socket.IO",
+  "author": "A11yProject",
+  "contributors": [
+    {
+      "name": "Jordan Foreman",
+      "email": "me@jordanforeman.com"
+    }
+  ],
+  "private": true,
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "express": "latest",
+    "jade": "latest",
+    "socket.io": "latest"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-sass": "~0.6.0",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-uglify": "~0.2.7",
+    "grunt-contrib-imagemin": "~0.4.0",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-curl": "~1.2.1",
+    "grunt-nodemon": "~0.1.2"
+  }
+}

public/javascripts/cc.js → public/javascripts/listener.js

@@ -3,21 +3,41 @@ var button = document.getElementById('cc-button');
 
 var pathArray = window.location.pathname.split('/');
 var roomID = pathArray[2];
+var roomName = document.querySelector("#roomName");
+
+//===========================
+//
+//  Socket
+//
+//===========================
 
 var socket = io.connect("http://localhost:3000");
-var roomName = document.querySelector("#roomName");
 
+// Successfully connected to server
 socket.on("connect", function(){
-  socket.emit("get room name", roomID);
+  socket.emit("get room name", roomID); // get room by id
 });
 
+//  Get room name from server
 socket.on("room name", function(data){
   console.log("Room Name: " + data);
   roomName.innerHTML = data;
 });
 
-var recognizing = false;
+//TODO: more graceful error here
+// If page is loaded, but a room doesn't exist
+socket.on("no room exists", function(data){
+  console.log("no room exists");
+  window.location = '../';
+});
+
+//===========================
+//
+//  Voice Recognition
+//
+//===========================
 
+var recognizing = false;
 var recognition = new webkitSpeechRecognition();
 recognition.continuous = true;
 recognition.interimResults = true;
@@ -41,6 +61,12 @@ recognition.onresult = function(event) {
   }
 };
 
+//===========================
+//
+//  Util
+//
+//===========================
+
 function capitalize(s) {
   var first_char = /\S/;
  return s.replace(first_char, function(m) { 
@@ -59,4 +85,9 @@ function toggleSpeechRecognition(event) {
     button.style.display = "none";
     recognition.start();
   }
-}
+}
+
+function dummyMsg(msg){
+  var messages = ["here is a caption", "The Lazy Brown Fox", "Wizards", "santa claws"];
+  socket.emit("new caption", {text: messages[Math.floor(Math.random()*messages.length)], room: roomID});
+}

public/scss/_fonts.scss

@@ -0,0 +1,37 @@
+@font-face {
+	font-family: 'wordcast';
+	src:url('../../fonts/wordcast.eot');
+	src:url('../../fonts/wordcast.eot?#iefix') format('embedded-opentype'),
+		url('../../fonts/wordcast.woff') format('woff'),
+		url('../../fonts/wordcast.ttf') format('truetype'),
+		url('../../fonts/wordcast.svg#wordcast') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	font-family: 'wordcast';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-microphone:before {
+	content: "\e600";
+}
+.icon-cog:before {
+	content: "\e601";
+}
+.icon-user-add:before {
+	content: "\e602";
+}
+.icon-voicemail:before {
+	content: "\e603";
+}

public/scss/main.scss

@@ -1,3 +1,5 @@
+@import "fonts";
+
 /* Layout styling */
 html,
 body {
@@ -9,7 +11,8 @@ body {
   font-family: 'Ubuntu', sans-serif;
   line-height: 1.5;
   padding: 4em 1em 1em;
-  text-align: center;
+
+  padding-top: 70px;
 }
 
 ol {
@@ -22,11 +25,10 @@ li {
 
 /* Caption Styling */
 #cc {
+  display: block;
+  margin: 0 auto;
+
   text-align: center;
-  width: 80%;  
-  left: 10%;
-  position: fixed;
-  top: 1em;
 }
 
 #cc span {
@@ -60,4 +62,9 @@ li {
   font-size: 0.8em;
   display: inline-block;
   padding: 0 0.25em;
+}
+
+.btn-cta {
+  display: block;
+  margin: 0 auto;
 }

views/index.jade

@@ -1,17 +1,22 @@
 extends layout
 
 block content
-	h1= title
-	p Welcome to #{title}
+	div(class='jumbotron')
+		h1= title
+		p Welcome to #{title}! The best way to serve live captions! From classrooms to boardrooms, Wordcast delivers! Provide almost instant captions to listeners with just an internet connection.  
 
-	a(href="listener")
-		| Listener
+		p
+			| ...and its completely 
+			strong(style='color: red;')
+				| Free! 
 
-	|  | 
+			| But, 
 
-	a(href="viewer")
-		| Viewer
+			//- Open Source Definition 
+			a(href="http://bit.ly/1ixwz0C")
+				small
+					| why?
 
-	p
-		a(href="createRoom")
-			| Create New Room
+		p
+			a(class="btn btn-primary btn-lg btn-cta" href="createRoom" role="button")
+				| Create Room (Free)