Initial commit

.eslintrc

@@ -0,0 +1,22 @@
+{
+    "rules": {
+        "curly": [2, "multi-line"],
+        "indent": [2, 4],
+        "quotes": [2, "single"],
+        "linebreak-style": [2, "unix"],
+        "max-len": [2, 120, 4],
+        "semi": [2, "always"],
+        "strict": [2, "never"]
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "ecmaFeatures": {
+        "jsx": true
+    },
+    "plugins": [
+        "react"
+    ],
+    "extends": "eslint:recommended"
+}

.gitignore

@@ -0,0 +1,9 @@
+# OSX
+.DS_Store
+
+# NPM
+/node_modules
+npm-*
+
+# Build
+/build

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js: '0.12'
+sudo: false

Makefile

@@ -0,0 +1,46 @@
+ESLINT=./node_modules/.bin/eslint
+LIVE=./node_modules/.bin/live-server
+WATCH=./node_modules/.bin/watch
+WEBPACK=./node_modules/.bin/webpack
+
+# ------------------------------------
+
+build:
+	@make clean
+	@make static
+	@make webpack
+
+clean:
+	rm -rf ./build/*.*
+	mkdir -p build
+
+static:
+	cp -a ./static/. ./build/
+
+webpack:
+	$(WEBPACK)
+
+# ------------------------------------
+
+test:
+	@make lint
+
+lint:
+	@$(ESLINT) ./src/{components/**,views/**}/*.jsx
+
+# ------------------------------------
+
+start:
+	$(LIVE) ./build &
+	@make watch &
+	wait
+
+watch:
+	$(WEBPACK) -d --watch &
+	$(WATCH) "make static" ./static &
+	$(WATCH) "make lint" ./src &
+	wait
+
+# ------------------------------------
+
+.PHONY: build clean static webpack watch test lint

README.md

@@ -0,0 +1,12 @@
+### scratch-www
+#### Standalone WWW client for Scratch
+
+### To Build
+```bash
+npm start
+```
+
+### To Test
+```bash
+npm test
+```

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "www",
+  "version": "1.0.0",
+  "description": "Standalone WWW client for Scratch",
+  "main": "index.js",
+  "scripts": {
+    "start": "make start",
+    "test": "make test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/llk/scratch-www.git"
+  },
+  "author": "MIT",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/llk/scratch-www/issues"
+  },
+  "homepage": "https://github.com/llk/scratch-www#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "css-loader": "0.17.0",
+    "eslint": "1.3.1",
+    "eslint-plugin-react": "3.3.1",
+    "json-loader": "0.5.2",
+    "jsx-loader": "0.13.2",
+    "live-server": "0.8.1",
+    "node-sass": "3.3.2",
+    "react": "0.13.3",
+    "sass-loader": "2.0.1",
+    "style-loader": "0.12.3",
+    "tape": "4.2.0",
+    "watch": "0.16.0",
+    "webpack": "1.12.0",
+    "xhr": "2.0.4"
+  }
+}

src/components/box/box.jsx

@@ -0,0 +1,23 @@
+var React = require('react');
+
+require('./box.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        title: React.PropTypes.string.isRequired
+        more: React.React.PropTypes.string
+    },
+    render: function () {
+        return (
+            <div className="box">
+                <div className="header">
+                    <h4>{this.props.title}</h4>
+                </div>
+
+                <div className="content">
+                    {children}
+                </div>
+            </div>
+        );
+    }
+});

src/components/box/box.scss

@@ -0,0 +1,11 @@
+.box {
+    background-color: purple;
+
+    .header {
+        background-color: grey;
+    }
+
+    .content {
+        background-color: white;
+    }
+}

src/components/footer/footer.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+require('./footer.scss');
+
+module.exports = React.createClass({
+    render: function () {
+        return (
+            <div>
+                <h1>Footer</h1>
+            </div>
+        );
+    }
+});

src/components/footer/footer.scss

@@ -0,0 +1,3 @@
+#footer {
+    background-color: yellow;
+}

src/components/navigation/navigation.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+require('./navigation.scss');
+
+module.exports = React.createClass({
+    render: function () {
+        return (
+            <div>
+                <h1>Navigation</h1>
+            </div>
+        );
+    }
+});

src/components/navigation/navigation.scss

@@ -0,0 +1,3 @@
+#navigation {
+    background-color: yellow;
+}

src/components/news/news.jsx

@@ -0,0 +1,37 @@
+var React = require('react');
+
+require('./news.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        items: React.PropTypes.array
+    },
+    getDefaultProps: function () {
+        return {
+            items: [
+                {
+                    id: 1,
+                    headline: 'Woo! Pizza party!',
+                    copy: 'Lorem ipsum dolor sit amet.'
+                }
+            ]
+        };
+    },
+    render: function () {
+        return (
+            <div className="news">
+                <h1>News</h1>
+                <ul>
+                    {this.props.items.map(function (item) {
+                        return (
+                            <li key={item.id}>
+                                <h4>{item.headline}</h4>
+                                <p>{item.copy}</p>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        );
+    }
+});

src/components/news/news.scss

@@ -0,0 +1,3 @@
+.news {
+    background-color: white;
+}

src/main.jsx

@@ -0,0 +1,7 @@
+var React = require('react');
+
+var Navigation = require('./components/navigation/navigation.jsx');
+var Footer = require('./components/footer/footer.jsx');
+
+React.render(<Navigation />, document.getElementById('navigation'));
+React.render(<Footer />, document.getElementById('footer'));

src/mixins/api.jsx

@@ -0,0 +1,14 @@
+var xhr = require('xhr');
+
+module.exports = {
+    api: function (opts, callback) {
+        xhr(opts, function (err, res, body) {
+            if (err) {
+                // emit global "error" event
+                return callback(err);
+            }
+            // @todo Global error handler
+            callback(err, body);
+        });
+    }
+};

src/views/splash/splash.jsx

@@ -0,0 +1,40 @@
+var React = require('react');
+
+var Api = require('../../mixins/api.jsx');
+var News = require('../../components/news/news.jsx');
+
+require('./splash.scss');
+
+var View = React.createClass({
+    mixins: [
+        Api
+    ],
+    getInitialState: function () {
+        return {
+            news: []  
+        };
+    },
+    componentDidMount: function () {
+        this.api({
+            method: 'get',
+            uri: 'https://gist.githubusercontent.com/thisandagain/4d62ac52b78f76e833bd/raw/a2f4a67ec16d980d2313f3645b30d22acc150d7a/news.json'
+        }, function (err, body) {
+            if (err) return;
+            
+            console.dir(JSON.parse(body));
+            this.setState({
+                news: JSON.parse(body)
+            });
+        }.bind(this));
+    },
+    render: function () {
+        return (
+            <div>
+                <h1>I am the splash page!</h1>
+                <News items={this.state.news} />
+            </div>
+        );
+    }
+});
+
+React.render(<View />, document.getElementById('view'));

src/views/splash/splash.scss

@@ -0,0 +1,3 @@
+#view {
+    background-color: red;
+}

static/css/lib/normalize.min.css

@@ -0,0 +1,2 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

static/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Scratch</title>
+        <meta name="description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations." />    
+
+        <link rel="stylesheet" href="/css/lib/normalize.min.css" />
+    </head>
+
+    <body>
+        <div id="navigation"></div>
+        <div id="view"></div>
+        <div id="footer"></div>
+
+        <!-- Scripts -->
+        <script src="/js/lib/react.js"></script>
+        <script src="/js/main.bundle.js"></script>
+        <script src="/js/splash.bundle.js"></script>
+    </body>
+</html>

webpack.config.js

@@ -0,0 +1,36 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        main: './src/main.jsx',
+        splash: './src/views/splash/splash.jsx'
+    },
+    devtool: 'source-map',
+    externals: {
+        'react': 'React',
+        'react/addons': 'React'
+    },
+    output: {
+        path: path.resolve(__dirname, 'build/js'),
+        filename: '[name].bundle.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.jsx$/,
+                loader: 'jsx-loader',
+                include: path.resolve(__dirname, 'src')
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+                include: path.resolve(__dirname, 'src')
+            },
+            {
+                test: /\.scss$/,
+                loader: 'style!css!sass'
+            }
+        ]
+    }
+};