Skip to content

Instantly share code, notes, and snippets.

@bstro

bstro/gist:004fa78e0c9b755dc1b4

Created May 30, 2014 21:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bstro/004fa78e0c9b755dc1b4 to your computer and use it in GitHub Desktop.
Save bstro/004fa78e0c9b755dc1b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>md</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<!-- endbuild -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<style>*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}html,body{width:100%;height:100%}body{font-family:'Lato','sans-serif';font-size:100%;line-height:1.25;text-align:left}.wrapper,ul[role=navigation]{width:930px;margin:0 auto}.wrapper:before,ul[role=navigation]:before,.wrapper:after,ul[role=navigation]:after{content:" ";display:table}.wrapper:after,ul[role=navigation]:after{clear:both}#side_bar,.Comments{box-shadow:#BBB 0 0 10px 0}header{margin-bottom:5rem}#comment_box{position:relative;float:left;width:600px;margin-bottom:3rem}#side_bar{display:table;vertical-align:middle;width:300px;height:300px;float:right;padding:1rem;font-size:1.5rem;text-align:center}aside p{display:table-cell;vertical-align:middle}.Comments{border-top:3px solid orange}.comments-count{position:absolute;top:-35px}.comments-count-label{margin-right:1rem;margin-bottom:1rem}.comments-count-value{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;border-radius:3px;padding:5px;background-color:#CCC}.Comment{border-bottom:1px solid #ccc;padding:1rem}.Comment:before,.Comment:after{content:" ";display:table}.Comment:after{clear:both}.comment-content{margin-left:100px;padding-left:1rem}.comment-subject{font-weight:bold}.comment-byline-label{font-size:.875rem;color:#ccc}.comment-byline-author{font-weight:bold;color:#47c0e0}.comment-avatar{float:left;border:1px solid #999}.comment-timestamp{float:right;font-size:.75rem;color:#ccc}footer{height:50px;line-height:50px;background-color:#ccc}footer i{display:inline-block;position:absolute;right:0}ul[role=navigation]{margin:0 auto;padding:0;list-style-type:none}ul[role=navigation] li{display:inline-block;margin-right:3rem}</style>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrapper">
<header>
<h1>Here Is Where You Would Put The Title Of This Discussion</h1>
</header>
<main id="comment_box">
<!-- React injects its components inside this div. -->
</main>
</div>
<footer>
<ul role="navigation">
<li>Footer link 1</li>
<li>Footer link 2</li>
<li>Footer link 3</li>
</ul>
</footer>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/jquery-timeago/jquery.timeago.js"></script>
<script src="../bower_components/react/react-with-addons.js"></script>
<script src="../bower_components/react/JSXTransformer.js"></script>
<!-- endbuild -->
<script type="text/jsx">
/** @jsx React.DOM */
var CommentBox, Comments, CommentCount, Comment;
CommentBox = React.createClass({
getInitialState: function() {
return { comments: [] }
},
componentWillMount: function() {
var _this = this;
$.get('https://api.myjson.com/bins/tvx', function(res) {
_this.setState({ comments: res })
})
},
render: function() {
return (
<div>
<CommentCount data={this.state.comments.length} />
<Comments data={this.state.comments} />
</div>
)
}
});
CommentCount = React.createClass({
render: function() {
return (
<div className="comments-count">
<span className="comments-count-label">Comments</span>
<span className="comments-count-value">{ this.props.data }</span>
</div>
)
}
});
Comments = React.createClass({
render: function() {
var comments = this.props.data.map(function(comment) {
return (<Comment data={comment} />)
});
return (
<div>
<div className="Comments">
{ comments }
</div>
</div>
)
}
});
Comment = React.createClass({
render: function() {
return (
<div className="Comment">
<img className="comment-avatar" src={this.props.data.picture} />
<div className="comment-content">
<div className="comment-subject">
{this.props.data.subject}
</div>
<div className="comment-byline">
<span className="comment-byline-label">posted by </span>
<span className="comment-byline-author">
{this.props.data.name}
</span>
</div>
<p className="comment-body">{this.props.data.body}</p>
<div className="comment-timestamp">
<span className="comment-timestamp-label">posted </span>
<time dateTime={this.props.data.timestamp}></time>
</div>
</div>
</div>
)
},
componentDidMount: function() {
$('time').timeago();
}
});
React.renderComponent(<CommentBox />, document.getElementById('comment_box'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment