From: Gabriel Dunne <gdunne@quilime.com>
Date: Sat, 23 Mar 2013 03:26:12 +0000 (-0700)
Subject: Getting templates a little cleaner.
X-Git-Url: https://git.quilime.com/?a=commitdiff_plain;h=ba46a3d7f81702190fc7bc62eaaea446213b161c;p=visual-archive.git

Getting templates a little cleaner.
---

diff --git a/app.js b/app.js
new file mode 100644
index 0000000..161f275
--- /dev/null
+++ b/app.js
@@ -0,0 +1,35 @@
+var express = require("express")
+,   request = require('request')
+,   http    = require('http')
+,   path    = require('path')
+,   routes  = require('./routes')
+,   thumbs  = require('./routes/thumbs')
+,   port    = 3000;
+
+var app = express();
+
+app.configure(function(){
+  app.set('port', process.env.PORT || port);
+  app.set('views', __dirname + '/views');
+  app.set('view engine', 'ejs');
+  app.use(express.favicon());
+  app.use(express.logger('dev'));
+  app.use(express.bodyParser());
+  app.use(express.methodOverride());
+  // app.use(express.session());
+  // app.use(express.cookieParser('your secret here'));
+  app.use(app.router);
+  app.use(require('stylus').middleware(__dirname + '/public'));
+  app.use(express.static(path.join(__dirname, 'public')));
+});
+
+app.configure('development', function(){
+  app.use(express.errorHandler());
+});
+
+app.get('/', routes.index);
+app.get('/thumbs/', thumbs.list);
+
+http.createServer(app).listen(app.get('port'), function(){
+  console.log("Express server listening on port " + app.get('port'));
+});
diff --git a/package.json b/package.json
index 9af02a2..7105533 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,10 @@
   "version": "0.0.1",
   "dependencies": {
     "express" : "3.x",
-    "request" : "x.x",
-    "jsdom"   : "x.x"
+    "request" : "*",
+    "jsdom"   : "*",
+    "ejs"     : "*",
+    "stylus"  : "*",
+    "underscore" : "*"
   }
 }
diff --git a/public/style.css b/public/css/style.css
similarity index 95%
rename from public/style.css
rename to public/css/style.css
index d5ba721..392ecc8 100644
--- a/public/style.css
+++ b/public/css/style.css
@@ -1,5 +1,4 @@
 /* style.css */
-
 body {
     background: #222;
     color:#ddd;
@@ -15,6 +14,9 @@ ul, li {
 a {
     color:#ff0;
 }
+ul.thumbs {
+    text-align:center;
+}
 ul.thumbs li {
     margin:5px;
     display:inline-block;
diff --git a/public/jquery-1.9.1.min.js b/public/js/jquery-1.9.1.min.js
similarity index 100%
rename from public/jquery-1.9.1.min.js
rename to public/js/jquery-1.9.1.min.js
diff --git a/public/script.js b/public/js/script.js
similarity index 87%
rename from public/script.js
rename to public/js/script.js
index 585d4db..8f68e82 100644
--- a/public/script.js
+++ b/public/js/script.js
@@ -23,7 +23,9 @@ $(document).ready(function() {
     link.click(function() {
       scrim(1, function() {
         $('#subcontent .container').empty();
+
         var offset = 150;
+
         $('#subcontent').css({
             width : window.innerWidth - offset + "px",
             height : window.innerHeight - offset + "px",
@@ -35,15 +37,13 @@ $(document).ready(function() {
         $('#subcontent .container').text("loading...");
 
         $.getJSON('/thumbs/?url=' + thumbs_url, function(data) {
-
           $('#subcontent .container').empty();
-
           var destElem = '#subcontent .container';
 
-          $('<div/>', {
-            'class' : 'desc',
-            html : '<p><a target="_blank" href="' + data.url + '"> ' + data.url + ' </a></p>'
-          }).appendTo(destElem);
+          // $('<div/>', {
+          //   'class' : 'desc',
+          //   html : '<p><a target="_blank" href="' + data.url + '"> ' + data.url + ' </a></p>'
+          // }).appendTo(destElem);
 
           $('<ul/>', {
             'class': 'thumbs',
@@ -66,10 +66,10 @@ $(document).ready(function() {
       return false;
     });
     link.hover(function() {
-      img.attr('src', 'prelinger_anim/' + thumb_name);
+      img.attr('src', 'gifs/prelinger_anim/' + thumb_name);
     });
     link.mouseout(function() {
-      img.attr('src', 'prelinger_static/' + thumb_name);
+      img.attr('src', 'gifs/prelinger_static/' + thumb_name);
     });
 
   });
diff --git a/routes/index.js b/routes/index.js
new file mode 100644
index 0000000..9b0c0be
--- /dev/null
+++ b/routes/index.js
@@ -0,0 +1,16 @@
+var fs        = require("fs")
+,   prelinger = require('../prelinger.json');
+
+exports.index = function(req, res) {
+  var count = 10;
+  var clips = [];
+  for( var i = 0; i < prelinger.clips.length; i++) {
+    count--; if (count == 0) { break; }
+    var clip = prelinger.clips[i];
+    var ext = clip.thumbnail_filename.split('.')[1];
+    if (ext == 'gif') {
+      clips.push(clip);
+    }
+  }
+  res.render('index', { title: 'Archive Explorer', clips : clips });
+};
diff --git a/routes/thumbs.js b/routes/thumbs.js
new file mode 100644
index 0000000..bcd45ea
--- /dev/null
+++ b/routes/thumbs.js
@@ -0,0 +1,25 @@
+var jsdom   = require("jsdom")
+,   fs      = require("fs")
+,   jquery  = fs.readFileSync("./public/js/jquery-1.9.1.min.js").toString();
+
+exports.list = function(req, res) {
+  jsdom.env({
+    html : req.query["url"],
+    src : [jquery],
+    done: function (errors, window) {
+      var $ = window.$;
+      var thumbs = [];
+      var as =$("div.box div a");
+      for (var i = 0; i < as.length; i++) {
+        thumbs.push({
+          "url" : "http://archive.org" + $(as[i]).attr('href'),
+          "img" : $(as[i]).find('img').attr('src')
+        });
+      }
+      res.send(JSON.stringify({
+        "url" : req.query["url"],
+        "links" : thumbs
+      }));
+    }
+  });
+};
diff --git a/server_gifs.js b/server_gifs.js
deleted file mode 100644
index 268fa0d..0000000
--- a/server_gifs.js
+++ /dev/null
@@ -1,96 +0,0 @@
-var express = require("express"),
-    request = require('request'),
-    jsdom   = require("jsdom"),
-    app     = express(),
-    fs      = require("fs"),
-    port    = 3000;
-
-var jquery = fs.readFileSync("./public/jquery-1.9.1.min.js").toString();
-
-var prelinger = require('./prelinger.json');
-
-
-app.get("/", function(req, res) {
-  var out = [];
-  out.push('<ul class="thumbs">');
-  // prelinger.clips.length
-  var count = 10;
-  for( var i = 0; i < prelinger.clips.length; i++) {
-
-    count--;
-    if (count == 0)
-      break;
-
-    var clip = prelinger.clips[i];
-    var t = clip.thumbnail_filename;
-    var turl = clip.thumbnails_url;
-    var url = clip.url;
-
-    var ext = t.split('.')[1];
-
-
-    if (ext == 'gif') {
-      out.push([
-        '<li id="'+ clip.id +'" data-thumbs-url="' + turl + '">',
-        '<a href="#">',
-        '<img src="prelinger_static/' + t + '">',
-        '</a>',
-        '</li>'].join("")
-        );
-    }
-
-  }
-  out.push('</ul>');
-  out.push('<link rel="stylesheet" type="text/css" href="style.css">');
-  out.push('<script src="jquery-1.9.1.min.js"></script>');
-  out.push('<script src="script.js"></script>');
-  var body = out.join("");
-
-  res.setHeader('Content-Type', 'text/html');
-  res.setHeader('Content-Length', body.length);
-  res.end(body);
-});
-
-
-
-// url proxy
-app.get("/thumbs/", function(req, res) {
-  jsdom.env({
-    html : req.query["url"],
-    src : [jquery],
-    done: function (errors, window) {
-      var $ = window.$;
-      var thumbs = [];
-      var as =$("div.box div a");
-      for (var i = 0; i < as.length; i++) {
-        thumbs.push({
-          "url" : "http://archive.org" + $(as[i]).attr('href'),
-          "img" : $(as[i]).find('img').attr('src')
-        });
-      }
-      res.end(JSON.stringify({
-        "url" : req.query["url"],
-        "links" : thumbs
-      }));
-    }
-  });
-})
-
-
-
-
-
-
-app.configure(function(){
-  app.use(express.methodOverride());
-  app.use(express.bodyParser());
-  app.use(express.static(__dirname + '/public'));
-  app.use(express.static(__dirname + '/gifs'));
-  app.use(express.errorHandler({
-    dumpExceptions: true,
-    showStack: true
-  }));
-  app.use(app.router);
-});
-app.listen(port);
-console.log('Listening on port ' + port);
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 0000000..f7f7702
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= title %></title>
+    <link rel='stylesheet' href='/css/style.css' />
+    <script src="js/jquery-1.9.1.min.js"></script>
+    <script src="js/script.js"></script>
+  </head>
+  <body>
+    <ul class="thumbs">
+      <% for(var i = 0; i < clips.length; i++) { %>
+        <li id="<%= clips[i].id %>" data-thumbs-url="<%= clips[i].thumbnails_url %>">
+          <a href="#">
+            <img src="gifs/prelinger_static/<%= clips[i].thumbnail_filename %>">
+          </a>
+        </li>
+      <% } %>
+    </ul>
+  </body>
+</html>