jdan#2 - stylesheet includes, with example

memoriestravel · Oct 7, 2012 · 44f5ea0 · 44f5ea0
1 parent b901f87
commit 44f5ea0
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 2 deletions.
diff --git a/lib/render.js b/lib/render.js
@@ -4,7 +4,9 @@ var fs = require('fs'),
 
 exports.render = function(json, options) {
   var renders = [];
+  var styles  = [];
 
+  // push the author slide
   if (json.author) {
     json.slides.push({
       "type": "author",
@@ -14,6 +16,20 @@ exports.render = function(json, options) {
     });
   }
 
+  // load default style
+  fs.readFile('styles/default.css', 'utf8', function(err, data) {
+    if (err) throw err;
+    styles.push(data);
+  });
+
+  // load user-defined styles
+  if (options.style) {
+    fs.readFile(options.style, 'utf8', function(err, data) {
+      if (err) throw err;
+      styles.push(data);
+    });
+  }
+
   json.slides.forEach(function(v, i) {
     fs.readFile('templates/_' + v.type + '.mustache', 'utf8', function(err, data) {
       if (err) throw err;
@@ -26,11 +42,15 @@ exports.render = function(json, options) {
 
   fs.readFile('templates/layout.mustache', 'utf8', function(err, data) {
     if (err) throw err;
-    var output = mustache.render(data, { slides: renders, title: json.name });
+    var output = mustache.render(data, { slides: renders, title: json.name, styles: styles });
     if (options.debug) {
       console.log(output);
     } else {
-      fs.writeFile('output.html', output);
+      if (options.output) {
+        fs.writeFile(options.output, output);
+      } else {
+        fs.writeFile('output.html', output);
+      }
     }
   });
 };
diff --git a/styles/dark.css b/styles/dark.css
@@ -0,0 +1,16 @@
+body {
+  background-color: #666;
+  color: #ddd;
+}
+
+#wrapper {
+  box-shadow: 3px 3px 3px #000;
+}
+
+section {
+  background-color: #333;
+}
+
+code {
+  background-color: #777;
+}
diff --git a/styles/default.css b/styles/default.css
@@ -0,0 +1,99 @@
+body {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #444;
+  background-color: #aaa;
+}
+
+#wrapper {
+  width: 850px;
+  height: 600px;
+  overflow: hidden;
+  margin: 80px auto 0 auto;
+  box-shadow: 3px 3px 3px #666;
+  background-color: #eee;
+}
+
+section.slide {
+  width: auto;
+  height: 540px;
+  padding: 30px;
+}
+
+section.slide.main h1.title {
+  font-size: 100px;
+  text-align: center;
+  margin-top: 150px;
+  margin-bottom: 30px;
+}
+
+section.slide.main h2.subtitle {
+  font-size: 30px;
+  text-align: center;
+  font-weight: 200;
+}
+
+section.slide.text h1.title {
+  font-size: 45px;
+  border-bottom: 1px solid #aaa;
+  margin: 0;
+  padding-bottom: 15px;
+}
+
+section.slide.text article.content {
+  padding-top: 20px;
+  font-weight: 200;
+  font-size: 32px;
+  line-height: 44px;
+}
+
+section.slide.list h1.title {
+  font-size: 45px;
+  border-bottom: 1px solid #aaa;
+  margin: 0;
+  padding-bottom: 15px;
+}
+
+section.slide.list ul.items {
+  padding: 20px 0 0 60px;
+  font-weight: 200;
+  font-size: 32px;
+  line-height: 44px;
+}
+
+section.slide.author h1.name {
+  font-size: 55px;
+  font-weight: 200px;
+  text-align: center;
+  margin-top: 135px;
+  margin-bottom: 30px;
+}
+
+section.slide.author h3 {
+  font-weight: 100;
+  text-align: center;
+  font-size: 30px;
+}
+
+a {
+  text-decoration: none;
+  color: #44a4dd;
+}
+
+a:hover {
+  color: #66b5ff;
+}
+
+code {
+  background-color: #ccc;
+}
+
+pre {
+  padding: 10px;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.hidden {
+  display: none;
+}
+
diff --git a/templates/layout.mustache b/templates/layout.mustache
@@ -2,6 +2,9 @@
 <head>
   <title>{{title}}</title>
   <style type="text/css">
+    {{#styles}}
+      {{{.}}}
+    {{/styles}}
   </style>
 </head>
 <body>