add WP-style page titles

frontend/components/Header.js

@@ -11,6 +11,17 @@ class Header extends Component {
     }
 
     render() {
+        let title = '';
+        if ( this.props.title ) {
+            title = this.props.title;
+            if ( this.props.settings ) {
+                title += ' | ' + this.props.settings.site_title;
+            }
+        } else if ( this.props.settings ) {
+            title = this.props.settings.site_title;
+        } else {
+            title = 'WordPress + React Starter Kit Frontend by Postlight';
+        }
 
         return (
             <div>
@@ -21,9 +32,7 @@ class Header extends Component {
                         content="width=device-width, initial-scale=1"
                     />
                     <meta charSet="utf-8" />
-                    <title>
-                        WordPress + React Starter Kit Frontend by Postlight
-                    </title>
+                    <title>{title}</title>
                 </Head>
             </div>
         );

frontend/components/Layout.js

@@ -8,7 +8,7 @@ const layoutStyle = {
 
 const Layout = props => (
     <div style={layoutStyle}>
-        <Header />
+        <Header title={props.title} settings={props.settings} />
         {props.children}
         <Footer />
     </div>

frontend/components/PageWrapper.js

@@ -8,8 +8,13 @@ const PageWrapper = Comp => (
         `${Config.apiUrl}/wp-json/menus/v1/menus/header-menu`
       );
       const headerMenu = await headerMenuRes.json();
+      const settingsRes = await fetch(
+        `${Config.apiUrl}/wp-json/postlight/v1/settings`
+      );
+      const settings = await settingsRes.json();
       return {
         headerMenu,
+        settings,
         ...(Comp.getInitialProps ? await Comp.getInitialProps(args) : null),
       };
     }

frontend/pages/category.js

@@ -44,7 +44,7 @@ class Category extends Component {
             );
         });
         return (
-            <Layout>
+            <Layout title={this.props.categories[0].name} settings={this.props.settings}>
                 <Menu menu={this.props.headerMenu} />
                 <h1>{this.props.categories[0].name} Posts</h1>
                 {posts}

frontend/pages/index.js

@@ -58,7 +58,7 @@ class Index extends Component {
             );
         });
         return (
-            <Layout>
+            <Layout title={this.props.page.title.rendered} settings={this.props.settings}>
                 <Menu menu={this.props.headerMenu} />
                 <img
                     src="/static/images/wordpress-plus-react-header.png"

frontend/pages/post.js

@@ -20,7 +20,7 @@ class Post extends Component {
         if (!this.props.post.title) return <Error statusCode={404} />;
 
         return (
-            <Layout>
+            <Layout title={this.props.post.title.rendered} settings={this.props.settings}>
                 <Menu menu={this.props.headerMenu} />
                 <h1>{this.props.post.title.rendered}</h1>
                 <div