diff --git a/jukebox/views.js b/jukebox/views.js new file mode 100644 index 0000000..95e21e0 --- /dev/null +++ b/jukebox/views.js @@ -0,0 +1,24 @@ +"use strict"; + +const mustache = require('mustache'); +const readFileSync = require('fs').readFileSync; + +class View { + constructor(base_dir, path) { + this.path = base_dir + '/templates/' + path; + this.template = readFileSync(this.path, {encoding: 'utf8'}) + mustache.parse(this.template) + } + + render(vars, partials) { + return mustache.render(this.template, vars, partials); + } +} + +module.exports = function(base_dir) { + return { + base: new View(base_dir, 'base.mustache') + , index: new View(base_dir, 'index.mustache') + , log: new View(base_dir, 'log.mustache') + }; +} diff --git a/player.js b/player.js index df8c7b9..cfde805 100644 --- a/player.js +++ b/player.js @@ -3,11 +3,10 @@ const config = require('./config.json') const glob = require('glob'); +const views = require('./jukebox/views')(__dirname); + const express = require('express'); const logger = require('morgan') -const mustache = require('mustache'); - -const readFileSync = require('fs').readFileSync; const children = require('./jukebox/children'); @@ -18,13 +17,6 @@ const WebSocket = require('ws'); const WebSocketServer = WebSocket.Server; var wss = new WebSocketServer({server: server}); -var base_tpl = readFileSync(__dirname + '/source/templates/base.mustache', {encoding: 'utf8'}); -var index_tpl = readFileSync(__dirname + '/source/templates/index.mustache', {encoding: 'utf8'}); -var log_tpl = readFileSync(__dirname + '/source/templates/log.mustache', {encoding: 'utf8'}); - -mustache.parse(index_tpl), -mustache.parse(log_tpl); - var play_log = []; children.init(config); @@ -81,7 +73,7 @@ function appendLog(message) { play_log.unshift(message); var data = { - html: mustache.render(log_tpl, { play_log: play_log }), + html: views.log.render({ play_log: play_log }), tag: last_tag }; @@ -114,14 +106,14 @@ app.use(express.static(__dirname + '/static')) app.get('/', function (req, res, next) { try { - var html = mustache.render(base_tpl, { + var html = views.base.render({ title: 'Home' , last_tag: last_tag , play_log: play_log , config: config }, { - content: index_tpl - , log: log_tpl + content: views.index.template + , log: views.log.template }) res.send(html) } catch (e) { diff --git a/source/stylesheets/index.styl b/source/stylesheets/index.styl deleted file mode 100644 index a8b2505..0000000 --- a/source/stylesheets/index.styl +++ /dev/null @@ -1,56 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,700') - -* - margin 0 - padding 0 - box-sizing border-box - -body - font-family 'Source Code Pro', monospace - -.header - background url('https://images.unsplash.com/photo-1451337516015-6b6e9a44a8a3?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') - background-position center - - .page-title - font-weight 200 - font-size 80px - text-align center - padding 20px 100px - text-transform uppercase - color #fff - -.nav - background #000 - text-align center - - li - display inline-block - - a - display inline-block - padding 20px - color #fff - text-decoration none - - &:hover - background-color #3AB795 - text-decoration underline - -.main-content - margin 50px auto - max-width 600px - - p - line-height 1.6 - margin-bottom 1.7em - -.footer - margin 50px auto - max-width 600px - border-top 1px solid #444 - padding 20px 0 - - p - color #444 - font-size 12px diff --git a/source/templates/base.mustache b/templates/base.mustache similarity index 100% rename from source/templates/base.mustache rename to templates/base.mustache diff --git a/source/templates/index.mustache b/templates/index.mustache similarity index 100% rename from source/templates/index.mustache rename to templates/index.mustache diff --git a/source/templates/log.mustache b/templates/log.mustache similarity index 100% rename from source/templates/log.mustache rename to templates/log.mustache