Permalink
Browse files

Fix the example

  • Loading branch information...
1 parent 5afb50e commit b5e14e9bd148cba5f8a1cb508cfe59ae1d7ffcd6 @skerit committed Sep 22, 2013
View
@@ -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.
View
@@ -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) {
View
@@ -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",
View
@@ -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);
@@ -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>
View
@@ -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') %>
+<% } %>
@@ -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-->
@@ -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>
View
No changes.
View
@@ -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>
View
@@ -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') %>
View
@@ -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') %>
@@ -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') %>
+<% } %>
@@ -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>
@@ -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') %>
Oops, something went wrong.

0 comments on commit b5e14e9

Please sign in to comment.