From 65b3ea7a36e3a3f9d2a0552538cc020448d1db2e Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Sat, 8 Apr 2017 23:53:36 -0400
Subject: [PATCH] Replace pug templating with mustache

Resolves #1
---
 package.json                    |  7 ++++---
 player.js                       | 19 ++++++++++++++-----
 source/templates/base.mustache  | 22 ++++++++++++++++++++++
 source/templates/default.pug    | 22 ----------------------
 source/templates/homepage.pug   | 13 -------------
 source/templates/index.mustache | 11 +++++++++++
 source/templates/log.mustache   |  6 ++++++
 source/templates/log.pug        |  4 ----
 static/jukebox.js               |  3 +--
 9 files changed, 58 insertions(+), 49 deletions(-)
 create mode 100644 source/templates/base.mustache
 delete mode 100644 source/templates/default.pug
 delete mode 100644 source/templates/homepage.pug
 create mode 100644 source/templates/index.mustache
 create mode 100644 source/templates/log.mustache
 delete mode 100644 source/templates/log.pug
diff --git a/package.json b/package.json
index 4b1b0f4..425df91 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,10 @@
     "express": "^4.14.0",
     "glob": "^7.1.1",
     "morgan": "^1.7.0",
-    "nodemon": "^1.9.2",
-    "pug": "^2.0.0-beta11",
-    "stylus": "^0.54.5",
+    "mustache": "^2.3.0",
     "ws": "^2.2.2"
+  },
+  "devDependencies": {
+    "nodemon": "^1.11.0"
   }
 }
diff --git a/player.js b/player.js
index 9eecdf9..9de1f6e 100644
--- a/player.js
+++ b/player.js
@@ -8,7 +8,9 @@ const player = spawn(config.mpg321[0], config.mpg321.slice(1));
 
 const express = require('express');
 const logger = require('morgan')
-const pug = require('pug');
+const mustache = require('mustache');
+
+const readFileSync = require('fs').readFileSync;
 
 var app = express();
 var server = require('http').createServer();
@@ -17,8 +19,12 @@ const WebSocket = require('ws');
 const WebSocketServer = WebSocket.Server;
 var wss = new WebSocketServer({server: server});
 
-var template = pug.compileFile(__dirname + '/source/templates/homepage.pug'),
-    log_tpl = pug.compileFile(__dirname + '/source/templates/log.pug');
+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 = [];
 
@@ -81,7 +87,7 @@ function appendLog(message) {
   play_log.unshift(message);
 
   var data = {
-    html: log_tpl({ play_log: play_log }),
+    html: mustache.render(log_tpl, { play_log: play_log }),
     tag: last_tag
   };
 
@@ -132,11 +138,14 @@ app.use(express.static(__dirname + '/static'))
 
 app.get('/', function (req, res, next) {
   try {
-    var html = template({
+    var html = mustache.render(base_tpl, {
       title: 'Home'
       , last_tag: last_tag
       , play_log: play_log
       , config: config
+    }, {
+      content: index_tpl
+      , log: log_tpl
     })
     res.send(html)
   } catch (e) {
diff --git a/source/templates/base.mustache b/source/templates/base.mustache
new file mode 100644
index 0000000..bce2f62
--- /dev/null
+++ b/source/templates/base.mustache
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+
+<head>
+    <title>jukebox.stop.wtf</title>
+    <link rel=stylesheet href=/css/index.css>
+</head>
+
+<body>
+    <div class=header>
+        <h1 class=page-title>jukebox.stop.wtf</h1>
+    </div>
+    <div class="main-content">
+        {{> content}}
+    </div>
+    <div class="footer">
+        <p>made with love by annika</p>
+    </div>
+    <script src="/jukebox.js"></script>
+</body>
+
+</html>
diff --git a/source/templates/default.pug b/source/templates/default.pug
deleted file mode 100644
index 84f1030..0000000
--- a/source/templates/default.pug
+++ /dev/null
@@ -1,22 +0,0 @@
-doctype html
-html
-  head
-    link(rel='stylesheet', href='/css/index.css')
-    title jukebox.stop.wtf
-  body
-    .header
-      h1.page-title jukebox.stop.wtf
-
-    ul.nav
-      li: a(href='/') Home
-      li: a(href='#news') News
-      li: a(href='#about') About
-      li: a(href='#contact') Contact
-
-    .main-content
-      block content
-
-    .footer
-      p made with love by annika
-
-    script(src='/jukebox.js')
diff --git a/source/templates/homepage.pug b/source/templates/homepage.pug
deleted file mode 100644
index d7e9b2f..0000000
--- a/source/templates/homepage.pug
+++ /dev/null
@@ -1,13 +0,0 @@
-extend default
-
-block content
-  p
-    | Last tag seen:
-    span#last_tag #{last_tag}
-  ul#play-log
-    include log
-
-    script.
-      var jukebox = {
-        port: #{config.port}
-      }
diff --git a/source/templates/index.mustache b/source/templates/index.mustache
new file mode 100644
index 0000000..430fdd1
--- /dev/null
+++ b/source/templates/index.mustache
@@ -0,0 +1,11 @@
+<p>Last tag seen: <span id=last-tag>{{ last_tag }}</p>
+
+<ul id=play-log>
+    {{> log}}
+</ul>
+
+<script>
+var jukebox = {
+    port: {{ config.port }}
+};
+</script>
diff --git a/source/templates/log.mustache b/source/templates/log.mustache
new file mode 100644
index 0000000..48e4cc8
--- /dev/null
+++ b/source/templates/log.mustache
@@ -0,0 +1,6 @@
+{{#play_log}}
+    <li>{{ . }}</li>
+{{/play_log}}
+{{^play_log}}
+    <li>nothing in the log</li>
+{{/play_log}}
diff --git a/source/templates/log.pug b/source/templates/log.pug
deleted file mode 100644
index ecf5c00..0000000
--- a/source/templates/log.pug
+++ /dev/null
@@ -1,4 +0,0 @@
-for tag in play_log
-  li= tag
-else
-  li nothing in the log
diff --git a/static/jukebox.js b/static/jukebox.js
index 44b4d7d..0166677 100644
--- a/static/jukebox.js
+++ b/static/jukebox.js
@@ -2,7 +2,7 @@ window.onload = function() {
     console.log('window.onload');
 
     var play_log = document.getElementById('play-log');
-    var last_tag = document.getElementById('last_tag');
+    var last_tag = document.getElementById('last-tag');
 
     function updateLog(data) {
         last_tag.innerHTML = data.tag;
@@ -12,7 +12,6 @@ window.onload = function() {
     var host = window.document.location.host.replace(/:.*/, '');
     var ws = new WebSocket('ws://' + host + ':' + jukebox.port);
     ws.onmessage = function (event) {
-        console.log(event.data);
         updateLog(JSON.parse(event.data));
     };
 
