Created
May 30, 2014 21:39
-
-
Save bstro/004fa78e0c9b755dc1b4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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