Proper rendering according to req.client

Start using a commonjs fork of Sanitize.js

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "deps/Sanitize.js"]
 	path = deps/Sanitize.js
-	url = https://github.com/gbirke/Sanitize.js.git
+	url = https://github.com/thedod/Sanitize.js.git
 [submodule "deps/jwysiwyg"]
 	path = deps/jwysiwyg
 	url = https://github.com/akzhan/jwysiwyg.git

lib/lists.js

@@ -8,6 +8,7 @@ exports.homepage = function (head, req) {
 
     start({code: 200, headers: {'Content-Type': 'text/html'}});
 
+    var title = config.site_name;
     // fetch all the rows
     var row, rows = [];
     while (row = getRow()) {
@@ -19,8 +20,14 @@ exports.homepage = function (head, req) {
         rows: rows
     });
 
-    return {title: config.site_name, config: config, content: content};
-
+    if (req.client) {
+        document.title = title;
+        $('#breadcrumbs').html('');
+        $('#content').html(content);
+        $('#actions').html(templates.render('blogposts_actions.html',req,{}));
+    } else {
+        return {title: title, config: config, content: content, breadcrumbs:''};
+    };
 };
 
 exports.carousel = function (head, req) {

lib/sanitize

@@ -0,0 +1 @@
+../deps/Sanitize.js/lib

lib/shows.js

@@ -4,24 +4,47 @@
 
 var templates = require('kanso/templates'),
     forms = require('kanso/forms'),
+    utils = require('kanso/utils'),
     config = require('./config'),
     types = require('./types');
 
 exports.not_found = function (doc, req) {
+    start({code: 200, headers: {'Content-Type': 'text/html'}});
     return {
         title: config.site_name+" - Not found",
-        content: templates.render('404.html', req, {})
+        content: templates.render('404.html', req, {}),
+        breadcrumbs: 'Not found'
     };
 };
 
 exports.blogpost = function (doc, req) {
+  var title = config.site_name+' - '+doc.title;
+  var breadcrumbs = utils.escapeHTML(doc.title);
+  start({code: 200, headers: {'Content-Type': 'text/html'}});
+  if (req.client) {
+    document.title = title;
+    $('#breadcrumbs').html(breadcrumbs);
+    var cfg = require('./sanitize/sanitize_cfg_relaxed').Config;
+    // Add rel and target to all links
+    cfg.add_attributes={a:{rel:'nofollow', target:'_blank'}};
+    var Sanitize = require('./sanitize/sanitize').Sanitize;
+    var stz = new Sanitize(cfg);
+    // We need to defuse script tags before sanitizing, because $('<script/>') *would* execute
+    $('#content').html(stz.clean_node(
+        $('<span>'+doc.text.replace(/<script/gi,'&lt;script')+'</span>').get(0)
+    ));
+    $('#actions').html(templates.render('blogpost_actions.html',req,doc));
+  } else {
     doc.escaped = escape(doc.text);
-    doc.site_name = config.site_name;
     var content = templates.render('blogpost.html', req, doc);
-    return {title:config.site_name+' - '+doc.title, config: config, content:content}
+    return {title:title, config: config, content:content, breadcrumbs:breadcrumbs}
+  };
 };
 
 exports.add_blogpost = function (doc, req) {
+    var title = config.site_name + ' - Add new blogpost';
+    var breadcrumbs = 'Add new blogpost';
+    start({code: 200, headers: {'Content-Type': 'text/html'}});
     var form = new forms.Form(types.blogpost, null, {
         exclude: ['created']
     });
@@ -33,11 +56,26 @@ exports.add_blogpost = function (doc, req) {
         config: config,
         form: form.toHTML(req)
     });
-
-    return {title: config.site_name + ' - Add new blogpost', config: config, content: content};
+    if (req.client) {
+        document.title = title;
+        $('#content').html(content);
+        $('#breadcrumbs').html(breadcrumbs);
+        $('#actions').html(''); 
+	$('#id_title').focus();
+	$('#id_text').wysiwyg({
+                controls:window.wysiwyg_controls,
+                css: {direction: config.rtl ? 'rtl' : 'ltr'},
+                initialContent:''
+        });
+    } else {
+        return {title: title, config: config, content: content, breadcrumbs:breadcrumbs};
+    };
 };
 
 exports.edit_blogpost = function (doc, req) {
+    var title = config.site_name + ' - Edit blogpost - '+doc.title;
+    var breadcrumbs = '<a href="'+utils.getBaseURL(req)+'/'+doc._id+'">'+utils.escapeHTML(doc.title)+'</a> Edit';
+    start({code: 200, headers: {'Content-Type': 'text/html'}});
     var form = new forms.Form(types.blogpost, doc, {
         exclude: ['created']
     });
@@ -50,6 +88,18 @@ exports.edit_blogpost = function (doc, req) {
         config: config,
         form: form.toHTML(req)
     });
-
-    return {title: config.site_name + ' - Edit blogpost - '+doc.title, config: config, content: content};
+    if (req.client) {
+        document.title = title;
+        $('#breadcrumbs').html(breadcrumbs);
+        $('#content').html(content);
+        $('#actions').html(''); 
+	$('#id_title').focus();
+	$('#id_text').wysiwyg({
+                controls:window.wysiwyg_controls,
+                css: {direction: config.rtl ? 'rtl' : 'ltr'},
+                initialContent:''
+        });
+    } else {
+        return {title: title, config: config, content: content, breadcrumbs:breadcrumbs};
+    };
 };

static/jwysiwyg

@@ -0,0 +1 @@
+../deps/jwysiwyg

static/style-rtl.css

@@ -456,12 +456,12 @@ td.actions .button {
     border: 0;
 }
 
-#post-body {
+#content {
     max-width:600px;
     padding:8px;
 }
 
-#post-body img {
+#content img {
     clear: both;
     float: right;
     border: none;

static/style.css

@@ -453,12 +453,12 @@ td.actions .button {
     border: 0;
 }
 
-#post-body {
+#content {
     max-width:600px;
     padding:8px;
 }
 
-#post-body img {
+#content img {
     clear: both;
     float: left;
     border: none;

templates/404.html

@@ -1 +1 @@
-<h1>404 - Not Found :(</h1>
+<h3>404 - Not Found :(</h3>

templates/base.html

@@ -4,18 +4,25 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" type="text/css" href="{baseURL}/static/{?config.rtl}style-rtl.css{:else}style.css{/config.rtl}" /> 
     {#config.extra_css}<link rel="stylesheet" type="text/css" href="{baseURL}/static/{.}" />{~n}{/config.extra_css} 
-    <script src="{baseURL}/static/js/jquery-1.6.2.js"></script>
-    <script src="{baseURL}/kanso.js"></script>
     <title>{title}</title> 
   </head> 
   <body>
     <a target="_blank" href="http://github.com/thedod/kansoblog"><img id="github-ribbon" src="{baseURL}/static/images/{?config.rtl}github-ribbon-rtl.png{:else}github-ribbon.png{/config.rtl}" alt="Fork me on GitHub"></a>
     {>"session.html"/}
-    <h1 class="site name"><a href="{baseURL}/">{config.site_name}</a></h1>
+    <h1 class="site name"><a href="{baseURL}/">{config.site_name}</a> <span id="breadcrumbs">{breadcrumbs|s}</span></h1>
+    {>"flashmessages.html"/}
     <div id="content">
       {content|s}
     </div>
+    <div id="actions"></div>
+    <script src="{baseURL}/static/js/jquery-1.6.2.js"></script>
     <script src="{baseURL}/static/js/json2.js"></script>
-    <script src="{baseURL}/static/js/jquery.simplemodal-1.4.1.js"></script>
+    <link rel="stylesheet" href="{baseURL}/static/jwysiwyg/jquery.wysiwyg.css" type="text/css"/>
+    <script type="text/javascript" src="{baseURL}/static/jwysiwyg/jquery.wysiwyg.js"></script>
+    <script type="text/javascript" src="{baseURL}/static/jwysiwyg/controls/wysiwyg.link.js"></script>
+    <script type="text/javascript" src="{baseURL}/static/jwysiwyg/controls/wysiwyg.image.js"></script>
+    <script type="text/javascript" src="{baseURL}/static/wysiwyg_controls.js"></script>
+    <script type="text/javascript" src="{baseURL}/static/js/jquery.simplemodal-1.4.1.js"></script>
+    <script type="text/javascript" src="{baseURL}/kanso.js"></script>
   </body>
 </html>

templates/blogpost.html

@@ -1,29 +1,10 @@
-<script src="{baseURL}/static/js/sanitize_js/sanitize.js"></script>
-<script src="{baseURL}/static/js/sanitize_js/sanitize/config/relaxed.js"></script>
-<script type="text/javascript">
-    // Add nofollow and _blank to all links coming from user input
-    Sanitize.Config.RELAXED.add_attributes={a:{rel:'nofollow', target:'_blank'}};
-</script>
-
-<h1>{title}</h1>
 <div id="post-body">
 <img src="{baseURL}/static/images/spinner-small.gif">
 <noscript>
 <h3 style="direction:ltr">Html-quoted content (turn javascript on to view sanitized html):</h3>
 <p style="direction:ltr">{text}</p>
 </noscript>
-</div>
 <script type="text/javascript">
-$(function() {
-    $('#post-body').html(new Sanitize(Sanitize.Config.RELAXED).clean_node(
-        $('<span>'+unescape('{escaped}').replace(/<script/gi,'&lt;script')+'</span>').get(0)
-    ));
-});
+    window.escaped_post='{escaped|s}';
 </script>
-
-<div id="actions">
-    <form method="POST" action="{basurl}/delete/{_id}">
-        <a href="{baseURL}/edit/{_id}">Edit</a>
-        <input type="submit" value="Delete">
-    </form>
 </div>

templates/blogpost_actions.html

@@ -0,0 +1,6 @@
+<div id="actions">
+    <form method="POST" action="{basurl}/delete/{_id}">
+        <a href="{baseURL}/edit/{_id}">Edit</a>
+        <input type="submit" value="Delete">
+    </form>
+</div>

templates/blogpost_form.html

@@ -1,25 +1,6 @@
-<h1><a href="{baseURL}/{id}">{form_title}</a></h1>
-{>"flashmessages.html"/}
-<link rel="stylesheet" href="{baseURL}/static/jwysiwyg/jquery.wysiwyg.css" type="text/css"/>
-<script type="text/javascript" src="{baseURL}/static/jwysiwyg/jquery.wysiwyg.js"></script>
-<script type="text/javascript" src="{baseURL}/static/jwysiwyg/controls/wysiwyg.link.js"></script>
-<script type="text/javascript" src="{baseURL}/static/jwysiwyg/controls/wysiwyg.image.js"></script>
-<script type="text/javascript" src="{baseURL}/static/wysiwyg_controls.js"></script>
-
 <form method="POST" action="">
   <table>
     {form|s}
   </table>
   <input type="submit" value="{button_label}" />
 </form>
-
-<script type="text/javascript">
-$(function() {
-	$('#id_text').wysiwyg({
-                controls:window.wysiwyg_controls,
-                {?config.rtl}css: {direction:'rtl'},{/config.rtl}
-                initialContent:''
-        });
-	$('#id_title').focus();
-});  
-</script>

templates/blogposts.html

@@ -7,7 +7,3 @@
   {:else}
   <p>No blog posts</p>
 {/rows}
-
-<div id="actions">
-<a href="{baseURL}/add">Add new</a>
-</div>

templates/blogposts_actions.html

@@ -0,0 +1 @@
+<a href="{baseURL}/add">Add new</a>