]> git.openstreetmap.org Git - osqa.git/commitdiff
Add the page for more explanation of how to use markdown. If anyone has any ideas...
authorqw3rty <qw3rty@0cfe37f9-358a-4d5e-be75-b63607b5c754>
Mon, 17 May 2010 18:43:28 +0000 (18:43 +0000)
committerqw3rty <qw3rty@0cfe37f9-358a-4d5e-be75-b63607b5c754>
Mon, 17 May 2010 18:43:28 +0000 (18:43 +0000)
git-svn-id: http://svn.osqa.net/svnroot/osqa/trunk@295 0cfe37f9-358a-4d5e-be75-b63607b5c754

forum/skins/default/media/style/markdown_help.css [new file with mode: 0644]
forum/skins/default/templates/markdown_help.html [new file with mode: 0644]
forum/skins/default/templates/question_edit_tips.html
forum/urls.py
forum/views/meta.py

diff --git a/forum/skins/default/media/style/markdown_help.css b/forum/skins/default/media/style/markdown_help.css
new file mode 100644 (file)
index 0000000..68a9f1c
--- /dev/null
@@ -0,0 +1,46 @@
+div.main-wrapper {
+    /*
+    margin: 30px auto;
+    overflow:hidden;
+    position:relative;
+    */
+}
+
+div.section {
+    padding-top:30px;
+}
+
+h2.section-title {
+    padding-top:10px;
+    padding-left:10px;
+    width:100%;
+    background-color:#b6c4e2;
+}
+
+div.section-description {
+    padding-top:20px;
+    padding-bottom:10px;
+}
+
+table.section-example {
+    padding-top:5px;
+    padding-bottom:10px;
+    width:100%;
+}
+
+table.section-example tr {
+}
+
+table.section-example tr td {
+    background-color:#e5ebf8;
+
+    padding:5px 5px 5px 5px;
+    width:50%;
+
+    text-align:left;
+
+    border-style:solid;
+    border-width:1px;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+}
diff --git a/forum/skins/default/templates/markdown_help.html b/forum/skins/default/templates/markdown_help.html
new file mode 100644 (file)
index 0000000..a54334b
--- /dev/null
@@ -0,0 +1,248 @@
+{% extends "base.html" %}
+{% load extra_tags %}
+{% load humanize %}
+{% load i18n %}
+
+{% block fulltitle %}{% spaceless %}{% trans "Markdown Help" %}{% endspaceless %}{% endblock %}
+
+{% block forejs %}
+    <link rel="stylesheet" type="text/css" media="all" href="{% media  "/media/style/markdown_help.css" %}" />
+{% endblock %}
+
+{% block content %}
+    <div id="main-wrapper"><br /><br />
+        <div id="heading">
+            <h1>Markdown Syntax</h1>
+            <p>This document describes some of the more important parts of Markdown (for writers, that is).  There's a lot more to the syntax than is mentioned here, though.  To get the full syntax documentation, go to John Gruber's <a href="http://daringfireball.net/projects/markdown/syntax" rel="nofollow">Markdown Syntax</a> page</p>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">Headers</h2>
+            <div class="section-description">
+                For top-level headers underline the text with equal signs.  For second-level headers use dashes to underline.
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>This is an H1 </code><br />
+                    <code>============= </code>
+                </td>
+                <td>
+                    <h1>This is an H1</h1>
+                </td>
+            </tr></table>
+            
+            <table class="section-example"><tr>
+                <td>
+                    <code>This is an H2</code><br />
+                    <code>-------------</code>
+                </td>
+                <td>
+                    <h2>This is an H2</h2>
+                </td>
+             </tr></table>
+
+            <div class="section-description">
+                If you would rather, you can prefix headers with a hash (#) symbol instead.  The number of hash symbols indicates the header level.  For example, a single hash indicates a header level of one while two indicates the second header level:
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code># This is H1</code>
+                </td>
+                <td>
+                    <h1>This is an H1</h1>
+                </td>
+            </tr></table>
+
+            <table class="section-example"><tr>
+                <td>
+                    <code>## This is H2</code>
+                </td>
+                <td>
+                    <h2>This is an H2</h2>
+                </td>
+            </tr></table>
+
+            <table class="section-example"><tr>
+                <td>
+                    <code>### This is H3</code>
+                </td>
+                <td>
+                    <h3>This is an H3</h3>
+                </td>
+             </tr></table>
+
+            <div class="section-description">
+                Which you choose is a matter of style.  Whichever you thinks looks better in the text document.  In both cases, the final, fully formatted, document looks the same.
+            </div>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">Paragraphs</h2>
+            <div class="section-description">
+                Paragraphs are surrounded by blank lines.
+            </div>
+            <div class="section-example">
+                <code>This is paragraph one.</code>
+            </div><br />
+            <div class="section-example">
+                <code>This is paragraph two.</code>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">Links</h2>
+            <div class="section-description">
+                There are two parts to every link.
+                The first is the actual text that the user will see and it is surrounded by brackets.
+                The second is address of the page you wish to link to and it is surrounded in parenthesis.
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>[link text](http://example.com/)</code>
+                </td>
+                <td>
+                    <a>link text</a>
+                </td>
+            </tr></table>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">Formatting</h2>
+            <div class="section-description">
+                To indicate bold text surround the text with two star (*) symbols or two underscore (_) symbols:
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>**This is bold**</code>
+                </td>
+                <td>
+                    <strong>This is bold</strong>
+                </td>
+            </tr></table>
+            <table class="section-example"><tr>
+                <td>
+                    <code>__This is also bold__</code>
+                 </td>
+                 <td>
+                     <strong>This is also bold</strong>
+                 </td>
+             </tr></table>
+
+            <div class="section-description">
+                To indicate italicized text surround the text with a single star (*) symbol or underscore (_) symbol:
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>*This is italics*</code>
+                </td>
+                <td>
+                    <i>This is italics</i>
+                </td>
+            </tr></table>
+            <table class="section-example"><tr>
+                <td>
+                    <code>_This is also italics_</code>
+                 </td>
+                 <td>
+                     <i>This is also italics</i>
+                 </td>
+             </tr></table>
+
+            <div class="section-description">
+                To indicate italicized and bold text surround the text with three star (*) symbol or underscore (_) symbol:
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>***This is bold and italics***</code>
+                </td>
+                <td>
+                    <strong><i>This is italics</i></strong>
+                </td>
+            </tr></table>
+            <table class="section-example"><tr>
+                <td>
+                    <code>___This is also bold and italics___</code>
+                </td>
+                <td>
+                    <strong><i>This is italics</i></strong>
+                </td>
+            </tr></table>
+        </div>
+
+
+        <div class="section">
+            <h2 class="section-title">Blockquotes</h2>
+            <div class="section-description">
+                To create an indented area use the right angle bracket (&gt;) character before each line to be included in the blockquote.
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>&gt; This is part of a blockquote.</code><br />
+                    <code>&gt; This is part of the same blockquote.</code>
+                </td>
+                <td>
+                    <p style="padding-left:15px;">This is part of a blockquote.<br />This is part of the same blockquote.</p>
+                </td>
+            </tr></table>
+
+            <div class="section-description">
+                Rather than putting it in front of each line to include in the block quote you can put it at the beginning and end the quote with a newline.
+            </div>
+            <table class="section-example"><tr>
+                <td>
+                    <code>&gt; This is part of a blockquote.</code><br />
+                    <code>This continues the blockquote even though there's no bracket.</code><br /><br />
+                    <code>The blank line ends the blockquote.</code>
+                </td>
+                <td>
+                    <p style="padding-left:15px;">This is part of a blockquote. <br /> This continues the blockquote even though there's no bracket.</p>
+                    <p>The blank line ends the blockquote.</p>
+                </td>
+            </tr></table>
+        </div>
+
+        <div class="section">
+             <h2 class="section-title">Lists</h2>
+             <div class="section-description">
+                 To create a numbered list in Markdown, prefix each item in the list with a number followed by a period and space.  The number you use actually doesn't matter.
+             </div>
+             <table class="section-example"><tr>
+                 <td>
+                    <code>1. Item 1</code><br />
+                    <code>2. Item 2</code><br />
+                    <code>3. Item 3</code>
+                 </td>
+                 <td>
+                    <ol>
+                        <li>Item 1</li>
+                        <li>Item 2</li>
+                        <li>Item 3</li>
+                    </ol>
+                 </td>
+             </tr></table>
+
+             <div class="section-description">
+                 To create a bulleted list, prefix each item in the list with a star (*) character.
+             </div>
+             <table class="section-example"><tr>
+                 <td>
+                    <code>* A list item</code><br />
+                    <code>* Another list item</code><br />
+                    <code>* A third list item</code>
+                 </td>
+                 <td>
+                    <ul>
+                        <li>A list item</li>
+                        <li>Another list item</li>
+                        <li>A third list item</li>
+                    </ul>
+                 </td>
+             </tr></table>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">A Lot More</h2>
+            <div class="section-description">There's a lot more to the Markdown syntax than is mentioned here.  But for creative writers, this covers a lot of the necessities.  To find out more about Markdown than you'd ever want to really know, <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank" rel="nofollow">go to the Markdown page where it all started</a>.</div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
index 6083c12a0a2d524c48bbe43d424d7d35fa5ed6cb..3e72a1e6c3d3e4301e6a3a407e0d649b3088e261 100644 (file)
@@ -71,7 +71,7 @@
         </li>
     </ul>
     <p class='info-box-follow-up-links'>
-        <a href="http://en.wikipedia.org/wiki/Markdown" target="_blank">{% trans "learn more about Markdown" %} </a>
+        <a href="/markdown_help" target="_blank">{% trans "learn more about Markdown" %} </a>
     </p>
 </div>
 
index 6f053fd256db7930b99eb2fc17fc83f239b925af..a262fd5b0157e1afac36c3d758342ccca57ed56f 100644 (file)
@@ -48,6 +48,7 @@ urlpatterns += patterns('',
     #url(r'^%s/$' % _('signin/'), 'django_authopenid.views.signin', name='signin'),
     url(r'^%s$' % _('faq/'), app.meta.static, {'content': settings.FAQ_PAGE_TEXT, 'title': _('FAQ')}, name='faq'),
     url(r'^%s$' % _('about/'), app.meta.static, {'content': settings.ABOUT_PAGE_TEXT, 'title': _('About')}, name='about'),
+    url(r'^%s$' % _('markdown_help/'), app.meta.markdown_help, name='markdown_help'),
     url(r'^opensearch\.xml$', app.meta.opensearch, name='opensearch'),
     url(r'^%s$' % _('privacy/'), app.meta.privacy, name='privacy'),
     url(r'^%s$' % _('logout/'), app.meta.logout, name='logout'),
index fc050c218e013cd7882bd97ffeca4d802a4cdf29..97c852f0a7e5d6194eb07367ab254391bb085f1b 100644 (file)
@@ -21,6 +21,13 @@ def favicon(request):
 def static(request, title, content):
     return render_to_response('static.html', {'content' : content, 'title': title}, context_instance=RequestContext(request))
 
+def markdown_help(request):
+    # md = markdown.Markdown([SettingsExtension({})])
+    # text = md.convert(settings.FAQ_PAGE_TEXT.value)
+
+    return render_to_response('markdown_help.html', context_instance=RequestContext(request))
+
+
 def opensearch(request):   
     return render_to_response('opensearch.html', {'settings' : settings}, context_instance=RequestContext(request))