Add mechanism to show a hint on each example

Adds an example hint, in spanish as we are aiming at translating to spanish for the tutorial

Author: nberger

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])]))

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 "Los componentes en reagent usan sintaxis tipo "
+                                  [:a {:href "https://github.com/weavejester/hiccup"}
+                                   "hiccup"]
+                                  ". Un ejemplo de hiccup: "]
+                                 [:code (s/syntaxed "[:p \"Soy del \" [:span {:style {:color :red}} \"Rojo\"]]")]
+                                 [:p "Ahora intenta escribir la solución en solutions/simple-component (en el archivo src/reagentdemo/solutions.cljs), de forma tal que se vea como más arriba."]]
                       :src      (s/src-of [:simple-component])}]
 
      [:p "You can build new components using other components as

demo/reagentdemo/solutions.cljs

@@ -2,4 +2,4 @@
   "Solutions for the tutorial examples. Your code goes here.")
 
 (defn simple-component []
-  [:div "Hello!"])
+  [:div "Fix me in reagentdemo.solutions/simple-component"])