noscript for home and category view (although it's not quite working for

category view yet)

app.js

@@ -51,7 +51,7 @@ fs.readFile(path.join(__dirname, 'config.json'), function(err, data) {
 					'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
 					'emails/header', 'emails/footer', 'install/header', 'install/footer', 'install/redis',
 
-					'noscript/topic'
+					'noscript/header', 'noscript/home', 'noscript/category', 'noscript/topic'
 				]);
 
 				templates.ready(function() {

public/css/noscript.less

@@ -1,15 +1,50 @@
 @import "mixins";
 
 noscript {
-	.posts {
+	.default {
-		li {
+		list-style-type: none;
-			list-style-type: none;
+		padding: 1em;
-			padding: 1em;
+		margin-bottom: 1em;
-			margin-bottom: 1em;
 
-			&:nth-child(even) {
+		&:nth-child(even) {
-				background: rgba(192,192,192,0.2);
+			background: rgba(191,191,191,0.2);
+		}
+
+		&:nth-child(odd) {
+			background: rgba(223,223,223,0.2);
+		}
+	}
+
+	.categories {
+		li {
+			.default;
+
+			.icon {
+				float: left;
+				margin-right: 1em;
+			}
+
+			a {
+				font-size: 20px;
 			}
 		}
 	}
+
+	.topics {
+		li {
+			.default;
+		}
+
+		.teaser {
+			img {
+				float: left;
+			}
+		}
+	}
+
+	.posts {
+		li {
+			.default;
+		}
+	}
 }

public/src/modules/composer.js

@@ -19,7 +19,7 @@ define(function() {
 		composer.postContainer = document.createElement('div');
 		composer.postContainer.className = 'post-window row-fluid';
 		composer.postContainer.innerHTML =	'<div class="span10 offset1">' +
-												'<input type="text" placeholder="Enter your topic title here..." />' +
+												'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
 												'<div class="btn-toolbar">' +
 													'<div class="btn-group formatting-bar">' +
 														'<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>' +
@@ -28,12 +28,12 @@ define(function() {
 														'<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>' +
 													'</div>' +
 													'<div class="btn-group action-bar" style="float: right; margin-right: -12px">' +
-														'<button data-action="post" class="btn" tabIndex="2"><i class="icon-ok"></i> Submit</button>' +
+														'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
-														'<button data-action="minimize" class="btn" tabIndex="3"><i class="icon-download-alt"></i> Minimize</button>' +
+														'<button data-action="minimize" class="btn" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
-														'<button class="btn" data-action="discard" tabIndex="4"><i class="icon-remove"></i> Discard</button>' +
+														'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
 													'</div>' +
 												'</div>' +
-												'<textarea tabIndex="1"></textarea>' +
+												'<textarea tabIndex="2"></textarea>' +
 											'</div>';
 
 		composer.listEl = composer.btnContainer.querySelector('ul');

public/templates/category.tpl

@@ -24,7 +24,7 @@
 				<div class="span12 topic-row img-polaroid">
 					<div class="latest-post visible-desktop">
 						<div class="pull-right">
-							<img style="width: 48px; height: 48px; /*temporary*/" src="/graph/users/{topics.teaser_username}/picture" />
+							<img style="width: 48px; height: 48px; /*temporary*/" src="../../graph/users/{topics.teaser_username}/picture" />
 							<p><strong>{topics.teaser_username}</strong>: {topics.teaser_text}</p>
 							<span>posted {topics.teaser_timestamp} ago</span>
 						</div>

public/templates/noscript/category.tpl

@@ -0,0 +1,18 @@
+		<ul class="breadcrumb">
+			<li><a href="/">Home</a><span class="divider">/</span></li>
+			<li class="active">{category_name}</li>
+			<div id="category_active_users"></div>
+		</ul>
+		<ul class="topics">
+			<!-- BEGIN topics -->
+			<li>
+				<a href="topic/{topics.slug}">{topics.title}</a>
+				<div class="teaser">
+					<img class="img-polaroid" src="../../graph/users/{topics.teaser_username}/picture" />
+					<p>
+						{topics.teaser_text} &mdash; {topics.teaser_timestamp} ago
+					</p>
+				</div>
+			</li>
+			<!-- END topics -->
+		</ul>

public/templates/noscript/header.tpl

@@ -0,0 +1,8 @@
+		<div class="alert alert-error">
+			<p>
+				Your browser does not seem to support javascript. As a result, your viewing experience will be diminished.
+			</p>
+			<p>
+				Please download a browser that supports javascript, or enable it, if it disabled (i.e. NoScript).
+			</p>
+		</div>

public/templates/noscript/home.tpl

@@ -0,0 +1,10 @@
+		<ul class="categories">
+			<!-- BEGIN categories -->
+			<li>
+				<div class="icon"><i class="{categories.icon} icon-4x"></i></div>
+				<a href="category/{categories.slug}">{categories.name}</a>
+				<p>{categories.description}</p>
+				<div class="clear"></div>
+			</li>
+			<!-- END categories -->
+		</ul>

public/templates/noscript/topic.tpl

@@ -1,11 +1,3 @@
-		<div class="alert alert-error">
-			<p>
-				Your browser does not seem to support javascript. As a result, your viewing experience will be diminished.
-			</p>
-			<p>
-				Please download a browser that supports javascript, or enable it, if it disabled (i.e. NoScript).
-			</p>
-		</div>
 		<ul class="posts">
 			<!-- BEGIN main_posts -->
 			<li>

src/webserver.js

@@ -78,7 +78,7 @@ var express = require('express'),
 
 	// Basic Routes (entirely client-side parsed, goal is to move the rest of the crap in this file into this one section)
 	(function() {
-		var routes = ['', 'login', 'register', 'account', 'latest', 'popular', 'active', '403', '404'];
+		var routes = ['login', 'register', 'account', 'latest', 'popular', 'active', '403', '404'];
 
 		for (var i=0, ii=routes.length; i<ii; i++) {
 			(function(route) {
@@ -96,6 +96,17 @@ var express = require('express'),
 	}());
 	
 	// Complex Routes
+	app.get('/', function(req, res) {
+		categories.getAllCategories(function(returnData) {
+			res.send(
+				build_header() +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/home'].parse(returnData) + '\n\t</noscript>' +
+				app.create_route('') +
+				templates['footer']
+			);
+		}, 0);
+	});
+
 	app.get('/topic/:topic_id/:slug?', function(req, res) {
 		var tid = req.params.topic_id;
 		if (tid.match('.rss')) {
@@ -117,7 +128,7 @@ var express = require('express'),
 		topics.getTopicById(tid, ((req.user) ? req.user.uid : 0), function(topic) {
 			res.send(
 				build_header() +
-				'\n\t<noscript>\n' + templates['noscript/topic'].parse(topic) + '\n\t</noscript>' +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/topic'].parse(topic) + '\n\t</noscript>' +
 				'\n\t<script>templates.ready(function(){ajaxify.go("topic/' + topic_url + '");});</script>' +
 				templates['footer']
 			);
@@ -141,7 +152,15 @@ var express = require('express'),
 		}
 
 		var category_url = cid + (req.params.slug ? '/' + req.params.slug : '');
-		res.send(build_header() + '<script>templates.ready(function(){ajaxify.go("category/' + category_url + '");});</script>' + templates['footer']);
+		categories.getCategoryById(cid, 0, function(returnData) {
+			console.log(returnData);
+			res.send(
+				build_header() +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/category'].parse(returnData) + '\n\t</noscript>' +
+				'\n\t<script>templates.ready(function(){ajaxify.go("category/' + category_url + '");});</script>' +
+				templates['footer']
+			);
+		});
 	});
 
 	app.get('/confirm/:code', function(req, res) {