http://screen.cloudcmd.io

package.json

{
    "name": "cloudcmd-screen",
    "version": "0.1.0",
    "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
    "description": "Cloud Commander screens",
    "homepage": "http://status-ok.cloudcmd.io",
    "repository": {
        "type": "git",
        "url": "git://github.com/cloudcmd/screen.git"
    },
    "scripts": {
        "start": "screen.js"
    },
    "dependencies": {
        "express"   : "3.4.x",
        "util.io"   : "0.8.x"
    },
    "license": "MIT",
    "engines": {
        "node": ">=0.4.x"
    },
    "main": "app.js"
}

screen-app.js

(function() {
    'use strict';
    
    var http        = require('http'),
        express     = require('express'),
        fs          = require('fs'),
        Util        = require('util.io'),
        app         = express(),
        PORT        = 5337,
        NAME        = 'screen.json',
        TEMPLATE    = 'static/template.html';
    
    app.listen(PORT);
    console.log('port: ', PORT, '\npid: ', process.pid);
    
    app .use(express.static(__dirname))
        .use(function(req, res, next) {
            generate(req.url, function(error, data) {
                if (error)
                    res.status(404).send(error);
                else if (data)
                    res.send(data);
                else
                    res.status(404).sendfile('404.html');
            });
        });
    
    function generate(url, callback) {
        readFiles(function(error, files) {
            var name, json, data, tmpl, number, next, prev;
            
            if (!error) {
                json    = files[NAME];
                tmpl    = files[TEMPLATE];
                name    = Util.removeStr(url, '/');
                number  = json.indexOf(name);
                next    = json[number + 1];
                prev    = json[number - 1];
                
                if (number >= 0)
                    data = Util.render(tmpl, {
                        url         : name,
                        name        : name,
                        urlNext     : next,
                        urlPrev     : prev,
                        hiddenPrev  : next ? '' : 'hidden ',
                        hiddenNext  : prev ? '' : 'hidden '
                    });
            }
            
            callback(error, data);
        });
    }
    
    function readFiles(callback) {
        var count       = 0,
            errors      = null,
            allData     = {},
            func        = function(name, error, data) {
                ++count;
                
                if (!error) {
                    allData[name] = data;
                } else {
                    if (!errors)
                        errors = [];
                    
                    errors.push(error);
                }
                
                if (count === 2)
                    callback(errors, allData);
            };
        
        fs.readFile(NAME, 'utf8', function(error, data) {
            if (error)
                func(NAME, error);
            else
                parse(data, Util.bind(func, NAME));
        });
        
        fs.readFile(TEMPLATE, 'utf8', Util.bind(func, TEMPLATE));
    }
    
    function parse(data, callback) {
        var error,
            json = Util.parseJSON(data);
        
        if (!json)
            error = 'screens.json is empty';
        
        callback(error, json);
    }
    
})();

screen.json

[
    "cloudcmd-v0.8.0-menu.png",
    "cloudcmd-v0.8.0-edit.png",
    "cloudcmd-v0.8.0-console.png",
    "cloudcmd-v0.8.0-config.png",
    "cloudcmd-v0.6.0.png",
    "cloudcmd-v0.6.0-menu.png",
    "cloudcmd-v0.6.0-edit.png",
    "cloudcmd-v0.6.0-console.png",
    "cloudcmd-v0.6.0-config.png",
    "cloudcmd-v0.4.0.png",
    "cloudcmd-v0.4.0-menu.png",
    "cloudcmd-v0.4.0-edit.png",
    "cloudcmd-v0.4.0-console.png",
    "cloudcmd-v0.3.0.png",
    "cloudcmd-v0.3.0-edit.png",
    "cloudcmd-v0.3.0-console.png",
    "cloudcmd-v0.2.0-edit.png",
    "cloudcmd-v0.2.0-console.png"
]

template.html

<!doctype html>
<html>
    <head>
        <title>Cloud Commander Screens</title>
        <link rel="stylesheet" href="/static/style.css"></style>
        <link rel="stylesheet" href="/nprogress.css"></style>
    </head>
    <body class="hide-overflow">
        <div class="center mid-font">
            Screens of <a class="color no-link" href="http://cloudcmd.io">Cloud Commander</a>.
        </div>
        <div class="screens center">
            <img id="js-img" class="full-size" src="/{{ url }}"/>
            <div id="js-name" class="mid-font">{{ name }}</div>
        </div>
        
         <div id="js-nav" class="nav big-font center">
            <a class="{{ hiddenPrev }}color no-link" id="js-left" href="/{{ urlPrev }}/" title="left">←</a>
            <a class="{{ hiddenNext }}color no-link" id="js-right" href="/{{ urlNext }}/" title="right">→</a>
        </div>
        
        <script src="/static/script.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="/nprogress.js"></script>
    </body>
</html>