mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-29 10:36:42 -05:00
Add example feature content to splash
This commit is contained in:
parent
d53a84925d
commit
730e440ee6
6 changed files with 339 additions and 13 deletions
|
@ -5,15 +5,14 @@
|
|||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
|
@ -21,7 +20,7 @@
|
|||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
|
@ -29,7 +28,7 @@
|
|||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
|
@ -37,7 +36,7 @@
|
|||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
|
@ -45,6 +44,6 @@
|
|||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"projectId": "1000"
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
|
@ -31,9 +31,10 @@ module.exports = React.createClass({
|
|||
{this.props.items.map(function(item) {
|
||||
return (
|
||||
<Thumbnail key={item.id}
|
||||
href={'/projects/' + item.projectId + '/'}
|
||||
href={item.href}
|
||||
title={item.title}
|
||||
extra={'by ' + item.creator} />
|
||||
src={item.thumbnailUrl}
|
||||
extra={item.creator ? 'by ' + item.creator:null} />
|
||||
);
|
||||
})}
|
||||
</Slider>
|
||||
|
|
|
@ -15,7 +15,7 @@ module.exports = React.createClass({
|
|||
};
|
||||
},
|
||||
render: function () {
|
||||
var className = this.props.className + " thumbnail";
|
||||
var className = this.props.className + ' thumbnail';
|
||||
return (
|
||||
<div className={className}>
|
||||
<a className="thumbnailImage" href={this.props.href}>
|
||||
|
|
314
src/views/splash/featured.json
Normal file
314
src/views/splash/featured.json
Normal file
|
@ -0,0 +1,314 @@
|
|||
[
|
||||
{
|
||||
"title": "Featured Projects",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Featured Studios",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "studio",
|
||||
"title": "Example Studio",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
|
||||
"href": "/studios/1000/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Projects Curated by raimondious",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Scratch Design Studio - \"Custom Block Madness!\"",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "What the Community is Remixing",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "What the Community is Loving",
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"type": "project",
|
||||
"title": "Example Project",
|
||||
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
|
||||
"creator": "raimondious",
|
||||
"href": "/projects/1000/"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
|
@ -3,6 +3,8 @@ var React = require('react');
|
|||
var Api = require('../../mixins/api.jsx');
|
||||
var Session = require('../../mixins/session.jsx');
|
||||
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var News = require('../../components/news/news.jsx');
|
||||
|
||||
require('./splash.scss');
|
||||
|
@ -16,7 +18,7 @@ var View = React.createClass({
|
|||
return {
|
||||
activity: [],
|
||||
news: [],
|
||||
featured: []
|
||||
featured: require('./featured.json')
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
|
@ -30,7 +32,15 @@ var View = React.createClass({
|
|||
<div className="intro"></div>
|
||||
<div className="activity"></div>
|
||||
<News />
|
||||
<div className="featured"></div>
|
||||
{this.state.featured.map(function(set){
|
||||
return (
|
||||
<Box
|
||||
className="featured"
|
||||
title={set.title}>
|
||||
<Carousel items={set.items} />
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
#view {
|
||||
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue