From 84c486460255c20c8b17d0f78f6b18faedeff2d7 Mon Sep 17 00:00:00 2001
From: ido <idok@wix.com>
Date: Wed, 3 Dec 2014 11:36:34 +0200
Subject: [PATCH] eslint fixes

---
 .eslintrc                           |    4 +-
 Gruntfile.js                        |    2 +-
 home.html                           |   20 +-
 index.html                          |    2 +-
 package.json                        |    2 +-
 playground/css/home.css             | 1134 +++++++++++++++++++++++++++
 playground/{ => css}/playground.css |    0
 playground/fiddle.js                |    7 +-
 playground/intro.js                 |   25 +-
 playground/libs.js                  |    3 +-
 playground/main.js                  |    5 +-
 playground/playground.js            |    6 +-
 src/reactTemplates.js               |    6 +-
 13 files changed, 1177 insertions(+), 39 deletions(-)
 create mode 100644 playground/css/home.css
 rename playground/{ => css}/playground.css (100%)

diff --git a/.eslintrc b/.eslintrc
index 6855461..c8cd547 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -65,7 +65,6 @@
 		"space-in-brackets": [0, "never"],
         "space-infix-ops": 2,
         "space-return-throw-case": 2,
-        "space-unary-word-ops": 2,
         "strict": 2,
         "valid-typeof": 2,
         "wrap-regex": 0,
@@ -128,7 +127,8 @@
         "quote-props": [1, "as-needed"],
         "no-multi-spaces": 1,
         "key-spacing": [1, { "beforeColon": false, "afterColon": true }],
-        "comma-spacing": 1
+        "comma-spacing": 1,
+        "space-unary-ops": [1, { "words": true, "nonwords": false }]
     },
     "env": {
         "browser": false,
diff --git a/Gruntfile.js b/Gruntfile.js
index 8d7a63f..b9f505b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -138,7 +138,7 @@ module.exports = function (grunt) {
 
     grunt.registerTask('rt', function () {
         var reactTemplates = require('./src/cli');
-        var files = grunt.file.expand('playground/**/*.rt');
+        var files = grunt.file.expand('playground/*.rt');
         var conf = {commonJS: true, force: true};
         conf._ = files;
         var ret = reactTemplates.executeOptions(conf);
diff --git a/home.html b/home.html
index f89fce7..af16f21 100644
--- a/home.html
+++ b/home.html
@@ -17,9 +17,9 @@
     <link rel="shortcut icon" href="https://facebook.github.io//react/favicon.ico">
     <link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
 
-    <link rel="stylesheet" href="https://facebook.github.io//react/css/syntax.css">
-    <link rel="stylesheet" href="https://facebook.github.io//react/css/codemirror.css">
-    <link rel="stylesheet" href="https://facebook.github.io//react/css/react.css">
+    <link rel="stylesheet" href="https://facebook.github.io/react/css/syntax.css">
+    <link rel="stylesheet" href="https://facebook.github.io/react/css/codemirror.css">
+    <!--<link rel="stylesheet" href="https://facebook.github.io//react/css/react.css">-->
 
     <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
@@ -29,12 +29,12 @@
     <script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
     <script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
     <![endif]-->
-    <script type="text/javascript" src="/react/js/codemirror.js"></script>
-    <script type="text/javascript" src="/react/js/javascript.js"></script>
-    <script type="text/javascript" src="/react/js/react.js"></script>
-    <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
-    <script type="text/javascript" src="/react/js/live_editor.js"></script>
-    <script type="text/javascript" src="/react/js/showdown.js"></script>
+    <!--<script type="text/javascript" src="/react/js/codemirror.js"></script>-->
+    <!--<script type="text/javascript" src="/react/js/javascript.js"></script>-->
+    <!--<script type="text/javascript" src="/react/js/react.js"></script>-->
+    <!--<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>-->
+    <!--<script type="text/javascript" src="/react/js/live_editor.js"></script>-->
+    <!--<script type="text/javascript" src="/react/js/showdown.js"></script>-->
 
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
@@ -42,7 +42,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
     <!-- Latest compiled and minified JavaScript -->
 
-    <link rel="stylesheet" href="playground/playground.css"/>
+    <link rel="stylesheet" href="playground/css/home.css"/>
 </head>
 <body>
 
diff --git a/index.html b/index.html
index 5e1f289..22dc59b 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <!-- Latest compiled and minified JavaScript -->
 
 
-    <link rel="stylesheet" href="playground/playground.css"/>
+    <link rel="stylesheet" href="playground/css/playground.css"/>
 </head>
 <body>
 <div id="container">
diff --git a/package.json b/package.json
index aa84629..51d8902 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "grunt": "^0.4.5",
     "grunt-browserify": "^3.2.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-eslint": "^2.0.0",
+    "grunt-eslint": "^2.1.0",
     "grunt-node-tap": "^0.1.61",
     "tape": "^3.0.2"
   }
diff --git a/playground/css/home.css b/playground/css/home.css
new file mode 100644
index 0000000..07b00c9
--- /dev/null
+++ b/playground/css/home.css
@@ -0,0 +1,1134 @@
+.large-text-area {
+    height: 400px;
+    margin: 10px;
+}
+
+.code-area.horizontal {
+    width: 50%;
+    /*height: 620px;*/
+    float: left;
+}
+
+.code-area.vertical {
+    width: 100%;
+    /*height: 620px;*/
+    float: none;
+}
+
+.result-area.horizontal {
+    width: 50%;
+    float: left;
+}
+
+.result-area.vertical {
+    width: 100%;
+    float: none;
+}
+
+.result-area {
+    width: 50%;
+    /*height: 620px;*/
+    float: left;
+}
+
+.sample-view {
+    margin: 10px;
+}
+
+.sample-view button {
+    margin: 5px;
+}
+
+.sample-view input[type=checkbox] {
+    margin-right: 5px;
+}
+
+html {
+    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    color: #484848;
+    line-height: 1.28
+}
+
+p {
+    margin: 0 0 10px
+}
+
+.subHeader {
+    font-size: 21px;
+    font-weight: 200;
+    line-height: 30px;
+    margin-bottom: 10px
+}
+
+em {
+    font-style: italic
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 10px 0;
+    font-family: inherit;
+    font-weight: bold;
+    line-height: 20px;
+    color: inherit;
+    text-rendering: optimizelegibility
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+    font-weight: normal;
+    color: #7b7b7b
+}
+
+h1, h2, h3 {
+    line-height: 40px
+}
+
+h1 {
+    font-size: 39px
+}
+
+h2 {
+    font-size: 31px
+}
+
+h3 {
+    font-size: 23px
+}
+
+h4 {
+    font-size: 17px
+}
+
+h5 {
+    font-size: 14px
+}
+
+h6 {
+    font-size: 11px
+}
+
+h1 small {
+    font-size: 24px
+}
+
+h2 small {
+    font-size: 18px
+}
+
+h3 small {
+    font-size: 16px
+}
+
+h4 small {
+    font-size: 14px
+}
+
+ul, ol {
+    margin: 0 0 10px 25px;
+    padding: 0
+}
+
+ul ul, ul ol, ol ol, ol ul {
+    margin-bottom: 0
+}
+
+li {
+    line-height: 20px
+}
+
+a {
+    color: #c05b4d;
+    text-decoration: none
+}
+
+a:hover, a:focus {
+    color: #a5473a;
+    text-decoration: underline
+}
+
+a:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px
+}
+
+.center {
+    text-align: center
+}
+
+html * {
+    color-profile: sRGB;
+    rendering-intent: auto
+}
+
+.cm-s-solarized-light {
+    background-color: #f8f5ec;
+    color: #637c84
+}
+
+.cm-s-solarized-light .emphasis {
+    font-weight: bold
+}
+
+.cm-s-solarized-light .dotted {
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light .CodeMirror-gutter {
+    background-color: #eee8d5;
+    border-right: 3px solid #eee8d5
+}
+
+.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
+    color: #93a1a1
+}
+
+.cm-s-solarized-light .CodeMirror-cursor {
+    border-left-color: #002b36 !important
+}
+
+.cm-s-solarized-light .CodeMirror-matchingbracket {
+    color: #002b36;
+    background-color: #eee8d5;
+    box-shadow: 0 0 10px #eee8d5;
+    font-weight: bold
+}
+
+.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
+    color: #002b36;
+    background-color: #eee8d5;
+    box-shadow: 0 0 10px #eee8d5;
+    font-weight: bold;
+    color: #dc322f;
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light span.cm-keyword {
+    color: #268bd2
+}
+
+.cm-s-solarized-light span.cm-atom {
+    color: #2aa198
+}
+
+.cm-s-solarized-light span.cm-number {
+    color: #586e75
+}
+
+.cm-s-solarized-light span.cm-def {
+    color: #637c84
+}
+
+.cm-s-solarized-light span.cm-variable {
+    color: #637c84
+}
+
+.cm-s-solarized-light span.cm-variable-2 {
+    color: #b58900
+}
+
+.cm-s-solarized-light span.cm-variable-3 {
+    color: #cb4b16
+}
+
+.cm-s-solarized-light span.cm-comment {
+    color: #93a1a1
+}
+
+.cm-s-solarized-light span.cm-property {
+    color: #637c84
+}
+
+.cm-s-solarized-light span.cm-operator {
+    color: #657b83
+}
+
+.cm-s-solarized-light span.cm-string {
+    color: #36958e
+}
+
+.cm-s-solarized-light span.cm-error {
+    font-weight: bold;
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light span.cm-bracket {
+    color: #cb4b16
+}
+
+.cm-s-solarized-light span.cm-tag {
+    color: #657b83
+}
+
+.cm-s-solarized-light span.cm-attribute {
+    color: #586e75;
+    font-weight: bold
+}
+
+.cm-s-solarized-light span.cm-meta {
+    color: #268bd2
+}
+
+.cm-s-solarized-dark {
+    background-color: #002b36;
+    color: #839496
+}
+
+.cm-s-solarized-dark .emphasis {
+    font-weight: bold
+}
+
+.cm-s-solarized-dark .dotted {
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter {
+    background-color: #073642;
+    border-right: 3px solid #073642
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
+    color: #586e75
+}
+
+.cm-s-solarized-dark .CodeMirror-cursor {
+    border-left-color: #fdf6e3 !important
+}
+
+.cm-s-solarized-dark .CodeMirror-matchingbracket {
+    color: #fdf6e3;
+    background-color: #073642;
+    box-shadow: 0 0 10px #073642;
+    font-weight: bold
+}
+
+.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
+    color: #fdf6e3;
+    background-color: #073642;
+    box-shadow: 0 0 10px #073642;
+    font-weight: bold;
+    color: #dc322f;
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-keyword {
+    color: #839496;
+    font-weight: bold
+}
+
+.cm-s-solarized-dark span.cm-atom {
+    color: #2aa198
+}
+
+.cm-s-solarized-dark span.cm-number {
+    color: #93a1a1
+}
+
+.cm-s-solarized-dark span.cm-def {
+    color: #268bd2
+}
+
+.cm-s-solarized-dark span.cm-variable {
+    color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-variable-2 {
+    color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-variable-3 {
+    color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-comment {
+    color: #586e75
+}
+
+.cm-s-solarized-dark span.cm-property {
+    color: #b58900
+}
+
+.cm-s-solarized-dark span.cm-operator {
+    color: #839496
+}
+
+.cm-s-solarized-dark span.cm-string {
+    color: #6c71c4
+}
+
+.cm-s-solarized-dark span.cm-error {
+    font-weight: bold;
+    border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-bracket {
+    color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-tag {
+    color: #839496
+}
+
+.cm-s-solarized-dark span.cm-attribute {
+    color: #93a1a1;
+    font-weight: bold
+}
+
+.cm-s-solarized-dark span.cm-meta {
+    color: #268bd2
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: none;
+    margin: 0;
+    padding: 0
+}
+
+html {
+    background: #f9f9f9
+}
+
+.left {
+    float: left
+}
+
+.right {
+    float: right
+}
+
+.container {
+    padding-top: 50px;
+    min-width: 960px
+}
+
+.wrap {
+    width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px
+}
+
+.skinnyWrap {
+    width: 690px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px
+}
+
+hr {
+    height: 0;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #eee
+}
+
+ul, li {
+    margin-left: 20px
+}
+
+h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
+    margin-top: -50px;
+    position: absolute
+}
+
+h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
+    display: inline
+}
+
+.hash-link {
+    color: #aaa;
+    display: none
+}
+
+.nav-main {
+    background: #222;
+    color: #fafafa;
+    position: fixed;
+    top: 0;
+    height: 50px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    z-index: 100
+}
+
+.nav-main:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.nav-main a {
+    color: #e9e9e9;
+    text-decoration: none
+}
+
+.nav-main .nav-site {
+    float: right;
+    margin: 0
+}
+
+.nav-main .nav-site li {
+    margin: 0
+}
+
+.nav-main .nav-site a {
+    padding: 0 8px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    line-height: 50px;
+    display: inline-block;
+    height: 50px;
+    color: #aaa
+}
+
+.nav-main .nav-site a:hover {
+    color: #fafafa
+}
+
+.nav-main .nav-site a.active {
+    color: #fafafa;
+    border-bottom: 3px solid #cc7a6f;
+    background: #333
+}
+
+.nav-main .nav-home {
+    color: #00d8ff;
+    font-size: 24px;
+    line-height: 50px;
+    height: 50px;
+    display: inline-block
+}
+
+.nav-main .nav-logo {
+    vertical-align: middle;
+    display: inline-block
+}
+
+.nav-main ul {
+    display: inline
+}
+
+.nav-main li {
+    display: inline
+}
+
+.hero {
+    height: 300px;
+    background: #2d2d2d;
+    padding-top: 50px;
+    color: #e9e9e9;
+    font-weight: 300
+}
+
+.hero .text {
+    font-size: 64px;
+    text-align: center
+}
+
+.hero .minitext {
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase
+}
+
+.hero strong {
+    color: #61dafb;
+    font-weight: 400
+}
+
+.buttons-unit {
+    margin-top: 60px;
+    text-align: center
+}
+
+.buttons-unit a {
+    color: #61dafb
+}
+
+.buttons-unit .button {
+    font-size: 24px;
+    background: #cc7a6f;
+    color: #fafafa
+}
+
+.buttons-unit .button:active {
+    background: #c5695c
+}
+
+.buttons-unit.downloads {
+    margin: 30px 0
+}
+
+.nav-docs {
+    color: #2d2d2d;
+    font-size: 14px;
+    float: left;
+    width: 210px
+}
+
+.nav-docs ul {
+    list-style: none;
+    margin: 0
+}
+
+.nav-docs ul ul {
+    margin: 6px 0 0 20px
+}
+
+.nav-docs li {
+    line-height: 16px;
+    margin: 0 0 6px
+}
+
+.nav-docs h3 {
+    text-transform: uppercase;
+    font-size: 14px
+}
+
+.nav-docs a {
+    color: #666;
+    display: block
+}
+
+.nav-docs a:hover {
+    text-decoration: none;
+    color: #cc7a6f
+}
+
+.nav-docs a.active {
+    color: #cc7a6f
+}
+
+.nav-docs .nav-docs-section {
+    border-bottom: 1px solid #ccc;
+    border-top: 1px solid #eee;
+    padding: 12px 0
+}
+
+.nav-docs .nav-docs-section:first-child {
+    padding-top: 0;
+    border-top: 0
+}
+
+.nav-docs .nav-docs-section:last-child {
+    padding-bottom: 0;
+    border-bottom: 0
+}
+
+.nav-blog li {
+    margin-bottom: 5px
+}
+
+.home-section {
+    margin: 50px 0
+}
+
+.home-divider {
+    border-top-color: #bbb;
+    margin: 0 auto;
+    width: 400px
+}
+
+.skinny-row:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.skinny-col {
+    float: left;
+    margin-left: 40px;
+    width: 305px
+}
+
+.skinny-col:first-child {
+    margin-left: 0
+}
+
+.marketing-row {
+    margin: 50px 0
+}
+
+.marketing-row:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.marketing-col {
+    float: left;
+    margin-left: 40px;
+    width: 280px
+}
+
+.marketing-col h3 {
+    color: #2d2d2d;
+    font-size: 24px;
+    font-weight: normal;
+    text-transform: uppercase
+}
+
+.marketing-col p {
+    font-size: 16px
+}
+
+.marketing-col:first-child {
+    margin-left: 0
+}
+
+#examples h3, .home-presentation h3 {
+    color: #2d2d2d;
+    font-size: 24px;
+    font-weight: normal;
+    margin-bottom: 5px
+}
+
+#examples p {
+    margin: 0 0 25px 0;
+    max-width: 600px
+}
+
+#examples .example {
+    margin-top: 60px
+}
+
+#examples #todoExample {
+    font-size: 14px
+}
+
+#examples #todoExample ul {
+    list-style-type: square;
+    margin: 0 0 10px 0
+}
+
+#examples #todoExample input {
+    border: 1px solid #ccc;
+    font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    padding: 3px;
+    width: 150px
+}
+
+#examples #todoExample button {
+    font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    margin-left: 5px;
+    padding: 4px 10px
+}
+
+#examples #markdownExample textarea {
+    border: 1px solid #ccc;
+    font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    margin-bottom: 10px;
+    padding: 5px
+}
+
+.home-bottom-section {
+    margin-bottom: 100px
+}
+
+.docs-nextprev:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.docs-prev {
+    float: left
+}
+
+.docs-next {
+    float: right
+}
+
+footer {
+    font-size: 13px;
+    font-weight: 600;
+    margin-top: 36px;
+    margin-bottom: 18px;
+    overflow: auto
+}
+
+section.black content {
+    padding-bottom: 18px
+}
+
+.blogContent {
+    padding-top: 20px
+}
+
+.blogContent:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.blogContent blockquote {
+    padding: 5px 15px;
+    margin: 20px 0;
+    background-color: #f8f5ec;
+    border-left: 5px solid #f7ebc6
+}
+
+.documentationContent {
+    padding-top: 20px
+}
+
+.documentationContent:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.documentationContent .subHeader {
+    font-size: 24px
+}
+
+.documentationContent h2 {
+    margin-top: 30px
+}
+
+.documentationContent blockquote {
+    padding: 15px 30px 15px 15px;
+    margin: 20px 0;
+    background-color: rgba(204, 122, 111, 0.1);
+    border-left: 5px solid rgba(191, 87, 73, 0.2)
+}
+
+.documentationContent blockquote h4 {
+    margin-top: 0
+}
+
+.documentationContent blockquote p {
+    margin-bottom: 0
+}
+
+.documentationContent blockquote p:first-child {
+    font-weight: bold;
+    font-size: 17.5px;
+    line-height: 20px;
+    margin-top: 0;
+    text-rendering: optimizelegibility
+}
+
+.docs-prevnext {
+    padding-top: 40px;
+    padding-bottom: 40px
+}
+
+.jsxCompiler {
+    margin: 0 auto;
+    padding-top: 20px;
+    width: 1220px
+}
+
+.jsxCompiler label.compiler-option {
+    display: block;
+    margin-top: 5px
+}
+
+.jsxCompiler #jsxCompiler {
+    margin-top: 20px
+}
+
+.jsxCompiler .playgroundPreview {
+    padding: 0;
+    width: 600px
+}
+
+.jsxCompiler .playgroundPreview pre {
+    font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+    font-size: 0.8em;
+    line-height: 1.5
+}
+
+.jsxCompiler .playgroundError {
+    padding: 15px 20px
+}
+
+.button {
+    background: -webkit-linear-gradient(#9a9a9a, #646464);
+    background: linear-gradient(#9a9a9a, #646464);
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 18px;
+    font-weight: 400;
+    margin: 0 12px;
+    display: inline-block;
+    color: #fafafa;
+    text-decoration: none;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    text-decoration: none
+}
+
+.button:hover {
+    text-decoration: none
+}
+
+.button:active {
+    box-shadow: none
+}
+
+.hero .button {
+    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
+}
+
+.button.blue {
+    background: -webkit-linear-gradient(#77a3d2, #4783c2);
+    background: linear-gradient(#77a3d2, #4783c2)
+}
+
+.row {
+    padding-bottom: 4px
+}
+
+.row .span4 {
+    width: 33.33%;
+    display: table-cell
+}
+
+.row .span8 {
+    width: 66.66%;
+    display: table-cell
+}
+
+.row .span6 {
+    width: 50%;
+    display: table-cell
+}
+
+p {
+    margin: 10px 0
+}
+
+.highlight {
+    padding: 10px;
+    margin-bottom: 20px
+}
+
+figure {
+    text-align: center
+}
+
+.inner-content {
+    float: right;
+    width: 650px
+}
+
+.nosidebar .inner-content {
+    float: none;
+    margin: 0 auto
+}
+
+h1:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.edit-page-link {
+    float: right;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 20px;
+    margin-top: 17px
+}
+
+.post-list-item + .post-list-item {
+    margin-top: 60px
+}
+
+div.CodeMirror pre, div.CodeMirror-linenumber, code {
+    font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+    font-size: 0.8em;
+    line-height: 1.5
+}
+
+div.CodeMirror-linenumber:after {
+    content: '.'
+}
+
+.CodeMirror, div.CodeMirror-gutters, div.highlight {
+    border: none
+}
+
+.CodeMirror-readonly div.CodeMirror-cursor {
+    visibility: hidden
+}
+
+small code, li code, p code {
+    color: #555;
+    background-color: rgba(0, 0, 0, 0.04);
+    padding: 1px 3px
+}
+
+.cm-s-default span.cm-string-2 {
+    color: inherit
+}
+
+.playground:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.playground-tab {
+    border-bottom: none !important;
+    border-radius: 3px 3px 0 0;
+    padding: 6px 8px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #c2c0bc;
+    background-color: #f1ede4;
+    display: inline-block;
+    cursor: pointer
+}
+
+.playgroundCode, .playground-tab, .playgroundPreview {
+    border: 1px solid rgba(16, 16, 16, 0.1)
+}
+
+.playground-tab-active {
+    color: #222
+}
+
+.playgroundCode {
+    border-radius: 0 3px 3px 3px;
+    float: left;
+    overflow: hidden;
+    width: 600px
+}
+
+.playgroundPreview {
+    background-color: white;
+    border-radius: 3px;
+    float: right;
+    padding: 15px 20px;
+    width: 280px
+}
+
+.playgroundError {
+    color: #c5695c;
+    font-size: 15px
+}
+
+.MarkdownEditor textarea {
+    width: 100%;
+    height: 100px
+}
+
+.hll {
+    background-color: #f7ebc6;
+    border-left: 5px solid #f7d87c;
+    display: block;
+    margin-left: -14px;
+    margin-right: -14px;
+    padding-left: 9px
+}
+
+.highlight .javascript .err {
+    background-color: transparent;
+    color: inherit
+}
+
+.highlight {
+    position: relative;
+    margin-bottom: 14px;
+    padding: 30px 14px 14px;
+    border: none;
+    border-radius: 0;
+    overflow: auto
+}
+
+.highlight pre {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+    border: 0
+}
+
+.highlight pre code {
+    display: block;
+    background: none;
+    padding: 0
+}
+
+.highlight pre .lineno {
+    display: inline-block;
+    width: 22px;
+    padding-right: 5px;
+    margin-right: 10px;
+    color: #bebec5;
+    text-align: right
+}
+
+.highlight:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    padding: 3px 7px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #c2c0bc;
+    background-color: #f1ede4;
+    content: "Code"
+}
+
+.downloadCenter {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 25px
+}
+
+.downloadSection:hover {
+    text-decoration: none !important
+}
+
+@media screen and (max-width: 960px) {
+    .nav-main {
+        position: static
+    }
+
+    .container {
+        padding-top: 0
+    }
+}
+
+.post {
+    margin-bottom: 30px
+}
+
+.pagination {
+    margin-bottom: 30px;
+    width: 100%;
+    overflow: hidden
+}
+
+.pagination .next {
+    float: right
+}
+
+div[data-twttr-id] iframe {
+    margin: 10px auto !important
+}
+
+.three-column:after {
+    content: "";
+    display: table;
+    clear: both
+}
+
+.three-column > ul {
+    float: left;
+    margin-left: 30px;
+    width: 190px
+}
+
+.three-column > ul:first-child {
+    margin-left: 20px
+}
\ No newline at end of file
diff --git a/playground/playground.css b/playground/css/playground.css
similarity index 100%
rename from playground/playground.css
rename to playground/css/playground.css
diff --git a/playground/fiddle.js b/playground/fiddle.js
index f772c32..cb80376 100644
--- a/playground/fiddle.js
+++ b/playground/fiddle.js
@@ -1,6 +1,7 @@
 /**
  * Created by avim on 12/2/2014.
  */
+'use strict';
 var React = require('react/addons');
 var _ = require('lodash');
 var fiddleTemplate = require('./fiddle.rt.js');
@@ -11,10 +12,10 @@ function generateRandomId() {
         return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
     });
     return uuid;
-};
+}
 
 var Fiddle = React.createClass({
-    displayName: "Fiddle",
+    displayName: 'Fiddle',
     componentDidMount: function () {
         if (window.location.hash) {
             var newHash = window.location.hash.replace("#", "");
@@ -37,7 +38,7 @@ var Fiddle = React.createClass({
         var firebase = new Firebase('https://reacttemplates.firebaseio-demo.com/');
         firebase.child("fiddles").child(newHash).set(playgroundState, function () {
             Firebase.goOffline();
-            alert("saved the fiddle, you can share your url")
+            alert("saved the fiddle, you can share your url");
         }.bind(this));
 
     },
diff --git a/playground/intro.js b/playground/intro.js
index 554e79d..a564089 100644
--- a/playground/intro.js
+++ b/playground/intro.js
@@ -1,31 +1,32 @@
 /**
  * Created by avim on 12/2/2014.
  */
+'use strict';
 var React = require('react/addons');
 var _ = require('lodash');
 var introTemplate = require('./intro.rt.js');
 var path = require('path');
 var fs = require('fs');
 
-var helloCode = fs.readFileSync(__dirname+"/samples/hello.code").toString();
-var helloRT = fs.readFileSync(__dirname+"/samples/hello.rt").toString();
-var todoCode = fs.readFileSync(__dirname+"/samples/todo.code").toString();
-var todoRT = fs.readFileSync(__dirname+"/samples/todo.rt").toString();
+var helloCode = fs.readFileSync(__dirname + '/samples/hello.code').toString();
+var helloRT = fs.readFileSync(__dirname + '/samples/hello.rt').toString();
+var todoCode = fs.readFileSync(__dirname + '/samples/todo.code').toString();
+var todoRT = fs.readFileSync(__dirname + '/samples/todo.rt').toString();
 var samples = [
-    [helloCode,helloRT],
-    [todoCode,todoRT]
+    [helloCode, helloRT],
+    [todoCode, todoRT]
 ];
-samples = _.map(samples,function (tuple) {
-    return {templateProps:tuple[0],templateHTML:tuple[1]}
+samples = _.map(samples, function (tuple) {
+    return {templateProps: tuple[0], templateHTML: tuple[1]};
 });
 
 
 var intro = React.createClass({
-    displayName:"Intro",
-    getInitialState: function (){
+    displayName: 'Intro',
+    getInitialState: function () {
         return {
-            samples:samples
-        }
+            samples: samples
+        };
     },
     render: function () {
         return introTemplate.apply(this);
diff --git a/playground/libs.js b/playground/libs.js
index 0ac79c9..a33423a 100644
--- a/playground/libs.js
+++ b/playground/libs.js
@@ -1,9 +1,10 @@
 /**
  * Created by avim on 12/2/2014.
  */
+'use strict';
 var _ = require('lodash');
 var React = require('react/addons');
-var reactTemplates = require('../src/reactTemplates.js')
+var reactTemplates = require('../src/reactTemplates.js');
 var brace = require('brace');
 require('brace/mode/javascript');
 require('brace/mode/html');
diff --git a/playground/main.js b/playground/main.js
index e3a498a..2ea8a9e 100644
--- a/playground/main.js
+++ b/playground/main.js
@@ -1,14 +1,15 @@
 /**
  * Created by avim on 12/2/2014.
  */
+'use strict';
 var React = require('react/addons');
 var fiddle = require('./fiddle.js');
 var intro = require('./intro.js');
 
 window.initFiddle = function () {
     window.fiddle = React.render(fiddle(), document.getElementById('container'));
-}
+};
 
 window.initIntro = function () {
     window.intro = React.render(intro(), document.getElementById('container'));
-}
+};
diff --git a/playground/playground.js b/playground/playground.js
index 2c54258..f94a830 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -22,12 +22,12 @@ function generateTemplateSource(html) {
 
 function generateTemplateFunction(code) {
     try {
-        var defineMap = {"react/addons": React, lodash: _};
+        var defineMap = {'react/addons': React, lodash: _};
         var define = function (requirementsNames, content) {
-            var requirements = _.map(requirementsNames,function (reqName) {
+            var requirements = _.map(requirementsNames, function (reqName) {
                 return defineMap[reqName];
             });
-            return content.apply(this,requirements);
+            return content.apply(this, requirements);
         };
         /*eslint no-eval:0*/
         var res = eval(code);
diff --git a/src/reactTemplates.js b/src/reactTemplates.js
index c6d67c5..fbe4943 100644
--- a/src/reactTemplates.js
+++ b/src/reactTemplates.js
@@ -64,8 +64,8 @@ function convertText(node, context, txt) {
         if (curlyCounter !== 0) {
             throw buildError("Failed to parse text '" + txt + "'", context, node);
         } else {
-            var needsParens = start !== 0 || end !== txt.length -1;
-            res += (first ? '' : '+') + (needsParens?'(':'')+txt.substr(start + 1, end - start - 2)+(needsParens?')':'');
+            var needsParens = start !== 0 || end !== txt.length - 1;
+            res += (first ? '' : '+') + (needsParens ? '(' : '') + txt.substr(start + 1, end - start - 2) + (needsParens ? ')' : '');
             first = false;
             txt = txt.substr(end);
         }
@@ -332,7 +332,7 @@ function extractDefinesFromJSXTag(html, defines) {
 function convertTemplateToReact(html, options) {
     var rootNode = cheerio.load(html, {lowerCaseTags: false, lowerCaseAttributeNames: false, xmlMode: true, withStartIndices: true});
     options = options || {};
-    var defines = {"react/addons": 'React', lodash: '_'};
+    var defines = {'react/addons': 'React', lodash: '_'};
     html = extractDefinesFromJSXTag(html, defines);
     var context = defaultContext();
     context.html = html;