Titles

src/components/Layout/Layout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'react-router/lib/Link';
+import Helmet from 'react-helmet';
 import { observe } from 'mobx';
 
 import store from 'stores/UserStore';
@@ -17,6 +18,7 @@ class Layout extends React.Component {
   static propTypes = {
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
+    titleText: React.PropTypes.node,
     fixed: React.PropTypes.bool,
     loading: React.PropTypes.bool,
   }
@@ -24,6 +26,14 @@ class Layout extends React.Component {
   render() {
     return (
       <div className={ styles.container }>
+        <Helmet
+          title={
+            this.props.titleText
+              ? `${this.props.titleText} - Beautiful Atlas`
+              : 'Beautiful Atlas'
+          }
+        />
+
         { this.props.loading ? (
           <LoadingIndicator />
         ) : null }

src/components/Layout/Layout.scss

@@ -30,6 +30,12 @@
   }
 }
 
+.title {
+  a {
+    color: $textColor;
+  }
+}
+
 .teamName a {
   font-family: 'Atlas Grotesk';
   font-weight: bold;

src/scenes/Atlas/Atlas.js

@@ -24,18 +24,21 @@ class Atlas extends React.Component {
 
     let actions;
     let title;
+    let titleText;
 
     if (atlas) {
       actions = <HeaderAction>
           <Link to={ `/atlas/${atlas.id}/new` }>New document</Link>
         </HeaderAction>;
       title = <Title>{ atlas.name }</Title>;
+      titleText = atlas.name;
     }
 
     return (
       <Layout
         actions={ actions }
         title={ title }
+        titleText={ titleText }
       >
         <CenteredContent>
           { store.isFetching ? (

src/scenes/DocumentEdit/DocumentEdit.js

@@ -78,6 +78,9 @@ class DocumentEdit extends Component {
         { store.title  }
       </Title>
     );
+
+    let titleText = store.title;
+
     const actions = (
       <Flex direction="row">
         <HeaderAction>
@@ -101,6 +104,7 @@ class DocumentEdit extends Component {
       <Layout
         actions={ actions }
         title={ title }
+        titleText={ titleText }
         fixed={ true }
         loading={ store.isSaving }
       >

src/scenes/DocumentScene/DocumentScene.js

@@ -46,6 +46,7 @@ class DocumentScene extends React.Component {
   render() {
     const doc = store.document;
     let title;
+    let titleText;
     let actions;
     if (doc) {
       actions = (
@@ -58,12 +59,19 @@ class DocumentScene extends React.Component {
           </DropdownMenu>
         </div>
       );
-      title = `${doc.atlas.name} - ${doc.title}`;
+      title = (
+        <span>
+          <Link to={ `/atlas/${doc.atlas.id}` }>{doc.atlas.name}</Link>
+          { ` / ${doc.title}` }
+        </span>
+      );
+      titleText = `${doc.atlas.name} - ${doc.title}`;
     }
 
     return (
       <Layout
         title={ title }
+        titleText={ titleText }
         actions={ actions }
       >
         <CenteredContent>