Fix the example

11ways · Sep 22, 2013 · b5e14e9 · b5e14e9
1 parent 5afb50e
commit b5e14e9
Show file tree

Hide file tree

Showing 16 changed files with 235 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,23 @@
 # Hawkejs
-A Node.js templating engine built upon TJ Holowaychuk's EJS.
+A Node.js templating engine built upon TJ Holowaychuk's ejs.
 
 ## Installation
 
     $ npm install hawkejs
 
-## Why did you fork EJS?
+## Example
 
-I didn't. EJS is a dependency of Hawkejs.
+You can check out the example in the test/ subfolder.
+It's quite ugly and not at all feature complete, but you can see it works.
 
-In essence, Hawkejs is a wrapper around EJS that adds some features (like blocks) as simple function helpers.
-
-Original EJS templates can be used as Hawkejs templates, and the other way around (though Hawkejs functions should be removed, then)
+    $ node test/index.js
 
 ## What other dependencies are there?
 
+* ejs
+
+The rendering of the templates is done by ejs
+
 * Cheerio
 
 For DOM manipulation. It's lightning fast in comparison to server-side jQuery or JSDOM.

diff --git a/lib/hawkejs-server.js b/lib/hawkejs-server.js
@@ -294,10 +294,10 @@ module.exports = function (hawkejs) {
 	 * @since    0.0.1
 	 * @version  0.0.8
 	 *
-	 * @param    {object}   app         The express app
-	 * @param    {object}   express
-	 * @param    {array}    source      Paths where views can be found
-	 * @param    {string}   filepath    The serverpath where we can store the file
+	 * @param    {Object}   app         The express app
+	 * @param    {Object}   express
+	 * @param    {Array}    source      Paths where views can be found
+	 * @param    {String}   filepath    The serverpath where we can store the file
 	 */
 	hawkejs.enableClientSide = function enableClientSide (app, express, source, filepath) {
 

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
 		"mkdirp": "0.3.x"
 	},
 	"devDependencies": {
-		"bootstrap": "https://github.com/twbs/bootstrap/tarball/v2.2.2",
+		"bootstrap": "https://github.com/twbs/bootstrap/tarball/v2.3.2",
 		"less-middleware": "0.1.x",
 		"benchmark": "1.0.x",
 		"microtime": "0.3.x",

diff --git a/test/index.js b/test/index.js
@@ -1,10 +1,8 @@
-var path = require('path');
-var express = require('express');
-var lessmw = require('less-middleware')
-var hawkejs = require('../lib/hawkejs');
-
-// Initialize express
-var app = express();
+var path    = require('path'),
+    express = require('express'),
+    lessmw  = require('less-middleware'),
+    hawkejs = require('../lib/hawkejs'),
+    app     = express();
 
 // Use hawkejs as our template engine, map it to the .ejs extension
 app.engine('ejs', hawkejs.__express);
@@ -13,13 +11,17 @@ app.engine('ejs', hawkejs.__express);
 hawkejs._debug = true;
 
 // Add client side suport
-hawkejs.enableClientSide(path.join(__dirname, 'js'), 'js');
+hawkejs.enableClientSide(
+    app,     // The express app
+    express, // Express itself
+    path.join(__dirname, 'templates'), // Where the original view files are
+    path.join(__dirname, 'js')         // Where we can store them for the client
+);
 
 // Express configurations
 app.configure(function(){
 
 	var bootstrapPath = path.join(__dirname, '..', 'node_modules', 'bootstrap');
-	console.log(bootstrapPath);
 	app.set('views', __dirname + '/templates');
 	app.set('view engine', 'ejs');
 	app.use(express.favicon());
@@ -38,7 +40,6 @@ app.configure(function(){
 	app.use('/img', express.static(path.join(bootstrapPath, 'img')));
 	app.use('/js/bootstrap', express.static(path.join(bootstrapPath, 'js')));
 
-
 	app.use(lessmw({src    : path.join(__dirname, 'less'),
 					paths  : [path.join(bootstrapPath, 'less')],
 					dest   : path.join(__dirname, 'css'),
@@ -56,28 +57,34 @@ app.configure(function(){
 // Sample "database records"
 var db = {
 	20: {
+		id: 20,
 		title: "Heading 20",
 		text: "Standard heeft de openingswedstrijd van de 24ste speeldag in onze vaderlandse competitie gewonnen. De Luikenaars klopten in eigen huis KV Kortrijk met 2-0, Michy Batshuayi blonk uit met een doelpunt...",
 	},
 	21: {
+		id: 21,
 		title: "Scores injured in clashes as Egypt marks revolution",
 		text: "Police fire teargas at stone-throwing protesters as supporters and opponents of President Mohamed Morsy clash in Cairo on the second anniversary of Egypt's revolution"
 	},
 	22: {
+		id: 22,
 		title: "Unlocking new smartphone becomes harder Saturday",
 		text: "Smartphones purchased after Saturday can't be legally unlocked without permission from the carrier, according to a recent ruling by the Library of Congress."
+	},
+	47: {
+		id: 47,
+		title: "Newsitem 47",
+		text: "Newsitem text 47"
 	}
 }
 
 app.get('/', function(req, res){
-  res.render('pages/index', {firstname: "Riza", lastname: "Hawkeye", newsitem: db[21]});
+	res.render('pages/index', {firstname: "Riza", lastname: "Hawkeye", newsitem: db[21]});
 });
 
 app.get('/news/:id', function(req, res){
-
 	var newsitem = db[req.params.id];
-
-  res.render('elements/image', {firstname: "Riza", lastname: "Hawkeye", newsitem: newsitem});
+	res.render('elements/image', {firstname: "Riza", lastname: "Hawkeye", newsitem: newsitem});
 });
 
 app.listen(3000);

diff --git a/test/js/elements/hero.ejs b/test/js/elements/hero.ejs
@@ -0,0 +1,3 @@
+<h1>Hello, world!</h1>
+<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
diff --git a/test/js/elements/image.ejs b/test/js/elements/image.ejs
@@ -0,0 +1,21 @@
+<% expands('pages/index') %>
+
+<% start('image') %>
+<% if(typeof newsitem !== 'undefined') { %>
+	<h2><%= newsitem.title %></h2>
+	<p><%= newsitem.text %></p>
+	<p><a class="btn" href="#">View details &raquo;</a></p>
+<% } else { %>
+	<p>This newsitem does not exist!
+<% } %>
+<% end('image') %>
+
+<% if (typeof newsitem !== 'undefined' && newsitem.id == 20) { %>
+	<% start('hero') %>
+		<h1>Hello again, world!</h1>
+		<p>This hero unit content is fetched from newsitem id 20,
+		   but the default will not come back unless 
+		   <% add_link('/', {title: 'the page with the default value is revisited'}) %>
+		</p>
+	<% end('hero') %>
+<% } %>
diff --git a/test/js/elements/sidebar.ejs b/test/js/elements/sidebar.ejs
@@ -0,0 +1,9 @@
+<div class="span3">
+	<div class="well sidebar-nav">
+		<ul class="nav nav-list">
+			<li class="nav-header">News</li>
+			<li><% add_link('/news/:id', {title: "Superboete voor wie niet komt opdagen in 'Het Spiegelpaleis'", match: {class: {parent: {class: 'active'}}}, urlvars: {id: 47}}) %></li>
+			<li><% add_link('/news/:id', {title: "Steven Van Herreweghe: 'We wisten dat het op de nieuwe zee woelig zou zijn'", match: {class: {parent: {class: 'active'}}}, urlvars: {id: 21}}) %></li>
+		</ul>
+	</div><!--/.well -->
+</div><!--/span-->
diff --git a/test/js/elements/topbar.ejs b/test/js/elements/topbar.ejs
@@ -0,0 +1,22 @@
+<div class="navbar navbar-inverse navbar-fixed-top">
+	<div class="navbar-inner">
+		<div class="container-fluid">
+			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</a>
+			<a class="brand" href="#">Hawkejs</a>
+			<div class="nav-collapse collapse">
+				<p class="navbar-text pull-right">
+					Logged in as <a href="#" class="navbar-link"><%= firstname %> <%= lastname %></a>
+				</p>
+				<ul class="nav">
+					<li><% add_link('/', {title: 'Home', match: {parent: {class: 'active'}}}) %></li>
+					<li><% add_link('/about', {title: 'About', match: {parent: {class: 'active'}}}) %></li>
+					<li><% add_link('/contact', {title: 'Contact', match: {parent: {class: 'active'}}}) %></li>
+				</ul>
+			</div><!--/.nav-collapse -->
+		</div>
+	</div>
+</div>
diff --git a/test/js/empty b/test/js/empty
diff --git a/test/js/layouts/base.ejs b/test/js/layouts/base.ejs
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title></title>
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<% style('/css/style.css') -%>
+		<% script('/hawkejs/vendor/history.js') -%>
+
+		<% script('/js/bootstrap/bootstrap-transition.js') -%>
+		<% script('/js/bootstrap/bootstrap-alert.js') -%>
+		<% script('/js/bootstrap/bootstrap-modal.js') -%>
+		<% script('/js/bootstrap/bootstrap-dropdown.js') -%>
+		<% script('/js/bootstrap/bootstrap-scrollspy.js') -%>
+		<% script('/js/bootstrap/bootstrap-tab.js') -%>
+		<% script('/js/bootstrap/bootstrap-tooltip.js') -%>
+		<% script('/js/bootstrap/bootstrap-popover.js') -%>
+		<% script('/js/bootstrap/bootstrap-button.js') -%>
+		<% script('/js/bootstrap/bootstrap-collapse.js') -%>
+		<% script('/js/bootstrap/bootstrap-carousel.js') -%>
+		<% script('/js/bootstrap/bootstrap-typeahead.js') -%>
+		<style type="text/css">
+			body {
+				padding-top: 60px;
+				padding-bottom: 40px;
+			}
+			.sidebar-nav {
+				padding: 9px 0;
+			}
+		</style>
+	</head>
+	<body>
+		<!-- Include all the content of elements/topbar into this template -->
+		<% implement('elements/topbar') %>
+		<% assign('main') %>
+	</body>
+</html>
diff --git a/test/js/layouts/body.ejs b/test/js/layouts/body.ejs
@@ -0,0 +1,19 @@
+<% expands('layouts/base') %>
+
+<% start('main') %>
+<div class="container-fluid">
+	<div class="row-fluid">
+
+		<!-- Include all the content of elements/sidebar into this template -->
+		<% implement('elements/sidebar') %>
+
+		<!-- 'content' blocks will be put in here -->
+		<% assign('content') %>
+
+	</div><!--/row-->
+	<hr>
+	<footer>
+		<p>&copy; Hawkejs 2013</p>
+	</footer>
+</div>
+<% end('main') %>
diff --git a/test/js/pages/index.ejs b/test/js/pages/index.ejs
@@ -0,0 +1,34 @@
+<% expands('layouts/body') %>
+
+<!--
+    Start the "content" block: any html (until end('content') is called) will be
+    captured. If any assign('content') calls are encountered, the html will be
+    placed there.
+-->
+<% start('content') %>
+<div class="span9">
+	<div class="hero-unit">
+		<!-- 'hero' blocks go here -->
+		<% assign('hero') %>
+			<h1>Hello, world!</h1>
+			<p>This is the default content for this hero unit</p>
+		<% assign_end('hero') %>
+		<!--
+		     You don't have to use assign_end, but when you do you can put
+		     default html between them
+		-->
+	</div>
+	<div class="row-fluid">
+		<div class="span4">
+			<% add_link('/news/:id', {class: "btn", title: "Previous", urlvars: {id: 20}}) %>
+		</div><!--/span-->
+		<div class="span4">
+			<% parse_element('elements/image', {deep: false}) %>
+			<% assign('image') %>
+		</div><!--/span-->
+		<div class="span4">
+			<% add_link('/news/:id', {class: "btn", title: "Next", urlvars: {id: 22}}) %>
+		</div><!--/span-->
+	</div><!--/row-->
+</div><!--/span-->
+<% end('content') %>
diff --git a/test/templates/elements/image.ejs b/test/templates/elements/image.ejs
@@ -1,7 +1,21 @@
 <% expands('pages/index') %>
 
 <% start('image') %>
-<h2><%= newsitem.title %></h2>
-<p><%= newsitem.text %></p>
-<p><a class="btn" href="#">View details &raquo;</a></p>
-<% end('image') %>
+<% if(typeof newsitem !== 'undefined') { %>
+	<h2><%= newsitem.title %></h2>
+	<p><%= newsitem.text %></p>
+	<p><a class="btn" href="#">View details &raquo;</a></p>
+<% } else { %>
+	<p>This newsitem does not exist!
+<% } %>
+<% end('image') %>
+
+<% if (typeof newsitem !== 'undefined' && newsitem.id == 20) { %>
+	<% start('hero') %>
+		<h1>Hello again, world!</h1>
+		<p>This hero unit content is fetched from newsitem id 20,
+		   but the default will not come back unless 
+		   <% add_link('/', {title: 'the page with the default value is revisited'}) %>
+		</p>
+	<% end('hero') %>
+<% } %>
diff --git a/test/templates/layouts/base.ejs b/test/templates/layouts/base.ejs
@@ -2,8 +2,8 @@
 <html>
 	<head>
 		<title></title>
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 		<% style('/css/style.css') -%>
-		<% script('//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js') -%>
 		<% script('/hawkejs/vendor/history.js') -%>
 
 		<% script('/js/bootstrap/bootstrap-transition.js') -%>
@@ -18,7 +18,6 @@
 		<% script('/js/bootstrap/bootstrap-collapse.js') -%>
 		<% script('/js/bootstrap/bootstrap-carousel.js') -%>
 		<% script('/js/bootstrap/bootstrap-typeahead.js') -%>
-
 		<style type="text/css">
 			body {
 				padding-top: 60px;
@@ -30,27 +29,8 @@
 		</style>
 	</head>
 	<body>
-
-    <!-- Include all the content of elements/topbar into this template -->
+		<!-- Include all the content of elements/topbar into this template -->
 		<% implement('elements/topbar') %>
-
-    <div class="container-fluid">
-      <div class="row-fluid">
-
-				<!-- Include all the content of elements/sidebar into this template -->
-				<% implement('elements/sidebar') %>
-
-				<!-- 'content' blocks will be put in here -->
-				<% assign('content') %>
-
-      </div><!--/row-->
-
-      <hr>
-
-      <footer>
-        <p>&copy; Company 2012</p>
-      </footer>
-
-    </div>
-  </body>
+		<% assign('main') %>
+	</body>
 </html>
diff --git a/test/templates/layouts/body.ejs b/test/templates/layouts/body.ejs
@@ -0,0 +1,19 @@
+<% expands('layouts/base') %>
+
+<% start('main') %>
+<div class="container-fluid">
+	<div class="row-fluid">
+
+		<!-- Include all the content of elements/sidebar into this template -->
+		<% implement('elements/sidebar') %>
+
+		<!-- 'content' blocks will be put in here -->
+		<% assign('content') %>
+
+	</div><!--/row-->
+	<hr>
+	<footer>
+		<p>&copy; Hawkejs 2013</p>
+	</footer>
+</div>
+<% end('main') %>