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>

2 files changed, 35 insertions, 8 deletions

diff --git a/templates/news/add.html b/templates/news/add.html
index 9b2ebae..51f4d30 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 1b82bc0..64c510e 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 %}