Merge pull request #38 from alphasusu/mardown

Mardown Support

Gemfile

@@ -10,7 +10,8 @@ gem "paperclip"                     # File uploads/attachments
 gem "cancan"                        # Permissions/Authorization
 gem 'friendly_id'                   # Slugs for IDs
 gem 'jbuilder', '~> 1.2'            # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
-gem 'nokogiri'
+gem 'nokogiri'                      # Parse HTML/XML for data imports
+gem 'redcarpet'                     # Markdown
 
 
 # Asset Pipeline

Gemfile.lock

@@ -153,6 +153,7 @@ GEM
     rake (10.1.1)
     rdoc (4.1.1)
       json (~> 1.4)
+    redcarpet (2.1.1)
     rest-client (1.6.7)
       mime-types (>= 1.16)
     sass (3.2.14)
@@ -232,6 +233,7 @@ DEPENDENCIES
   pg
   rails (= 4.0.2)
   rails_12factor
+  redcarpet
   sass-rails (~> 4.0.0)
   sdoc
   socket.io-rails

app/assets/stylesheets/application.css.scss

@@ -52,4 +52,12 @@ footer {
 
 .admin-form {
 	margin-top: 20px !important;
+
+	textarea {
+		height: 400px;
+	}
+
+	.markdown, .html {
+		font-family: Courier, monospace;
+	}
 }

app/assets/stylesheets/blog_posts.css.scss

@@ -1,3 +1,7 @@
-// Place all the styles related to the BlogPosts controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+.avatar {
+	display:inline-block;
+	margin-right: 5px;
+	border-radius: 16px;
+	width: 32px;
+	height: 32px;
+}

app/helpers/application_helper.rb

@@ -49,6 +49,16 @@ def field_error(resource, field, name)
 	def pluralize_without_count(count, string)
 		count == 1 ? string : string.pluralize
 	end
+
+	def render_markdown(content)
+		markdown = SUSUFlavouredMarkdown.body_renderer
+		raw(markdown.render(content))	
+	end
+
+	def render_markdown_preview(content)
+		markdown = SUSUFlavouredMarkdown.preview_renderer
+		raw(markdown.render(content))	
+	end
 
 private
 

app/views/articles/_form.html.erb

@@ -7,7 +7,7 @@
     </div>
     <div class="large-12 columns <%= field_error_class @article, :body %>">
       <%= f.label :body %>
-      <%= f.text_area :body %>
+      <%= f.text_area :body, class: "markdown" %>
       <%= field_error @article, :body, "Post" %>
     </div>
     <div class="large-12 columns">

app/views/articles/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @article,
-	resource_list_path: articles_path %>
+	resource_list_path: articles_path,
+	markdown_help: true %>

app/views/articles/new.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @article,
-	resource_list_path: articles_path %>
+	resource_list_path: articles_path,
+	markdown_help: true %>

app/views/articles/show.html.erb

@@ -7,7 +7,7 @@
 
 <p>
   <strong>Body:</strong>
-  <%= @article.body %>
+  <%= render_markdown @article.body %>
 </p>
 
 <p>

app/views/blog_posts/_form.html.erb

@@ -7,7 +7,7 @@
     </div>
     <div class="large-12 columns <%= field_error_class @post, :body %>">
       <%= f.label :body %>
-      <%= f.text_area :body %>
+      <%= f.text_area :body, class: "markdown" %>
       <%= field_error @post, :body, "Post" %>
     </div>
     <div class="large-12 columns">

app/views/blog_posts/_preview.html.erb

@@ -5,5 +5,5 @@
 	<% else %>
 		<small>Unknown Author</small>
 	<% end %>
-	<p class="show-for-medium-up"><%= preview.body[0,280] %></p>
+	<div class="show-for-medium-up"><%= render_markdown_preview preview.body %></div>
 </div>

app/views/blog_posts/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
-	resource: @blog_post,
-	resource_list_path: blog_posts_path %>
+	resource: @post,
+	resource_list_path: blog_posts_path,
+	markdown_help: true %>

app/views/blog_posts/new.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
-	resource: @blog_post,
-	resource_list_path: blog_posts_path %>
+	resource: @post,
+	resource_list_path: blog_posts_path,
+	markdown_help: true %>

app/views/blog_posts/show.html.erb

@@ -1 +1,9 @@
-<%= render @post %>
+<div class="row">
+  <h1><%= link_to @post.title, @post %></h1>
+	<% if @post.author %>
+		<small><%= image_tag @post.author.get_avatar_url(:small), class: "avatar" %> By <%= link_to @post.author.name, user_path(@post.author) %></small>
+	<% else %>
+		<small>Unknown Author</small>
+	<% end %>
+	<%= render_markdown @post.body %>
+</div>

app/views/events/_event.html.erb

@@ -1,5 +1,4 @@
 <div class="small-12 columns">
-  <h5><%= event.title %></h5>
-  <h6><%= event.date %></h6>
-  <p><%= event.description %></p>
+  <h3><%= event.title %> <small><%= event.date %></small></h3>
+  <%= render_markdown event.description %>
 </div>

app/views/events/_form.html.erb

@@ -12,7 +12,7 @@
     </div>
     <div class="large-12 columns <%= field_error_class @event, :description %>">
       <%= f.label :description %>
-      <%= f.text_area :description %>
+      <%= f.text_area :description, class: "markdown" %>
       <%= field_error @event, :description, "Description" %>
     </div>
     <div class="large-12 columns">

app/views/events/_preview.html.erb

@@ -1,5 +1,5 @@
 <div class="event-preview">
   <h4><%= link_to preview.title, preview %></h4>
   <h6><%= preview.date.to_formatted_s(:short) %></h6>
-  <p class="show-for-medium-up"><%= preview.description[0,280] %></p>
+  <div class="show-for-medium-up"><%= render_markdown_preview preview.description %></div>
 </div>

app/views/events/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @event,
-	resource_list_path: events_path %>
+	resource_list_path: events_path,
+	markdown_help: true %>

app/views/events/new.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @event,
-	resource_list_path: events_path %>
+	resource_list_path: events_path,
+	markdown_help: true %>

app/views/help_articles/_form.html.erb

@@ -7,7 +7,7 @@
     </div>
     <div class="large-12 columns <%= field_error_class @help_article, :body %>">
       <%= f.label :body %>
-      <%= f.text_area :body %>
+      <%= f.text_area :body, class: "markdown" %>
       <%= field_error @help_article, :body, "Body" %>
     </div>
     <div class="large-12 columns">

app/views/help_articles/_help_article.html.erb

@@ -1,4 +1,4 @@
 <div class="row">
   <h1><%= help_article.title %></h1>
-  <p><%= help_article.body %></p>
+  <p><%= render_markdown help_article.body %></p>
 </div>

app/views/help_articles/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @help_article,
-	resource_list_path: help_articles_path %>
+	resource_list_path: help_articles_path,
+	markdown_help: true %>

app/views/places/_form.html.erb

@@ -7,17 +7,17 @@
     </div>
     <div class="large-12 columns <%= field_error_class @place, :description %>">
       <%= f.label :description %>
-      <%= f.text_area :description %>
+      <%= f.text_area :description, class: "markdown" %>
       <%= field_error @place, :description, "Description" %>
     </div>
     <div class="large-12 columns <%= field_error_class @place, :latitude %>">
       <%= f.label :latitude %>
-      <%= f.number_field :latitude %>
+      <%= f.text_field :latitude %>
       <%= field_error @place, :latitude, "Latitude" %>
     </div>
     <div class="large-12 columns <%= field_error_class @place, :longitude %>">
       <%= f.label :longitude %>
-      <%= f.number_field :longitude %>
+      <%= f.text_field :longitude %>
       <%= field_error @place, :longitude, "Longitude" %>
     </div>
     <div class="large-12 columns <%= field_error_class @place, :shown %>">

app/views/places/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @place,
-	resource_list_path: places_path %>
+	resource_list_path: places_path,
+	markdown_help: true %>

app/views/places/index.html.erb

@@ -16,7 +16,7 @@
       <h3>
         <%= link_to place.name, place_path(place), id: place.slug %>
       </h3>
-      <p><%= place.description %></p>
+      <p><%= render_markdown place.description %></p>
       <% if place.schedule %>
         <%= render place.schedule %>
       <% end %>

app/views/places/new.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @place,
-	resource_list_path: places_path %>
+	resource_list_path: places_path,
+	markdown_help: true %>

app/views/places/show.html.erb

@@ -1,7 +1,7 @@
 <div class="row place banner-offset">
   <div class="large-6 medium-6 small-12 columns">
     <h2><%= @place.name %></h2>
-    <p><%= @place.description %></p>
+    <p><%= render_markdown @place.description %></p>
     <% if @place.schedule %>
       <%= render @place.schedule %>
     <% end %>

app/views/shared/_admin_form_page.html.erb

@@ -42,5 +42,8 @@
 				<%= link_to "#{human_readable_name.pluralize} List", resource_list_path %><br/>
 			</p>
 		<% end %>
+		<% if defined? markdown_help %>
+			<%= render 'shared/markdown_help' %>
+		<% end %>
 	</div>
 </div>

app/views/shared/_markdown_help.html.erb

@@ -0,0 +1,84 @@
+<dl class="accordion" data-accordion>
+	<dd>
+		<a href="#markdown">Writing Assistance</a>
+		<div id="markdown" class="content">
+			<h5>Text</h5>
+			<p>You can make text <strong>bold</strong> by putting <code>**</code>asterisks<code>**</code> around it.</p>
+			<p>You can <em>italicise</em> text by putting <code>_</code>underscores<code>_</code> around it.</p>
+
+			<h5>Links</h5>
+			<p>URIs written out in full will automatically become links, like this: <a href="http://susu.org/">http://susu.org/</a>.</p>
+			<p>To use different text for the link, put the text in <code>[</code>square brackets<code>]</code> <code>(</code>and the link in normal brackets<code>)</code>.</p>
+			<p><code>[Click Here](http://susu.org)</code> becomes <a href="http://susu.org/">Click Here</a></p>
+
+			<h5>Images</h5>
+			<p>Inserting images is almost exactly the same as inserting a link, just add an exclamation mark <code>!</code> at the beginning.</p>
+			<p><code>![The SUSU Logo](/susu_bubbles@2x.png)</code> becomes <img src="/susu_bubbles@2x.png" alt="The SUSU Logo"></p>
+
+			<h5>Headers</h5>
+			<p>If you want a big header, put hashes <code>###</code> in front of it. One hash is the largest, five is the smallest.</p>
+			<pre><code># Big Title
+### Smaller Title
+##### Smallest Title
+			</code></pre>
+
+			<h5>Previews</h5>
+			<p>Sometimes we want to show a preview of the article or post. To help us know what to show, add two tildes <code>~~</code> at the end of your introduction or first paragraph &ndash; only content before that will be shown in the preview. We recommend between 40 and 60 words, that will look best on most pages.</p>
+
+			<h5>Tables</h5>
+			<p>To make a table, draw it with pipes <code>|</code> and dashes <code>-</code>, it doesn't have to be perfect. You can use colons <code>:</code> to indicate how you want the text aligned.</p>
+			<pre><code>Item | Price
+:---|---:
+Apple | 0.50
+Banana | 0.60
+Chocolate | 1.20
+			</code></pre>
+			<table>
+				<thead>
+					<tr>
+						<th align="left">Item</th>
+						<th align="right">Price</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td align="left">Apple</td>
+						<td align="right">0.50</td>
+					</tr>
+					<tr>
+						<td align="left">Banana</td>
+						<td align="right">0.60</td>
+					</tr>
+					<tr>
+						<td align="left">Chocolate</td>
+						<td align="right">1.20</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<h5>Lists</h5>
+			<p>If you want to write a list, just put numbers at the beginning of each line like this:</p>
+			<code><pre> 1. Buy milk
+ 2. Finish assignment
+ 3. Run for Union President</pre></code><br/>
+			<ol>
+				<li>Buy milk</li>
+				<li>Finish assignment</li>
+				<li>Run for Union President</li>
+			</ol>
+			<p>Or if you want bullets instead of numbers, start each line with a dash <code>-</code>.</p>
+
+			<h5>Blockquotes</h5>
+			<p>Whenever you quote some text from another source, you should use a blockquote.</p>
+			<code><pre> > You want to know how I did it? This is how I did it,
+ > Anton. I never saved anything for the swim back.
+ > &lt;cite&gt;Vincent Freeman&lt;/cite&gt;</pre></code><br/>
+			<blockquote>
+				You want to know how I did it? This is how I did it, Anton. I never saved anything for the swim back. <cite>Vincent Freeman</cite>
+			</blockquote>
+
+			<h5>HTML</h5>
+			<p>You can also use any other HTML you want to use and it will be preserved, but best practice is to use Markdown syntax wherever possible &ndash; it makes changing styles on the site at a later date much easier.</p>
+		</div>
+	</dd>
+</dl>

app/views/student_groups/_form.html.erb

@@ -17,7 +17,7 @@
     </div>
     <div class="large-12 columns <%= field_error_class @student_group, :description %>">
       <%= f.label :description %>
-      <%= f.text_area :description %>
+      <%= f.text_area :description, class: "markdown" %>
       <%= field_error @student_group, :description, "Post" %>
     </div>
     <div class="large-12 columns <%= field_error_class @student_group, :zone_id %>">

app/views/student_groups/edit.html.erb

@@ -1,3 +1,4 @@
 <%= render 'shared/admin_form_page', 
 	resource: @student_group,
-	resource_list_path: student_groups_path %>
+	resource_list_path: student_groups_path,
+	markdown_help: true %>

app/views/student_groups/index.html.erb

@@ -15,7 +15,7 @@
     <% @student_groups.each do |student_group| %>
       <tr>
         <td><%= student_group.name %></td>
-        <td><%= student_group.description %></td>
+        <td><%= render_markdown_preview student_group.description %></td>
         <td><%= link_to 'Show', student_group %></td>
         <td><%= link_to 'Edit', edit_student_group_path(student_group) %></td>
         <td><%= link_to 'Destroy', student_group, method: :delete, data: { confirm: 'Are you sure?' } %></td>