Post 1

post1.cljs

(ns blog.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)




(def post1 {:title "Learn Clojurescript from Scratch"
            :subheader "Part One"
            :body [
                   [dom/p "I work for The Climate Corporation, which is one of the largest mainstream users of clojure.
                          Working there often means stepping between javascript, ruby, java, and clojure services, and
                          the cognitive burden of switching between massively different stacks really isn't trivial. A
                          few weeks ago, a developer gave a presentation about experimenting with ClojureScript. This
                          is the point at which it clicked that Clojure might actually be the language that can be truely
                          used across the stack. This is my running comentary about trying to really learn clojurescript."]
                   [dom/h3 "Building a Personal Blog"]
                   [dom/p ["It seems the most logical place to start is building a personal blog page. I decided that
                            I should probably start by looking at Om. David Nolen has written a number of really compelling 
                            blog posts about clojurescript, and "
                            (dom/a #js {:href "http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"} 
                                  "The Future of Javascript MVCs")
                            " is really compelling."]]

                   [dom/p "I followed the best tutorial I could find which reccomended the mies-om 
                          template. It took me quite a while to understand the actual structural flow of 
                          om. It was difficult to understand what the purposes of the (render) and (reify
                          ) and IRenderState protocols do in the context of buildling a component. "]
                   
                   [dom/p "One of the most interesting problems I actually came across was how to inline code examples
                           here. It doesn't seem like there's a really reasonable way to do that yet. For now the code
                           for the actual piece itself will be hosted externally." ]
                   
                   [dom/ul ["Things still to do"  (dom/ul nil (dom/li nil  "Add sidebar links/routing")
                                                              (dom/li nil "Sort out Clojurescript advanced compiler")
                                                              (dom/li nil "A more reasonable way to write posts")
                                                              )]]
                   [dom/p ["I'm thinking I will try and add routing to the blog starting in the next installment. " 
                    (dom/a #js {:href "https://gist.github.com/estsauver/7b0d196274b21422d47e"} "This weeks code" )]]
      

                   
                   
                   ]})

(def app-state (atom { :posts [post1]}))

(defn format-element [element] 
  "Convenience wrapper for templating blog bodies."
  (let [[tag content & attributes] element] (apply tag nil content) ))

(defn blog-post-view [post owner]
  (reify
    om/IRender
    (render [this]
            (dom/div #js {:className "post"}
                     (dom/div #js {:className "article-title page-header"}
                              (dom/h1 nil (:title post)
                                      (dom/small nil   (:subheader post))))
                     (apply dom/div nil (map format-element (:body post)))))))

(defn blog-view [app owner]
  (reify
    om/IRender
    (render [this]
            (dom/div nil
                     (apply dom/div #js {:className "col-md-8"}
                            (om/build-all blog-post-view (:posts app)))
                     (apply dom/div #js {:className "col-md-4"}
                            (dom/h2 nil "Sidebar") 
                            (map (fn [post] 
                                   (str (:title post) " "(:subheader post))) 
                                 (:posts app))
                            )))))

(om/root
 blog-view
 app-state
 {:target (. js/document (getElementById "app"))})