72 lines
2.3 KiB
Org Mode
72 lines
2.3 KiB
Org Mode
#+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
|
|
|
|
|