Merge pull request #161 from CarletonDevX/jslote/v2-tweaks

Jslote/v2 tweaks

app/meta.js

@@ -0,0 +1,53 @@
+var routeNames = {MAIN:1, SEARCH:2, USER:3, BOOK:4}
+
+exports.set = function (route) {
+  return exports.set[route] || (exports.set[route] = function(req, res, next) {
+
+    // Default Meta tags with format property : content
+    // Defaults to MAIN
+    var metaProps = {
+        "fb:app_id"      : 1762840040660077,
+        "og:description" : "The streamlined platform for face-to-face textbook transactions with fellow Carls. Buy, sell, lend, and track—all in a sorted and searchable interface.",
+        "og:image"       : "http://"+req.hostname+"/images/fb_rect.png",
+        "og:image:height": 630,
+        "og:image:width" : 1201,
+        "og:site_name"   : "Carleton Hits the Books",
+        "og:title"       : "Carleton Hits the Books",
+        "og:type"        : "website",
+        "og:url"         : req.hostname+req.originalUrl
+    }
+
+    switch(route){
+        case routeNames.MAIN:
+            // defaults are correct.
+            break;
+        case routeNames.SEARCH:
+            // TODO: Don't cache?
+            if (req.query.query) metaProps['og:desc'] = 'Search results for "'+req.query.query+'" on Carleton Hits the Books, the streamlined platform for face-to-face textbook transactions with fellow Carls.'
+            metaProps['og:title'] = "Search Results - Carleton Hits the Books";
+            metaProps['og:type'] = "product.group";
+            break;
+        case routeNames.USER:
+            // TODO: lookup user name
+            metaProps['og:desc'] = "Profile on Carleton Hits the Books, the streamlined platform for face-to-face textbook transactions with fellow Carls."
+            metaProps['og:title'] = "Profile - Carleton Hits the Books"
+            metaProps['og:type'] = "profile";
+            break;
+        case routeNames.BOOK:
+            // TODO: look up book name
+            var metaProps = extend(metaProps);
+            metaProps['og:desc'] = "A book on Carleton Hits the Books, the streamlined platform for face-to-face textbook transactions with fellow Carls.";
+            metaProps['og:type'] = "books.book";
+            // TODO: Lookup book name
+            metaProps['og:title'] = "Book - Carleton Hits the Books";
+            break;
+        default:
+            // TODO: log an error here
+    }
+
+    req.rMetaProps = metaProps;
+    next();
+  });
+};
+
+exports.routeNames = routeNames

app/routes.js

@@ -1,6 +1,7 @@
 var activities = require('./controllers/activities.controller'),
     avatars = require('./controllers/avatars.controller'),
     books = require('./controllers/books.controller'),
+    extend = require('util')._extend,
     handlers = require('./errors'),
     inject = require('./injectors'),
     listings = require('./controllers/listings.controller'),
@@ -9,6 +10,7 @@ var activities = require('./controllers/activities.controller'),
     passport = require('passport'),
     reports = require('./controllers/reports.controller'),
     responder = require('./responseFormatter'),
+    meta = require('./meta'),
     subscriptions = require('./controllers/subscriptions.controller'),
     users = require('./controllers/users.controller');
 
@@ -23,17 +25,38 @@ var authenticate = function (req, res, next) {
 exports.setupMain = function (app) {
     // Main page, in a separate function so it doesn't get buried at the bottom of the file.
     // Only reached if no other routes are engaged (see server.js)
+
+    app.route('/search')
+        .get(meta.set(meta.routeNames.SEARCH),
+            function(req, res) {
+                res.render('index.pug', { metaProps: req.rMetaProps });
+            });
+    app.route('/user/:userID')
+        .get(
+            meta.set(meta.routeNames.USER),
+            function(req, res) {
+                res.render('index.pug', { metaProps: req.rMetaProps });
+        });
+
+    app.route('/book/:ISBN')
+        .get(
+            meta.set(meta.routeNames.BOOK),
+            function(req, res) {
+                res.render('index.pug', { metaProps: req.rMetaProps });
+        });
+
     app.route('/*')
-        .get(users.countUsers,
-             listings.countOpenListings,
-             listings.countCompletedListings,
-             function (req, res) {
-                 res.render('index.pug', {
-                     numOpenListings: req.rSchoolStats.numOpenListings,
-                     numCompletedListings: req.rSchoolStats.numCompletedListings,
-                     numUsers: req.rSchoolStats.numUsers,
-                 });
-             });
+        .get(
+            // // These three lines aren't used on the frontend right now,
+            // // but are preserved here for posterity
+            // users.countUsers,
+            // listings.countOpenListings,
+            // listings.countCompletedListings,
+
+            meta.set(meta.routeNames.MAIN),
+            function(req, res) {
+                res.render('index.pug', { metaProps: req.rMetaProps });
+        });
 };
 
 exports.setup = function (app) {

app/views/index.pug

@@ -1,8 +1,18 @@
 doctype html
 html(ng-app="hitsTheBooks")
   head
-    title [DEV] Carleton Hits the Books
-    meta(name="viewport" content="width=device-width, initial-scale=1")
+    title #{metaProps["og:title"]}
+
+    //- TODO: make mobile styles work
+    //- meta(name="viewport" content="width=device-width, initial-scale=1")
+
+    //- For Search Engines:
+    meta(name="description" content=metaProps["og:description"])
+
+    //- For Facebook:
+    each cont, prop in metaProps
+        meta(property=prop, content=cont)
+
     link(rel="stylesheet" type="text/css" href="/styles/index.css")
     script(src="https://use.fontawesome.com/f91a067268.js")
     script(src="https://code.jquery.com/jquery-1.11.3.min.js")

public/styles/index.css

@@ -1210,8 +1210,8 @@ table.password-changing .alert {
 
 div.modal.avatar .cropArea {
   overflow: hidden;
-  width: 480px;
-  height: 480px;
+  width: 100%;
+  height: 460px;
   box-sizing: border-box;
   position: relative;
   border: solid 1px #eee;

public/styles/partials/_details.scss

@@ -630,8 +630,8 @@ table.password-changing{
 div.modal.avatar{
   .cropArea {
       overflow: hidden;
-      width:480px;
-      height:480px;
+      width:100%;
+      height:460px;
       box-sizing: border-box;
       position: relative;
       border: solid 1px $light-border-color;