preview with markdown processing added

project.clj

@@ -3,6 +3,7 @@
             :dependencies [[org.clojure/clojure "1.4.0"]
                            [hiccup "1.0.0"]
                            [cssgen "0.2.6"]
+                           [markdown-clj "0.8"]
                            [noir "1.3.0-beta1"]]
             :plugins [[lein-cljsbuild "0.1.10"]]
             :cljsbuild {

src-cljs/main.cljs

@@ -11,11 +11,11 @@
   [selector]
     (dom/get-element selector))
 
-(if-let [write-textarea ($ "write-textarea")]
+(if-let [draft ($ "draft")]
-  (focus/focusInputField write-textarea))
+  (focus/focusInputField draft))
 
 ; Show the Preview button as soon as the user starts typing.
-(event/listen ($ "write-textarea")
+(event/listen ($ "draft")
               :keypress
               (fn [e]
-                (style/setStyle ($ "form-button") "display" "block")))
+                (style/setStyle ($ "preview-button") "display" "block")))

src/NoteHub/views/common.clj

@@ -44,8 +44,9 @@
       (rule ".article-font"
             :font-family :Georgia
             :font-size :1.3em)
-      (rule ".max-width"
+      (rule "article"
-            :width "900px")
+            :font-family :Georgia
+            :font-size :1.2em)
       (rule "*:focus"
             :outline [:0px :none :transparent])
       (rule "textarea"
@@ -53,7 +54,7 @@
             :font-size :1.3em
             :border :none
             :height :600px)
-      (rule "#form-button"
+      (rule "#preview-button"
             helvetica-neue
             :display :none
             :cursor :pointer
@@ -62,6 +63,7 @@
             :font-size :0.8em
             :opacity :0.8)
       (rule ".central-body"
+            :width "900px"
             :margin-top :5em
             :margin-bottom :5em
             :margin-left "auto"

src/NoteHub/views/pages.clj

@@ -1,9 +1,10 @@
 (ns NoteHub.views.pages
   (:require [NoteHub.views.common :as common])
   (:use [noir.core :only [defpage]]
-        [hiccup.form]))
+        [hiccup.form]
+        [markdown :only [md-to-html-string]]))
 
-(defpage "/" []
+(defpage "/" {}
          (common/layout "Free Markdown Hosting"
            [:div#hero
             [:h1 "NoteHub"]
@@ -12,9 +13,16 @@
             [:br]
             [:a.button {:href "/new"} "New Page"]]))
 
-(defpage "/new" []
+(defpage "/new" {}
          (common/layout "New Markdown Note"
-           [:div.central-body.max-width
+           [:div.central-body
-            (text-area {:class "max-width"} :write-textarea)
+            (form-to [:post "/preview-note"]
-            (submit-button {:id "form-button"} "Preview")]))
+              (text-area {:class "max-width"} :draft)
+              (submit-button {:id "preview-button"} "Preview"))]))
 
+; Actions.
+
+(defpage [:post "/preview-note"] {:keys [draft]}
+         (common/layout "Preview of ..."
+            [:article.central-body
+             (md-to-html-string draft)]))