reagent-project · Jan 9, 2014 · Jan 9, 2014 · Jan 9, 2014 · Jan 10, 2014 · Jan 10, 2014
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,3 @@
-index.html
-assets/
-/news/
 target
 pom.xml
 .lein-repl-history

diff --git a/README.md b/README.md
@@ -1,4 +1,25 @@
 
+### Chinese translation of Reagent Intro
+
+Live page: http://react-china.github.io/reagent
+
+If you want to help, fork this project, update this file:
+
+```bash
+demo/reagentdemo/intro.cljs
+```
+
+run these commands to refresh `index.html`:
+
+```bash
+lein cljsbuild once
+make gensite
+```
+
+and send PR at end.
+
+----
+
 # Reagent
 
 A simple [ClojureScript](http://github.com/clojure/clojurescript) interface to
@@ -34,7 +55,7 @@ Reagent uses [Hiccup-like](https://github.com/weavejester/hiccup) markup instead
 (defn some-component []
   [:div
    [:h3 "I am a component!"]
-   [:p.someclass 
+   [:p.someclass
     "I have " [:strong "bold"]
     [:span {:style {:color "red"}} " and red"]
     " text."]])

diff --git a/assets/demo.css b/assets/demo.css
diff --git a/assets/demo.js b/assets/demo.js
diff --git a/demo/reagentdemo/intro.cljs b/demo/reagentdemo/intro.cljs
diff --git a/index.html b/index.html
diff --git a/news/any-arguments.html b/news/any-arguments.html
diff --git a/news/binary-clock.html b/news/binary-clock.html
diff --git a/news/cloact-reagent-undo-demo.html b/news/cloact-reagent-undo-demo.html
diff --git a/news/index.html b/news/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Reagent news</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <link rel='stylesheet' href='../assets/demo.css?1448548628907'>
+  </head>
+  <body>
+    <div data-reactid=".1sls390l4w0" data-react-checksum="-1033603262"><div class="nav" data-reactid=".1sls390l4w0.0"><ul class="nav" data-reactid=".1sls390l4w0.0.0"><li class="brand" data-reactid=".1sls390l4w0.0.0.0"><a href="../index.html" data-reactid=".1sls390l4w0.0.0.0.0">Reagent:</a></li><li data-reactid=".1sls390l4w0.0.0.1"><a href="../index.html" data-reactid=".1sls390l4w0.0.0.1.0">Intro</a></li><li data-reactid=".1sls390l4w0.0.0.2"><a href="../news/index.html" data-reactid=".1sls390l4w0.0.0.2.0">News</a></li><li data-reactid=".1sls390l4w0.0.0.3"><a href="https://github.com/holmsand/reagent" data-reactid=".1sls390l4w0.0.0.3.0">GitHub</a></li></ul></div><div data-reactid=".1sls390l4w0.1"><div data-reactid=".1sls390l4w0.1.0"></div><div class="reagent-demo" data-reactid=".1sls390l4w0.1.1"><h1 data-reactid=".1sls390l4w0.1.1.0"><a href="../news/binary-clock.html" data-reactid=".1sls390l4w0.1.1.0.0">A binary clock</a></h1><div data-reactid=".1sls390l4w0.1.1.1"></div><div class="demo-text" data-reactid=".1sls390l4w0.1.1.2"><p data-reactid=".1sls390l4w0.1.1.2.0"><span data-reactid=".1sls390l4w0.1.1.2.0.0">Fredrik Dyrkell wrote a very nice </span><a href="http://www.lexicallyscoped.com/2014/01/23/clojurescript-react-om-binary-clock.html" data-reactid=".1sls390l4w0.1.1.2.0.1">binary
+      clock</a><span data-reactid=".1sls390l4w0.1.1.2.0.2"> using </span><a href="https://github.com/swannodette/om" data-reactid=".1sls390l4w0.1.1.2.0.3">Om</a><span data-reactid=".1sls390l4w0.1.1.2.0.4">. I thought I’d replicate that
+      using Reagent for fun (another re-write, using </span><a href="http://hoplon.io" data-reactid=".1sls390l4w0.1.1.2.0.5">Hoplon</a><span data-reactid=".1sls390l4w0.1.1.2.0.6">, can be seen </span><a href="http://pmbauer.github.io/2014/01/27/hoplon-binary-clock/" data-reactid=".1sls390l4w0.1.1.2.0.7">here</a><span data-reactid=".1sls390l4w0.1.1.2.0.8">).</span></p><p data-reactid=".1sls390l4w0.1.1.2.1">So, without further ado, here is a binary clock using Reagent.</p><a href="../news/binary-clock.html" class="news-read-more" data-reactid=".1sls390l4w0.1.1.2.2">Read more</a></div></div><div class="reagent-demo" data-reactid=".1sls390l4w0.1.2"><h1 data-reactid=".1sls390l4w0.1.2.0"><a href="../news/any-arguments.html" data-reactid=".1sls390l4w0.1.2.0.0">All arguments allowed</a></h1><div data-reactid=".1sls390l4w0.1.2.1"></div><div class="demo-text" data-reactid=".1sls390l4w0.1.2.2"><h2 data-reactid=".1sls390l4w0.1.2.2.0">If it looks like a function…</h2><p data-reactid=".1sls390l4w0.1.2.2.1"><span data-reactid=".1sls390l4w0.1.2.2.1.0">Calling a component in Reagent looks a lot like a function
+      call. Now it also </span><em data-reactid=".1sls390l4w0.1.2.2.1.1">works</em><span data-reactid=".1sls390l4w0.1.2.2.1.2"> like one.</span></p><p data-reactid=".1sls390l4w0.1.2.2.2">Before 0.4.0, component functions were always called with
+      three arguments: a map of attributes, a vector of ”children”,
+      and the current React component.</p><p data-reactid=".1sls390l4w0.1.2.2.3">This was confusing, and an unnecessary limitation, so now
+      component functions get exactly the same arguments you pass to
+      them.</p><a href="../news/any-arguments.html" class="news-read-more" data-reactid=".1sls390l4w0.1.2.2.4">Read more</a></div></div><div class="reagent-demo" data-reactid=".1sls390l4w0.1.3"><div data-reactid=".1sls390l4w0.1.3.0"></div><h1 data-reactid=".1sls390l4w0.1.3.1"><a href="../news/reagent-is-async.html" data-reactid=".1sls390l4w0.1.3.1.0">Faster by waiting</a></h1><div class="demo-text" data-reactid=".1sls390l4w0.1.3.2"><h2 data-reactid=".1sls390l4w0.1.3.2.0">Reagent gets async rendering</h2><p data-reactid=".1sls390l4w0.1.3.2.1">Reagent already separates state from components. Now they
+      are also separated in time.</p><p data-reactid=".1sls390l4w0.1.3.2.2"><span data-reactid=".1sls390l4w0.1.3.2.2.0">From version 0.3.0, changes in application state (as
+      represented by Reagent’s </span><code data-reactid=".1sls390l4w0.1.3.2.2.1">atom</code><span data-reactid=".1sls390l4w0.1.3.2.2.2">s) are no longer
+      rendered immediately to the DOM. Instead, Reagent waits until
+      the browser is ready to repaint the window, and then all the
+      changes are rendered in one single go.</span></p><a href="../news/reagent-is-async.html" class="news-read-more" data-reactid=".1sls390l4w0.1.3.2.3">Read more</a></div></div><div class="reagent-demo" data-reactid=".1sls390l4w0.1.4"><h1 data-reactid=".1sls390l4w0.1.4.0"><a href="../news/cloact-reagent-undo-demo.html" data-reactid=".1sls390l4w0.1.4.0.0">Cloact becomes Reagent: Undo is trivial</a></h1><div data-reactid=".1sls390l4w0.1.4.1"></div><div class="demo-text" data-reactid=".1sls390l4w0.1.4.2"><h2 data-reactid=".1sls390l4w0.1.4.2.0">(reset! cloact-name &quot;Reagent&quot;)</h2><p data-reactid=".1sls390l4w0.1.4.2.1">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><p data-reactid=".1sls390l4w0.1.4.2.2"><span data-reactid=".1sls390l4w0.1.4.2.2.0">The new name is </span><strong data-reactid=".1sls390l4w0.1.4.2.2.1">Reagent</strong><span data-reactid=".1sls390l4w0.1.4.2.2.2">, which hopefully
+      doesn’t bring with it the same disgusting connotations.</span></p><p data-reactid=".1sls390l4w0.1.4.2.3">The API is otherwise unchanged, so a simple
+      search-and-replace should suffice.</p><a href="../news/cloact-reagent-undo-demo.html" class="news-read-more" data-reactid=".1sls390l4w0.1.4.2.4">Read more</a></div></div></div><a href="https://github.com/holmsand/reagent" class="github-badge" data-reactid=".1sls390l4w0.2"><img style="position:absolute;top:0;left:0;border:0;" alt="Fork me on GitHub" src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png" data-reactid=".1sls390l4w0.2.0"></a></div>
+    <script type='text/javascript'
+      src='../assets/demo.js?1448548628907'></script>
+    <script type='text/javascript'>
+      setTimeout(function() {demo.mountdemo('news/index.html')}, 200);
+    </script>
+  </body>
+</html>
diff --git a/news/reagent-is-async.html b/news/reagent-is-async.html
diff --git a/site/demo.css b/site/demo.css
@@ -1,5 +1,5 @@
 
-* { 
+* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -118,7 +118,7 @@ ul.nav > li.brand > a {
 }
 
 .demo-text > p, .demo-text > ul {
-    font-family: georgia, serif;
+    font-family: Roboto,Helvetica Neue,Hiragino Sans GB,Microsoft Yahei,sans-serif;
     font-size: 18px;
     line-height: 1.5em;
     color: #444;

diff --git a/site/demo.js b/site/demo.js
diff --git a/site/democss.css b/site/democss.css