Add server-side rendering

components/content/content.jsx

@@ -12,7 +12,7 @@ var Loop = require( './loop/loop.jsx' ),
 /**
  * Handles getting of posts from the server
  */
-Content = React.createClass({
+var Content = React.createClass({
 
 	componentDidMount: function() {
 
@@ -32,14 +32,16 @@ Content = React.createClass({
 		entry_thumbnail();
 
 		// Scroll to top of page so user can see page transition
-		window.scroll(0,0);
+		//window.scroll(0,0);
 	},
 
 	render: function() {
 
+		var singlePostID;
+
 		// Check if we're just viewing one post, if so, pass the ID down
 		if ( this.props.data.length === 1 ) {
-			singlePostID = this.props.data[0].ID;
+			singlePostID = this.props.data[0].id;
 		} else {
 			singlePostID = 0;
 		}
@@ -51,4 +53,4 @@ Content = React.createClass({
 	}
 });
 
-module.exports = Content;
+module.exports = Content;

components/content/loop/comments/comment-form/comment-form.jsx

@@ -16,7 +16,7 @@ var commentForm = React.createClass({
 		if ( !text || !author ) {
 			return;
 		}
-		this.props.onCommentSubmit({comment_author: author, comment_author_email: emailAddress, comment_author_url: website, content: text });
+		this.props.onCommentSubmit({author_name: author, author_email: emailAddress, author_url: website, content: text });
 		this.refs.author.getDOMNode().value = '';
 		this.refs.emailAddress.getDOMNode().value = '';
 		this.refs.website.getDOMNode().value = '';
@@ -48,4 +48,4 @@ var commentForm = React.createClass({
 
 });
 
-module.exports = commentForm;
+module.exports = commentForm;

components/content/loop/comments/comment-list/comment/comment.jsx

@@ -23,16 +23,16 @@ var Comment = React.createClass({
 				<article id={"div-comment-" + comment.ID} className="comment-body">
 					<footer className="comment-meta">
 						<div className="comment-author vcard">
-							<img src={author.avatar} className="avatar avatar-56" height="56" width="56" />
+							<img src={comment.author_avatar_urls[48]} className="avatar avatar-56" height="56" width="56" />
 							<b className="fn">
-								<a href={author.URL} rel="external nofollow" className="url">{author.name}</a>
+								<a href={comment.author_url} rel="external nofollow" className="url">{comment.author_name}</a>
 							</b>
 						</div>
 						<div className="comment-metadata">
 							<time dateTime={d}>{formattedDate + " " + formattedTime}</time>
 						</div>
 					</footer>
-					<div className="comment-content" dangerouslySetInnerHTML={{__html: comment.content}} />
+					<div className="comment-content" dangerouslySetInnerHTML={{__html: comment.content.rendered}} />
 					<div className="reply">
 						<a className="comment-reply-link">Reply</a>
 					</div>
@@ -43,4 +43,4 @@ var Comment = React.createClass({
 
 });
 
-module.exports = Comment;
+module.exports = Comment;

components/content/loop/comments/comments.jsx

@@ -16,7 +16,7 @@ var CommentList = require( './comment-list/comment-list.jsx' ),
 var Comments = React.createClass({
 
 	loadCommentsFromServer: function() {
-		var repliesLink = '/wp-json/posts/' + this.props.postID + '/comments/';
+		var repliesLink = '/wp-json/wp/v2/comments?post=' + this.props.postID;
 
 		var self = this;
 
@@ -34,7 +34,7 @@ var Comments = React.createClass({
 
 		var newComment,
 			self = this,
-			url = '/wp-json/picard/comments';
+				url = '/wp-json/wp/v2/comments?post=' + this.props.postID;
 		request
 			.post( url )
 			.type( 'form' )
@@ -44,7 +44,7 @@ var Comments = React.createClass({
 					newComment = JSON.parse( res.text );
 					self.setState( { data: self.state.data.concat( [ newComment ] ) } );
 				} else {
-					console.error( '/wp-json/picard/comments', err.toString() );
+					console.error( '/wp-json/wp/v2/comments?post=' + self.props.postID, err.toString() );
 				}
 			});
 
@@ -57,7 +57,7 @@ var Comments = React.createClass({
 	componentDidMount: function() {
 		this.loadCommentsFromServer();
 	},
-	
+
 	render: function() {
 		return (
 			<div id="comments" className="comments-area">
@@ -70,4 +70,4 @@ var Comments = React.createClass({
 
 });
 
-module.exports = Comments;
+module.exports = Comments;

components/content/loop/hentry/entry-content/entry-content.jsx

@@ -9,11 +9,12 @@ var React = require( 'react' );
 var EntryContent = React.createClass({
 
 	render: function() {
+		console.log( this.props.content );
 		return (
-			<div className="entry-content" dangerouslySetInnerHTML={{__html: this.props.content}} />
+			<div className="entry-content" dangerouslySetInnerHTML={{__html: this.props.content.rendered}} />
 		);
 	}
 
 });
 
-module.exports = EntryContent;
+module.exports = EntryContent;

components/content/loop/hentry/hentry.jsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-var React = require( 'react/addons' ),
-	page = require( 'page' );
+var React = require( 'react/addons' );
 
 /**
  * Internal dependencies
@@ -18,20 +17,29 @@ var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 /**
  * Renders post
  */
-Hentry = React.createClass({
+var Hentry = React.createClass({
 	handleAdd: function( e ) {
 		e.preventDefault();
 		url = this.props.link;
 		url = url.replace(/^.*\/\/[^\/]+/, '');
-		page( url );
+		//page( url );
 	},
 	render: function() {
-		var d = new Date( this.props.date ),
+		var entryContent,
+			d = new Date( this.props.date ),
 			formattedDate = d.toDateString();
 
+		if ( 'the_date' !== this.props.date ) {
+			d = new Date( this.props.date );
+			formattedDate = d.toDateString();
+		} else {
+			formattedDate = this.props.date;
+		}
+
 		// Decide whether or not to render comments and entry-content
 		var comments,
 			content;
+		console.log( this.props );
 		if ( this.props.context !== 'index' && this.props.showExtra === true ) {
 			comments = <Comments postID={ this.props.id } />;
 			entryContent = <EntryContent content={ this.props.content } />;
@@ -50,7 +58,7 @@ Hentry = React.createClass({
 			entryHeader = <div className="entry-thumbnail" style={thumbnailImage}>
 				<header className="entry-header">
 					<h1 className="entry-title">
-						<a onClick={this.handleAdd} href={this.props.link} rel="bookmark">
+						<a href={this.props.link} rel="bookmark">
 							{this.props.title}
 						</a>
 					</h1>
@@ -63,7 +71,7 @@ Hentry = React.createClass({
 		} else {
 			entryHeader = <header className="entry-header">
 				<h1 className="entry-title">
-					<a onClick={this.handleAdd} href={this.props.link} rel="bookmark">
+					<a href={this.props.link} rel="bookmark">
 						{this.props.title}
 					</a>
 				</h1>
@@ -79,7 +87,7 @@ Hentry = React.createClass({
 				<article className={ postClass }>
 					{ entryHeader }
 
-					<ReactCSSTransitionGroup transitionName="picard-content">
+					<ReactCSSTransitionGroup transitionName="picard-content" component="div">
 						{ entryContent }
 					</ReactCSSTransitionGroup>
 				</article>
@@ -89,4 +97,4 @@ Hentry = React.createClass({
 	}
 });
 
-module.exports = Hentry;
+module.exports = Hentry;

components/content/loop/loop.jsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-var React = require( 'react/addons' ),
-	page = require( 'page' );
+var React = require( 'react/addons' );
 
 /**
  * Internal dependencies
@@ -15,20 +14,23 @@ var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 /**
  * Renders list of posts
  */
-Loop = React.createClass({
+var Loop = React.createClass({
 
 	render: function() {
 		var context = this.props.context,
 			showExtra = false,
 			next,
 			previous;
-		if ( this.props.postID !== 0 && this.props.postID === this.props.data[0].ID ) {
+		if ( this.props.postID !== 0 && this.props.postID === this.props.data[0].id ) {
 			showExtra = true;
 		}
 
+		var loop;
+
 		var postNodes = this.props.data.map( function ( post ) {
+			loop = post.loop;
 			return (
-				<Hentry key={post.ID} id={post.ID} post_class={post.post_class} link={post.link} title={post.title} date={post.date} content={post.content} featured_image={ post.featured_image } context={ context } showExtra={ showExtra } />
+				<Hentry key={post.id} id={post.id} post_class={post.post_class} link={post.link} title={post.title} date={post.date} content={post.content} featured_image={ post.featured_image } context={ context } loop={ post.loop } showExtra={ showExtra } />
 			);
 		});
 
@@ -42,13 +44,15 @@ Loop = React.createClass({
 
 		return (
 			<div>
-				<ReactCSSTransitionGroup transitionName="picard">
+				{ loop ? 'the_loop' : null }
+				<ReactCSSTransitionGroup transitionName="picard" component="div">
 					{ postNodes }
 				</ReactCSSTransitionGroup>
 				{ navigationNodes }
+				{ loop ? 'end_loop' : null }
 			</div>
 		);
 	}
 });
 
-module.exports = Loop;
+module.exports = Loop;

components/content/loop/navigation/post-navigation.jsx

@@ -6,7 +6,7 @@ var React = require( 'react/addons' );
 /**
  * Renders links to the next and previous posts.
  */
-PostNavigation = React.createClass({
+var PostNavigation = React.createClass({
 
 	render: function() {
 		var previousPostLink;
@@ -38,4 +38,4 @@ PostNavigation = React.createClass({
 	}
 });
 
-module.exports = PostNavigation;
+module.exports = PostNavigation;

components/router/router.jsx

@@ -19,7 +19,7 @@ var Router = React.createClass({
 		page( '/', function ( ctx ) {
 			var data,
 				slug = ctx.params.slug,
-				url = "/wp-json/posts";
+					url = "/wp-json/wp/v2/posts";
 			request
 				.get( url )
 				.end( function( err, res ) {
@@ -31,7 +31,7 @@ var Router = React.createClass({
 		page( '/:year/:month/:day/:slug', function ( ctx ) {
 			var data,
 				slug = ctx.params.slug,
-				url = "/wp-json/posts/?filter[name]=" + slug;
+					url = "/wp-json/wp/v2/posts/?filter[name]=" + slug;
 			request
 				.get( url )
 				.end( function( err, res ) {
@@ -56,7 +56,7 @@ var Router = React.createClass({
 					slug = slug.substr(0, slug.length - 1);
 				}
 				var part = slug.substring(slug.lastIndexOf('/') + 1);
-				var url = "/wp-json/posts/?type[]=page&filter[name]=" + part;
+				var url = "/wp-json/wp/v2/pages/?filter[name]=" + part;
 				request
 					.get( url )
 					.end( function( err, res ) {
@@ -82,4 +82,4 @@ var Router = React.createClass({
 
 });
 
-module.exports = Router;
+module.exports = Router;

footer.php

@@ -0,0 +1,17 @@
+			</main><!-- #main -->
+		</div><!-- #primary -->
+	</div><!-- #content -->
+
+	<footer id="colophon" class="site-footer" role="contentinfo">
+		<div class="site-info">
+			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'picard' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'picard' ), 'WordPress' ); ?></a>
+			<span class="sep"> | </span>
+			<?php printf( __( 'Theme: %1$s by %2$s.', 'picard' ), 'Picard', '<a href="http://automattic.com/" rel="designer">Automattic</a>' ); ?>
+		</div><!-- .site-info -->
+	</footer><!-- #colophon -->
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+
+</body>
+</html>

functions.php

@@ -151,41 +151,3 @@ function picard_get_json( $_post ) {
 }
 
 add_filter( 'json_prepare_post', 'picard_get_json' );
-
-function picard_api_init() {
-	global $picard_api_comments;
-
-	$picard_api_comments = new Picard_API_Comments();
-	add_filter( 'json_endpoints', array( $picard_api_comments, 'register_routes' ) );
-}
-add_action( 'wp_json_server_before_serve', 'picard_api_init' );
-
-class Picard_API_Comments extends WP_JSON_Comments {
-	public function register_routes( $routes ) {
-		$routes['/picard/comments'] = array(
-			array( array( $this, 'new_post' ), WP_JSON_Server::CREATABLE ),
-		);
-
-		return $routes;
-	}
-
-	public function new_post() {
-
-		$commentdata = array(
-			'comment_post_ID'      => $_POST['comment_post_ID'],
-			'comment_author'       => $_POST['comment_author'],
-			'comment_author_email' => $_POST['comment_author_email'],
-			'comment_author_url'   => $_POST['comment_author_url'],
-			'comment_content'      => $_POST['content'],
-			'comment_author_IP'    => $_SERVER['REMOTE_ADDR'],
-			'comment_type'         => '',
-		);
-		$comment_id = wp_new_comment( $commentdata );
-
-		$new_comment = get_comment( $comment_id );
-
-		$prepared_comment = $this->prepare_comment( $new_comment );
-
-		return ( $comment_id ) ? $prepared_comment : array();
-	}
-}