#+TITLE: Intro to HoneySQL & Hiccup


* Hiccup
https://github.com/weavejester/hiccup
hiccup is a html DSL, used extensively in the clojure's eco-system, there are others as well but hiccup is the most widely used.

In hiccup everything is a list, this means you can easily compose html using standard language constructs.
To render the hiccup to html elements we call the (html) function from the hiccup library for server side with reagent or client side code this will likely be a different function like (render).

** Simple examples
If using reagent you don't need to pass into h/html but this is server side reagent also has some helpers to work with react nicer.
#+BEGIN_SRC clojure
[:span "bar"]
#+END_SRC

Attributes are added as a map of values styles are also a map
#+BEGIN_SRC clojure
[:span {:class "class1 class2" :title "my title" :style {:color "red"}} "bar"]
#+END_SRC

You can use shorthand to add id's and classes
#+BEGIN_SRC clojure
[:span#id.class1.class2 "bar"]
#+END_SRC

** Compossible components
The main advantage comes from the ability to compose the parts together,  so we can break this into function's

In this example its only a hash map, the data is separated out from the html, in reagent you can use atom for live updating.


#+BEGIN_SRC clojure
(defn navbar-link [{:keys [href title text] :or {text nil title nil}}]
  [:a.link.dim.white.dib.mr3 {:href href :title title} text])

(defn navbar [links]
  [:header.bg-black-90.fixed.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
   (into [:nav.f6.fw6.ttu.tracked]
    (map navbar-link links))])

(navbar [{:href "link1" :title "title here"}
         {:href "link2" :title nil}
         {:href "link3" :text "link text"}
         {:href "link4"}])
#+END_SRC

You can use clojure core language to manipulate these lists.

place parts inside another containing element
#+BEGIN_SRC clojure
(into [:div.container]
      [[:span "span 1"]
       [:span "span 2"]])
#+END_SRC

You could also use merge
#+BEGIN_SRC clojure
(merge [:span "span 1"] [:span "span 2"] [:span "span 3"])
#+END_SRC

We can take advantage of lazyness if we like
#+BEGIN_SRC clojure
(take 2 (map navbar-link
             [{:key "link1" :href "link1" :title "title here"}
              {:key "link2" :href "link2" :title nil}
              {:key "link3" :href "link3" :text "link text"}
              {:key "link4" :href "link4"}]))
#+END_SRC