slices-example.clj

;;; Example of slices
(slice site-settings [bgcolor]          ; slices can take arguments
  :var {default-background-color bgcolor}) ; variable for anyone that uses this slice

(slice site-settings-public             ; slices don't need an arg list if they don't take args
  :use (site-settings "blue"))          ; what other slices this slice uses

(slice site-settings-app
  :use (site-settings "red"))

(slice awesome-effects
  :js (fn awesomeEffect1 [div]          ; javascript code (translated with scriptjure)
        (.show ($ div))))

(slice header [header-id]
  :html [:div {:id header-id} "Company Name"]  ; html with hiccup
  :use site-settings                    ; automatically converted to (site-settings)
  :css (rule header-id :background-color default-background-color))  ; (translated with cssgen)

(slice footer [footer-id info]
  :html [:div {:id footer-id} "Copyright " info])

(slice footer-default [info]
  :var {footer-id "#footer"}
  :use (footer footer-id info))

(slice footer-public
  :use (footer-default "2010"))

(slice footer-app
  :use [awesome-effects                 ; all fields can take multiple
                                        ; elements, you just have to wrap them
                                        ; in vector
        (footer-default "sucks")]
  :dom (awesomeEffect1 footer-id))      ; js code you want to run when dom is
                                        ; ready. using clojure variable in
                                        ; js. footer-id from :var in
                                        ; footer-default.

(slice welcome-header [header-id]
  :css (rule header-id                  ; using clojure variables in css
         :display :none)
  :use awesome-effects
  :dom (awesomeEffect1 header-id)
  :html [:p "Welcome"])

(slice rounded-corners
  :clj (mixin :-moz-border-radius :5px  ; css mixins part of cssgen
              :-webkit-border-radius :5px))

(slice big-text
  :clj (mixin :font-size "200%"))

(slice special-button
  :use [rounded-corners big-text]
  :clj (mixin rounded-corners
              big-text))

(slice app-link
  :var {id "#applink"}
  :use [awesome-effects special-button]  ; using css mixins and js is the
                                         ; same. (same for html, dom js, clj,
                                         ; css, clj)
  :dom (.mouseOver ($ id) (awesomeEffect1 id))
  :css (rule id
         (mixin special-button))
  :html [:div {:id id}
         (link-to "/app" "App")])

(slice welcome-page
  :title "Welcome"                      ; how you declare the title and other header info
  :use [site-settings-public
        (welcome-header "#header")
        footer-public])

(slice app
  :html "cool app",,,)

(slice app-page
  :title "App"
  :use [site-settings-app
        app
        footer-app])

(defroutes foo
  (GET "/" (welcome-page))
  (GET "/app" (app-page)))