Create starter-projects.jsx

* add messages for localization
* define projects to include in starter-projects.json
* add new route and redirect

src/routes.json

@@ -225,6 +225,19 @@
         "view": "splash/splash",
         "title": "Imagine, Program, Share"
     },
+    {
+        "name": "starter-projects",
+        "pattern": "^/starter-projects/?$",
+        "routeAlias": "/starter-projects/?$",
+        "view": "starter-projects/starter-projects",
+        "title": "Starter Projects"
+    },
+    {
+        "name": "starter-projects-redirect",
+        "pattern": "^/starter_projects/?$",
+        "routeAlias": "/starter_projects/?$",
+        "redirect": "/starter-projects"
+    },
     {
         "name": "student-complete-registration",
         "pattern": "^/classes/complete_registration",

src/views/starter-projects/l10n.json

@@ -0,0 +1,10 @@
+{
+  "starterProjects.starterProjects": "Starter Projects",
+  "starterProjects.intro": "Try out these starter projects from the Scratch Team. Look inside and remix to make changes and add your ideas.",
+  "starterProjects.animation": "Animation",
+  "starterProjects.games": "Games",
+  "starterProjects.interactiveArt": "Interactive Art",
+  "starterProjects.musicDance": "Music and Dance",
+  "starterProjects.stories": "Stories",
+  "starterProjects.video": "Video Sensing"
+}

src/views/starter-projects/starter-projects.json

@@ -0,0 +1,284 @@
+{
+ "animation": [
+  {
+   "id": 10128067,
+   "type": "project",
+   "title": "Dance Party",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128067_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128067/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10015059,
+   "type": "project",
+   "title": "Animate the Crab",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015059_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015059/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10015060,
+   "type": "project",
+   "title": "The Pico Show: Intro",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015060_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015060/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11806234,
+   "type": "project",
+   "title": "Greeting Card",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11806234_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11806234/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128197,
+   "type": "project",
+   "title": "Teens at the Castle",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128197_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128197/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ],
+ "games": [
+  {
+   "id": 10128515,
+   "type": "project",
+   "title": "Pong Starter",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128515_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128515/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128431,
+   "type": "project",
+   "title": "Maze Starter",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128431_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128431/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128368,
+   "type": "project",
+   "title": "Hide and Seek",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128368_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128368/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11656680,
+   "type": "project",
+   "title": "Dress Up Tera",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11656680_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11656680/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10866073,
+   "type": "project",
+   "title": "Snowboarding",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10866073_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10866073/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ],
+ "interactiveArt": [
+  {
+   "id": 10015857,
+   "type": "project",
+   "title": "Paint with Gobo",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015857_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015857/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11829803,
+   "type": "project",
+   "title": "Wizard Spells",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11829803_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11829803/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10007296,
+   "type": "project",
+   "title": "Soundflower",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10007296_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10007296/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11641125,
+   "type": "project",
+   "title": "Spiral Maker",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11641125_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11641125/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 259169999,
+   "type": "project",
+   "title": "Dancing Drawings",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/259169999_144x108.png",
+   "author": {"username": "shruti"},
+   "href": "https://scratch.mit.edu/projects/259169999/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ],
+ "musicDance": [
+  {
+   "id": 10015792,
+   "type": "project",
+   "title": "Remix this Dance!",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015792_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015792/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10012676,
+   "type": "project",
+   "title": "Piano",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10012676_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10012676/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128483,
+   "type": "project",
+   "title": "Starfish Choir",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128483_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128483/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11640429,
+   "type": "project",
+   "title": "DJ Scratch Cat",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11640429_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11640429/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10408883,
+   "type": "project",
+   "title": "Code a Dance",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10408883_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10408883/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ],
+ "stories": [
+  {
+   "id": 10014866,
+   "type": "project",
+   "title": "5 Random Facts about Me",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10014866_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10014866/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10063757,
+   "type": "project",
+   "title": "Introducing Howler! Remix",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10063757_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10063757/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128197,
+   "type": "project",
+   "title": "Teens at the Castle",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128197_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128197/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 11804271,
+   "type": "project",
+   "title": "Virtual Tour",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/11804271_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/11804271/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10015868,
+   "type": "project",
+   "title": "Digital Story",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015868_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015868/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ],
+ "video": [
+  {
+   "id": 10128168,
+   "type": "project",
+   "title": "Musical Buttons",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128168_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128168/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10128119,
+   "type": "project",
+   "title": "Bubbles with Video Sensing",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128119_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10128119/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10123832,
+   "type": "project",
+   "title": "Save the Mini-Figs!",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10123832_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10123832/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 10015802,
+   "type": "project",
+   "title": "Pizza Chef",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015802_144x108.png",
+   "author": {"username": "Scratchteam"},
+   "href": "https://scratch.mit.edu/projects/10015802/",
+   "stats": {"loves": 0, "remixes": 0}
+  },
+  {
+   "id": 63809044,
+   "type": "project",
+   "title": "Soccer Video Sensing",
+   "image": "https://cdn2.scratch.mit.edu/get_image/project/63809044_144x108.png",
+   "author": {"username": "natalie"},
+   "href": "https://scratch.mit.edu/projects/63809044/",
+   "stats": {"loves": 0, "remixes": 0}
+  }
+ ]
+}

src/views/starter-projects/starter-projects.jsx

@@ -0,0 +1,58 @@
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const intlShape = require('react-intl').intlShape;
+const render = require('../../lib/render.jsx');
+
+const Page = require('../../components/page/www/page.jsx');
+const Carousel = require('../../components/carousel/carousel.jsx');
+const Box = require('../../components/box/box.jsx');
+
+const projects = require('./starter-projects.json');
+require('./starter-projects.scss');
+
+require('./starter-projects.scss');
+
+const StarterProjects = props => (
+    <div className="inner starter-projects">
+        <h1><FormattedMessage id="starterProjects.starterProjects" /></h1>
+        <p><FormattedMessage id="starterProjects.intro" /></p>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.animation'})}
+        >
+            <Carousel items={projects.animation} />
+        </Box>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.games'})}
+        >
+            <Carousel items={projects.games} />
+        </Box>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.interactiveArt'})}
+        >
+            <Carousel items={projects.interactiveArt} />
+        </Box>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.musicDance'})}
+        >
+            <Carousel items={projects.musicDance} />
+        </Box>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.stories'})}
+        >
+            <Carousel items={projects.stories} />
+        </Box>
+        <Box
+            title={props.intl.formatMessage({id: 'starterProjects.video'})}
+        >
+            <Carousel items={projects.video} />
+        </Box>
+    </div>
+);
+
+StarterProjects.propTypes = {
+    intl: intlShape
+};
+
+const WrappedStarterProjects = injectIntl(StarterProjects);
+render(<Page><WrappedStarterProjects /></Page>, document.getElementById('app'));

src/views/starter-projects/starter-projects.scss

@@ -0,0 +1,11 @@
+.starter-projects{
+    .box {
+        margin-bottom: 32px;
+    }
+    
+    .carousel {
+        .thumbnail {
+            padding-right: 90px;
+        }
+    }
+}