duhsign for category home page

app.js

@@ -33,20 +33,33 @@ global.modules = modules;
                 console.log('Setting up default categories...');
 
                 modules.categories.create({
-                    'name': 'General',
-                    'description': 'A place to talk about whateeeever you want'
+                    'name': 'Announcements',
+                    'description': 'A place to talk about whateeeever you want',
+                    'blockclass': 'category-purple',
+                    'icon' : 'icon-bullhorn'
+                });
+
+                modules.categories.create({
+                    'name': 'General Discussion',
+                    'description': 'A place to talk about whateeeever you want',
+                    'blockclass': 'category-purple',
+                    'icon' : 'icon-comment'
                 });
 
 
                 modules.categories.create({
                     'name': 'NodeBB Development',
-                    'description': 'Bugs? Dont worry, we dont read this thread, so post them here.'
+                    'description': 'Bugs? Dont worry, we dont read this thread, so post them here.',
+                    'blockclass': 'category-purple',
+                    'icon' : 'icon-github-alt'
                 });
 
 
                 modules.categories.create({
-                    'name': 'Design Create Play',
-                    'description': 'In future an example of how a hidden category should look like.'
+                    'name': 'Blogs',
+                    'description': 'In future an example of how a hidden category should look like.',
+                    'blockclass': 'category-purple',
+                    'icon' : 'icon-pencil'
                 });
 
             } else console.log('Good.');

public/css/style.less

@@ -296,4 +296,30 @@ footer.footer {
 .account-bio-label{
   display:inline-block;
   width:100px;
+}
+
+
+
+.category-icon {
+	width: 100%;
+	height: 90px;
+	text-align: center;
+	border-radius: 5px;
+	margin: 0;
+	padding-top:20px;
+	cursor: pointer;
+}
+.category-row h4 {
+	font-weight: 700;
+	text-align: center;
+	color: #555;
+}
+.category-row a {
+	text-decoration: none;
+	border: 0;
+}
+
+.category-purple {
+	background: #ab1290;
+	color: white;
 }

public/templates/home.tpl

@@ -1,9 +1,14 @@
-<h3>Categories</h3>
-<ul class="topic-container">
-<!-- BEGIN categories -->
-<a href="category/{categories.slug}"><li class="topic-row">
-	<h4>{categories.name}</h4>
-	<p>{categories.description}</p>
-</li></a>
-<!-- END categories -->
-</ul>
+
+<div class="row category-row">
+	<!-- BEGIN categories -->
+	<div class="span3">
+		<a href="category/{categories.slug}">
+			<h4>{categories.name}</h4>
+			<!-- {categories.description} -->
+			<div class="category-icon {categories.blockclass}">
+				<i class="{categories.icon} icon-4x"></i>
+			</div>
+		</a>
+	</div>
+	<!-- END categories -->
+</div>

src/categories.js

@@ -15,6 +15,8 @@ var	RDB = require('./redis.js'),
 			// Topic Info
 			RDB.set('cid:' + cid + ':name', data.name);
 			RDB.set('cid:' + cid + ':description', data.description);
+			RDB.set('cid:' + cid + ':icon', data.icon);
+			RDB.set('cid:' + cid + ':blockclass', data.blockclass);
 			RDB.set('cid:' + cid + ':slug', slug);
 		
 			RDB.set('category:slug:' + slug + ':cid', cid);
@@ -29,11 +31,15 @@ var	RDB = require('./redis.js'),
 		RDB.lrange('categories:cid', 0, -1, function(cids) {
 			var name = [],
 				description = [],
+				icon = [],
+				blockclass = [],
 				slug = [];
 
 			for (var i=0, ii=cids.length; i<ii; i++) {
 				name.push('cid:' + cids[i] + ':name');
 				description.push('cid:' + cids[i] + ':description');
+				icon.push('cid:' + cids[i] + ':icon');
+				blockclass.push('cid:' + cids[i] + ':blockclass');
 				slug.push('cid:' + cids[i] + ':slug');
 			}
 
@@ -41,11 +47,15 @@ var	RDB = require('./redis.js'),
 				RDB.multi()
 					.mget(name)
 					.mget(description)
+					.mget(icon)
+					.mget(blockclass)
 					.mget(slug)
 					.exec(function(err, replies) {
 						name = replies[0];
 						description = replies[1];
-						slug = replies[2];
+						icon = replies[2];
+						blockclass = replies[3];
+						slug = replies[4];
 						
 						var categories = [];
 						for (var i=0, ii=cids.length; i<ii; i++) {
@@ -54,6 +64,8 @@ var	RDB = require('./redis.js'),
 								'cid' : cids[i],
 								'slug' : slug[i],
 								'description' : description[i],
+								'blockclass' : blockclass[i],
+								'icon' : icon[i],
 								/*'topics' : [0,1], later
 								'latest_post' : {
 									'uid' : 1,