Node Tutorial Part 10
Welcome to part 10 of Let’s Make a Web App, a tutorial series about building a web app with Node. This series will walk you through the major areas you’ll need to face when building your own applications. These tutorials are tagged with lmawa.
Previous tutorials:
- Part 1: Introduction
- Part 2: Installation and Skeleton App, source code commit: 4ea936b
- Part 3: RESTful Methods and Testing, source code commit: 39e66cb
- Part 4: Templates, Partials, Creating and Editing Documents, source code commit: f66fdb
- Part 5: Authentication, Sessions, Access Control Middleware, source code commit: 03fe9b
- Part 6: Interface Basics, source code commit: f2261c
- Part 7: Node Library Versions, Jade Tricks, Error Pages, source code commit: 929f5
- Part 8: Flash Messages and Helpers, source code commit: 841a49
- Part 9: Remember Me, source code commit: 1904c
Markdown
It would be nice if our notepad app allowed some form of markup. There are a few markdown libraries available through npm, but markdown seems to be quite popular.
Install it like this:
npm install markdown
It’s easy to use:
var markdown = require('markdown').markdown;
markdown.toHTML('# Welcome\n\nThis is markdown');
// => '<h1>Welcome</h1>\n\n<p>This is markdown</p>'
I updated Nodepad’s dependencies to include this in the package.json file:
// ...
"dependencies": {
"express": "1.0.0",
"mongoose": "0.0.4",
"connect-mongodb": "0.1.1",
"jade": "0.6.0",
"markdown": "0.2.0"
}
Then near the top of app.js I added the require:
var express = require('express@1.0.0'),
app = module.exports = express.createServer(),
mongoose = require('mongoose@0.0.4').Mongoose,
mongoStore = require('connect-mongodb@0.1.1'),
markdown = require('markdown').markdown,
// ...
I’ve added a html format option for GET /documents/:id.html which contains the markdown renderer:
// Read document
app.get('/documents/:id.:format?', loadUser, function(req, res, next) {
Document.findById(req.params.id, function(d) {
if (!d) return next(new NotFound('Document not found'));
switch (req.params.format) {
case 'json':
res.send(d.__doc);
break;
case 'html':
res.send(markdown.toHTML(d.data));
break;
default:
res.render('documents/show.jade', {
locals: { d: d, currentUser: req.currentUser }
});
}
});
});
Visiting a valid document ID with ‘.html’ will now render HTML using markdown. This is easy to access using a quick $.get call. I’ve added another link next to the Save button (#html-button) which toggles the rendered markdown view in a div:
$('#html-button').click(function() {
var container = $('#html-container');
if (container.is(':visible')) {
container.html('').hide();
$('#html-button').removeClass('active');
} else {
$('#save-button').click();
$('#html-button').addClass('active');
var id = $('#document-list .selected').itemID();
$.get('/documents/' + id + '.html', function(data) {
// Saved, will return JSON
container.html(data).show();
});
}
});
This uses jQuery’s is() to detect if the markdown container is visible, and adds a class name to the button which can be styled to indicate that the markdown display can be toggled. It looks like this:
Delete Button
The layout has changed since early on in this series, so I’ve changed the delete code to work with the new layout. It just uses the same jQuery with an updated URL for the $.post.
Conclusion
Adding markdown or textile support to Node apps is pretty easy now there are a few easily installable modules through npm. If you want to check the commit for this part of the project, it’s available at 11d33e1.
