Merge branch 'develop' into feature/email-confirmation-banner

* develop:
  separate out arrows var from settings object
  Handle arrow display dynamically
  Deploy from Travis
  Adjust nitpicks, remove whitespace in (), add around +
  display title and extras differently
  Add registration component to `JOIN SCRATCH`
  Explicitly set `Accept-Language` to cookie lang
  Remove the session listener on unmount
  Localize the welcome panel
  Update spacing on Splash page elements
  Handle sentry config and express routing/page handling errors, to do: handle uncaughtExceptions
  Handle sentry config and express routing/page handling errors, to do: handle uncaughtExceptions
  Update entire Tutorial cards to be clickable
  Add window.Intl polyfill. Resolves GH-96
  Override `Slider`'s `arrows` setting by row length
  use ellipsis if text overflows and urlify username
  Test the build when we test our build
  Default admin panel to closed
  Set 'black' default props for thumbnails and carousel
  Remove localhost from api call for message count

.travis.yml

@@ -7,3 +7,33 @@ cache:
 notifications:
   slack:
     secure: ezESiG7JnuSLZc2/PPhOvWUv5BHBCr+g86MsuLLw+S+zz3DUfzWHMQ1g5tUvkeSDTPmfEIX41EnPkaoWtsD3OGO0PGXgseAfA8+6Z4N1rICNZZrhXZB2s6UdwRK1e+0Jol4W3kHmt96BHyN2scLNgJYeWMgSJllVsuPhMTlKBZIXI9u540NH8Nxjl3f2WvoIg64Q1mZvMxkpPbw4xssx6U4HSFE8kTTE6+EFsSxzombFX0cLGjPiJ9QZgGVUk4UkIjyiFLQQDfQlLllCaUpqJ9+qbuCNoMSKA2yty/qyZ8Y+r4OlMberjmBzR9GRLLyXWWcaAfMIgwlRhjtLYIDAUSsGM1iwUWCgyB9maG2IiXuYLSueuMx8DcDwbpUepoDgnqBYnM2AJmT8gcsxqlKYzJpYpHDgZgBlLZQgMXqjrVJHs/Tf9XVcLS6HAn1Ww0OOT01jThfy4gClpAuqLayYexsXOoL+RaFg25E2NzuTtaFWgRfWZgcAeqYNDiUzwun2D4vZ5I+NtdRP0gzpbG2fxhFz05vAqyf1Kp6ZYb17Li3A38dIm6Lsvv3qawAIAgNaZpIZX3f89+uq6jHU8kJy1Iv823JK2Xac3vEz3SHUKJnuXFF0LO07om9AcNEXhP/JrJ617S8nfvDtZRJODMFhz8qQwie+65Ql1I871goBpVs=
+env:
+  global:
+  - secure: kXRyOECCfmTmIyibSKyHFz9cC5YGDsLIZJyiSpepvjRvuuJErxpD3yokp++JCJXdj/CRfJKazeMPkgek78zGiI/xnHR2aVxuQraU5ELIVNBCaFDtM4lKxtTVvEAtErwhWrH9zMiJkgXGF/MwID0QgZVlD/hpKI3MoS8sS1dmvDlqlregTvUZWBnlqMnrQuOXFNLPT+/QPgO6myd+nJn+XogSw8HceUo76cOADBphLtxFvE+R3FEbkHOwgJzUR3p8FstNXjmXZocSAYlGEgf1QIAN7M+3fH3wBHUBL2XELlr3w6eFr0qPCT5GCIxc4DNYsNt1360nmhSUqcm+k30HcbGmM5oWiRTmo2NrNpKhCUyF9wKHKmS4JYqGBEBjLxkTZe/zCv18gNVy0s9x/IXP3qP9SoRnlNEt9H6MjaxBc3lWD47UmcDJoLrs7OUdM4HDxgmPJyTzJsg059GEWgHuEMGIGGCYBGdpNlu4ZH6yEgsji73+kAkYbnVzhz4QtfhGNgQv3kEhTmDHW5muca5EMuSyOLW5v4ffpLJgirJQi9lvjZ/pZ+XJU0DSfIHdViqop6hRrsPxo2ewle3RcZrlQuw7lJJp9IoDT5Ku2PU1m8+705CR8S96DrMP8UtbC1Plcv91MMGmwgPwYAQwEcTnj7Fsq9QKReus+CTUXYqaMQM=
+  - secure: D7TVtzhDPvSsipXB9jiokA00rUAENWjK5Lrv+JOgdNe35D9j3tSSgT+iKj2Et5LcSeKXpvC2gMDXakHMflo2tT8uYPx7NI6J9XZMro2VP+ebTHlG57Fuoves9XxwCvHDFk2yW/K7uma8a92rs4PNydJRB6SPm3pWjL29Ih2n9ZFy37ZHCdL26R61EJ9SZh5siOVuXhqB36mu0Z9ANjXeXcLrKzpRf8mmORsK9NT/0A9kg4a0Q9ZKiHhUp3Wh3VKfDlDvqYszdofBNSpUGSyj/J4IlpYld8q+o+husxr3yLbV+FR1xdJ8NS04iXEmd1yOhJKy7ienpNQJ7NLwSOgDQ+Y8VZJUf0ZvSX/acHqNFQC86tW15KTAEVfnY8Js7mqmZrsWoY6+jzC8RyaQoZiD1HQfJLHkG+uqrfPYhWy1BNz+4QtBwnnQO+E/B2CM+fGAmjoJ+UjquWQo+sHWwoatNrG85JumA3GsA1FSlkzEVy3AAcST/CFZ1IyGCDVTar++2VwYCH691DuJy1gyeqSukSbRQIhGTSktArv0FjIiVsoMTCB/Ntg8HcfL6ADTfsijZVL9v5hN2VUXg3BjuF4TEBsrN78WMNI+U3g1+W1UW+036eP09Z7QDxIvLoQdIaQncGBny2KnR2j/Gmgz9eG0eg4dlV+2W+9DqE4y+tmU4Jw=
+  - EB_REGION=us-east-1
+  - EB_APP=scratch-www
+  - EB_AWS_BUCKET_NAME=elasticbeanstalk-us-east-1-307680192167
+deploy:
+- provider: elasticbeanstalk
+  access_key_id: $EB_AWS_ACCESS_KEY_ID
+  secret_access_key: $EB_AWS_SECRET_ACCESS_KEY
+  bucket_name: $EB_AWS_BUCKET_NAME
+  bucket_path: $EB_APP
+  region: $EB_REGION
+  app: $EB_APP
+  env: scratch-www-staging
+  on:
+    repo: LLK/scratch-www
+    branch: develop
+- provider: elasticbeanstalk
+  access_key_id: $EB_AWS_ACCESS_KEY_ID
+  secret_access_key: $EB_AWS_SECRET_ACCESS_KEY
+  bucket_name: $EB_AWS_BUCKET_NAME
+  bucket_path: $EB_APP
+  region: $EB_REGION
+  app: $EB_APP
+  env: scratch-www-staging
+  on:
+    repo: LLK/scratch-www
+    branch: master

Makefile

@@ -24,7 +24,7 @@ translations:
 	./src/scripts/build-locales locales/translations.json
 
 webpack:
-	$(WEBPACK)
+	$(WEBPACK) --bail
 
 # ------------------------------------
 
@@ -45,6 +45,7 @@ start:
 
 test:
 	@make lint
+	@make build
 
 lint:
 	$(ESLINT) ./*.js

en.json

@@ -61,5 +61,9 @@
     "splash.projectsLovedByScratchersFollowing": "Projects Loved by Scratchers I'm Following",
     "splash.projectsInStudiosFollowing": "Projects in Studios I'm Following",
     "splash.communityRemixing": "What the Community is Remixing",
-    "splash.communityLoving": "What the Community is Loving"
+    "splash.communityLoving": "What the Community is Loving",
+    "welcome.welcomeToScratch": "Welcome to Scratch!",
+    "welcome.learn": "Learn how to make a project in Scratch",
+    "welcome.tryOut": "Try out starter projects",
+    "welcome.connect": "Connect with other Scratchers"
 }
\ No newline at end of file

package.json

@@ -28,14 +28,14 @@
     "express-http-proxy": "0.6.0",
     "lodash.defaults": "3.1.2",
     "mustache": "2.1.3",
-    "newrelic": "1.22.1"
+    "newrelic": "1.22.1",
+    "raven": "0.8.1"
   },
   "devDependencies": {
     "autoprefixer-loader": "2.1.0",
     "classnames": "2.1.3",
     "cookie": "0.2.2",
     "css-loader": "0.17.0",
-    "custom-event-polyfill": "0.2.1",
     "eslint": "1.3.1",
     "eslint-plugin-react": "3.3.1",
     "exenv": "1.2.0",

server/index.js

@@ -33,6 +33,24 @@ for (var routeId in routes) {
     app.get(route.pattern, handler(route));
 }
 
+if (typeof process.env.SENTRY_DSN === 'string') {
+    var raven = require('raven');
+    app.get('/sentrythrow', function mainHandler () { throw new Error('Sentry Test'); });
+
+    // These handlers must be applied _AFTER_ other routes have been applied
+    app.use(raven.middleware.express.requestHandler(process.env.SENTRY_DSN));
+    app.use(raven.middleware.express.errorHandler(process.env.SENTRY_DSN));
+    app.use(function errorHandler (err, req, res, next) {
+        res.append('X-Sentry-ID:' + res.sentry);
+        res.status(500);
+        next(err);
+    });
+
+    raven.patchGlobal(process.env.SENTRY_DSN,  function () {
+        process.exit(-1);
+    });
+}
+
 // Bind proxies in development
 if (process.env.NODE_ENV !== 'production') {
     var proxyHost = process.env.PROXY_HOST || 'https://staging.scratch.mit.edu';

server/template.html

@@ -28,10 +28,10 @@
         <link rel="shortcut icon" href="/favicon.ico" />
         <link rel="stylesheet" href="/css/lib/normalize.min.css" />
 
-        <!-- Shim/Sham ES5 polyfill for older browsers -->
+        <!-- Polyfill -->
         <script src="/js/lib/polyfill.min.js"></script>
 
-        <!-- Initialize (Locale & Session) -->
+        <!-- Initialize (Session & Localization) -->
         <script src="/js/init.bundle.js"></script>
     </head>
 

src/components/adminpanel/adminpanel.jsx

@@ -11,7 +11,9 @@ var AdminPanel = React.createClass({
         Session
     ],
     getInitialState: function () {
-        return {showPanel: true};
+        return {
+            showPanel: false
+        };
     },
     handleToggleVisibility: function (e) {
         e.preventDefault();

src/components/carousel/carousel.json

@@ -2,48 +2,49 @@
     {
         "id": 1,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "creator": "raimondious",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     },
     {
         "id": 2,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     },
     {
         "id": 3,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "creator": "raimondious",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     },
     {
         "id": 4,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "creator": "raimondious",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     },
     {
         "id": 5,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "creator": "raimondious",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     },
     {
         "id": 6,
         "type": "project",
-        "title": "Example Project",
-        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
-        "creator": "raimondious",
-        "href": "/projects/1000/"
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
     }
 ]

src/components/carousel/carousel.jsx

+var defaults = require('lodash.defaults');
 var React = require('react');
 var Slider = require('react-slick');
+
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 
 require('slick-carousel/slick/slick.scss');
@@ -15,21 +17,23 @@ var Carousel = React.createClass({
         return {
             items: require('./carousel.json'),
             showRemixes: false,
-            showLoves: false,
-            settings: {
-                arrows: true,
-                dots: false,
-                infinite: false,
-                lazyLoad: true,
-                slidesToShow: 5,
-                slidesToScroll: 5,
-                variableWidth: true
-            }
+            showLoves: false
         };
     },
     render: function () {
+        var settings = this.props.settings || {};
+        defaults(settings, {
+            dots: false,
+            infinite: false,
+            lazyLoad: true,
+            slidesToShow: 5,
+            slidesToScroll: 5,
+            variableWidth: true
+        });
+        var arrows = this.props.items.length > settings.slidesToShow;
+
         return (
-            <Slider className={'carousel ' + this.props.className} {... this.props.settings}>
+            <Slider className={'carousel ' + this.props.className} arrows={arrows} {... settings}>
                 {this.props.items.map(function (item) {
                     var href = '';
                     switch (item.type) {

src/components/carousel/carousel.scss

@@ -5,10 +5,10 @@
     $button-offset: $icon-size + 5px;
     $box-content-offset: 20px;
 
-    padding: 0 $button-offset;
+    padding: 12px $button-offset;
 
     .box-content & {
-        padding: 0 $button-offset - 20px;
+        padding: 12px $button-offset - 20px;
     }
 
     .slick-next,

src/components/intro/intro.jsx

@@ -5,6 +5,7 @@ var FormattedMessage = ReactIntl.FormattedMessage;
 var FormattedHTMLMessage = ReactIntl.FormattedHTMLMessage;
 
 var Modal = require('../modal/modal.jsx');
+var Registration = require('../registration/registration.jsx');
 
 require('./intro.scss');
 
@@ -31,6 +32,17 @@ var Intro = React.createClass({
     closeVideo: function () {
         this.setState({videoOpen: false});
     },
+    handleJoinClick: function (e) {
+        e.preventDefault();
+        this.setState({'registrationOpen': true});
+    },
+    closeRegistration: function () {
+        this.setState({'registrationOpen': false});
+    },
+    completeRegistration: function () {
+        window.refreshSession();
+        this.closeRegistration();
+    },
     render: function () {
         var frameSettings = {
             width: 570,
@@ -77,7 +89,7 @@ var Intro = React.createClass({
                                     defaultMessage='SEE EXAMPLES' />
                             </div>
                         </a>
-                        <a className="sprite sprite-3" href="#">
+                        <a className="sprite sprite-3" href="#" onClick={this.handleJoinClick}>
                             <img
                                 className="costume costume-1"
                                 src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-a.png" />
@@ -92,6 +104,10 @@ var Intro = React.createClass({
                             </div>
                             <div className="text subtext">( it&rsquo;s free )</div>
                         </a>
+                        <Registration key="registration"
+                                      isOpen={this.state.registrationOpen}
+                                      onRequestClose={this.closeRegistration}
+                                      onRegistrationDone={this.completeRegistration} />
                     </div>
                     <div className="description">
                         A creative learning community with

src/components/intro/intro.scss

@@ -3,7 +3,7 @@
 .intro {
     display: flex;
     margin-top: 20px;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
@@ -22,6 +22,7 @@
     .sprites {
         position: relative;
         clear: both;
+        margin: 20px 0;
         overflow: hidden;
 
         &:after {
@@ -75,7 +76,7 @@
         }
 
         .text {
-            $text-bg-color: #f1f3f4;
+            $text-bg-color: $background-color;
             left: 35px;
             z-index: 1;
             border: 2px solid $text-bg-color;
@@ -159,7 +160,8 @@
 
     .links {
         margin-top: 20px;
-        font-size: 12px;
+        letter-spacing: .5px;
+        font-size: 12px; 
 
         a {
             border-right: 1px solid $type-gray;
@@ -175,13 +177,16 @@
         display: inline-block;
         position: relative;
         border: 1px solid $ui-border;
-        border-radius: 5px;
-        box-shadow: 0 2px 3px;
-        background-color: $ui-gray;
-        padding: 10px;
+        border-radius: 10px;
+        background-color: $ui-white;
+        padding: 14px 10px;
         width: 34%;
         height: 208px;
         text-align: center;
+
+        img {
+            border-radius: 5px;
+        }
     }
 
     .play-button {

src/components/navigation/navigation.jsx

@@ -82,7 +82,6 @@ var Navigation = React.createClass({
     getMessageCount: function () {
         this.api({
             method: 'get',
-            host: '',
             uri: '/proxy/users/' + this.state.session.user.username + '/activity/count'
         }, function (err, body) {
             if (body) {

src/components/thumbnail/thumbnail.jsx

@@ -10,9 +10,9 @@ var Thumbnail = React.createClass({
     },
     getDefaultProps: function () {
         return {
-            href: '/projects/1000/',
-            title: 'Example Project',
-            src: 'http://www.lorempixel.com/144/108/',
+            href: '#',
+            title: 'Project',
+            src: '',
             type: 'project',
             showLoves: false,
             showRemixes: false
@@ -26,21 +26,31 @@ var Thumbnail = React.createClass({
         );
         var extra = [];
         if (this.props.creator) {
-            extra.push(<div key="creator" className="thumbnail-creator">by {this.props.creator}</div>);
+            extra.push(
+                <div key="creator" className="thumbnail-creator">
+                    by <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
+                </div>
+            );
         }
         if (this.props.loves && this.props.showLoves) {
             extra.push(
-                <div key="loves" className="thumbnail-loves"
-                     title={this.props.loves + ' loves'}>
-                        {this.props.loves}
+                <div
+                    key="loves"
+                    className="thumbnail-loves"
+                    title={this.props.loves + ' loves'}>
+                    
+                    {this.props.loves}
                 </div>
             );
         }
         if (this.props.remixes && this.props.showRemixes) {
             extra.push(
-                <div key="remixes" className="thumbnail-remixes"
-                     title={this.props.remixes + ' remixes'}>
-                        {this.props.remixes}
+                <div
+                    key="remixes"
+                    className="thumbnail-remixes"
+                    title={this.props.remixes + ' remixes'}>
+                    
+                    {this.props.remixes}
                 </div>
             );
         }
@@ -49,7 +59,9 @@ var Thumbnail = React.createClass({
                 <a className="thumbnail-image" href={this.props.href}>
                     <img src={this.props.src} />
                 </a>
-                <div className="thumbnail-title"><a href={this.props.href}>{this.props.title}</a></div>
+                <div className="thumbnail-title">
+                    <a href={this.props.href}>{this.props.title}</a>
+                </div>
                 {extra}
             </div>
         );

src/components/thumbnail/thumbnail.scss

@@ -16,6 +16,12 @@
     #{$extras} {
         line-height: normal;
         word-wrap: break-word;
+
+        a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 
     .thumbnail-title {
@@ -25,15 +31,16 @@
 
         a {
             display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
         }
     }
 
     #{$extras} {
         color: $type-gray;
         font-size: .8462em;
+
+        a {
+            display: inline;
+        }
     }
 
     &.project {

src/components/welcome/welcome.jsx

 var React = require('react');
+var ReactIntl = require('react-intl');
+
+var injectIntl = ReactIntl.injectIntl;
+var FormattedMessage = ReactIntl.FormattedMessage;
 
 var Box = require('../box/box.jsx');
 
@@ -10,8 +14,9 @@ var Welcome = React.createClass({
         onDismiss: React.PropTypes.func
     },
     render: function () {
+        var formatMessage = this.props.intl.formatMessage;
         return (
-            <Box title="Welcome to Scratch!"
+            <Box title={formatMessage({id: 'welcome.welcomeToScratch', defaultMessage: 'Welcome to Scratch!'})}
                  className="welcome"
                  moreTitle="x"
                  moreHref="#"
@@ -24,7 +29,9 @@ var Welcome = React.createClass({
                 <div className="welcome-col blue">
                     <h4>
                         <a href="/projects/editor/?tip_bar=getStarted">
-                            Learn how to make a project in Scratch
+                            <FormattedMessage
+                                id="welcome.learn"
+                                defaultMessage="Learn how to make a project in Scratch" />
                         </a>
                     </h4>
                     <a href="/projects/editor/?tip_bar=getStarted">
@@ -34,7 +41,9 @@ var Welcome = React.createClass({
                 <div className="welcome-col green">
                     <h4>
                         <a href="/starter_projects/">
-                            Try out starter projects
+                            <FormattedMessage
+                                id="welcome.tryOut"
+                                defaultMessage="Try out starter projects" />
                         </a>
                     </h4>
                     <a href="/starter_projects/">
@@ -44,7 +53,9 @@ var Welcome = React.createClass({
                 <div className="welcome-col pink">
                     <h4>
                         <a href="/studios/146521/">
-                            Connect with other Scratchers
+                            <FormattedMessage
+                                id="welcome.connect"
+                                defaultMessage="Connect with other Scratchers" />
                         </a>
                     </h4>
                     <a href="/studios/146521/">
@@ -56,4 +67,4 @@ var Welcome = React.createClass({
     }
 });
 
-module.exports = Welcome;
+module.exports = injectIntl(Welcome);

src/init.js

@@ -3,9 +3,12 @@ var jar = require('./lib/jar');
 
 var translations = require('../locales/translations.json');
 
-require('custom-event-polyfill');
+/**
+ * -----------------------------------------------------------------------------
+ * Session
+ * -----------------------------------------------------------------------------
+ */
 
-// Session
 (function () {
     window._session = {};
 
@@ -46,7 +49,11 @@ require('custom-event-polyfill');
     window.refreshSession();
 })();
 
-// L10N
+/**
+ * -----------------------------------------------------------------------------
+ * L10N
+ * -----------------------------------------------------------------------------
+ */
 (function () {
     /**
      * Bind locale code from cookie if available. Uses navigator language API as a fallback.

src/mixins/api.jsx

 var defaults = require('lodash.defaults');
 var xhr = require('xhr');
+
+var jar  = require('../lib/jar.js');
 var log = require('../lib/log.js');
 
 var CookieMixinFactory = require('./cookieMixinFactory.jsx');
@@ -30,6 +32,9 @@ var Api = {
             });
         }.bind(this);
 
+        if (typeof jar.get('scratchlanguage') !== 'undefined') {
+            opts.headers['Accept-Language'] = jar.get('scratchlanguage') + ', en;q=0.8';
+        }
         if (opts.useCsrf) {
             this.useScratchcsrftoken(function (err, csrftoken) {
                 if (err) return log.error('Error while retrieving CSRF token', err);

src/mixins/session.jsx

@@ -9,6 +9,9 @@ var Session = {
     },
     componentWillMount: function () {
         window.addEventListener('session', this.updateSession);
+    },
+    componentWillUnmount: function () {
+        window.removeEventListener('session', this.updateSession);
     }
 };
 

src/views/hoc/hoc.jsx

@@ -31,24 +31,30 @@ var Hoc = React.createClass({
 
                     <div className="card-deck">
                         <div className="card">
-                            <div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
-                                <img src="/images/name-tutorial.jpg" />
-                                <a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a>
-                            </div>
+                            <a href="/projects/editor/?tip_bar=name">
+                                <div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
+                                    <img src="/images/name-tutorial.jpg" />
+                                    <Button>Animate Your Name</Button>
+                                </div>
+                            </a>
                         </div>
 
                         <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
-                            <div className="card-info">
-                                <img src="/images/hide-seek-tutorial.jpg" />
-                                <a href="/hide"><Button> Hide-and-Seek Game</Button></a>
-                            </div>
+                            <a href="/hide">
+                                <div className="card-info">
+                                    <img src="/images/hide-seek-tutorial.jpg" />
+                                    <Button> Hide-and-Seek Game</Button>
+                                </div>
+                            </a>
                         </div>
 
                         <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
-                            <div className="card-info">
-                                <img src="/images/dance-tutorial.jpg" />
-                                <a href="/projects/editor/?tip_bar=dance"><Button>Dance, Dance, Dance</Button></a>
-                            </div>
+                            <a href="/projects/editor/?tip_bar=dance">
+                                <div className="card-info">
+                                    <img src="/images/dance-tutorial.jpg" />
+                                    <Button>Dance, Dance, Dance</Button>
+                                </div>
+                            </a>
                         </div>
                     </div>
 

src/views/splash/splash.jsx

@@ -111,6 +111,7 @@ var Splash = injectIntl(React.createClass({
     },
     renderHomepageRows: function () {
         var formatMessage = this.props.intl.formatMessage;
+
         var rows = [
             <Box
                     title={formatMessage({
@@ -124,13 +125,14 @@ var Splash = injectIntl(React.createClass({
                         id: 'splash.featuredStudios',
                         defaultMessage: 'Featured Studios'})}
                     key="community_featured_studios">
-                <Carousel items={this.state.featuredGlobal.community_featured_studios} />
+                <Carousel items={this.state.featuredGlobal.community_featured_studios}
+                          settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}} />
             </Box>
         ];
 
-        if (
-                this.state.featuredGlobal.curator_top_projects &&
-                this.state.featuredGlobal.curator_top_projects.length > 4) {
+        if (this.state.featuredGlobal.curator_top_projects &&
+            this.state.featuredGlobal.curator_top_projects.length > 4) {
+            
             rows.push(
                 <Box
                         key="curator_top_projects"
@@ -139,14 +141,15 @@ var Splash = injectIntl(React.createClass({
                             this.state.featuredGlobal.curator_top_projects[0].curator_name}
                         moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
                         moreHref="/studios/386359/">
-                    <Carousel items={this.state.featuredGlobal.curator_top_projects} />
+                    <Carousel
+                        items={this.state.featuredGlobal.curator_top_projects} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredGlobal.scratch_design_studio &&
-                this.state.featuredGlobal.scratch_design_studio.length > 4) {
+        if (this.state.featuredGlobal.scratch_design_studio &&
+            this.state.featuredGlobal.scratch_design_studio.length > 4) {
+            
             rows.push(
                 <Box
                         key="scratch_design_studio"
@@ -157,15 +160,16 @@ var Splash = injectIntl(React.createClass({
                             + ' - ' + this.state.featuredGlobal.scratch_design_studio[0].gallery_title}
                         moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
                         moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
-                    <Carousel items={this.state.featuredGlobal.scratch_design_studio} />
+                    <Carousel
+                        items={this.state.featuredGlobal.scratch_design_studio} />
                 </Box>
             );
         }
 
-        if (
-                this.state.session.user &&
-                this.state.featuredGlobal.community_newest_projects &&
-                this.state.featuredGlobal.community_newest_projects.length > 0) {
+        if (this.state.session.user &&
+            this.state.featuredGlobal.community_newest_projects &&
+            this.state.featuredGlobal.community_newest_projects.length > 0) {
+            
             rows.push(
                 <Box
                         title={
@@ -173,70 +177,71 @@ var Splash = injectIntl(React.createClass({
                                 id: 'splash.recentlySharedProjects',
                                 defaultMessage: 'Recently Shared Projects' })}
                         key="community_newest_projects">
-                    <Carousel items={this.state.featuredGlobal.community_newest_projects} />
+                    <Carousel
+                        items={this.state.featuredGlobal.community_newest_projects} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredCustom.custom_projects_by_following &&
-                this.state.featuredCustom.custom_projects_by_following.length > 0) {
+        if (this.state.featuredCustom.custom_projects_by_following &&
+            this.state.featuredCustom.custom_projects_by_following.length > 0) {
+            
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id: 'splash.projectsByScratchersFollowing',
                                 defaultMessage: 'Projects by Scratchers I\'m Following'})}
-                        key="custom_projects_by_following">
+                     key="custom_projects_by_following">
+                    
                     <Carousel items={this.state.featuredCustom.custom_projects_by_following} />
                 </Box>
             );
         }
-        if (
-                this.state.featuredCustom.custom_projects_loved_by_following &&
-                this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
+        if (this.state.featuredCustom.custom_projects_loved_by_following &&
+            this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
+
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id: 'splash.projectsLovedByScratchersFollowing',
                                 defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
-                        key="custom_projects_loved_by_following">
+                     key="custom_projects_loved_by_following">
+                    
                     <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
                 </Box>
             );
         }
 
-        if (
-                this.state.featuredCustom.custom_projects_in_studios_following &&
-                this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
+        if (this.state.featuredCustom.custom_projects_in_studios_following &&
+            this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
+            
             rows.push(
-                <Box
-                        title={
+                <Box title={
                             formatMessage({
                                 id:'splash.projectsInStudiosFollowing',
                                 defaultMessage: 'Projects in Studios I\'m Following'})}
-                        key="custom_projects_in_studios_following">
+                     key="custom_projects_in_studios_following">
+                    
                     <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
                 </Box>
             );
         }
 
         rows.push(
-            <Box
-                    title={
+            <Box title={
                         formatMessage({
                             id: 'splash.communityRemixing',
                             defaultMessage: 'What the Community is Remixing' })}
-                    key="community_most_remixed_projects">
+                 key="community_most_remixed_projects">
+                
                 <Carousel items={this.state.featuredGlobal.community_most_remixed_projects} showRemixes={true} />
             </Box>,
-            <Box
-                    title={
+            <Box title={
                         formatMessage({
                             id: 'splash.communityLoving',
                             defaultMessage: 'What the Community is Loving' })}
-                    key="community_most_loved_projects">
+                 key="community_most_loved_projects">
+                
                 <Carousel items={this.state.featuredGlobal.community_most_loved_projects} showLoves={true} />
             </Box>
         );