diff --git a/demo/demo.cljs b/demo/demo.cljs index 18b3cd1..32bb37a 100644 --- a/demo/demo.cljs +++ b/demo/demo.cljs @@ -11,20 +11,23 @@ "index.html" intro/main "news/index.html" news/main) +(def github {:href "https://github.com/holmsand/reagent"}) + (defn github-badge [] [:a.github-badge - {:href "https://github.com/holmsand/reagent"} + github [:img {:style {:position "absolute" :top 0 :left 0 :border 0} - :src "https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png" - :alt "Fork me on GitHub"}]]) + :alt "Fork me on GitHub" + :src "https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"}]]) (defn demo [] [:div [:div.nav [:ul.nav [:li.brand [link {:href intro/main} "Reagent:"]] - [:li [link {:href intro/main} "Introduction"]] - [:li [link {:href news/main} "News"]]]] + [:li [link {:href intro/main} "Intro"]] + [:li [link {:href news/main} "News"]] + [:li [:a github "GitHub"]]]] (let [comp (get @page-map @page intro/main)] [comp]) [github-badge]]) diff --git a/demo/reagentdemo/news.cljs b/demo/reagentdemo/news.cljs index 4882fd6..926b7ab 100644 --- a/demo/reagentdemo/news.cljs +++ b/demo/reagentdemo/news.cljs @@ -45,11 +45,40 @@ (remove-watch state ::undo-watcher))})) (defn undo-example [] - (let [head "This should become news"] + (let [head "Cloact becomes Reagent: Undo is trivial"] [:div.reagent-demo [:h1 [link {:href undo-example} head]] [title head] - [undo-demo-cleanup]])) + [:div.demo-text + [:h2 "(reset! cloact-name \"Reagent\")"] + + [:p "It turns out that ”Cloact” was a really, really bad + name. It made some people think about birds’ behinds, in + possibly unhealthy ways, which even Google suggested they + should."] + + [:p "The new name is " [:strong "Reagent"] ", which hopefully + doesn’t bring with it the same disgusting connotations."] + + [:p "The API is otherwise unchanged, so a simple + search-and-replace should suffice."] + + [:h2 "Undo the easy way"] + + [:p "To celebrate the undoing of the apparently disgusting name, + here is an example of how easy it is to add undo functionality + to Reagent components."] + + [:p "It simply saves the old state whenever it changes, and + restores it when the button is clicked."] + + [:p "The really nice thing about ClojureScript is that not only + is this easy and safe to do, courtesy of immutable data + structures, it is also efficient. ClojureScript figures out how + to represent ”changes” to maps and vectors efficiently, so that + you won’t have to."] + + [undo-demo-cleanup]]])) (defn main [] [undo-example]) diff --git a/site/demo.css b/site/demo.css index f80d21d..fe935c4 100644 --- a/site/demo.css +++ b/site/demo.css @@ -6,7 +6,6 @@ } div.nav { - /* background-color: #f00; */ position: absolute; top: 0; left: 0; @@ -99,6 +98,8 @@ ul.nav > li.brand > a { } .reagent-demo h2 { + font-size: 20px; + line-height: 1.25em; margin-top: 48px; color: #555; } @@ -106,7 +107,7 @@ ul.nav > li.brand > a { .demo-text > p, .demo-text > ul { font-family: georgia, serif; font-size: 18px; - line-height: 27px; + line-height: 1.5em; color: #444; }