styling updates

Procfile

@@ -1 +1 @@
-web: npm config set httpconsole:port_mask 80 && npm start
+web: npm start

README.md

@@ -61,12 +61,6 @@ By Default the server will run on port `8080`, you can customize the port like s
 npm config set httpconsole:port 8001
 ```
 
-**note**: in environments such as Heroku, the port which the server is running on, is forwarded to another, by default the application will use the port defined above in all responses (e.g. redirects), if you wish to use a masked port, set the following config:
-
-```shell
-npm config set httpconsole:port_mask 80
-```
-
 *read more on [Configuration](docs/config.md)*.
 
 ### Running

package.json

@@ -60,7 +60,6 @@
     "har-validator": "^1.0.2",
     "hiredis": "^0.2.0",
     "jade": "^1.9.2",
-    "marked": "^0.3.3",
     "media-typer": "^0.3.0",
     "method-override": "^2.3.1",
     "morgan": "^1.5.1",

server.js

@@ -14,7 +14,6 @@ var url = require('url');
 // default configs
 var config = rc('httpconsole', {
   port: process.env.npm_package_config_port,
-  port_mask: process.env.npm_package_config_port_mask,
   redis: process.env.npm_package_config_redis,
   quiet: process.env.npm_package_config_quiet === 'false' ? false : true
 });
@@ -42,7 +41,7 @@ var app = express();
 
 app.set('jsonp callback name', '__callback');
 app.set('view engine', 'jade');
-app.enable('view cache');
+//app.enable('view cache');
 app.enable('trust proxy');
 
 // add 3rd party middlewares

src/index.js

@@ -7,9 +7,6 @@ var mw = require('./middleware');
 module.exports = function (config, redis) {
   var router = express.Router();
 
-  // add httpconsole middlewares
-  // router.use(mw.utilMiddleware);
-
   router.get('/',                               mw.errorHandler, mw.cors, mw.bodyParser, routes.hello,           mw.negotiateContent);
 
   router.all('/ip',                             mw.errorHandler, mw.cors, mw.bodyParser, routes.ips.one,         mw.negotiateContent);

src/middleware/negotiate-content.js

@@ -34,22 +34,18 @@ module.exports = function (req, res, next) {
   }
 
   function HTMLResponse () {
-    res.locals.path = req.path;
-    res.locals.hostname = req.hostname;
+    res.locals.req = req;
 
     res.render(res.view || 'default', {
       data: {
         raw: res.body,
-        yaml: YAML.stringify(res.body, res.yamlInline || 3, spaces),
+        yaml: YAML.stringify(res.body, res.yamlInline || 3, 2),
 
-        json: JSON.stringify(res.body, null, spaces),
+        json: JSON.stringify(res.body, null, 2),
 
-        xml: XML.create(res.bodyXmlObj || res.body, {
-          prettyPrint: true,
-          indent: spaces
-        }).end({
+        xml: XML.create(res.bodyXmlObj || res.body).end({
           pretty: true,
-          indent: spaces,
+          indent: '    ',
           newline: '\n'
         })
       }

src/routes/buckets.js

@@ -32,7 +32,7 @@ module.exports = {
       res.status(201);
 
       // send back the newly created id
-      res.body = util.format('http://%s:%s/bucket/%s', req.hostname, config.port_mask || config.port, id);
+      res.body = util.format('/bucket/%s', id);
       res.location(res.body);
 
       next();

src/routes/headers.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   all: function (req, res, next) {
+    res.yamlInline = 2;
+
     res.status(200).body = {
       headers: req.har.log.entries[0].request.headers,
       headersSize: req.har.log.entries[0].request.headersSize

views/404.jade

@@ -1,4 +1,5 @@
 extends layout.jade
 
 block content
-  h1 404
+  div.container
+    h1 404

views/bucket/create.jade

@@ -1,24 +1,25 @@
 extends ../layout.jade
 
 block content
-  form
-    div.form-group
-      label(for='exampleInputEmail1') Email address
-      input.form-control(type='email', placeholder='Enter email')
+  div.container
+    form
+      div.form-group
+        label(for='exampleInputEmail1') Email address
+        input.form-control(type='email', placeholder='Enter email')
 
-    div.form-group
-      label(for='exampleInputPassword1') Password
-      input.form-control(type='password', placeholder='Password')
+      div.form-group
+        label(for='exampleInputPassword1') Password
+        input.form-control(type='password', placeholder='Password')
 
-    div.form-group
-      label(for='exampleInputFile') File input
-      input(type='file')
-      p.help-block Example block-level help text here.
+      div.form-group
+        label(for='exampleInputFile') File input
+        input(type='file')
+        p.help-block Example block-level help text here.
 
-    div.checkbox
-      label
-        input(type='checkbox')
-        |  Check me out
+      div.checkbox
+        label
+          input(type='checkbox')
+          |  Check me out
 
-    button.btn.btn-default(type='submit') Submit
+      button.btn.btn-default(type='submit') Submit
 

views/bucket/log.jade

@@ -1,21 +1,22 @@
 extends ../layout.jade
 
 block content
-  pre: code= YAML.stringify(data, 6, 2)
+  div.container
+    pre: code= YAML.stringify(data, 6, 2)
 
-  for entry in data.log.entries
-    div
-      strong #{entry.request.method}
-      span (#{entry.request.bodySize} bytes)
-      span From #{entry.clientIPAddress}
+    for entry in data.log.entries
+      div
+        strong #{entry.request.method}
+        span (#{entry.request.bodySize} bytes)
+        span From #{entry.clientIPAddress}
 
-    h6 Headers
-    pre: code
-     - for header in entry.request.headers
-      | #{header.name}: #{header.value} 

+      h6 Headers
+      pre: code
+       - for header in entry.request.headers
+        | #{header.name}: #{header.value} 

 
-    h6 postData
-    pre: code= YAML.stringify(entry.request.postData, 2, 2)
+      h6 postData
+      pre: code= YAML.stringify(entry.request.postData, 2, 2)
 
-    h6 Query
-    pre: code= YAML.stringify(entry.request.queryString, 2, 2)
+      h6 Query
+      pre: code= YAML.stringify(entry.request.queryString, 2, 2)

views/bucket/view.jade

@@ -1,12 +1,13 @@
 extends ../layout.jade
 
 block content
-  ul(class='nav nav-tabs')
-    li(class='active'): a(href='#home', data-toggle='tab') YAML
-    li: a(href='#json', data-toggle='tab') JSON
-    li: a(href='#xml', data-toggle='tab') XML
+  div.container
+    ul(class='nav nav-tabs')
+      li(class='active'): a(href='#home', data-toggle='tab') YAML
+      li: a(href='#json', data-toggle='tab') JSON
+      li: a(href='#xml', data-toggle='tab') XML
 
-  div(class='tab-content')
-    div(class='tab-pane active', id='home'): pre: code= data.yaml
-    div(class='tab-pane', id='json'): pre: code= data.json
-    div(class='tab-pane', id='xml'): pre: code= data.xml
+    div(class='tab-content')
+      div(class='tab-pane active', id='home'): pre: code= data.yaml
+      div(class='tab-pane', id='json'): pre: code= data.json
+      div(class='tab-pane', id='xml'): pre: code= data.xml

views/default.jade

@@ -1,41 +1,49 @@
 extends layout.jade
 
 block content
-  if (data)
-    ul(class='nav nav-pills')
-      li.active: a(href='#yaml', data-toggle='tab') YAML
-      li: a(href='#json', data-toggle='tab') JSON
-      li: a(href='#xml', data-toggle='tab') XML
+  div.container
+    if (!data)
+      div.alert.alert-warning No data
 
-    hr
+    else
+      div#preview
+        button(class='btn btn-default btn-clipboard', data-clipboard-target='#{target}'): i.fa.fa-copy
 
-    p calling <code>http://#{hostname}#{path}</code> with an <code>Accept</code> header with the value: &nbsp;
-      select
-        for value, key in {yaml: 'application/x-yaml', json: 'application/json', 'xml': 'application/xml'}
-          option(value= key)= value
-      |  will result in the content below:
+        ul.nav.nav-tabs
+          li.active: a(href='#json', data-toggle='tab') JSON
+          li: a(href='#yaml', data-toggle='tab') YAML
+          li: a(href='#xml', data-toggle='tab') XML
 
-    div(class='tab-content')
-      div(id='yaml').tab-pane.active.fade.in
-        pre: code= data.yaml
+        div.tab-content
+          div(id='json').tab-pane.active.fade.in
+            pre: code= data.json
 
-      div(id='json').tab-pane.fade
-        pre: code= data.json
+          div(id='yaml').tab-pane.fade
+            pre: code= data.yaml
 
-      div(id='xml').tab-pane.fade
-        pre: code= data.xml
+          div(id='xml').tab-pane.fade
+            pre: code= data.xml
 
-    p for more info, review the&nbsp;
-      a(href='/docs#' + path.replace('/', '-') + '-') documentation
+    br
 
-    //- hr
-    //- p Try this request with
+    p: em You're viewing the HTML output, try calling this endpoint with an #[code Accept] header with one of the values: #[code application/x-yaml], #[code application/json], #[code application/xml]
 
 block scripts
   script(type='text/javascript').
-    $('select').on('click', function () {
-      event.preventDefault();
-
-      $('[href=#' + $(this).val() + ']').tab('show')
+    $(function() {
+      ZeroClipboard.config({
+        swfPath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf',
+        forceHandCursor: true,
+        trustedDomains: [window.location.host, "cdnjs.cloudflare.com"]
+      });
+
+      new ZeroClipboard($('.btn-clipboard'));
+
+      // select first tab
+      $('.nav-tabs a:first').tab('show');
+
+      // highlight the code
+      $('.tab-content pre code').each(function (i, block) {
+        hljs.highlightBlock(block);
+      });
     });
-