diff --git a/demo/reagentdemo/common.cljs b/demo/reagentdemo/common.cljs index 1a2b1231..fb55738a 100644 --- a/demo/reagentdemo/common.cljs +++ b/demo/reagentdemo/common.cljs @@ -2,8 +2,9 @@ (:require [reagent.core :as r] [reagent.debug :refer-macros [dbg println]])) -(defn demo-component [{:keys [expected comp src complete no-heading]}] - (r/with-let [showing (r/atom false)] +(defn demo-component [{:keys [expected comp src hint complete no-heading]}] + (r/with-let [showing-solution (r/atom false) + showing-hint (r/atom false)] [:div (when expected [:div.demo-example.clearfix @@ -18,16 +19,26 @@ [:h3.demo-heading "Actual output "]) (if-not complete [:div.simple-demo [comp]] - [comp])])]) + [comp])]) + (when hint + [:div + [:a.demo-example-hide {:on-click (fn [e] + (.preventDefault e) + (swap! showing-hint not) + nil)} + (if @showing-hint "hide" "show")] + [:h3.demo-heading "Hint"] + (when @showing-hint + hint)])]) (if src [:div.demo-source.clearfix [:a.demo-example-hide {:on-click (fn [e] (.preventDefault e) - (swap! showing not) + (swap! showing-solution not) nil)} - (if @showing "hide" "show")] + (if @showing-solution "hide" "show")] (when-not no-heading [:h3.demo-heading "Solution"]) - (when @showing src)] + (when @showing-solution src)] [:div.clearfix])])) diff --git a/demo/reagentdemo/intro.cljs b/demo/reagentdemo/intro.cljs index 46bcd260..525513ca 100644 --- a/demo/reagentdemo/intro.cljs +++ b/demo/reagentdemo/intro.cljs @@ -132,9 +132,16 @@ and to be fast enough by default that you rarely have to care about performance."] - [:p "A very basic Reagent component may look something like this: "] + [:p "Vamos a empezar con un ejemplo de componente Reagent básico:"] [demo-component {:expected simple-component :comp solutions/simple-component + :hint [:div + [:p "Components in reagent use " + [:a {:href "https://github.com/weavejester/hiccup"} + "hiccup syntax"] + ". Here's an example: "] + [:code (s/syntaxed "[:p \"I like it \" [:span {:style {:color :green}} \"green\"]]")] + [:p "Now try to write your solution on solutions/simple-component (in the file src/reagentdemo/solutions.cljs), in such a way that it looks like the example above."]] :src (s/src-of [:simple-component])}] [:p "You can build new components using other components as diff --git a/demo/reagentdemo/solutions.cljs b/demo/reagentdemo/solutions.cljs index 3e68d81a..9f2fa6e5 100644 --- a/demo/reagentdemo/solutions.cljs +++ b/demo/reagentdemo/solutions.cljs @@ -4,7 +4,7 @@ [reagent.core :as r])) (defn simple-component [] - [:div "Hello!"]) + [:div "Fix me in reagentdemo.solutions/simple-component"]) (defn simple-parent [] [:div "Fix me in reagentdemo.solutions/simple-parent"])