View Single Notes, and Task Lists

Permalink are now created for notes.

GFM TaksLists are supported now. :) Thanks to
[this](markedjs/marked#587) PR.

Author: Lev Lazinskiy

app/main/views.py

@@ -1,5 +1,5 @@
 from datetime import datetime
-from flask import render_template, session, redirect, url_for, flash
+from flask import render_template, session, redirect, url_for, flash, abort
 from flask.ext.login import current_user, login_required
 
 from . import main
@@ -21,6 +21,14 @@ def index():
     else:
         return render_template('index.html')
 
+@main.route('/note/<int:id>')
+@login_required
+def note(id):
+    note = Note.query.get_or_404(id)
+    if current_user != note.author:
+        abort(403)
+    return render_template('note.html', notes=[note])
+
 @main.route('/edit/<int:id>', methods=['GET', 'POST'])
 @login_required
 def edit(id):

app/static/css/style.css

@@ -85,6 +85,10 @@ a.buttons {
   text-decoration: none;
 }
 
+li.task-list-item {
+  list-style-type: none;
+}
+
 /* Style for Releases Plugin */
 #releases {
   list-style-type: none;

app/static/js/braindump.js

@@ -5,7 +5,7 @@ editor.session.setMode("ace/mode/markdown");
 editor.getSession().setUseWrapMode(true);
 editor.setAutoScrollEditorIntoView(true);
 editor.setOption("minLines", 10);
-editor.setOption("maxLines", 100);
+editor.setOption("maxLines", 25);
 
 var textarea = $('textarea[id="body"]').hide();
 var textarea_html_label = $('label[for="body_html"]').hide();
@@ -21,7 +21,7 @@ editor.commands.addCommand({
     name: 'insert text',
     bindKey: {win: 'Ctrl-1',  mac: 'Ctrl-1'},
     exec: function(editor) {
-        editor.insert("*TODO ")
+        editor.insert("- [ ] TODO")
     },
     readOnly: true // false if this command should not apply in readOnly mode
 });

app/static/js/libs/marked.js

@@ -27,6 +27,7 @@ var block = {
   text: /^[^\n]+/
 };
 
+block.checkbox = /^\[([ x])\] +/;
 block.bullet = /(?:[*+-]|\d+\.)/;
 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
 block.item = replace(block.item, 'gm')
@@ -157,7 +158,8 @@ Lexer.prototype.token = function(src, top, bq) {
     , item
     , space
     , i
-    , l;
+    , l
+    , checked;
 
   while (src) {
     // newline
@@ -304,6 +306,16 @@ Lexer.prototype.token = function(src, top, bq) {
         space = item.length;
         item = item.replace(/^ *([*+-]|\d+\.) +/, '');
 
+        if (this.options.gfm) {
+          checked = block.checkbox.exec(item);
+
+          if (checked) {
+            checked = checked[1] === 'x';
+            item = item.replace(block.checkbox, '');
+          } else {
+            checked = undefined;
+          }
+        }
         // Outdent whatever the
         // list item contains. Hacky.
         if (~item.indexOf('\n ')) {
@@ -333,6 +345,7 @@ Lexer.prototype.token = function(src, top, bq) {
         }
 
         this.tokens.push({
+          checked: checked,
           type: loose
             ? 'loose_item_start'
             : 'list_item_start'
@@ -809,13 +822,23 @@ Renderer.prototype.hr = function() {
   return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
 };
 
-Renderer.prototype.list = function(body, ordered) {
+Renderer.prototype.list = function(body, ordered, taskList) {
   var type = ordered ? 'ol' : 'ul';
-  return '<' + type + '>\n' + body + '</' + type + '>\n';
+  var classes = taskList ? ' class="task-list"' : '';
+  return '<' + type + classes + '>\n' + body + '</' + type + '>\n';
 };
 
-Renderer.prototype.listitem = function(text) {
-  return '<li>' + text + '</li>\n';
+Renderer.prototype.listitem = function(text, checked) {
+  if (checked === undefined) {
+    return '<li>' + text + '</li>\n';
+  }
+
+  return '<li class="task-list-item">'
+    + '<input type="checkbox" class="task-list-item-checkbox"'
+    + (checked ? ' checked' : '')
+    + '> '
+    + text
+    + '</li>\n';
 };
 
 Renderer.prototype.paragraph = function(text) {
@@ -1037,24 +1060,29 @@ Parser.prototype.tok = function() {
     }
     case 'list_start': {
       var body = ''
+        , taskList = false
         , ordered = this.token.ordered;
 
       while (this.next().type !== 'list_end') {
+        if (this.token.checked !== undefined) {
+          taskList = true;
+        }
         body += this.tok();
       }
 
-      return this.renderer.list(body, ordered);
+      return this.renderer.list(body, ordered, taskList);
     }
     case 'list_item_start': {
-      var body = '';
+      var body = ''
+        , checked = this.token.checked;
 
       while (this.next().type !== 'list_item_end') {
         body += this.token.type === 'text'
           ? this.parseText()
           : this.tok();
       }
 
-      return this.renderer.listitem(body);
+      return this.renderer.listitem(body, checked);
     }
     case 'loose_item_start': {
       var body = '';
@@ -1063,7 +1091,7 @@ Parser.prototype.tok = function() {
         body += this.tok();
       }
 
-      return this.renderer.listitem(body);
+      return this.renderer.listitem(body, checked);
     }
     case 'html': {
       var html = !this.token.pre && !this.options.pedantic

app/static/js/libs/releases.js

@@ -2,7 +2,7 @@
     {% for note in notes %}
     <li class="note">
         <div class="note-content">
-            <div class="note-title"><h3>{{ note.title }}</h3></div>
+            <div class="note-title"><a href="{{ url_for('.note', id=note.id)}}"><h3>{{ note.title }}</h3></a></div>
             <div class="note-date">{{ moment(note.timestamp).fromNow() }}
             by <a href="{{ url_for('.index', username=note.author.username) }}">{{ note.author.username }}</a> </div>
             <div class="note-body">

app/templates/_notes.html

@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+
+{% block title %} Braindump | Note {% endblock %}
+
+{% block page_content %}
+{% include '_notes.html' %}
+{% endblock %}