Format all news items using markdown

Implements FS#13741. A preview function is also added so working with news
items is easier to make sure you get the formatting right.

This will result in some older news items looking a bit weird if they didn't
put linebreaks in all the right places, we can fix a few of these as we
notice them.

Signed-off-by: Dan McGee <dan@archlinux.org>

6 files changed, 50 insertions, 9 deletions

diff --git a/media/archweb.css b/media/archweb.css
index d603db71..e5781c0c 100644
--- a/media/archweb.css
+++ b/media/archweb.css
@@ -142,7 +142,7 @@ div.widget { margin-bottom: 1.5em; }
 #artwork div.imagelist img { display: inline; margin: 0.75em; }
 
 /* news: article pages */
-div#news-article .article-info { margin: 0; color: #999; }
+div.news-article .article-info { margin: 0; color: #999; }
 
 /* news: add/edit article */
 form#newsform { width: 60em; }
diff --git a/news/views.py b/news/views.py
index 0b7b379e..887fe1dc 100644
--- a/news/views.py
+++ b/news/views.py
@@ -1,10 +1,13 @@
 from django import forms
 from django.contrib.auth.decorators import permission_required
+from django.http import HttpResponse
 from django.shortcuts import render_to_response, redirect
 from django.template import RequestContext
 from django.views.decorators.cache import never_cache
 from django.views.generic import list_detail, create_update
 
+import markdown
+
 from main.models import News
 
 def view(request, newsid):
@@ -57,4 +60,13 @@ def edit(request, newsid):
             form_class=NewsForm,
             template_name="news/add.html")
 
+@permission_required('main.change_news')
+@never_cache
+def preview(request):
+    markup = ''
+    if request.POST:
+        data = request.POST.get('data', '')
+        markup = markdown.markdown(data)
+    return HttpResponse(markup)
+
 # vim: set ts=4 sw=4 et:
diff --git a/settings.py b/settings.py
index 9f025ad2..c7fda80c 100644
--- a/settings.py
+++ b/settings.py
@@ -89,6 +89,7 @@ INSTALLED_APPS = (
     'django.contrib.sites',
     'django.contrib.sitemaps',
     'django.contrib.admin',
+    'django.contrib.markup',
     'main', # contains shared models and libs
     'mirrors',
     'news',
diff --git a/templates/news/add.html b/templates/news/add.html
index 9b2ebae4..51f4d304 100644
--- a/templates/news/add.html
+++ b/templates/news/add.html
@@ -9,17 +9,43 @@
     {% else %}
     <h2>News: Add Article</h2>
     {% endif %}
-
+    <p>News articles are formatted using
+    <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.
+    Please use this syntax if at all possible over raw HTML, which can be used
+    if Markdown doesn't support what you would like to do. Before posting, you
+    are highly encouraged to use the <strong>Preview</strong> button to check
+    your work.  Javascript must be enabled to use it, but it will render the
+    news item exactly as it will appear on the news view page.</p>
     <form id="newsform" method="post">{% csrf_token %}
         <fieldset>
             {{ form.as_p }}
         </fieldset>
-        {% if form.instance.id %}
-        <p><label></label> <input title="Save changes" type="submit" value="Save" /></p>
-        {% else %}
-        <p><label></label> <input title="Publish this article" type="submit" value="Publish" /></p>
-        {% endif %}
+        <p>
+        <label></label>
+        <input title="Save changes" type="submit" value="Save" />
+        <input id="previewbtn" title="Preview" type="button" value="Preview" />
+        </p>
     </form>
+</div>
 
+<div class="news-article box" style="display:none;">
+    <h2>News Preview: <span id="previewtitle"></span></h2>
+    <div id="previewdata"></div>
 </div>
+{% load cdn %}{% jquery %}
+<script type="text/javascript">
+function enablePreview() {
+    $('#previewbtn').click(function(event) {
+        event.preventDefault();
+        $.post('/news/preview/',
+            { data: $('#id_content').val() },
+            function(data) {
+            $('#previewdata').html(data);
+            $('.news-article').show();
+        });
+        $('#previewtitle').html($('#id_title').val());
+    });
+}
+$(document).ready(enablePreview);
+</script>
 {% endblock %}
diff --git a/templates/news/view.html b/templates/news/view.html
index 1b82bc08..64c510e3 100644
--- a/templates/news/view.html
+++ b/templates/news/view.html
@@ -1,8 +1,9 @@
 {% extends "base.html" %}
+{% load markup %}
 {% block title %}Arch Linux - News: {{ news.title }}{% endblock %}
 
 {% block content %}
-<div id="news-article" class="box">
+<div class="news-article box">
 
     <h2>News: {{ news.title }}</h2>
 
@@ -17,7 +18,7 @@
 
     <p class="article-info">{{ news.postdate }} - {{ news.author.get_full_name }}</p>
 
-    {{ news.content|safe|linebreaks }}
+    <div>{{ news.content|markdown }}</div>
 
 </div>
 {% endblock %}
diff --git a/urls.py b/urls.py
index 2a625e5f..3de1d9cf 100644
--- a/urls.py
+++ b/urls.py
@@ -61,6 +61,7 @@ urlpatterns = patterns('',
     (r'^news/add/$',           'news.views.add'),
     (r'^news/edit/(\d+)/$',    'news.views.edit'),
     (r'^news/delete/(\d+)/$',  'news.views.delete'),
+    (r'^news/preview/$',       'news.views.preview'),
     (r'^news/$',               'news.views.list', {}, 'news-list'),
 
     (r'^mirrors/$',        'devel.views.mirrorlist', {}, 'mirrors-list'),