Move mustache templates into a module

This commit is contained in:
Annika Backstrom 2017-04-09 10:46:59 -04:00
parent 3d76205c80
commit 4b984491c3
6 changed files with 30 additions and 70 deletions

24
jukebox/views.js Normal file
View File

@ -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')
};
}

View File

@ -3,11 +3,10 @@ const config = require('./config.json')
const glob = require('glob'); const glob = require('glob');
const views = require('./jukebox/views')(__dirname);
const express = require('express'); const express = require('express');
const logger = require('morgan') const logger = require('morgan')
const mustache = require('mustache');
const readFileSync = require('fs').readFileSync;
const children = require('./jukebox/children'); const children = require('./jukebox/children');
@ -18,13 +17,6 @@ const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server; const WebSocketServer = WebSocket.Server;
var wss = new WebSocketServer({server: 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 = []; var play_log = [];
children.init(config); children.init(config);
@ -81,7 +73,7 @@ function appendLog(message) {
play_log.unshift(message); play_log.unshift(message);
var data = { var data = {
html: mustache.render(log_tpl, { play_log: play_log }), html: views.log.render({ play_log: play_log }),
tag: last_tag tag: last_tag
}; };
@ -114,14 +106,14 @@ app.use(express.static(__dirname + '/static'))
app.get('/', function (req, res, next) { app.get('/', function (req, res, next) {
try { try {
var html = mustache.render(base_tpl, { var html = views.base.render({
title: 'Home' title: 'Home'
, last_tag: last_tag , last_tag: last_tag
, play_log: play_log , play_log: play_log
, config: config , config: config
}, { }, {
content: index_tpl content: views.index.template
, log: log_tpl , log: views.log.template
}) })
res.send(html) res.send(html)
} catch (e) { } catch (e) {

View File

@ -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