Consistent page titles

server/pages/About.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import Grid from 'styled-components-grid';
 import styled from 'styled-components';
-import { Helmet } from 'react-helmet';
+import PageTitle from './components/PageTitle';
 import Flex from '../../shared/components/Flex';
 import Header from './components/Header';
 import Content from './components/Content';
@@ -35,9 +35,8 @@ const Avatar = styled.img`
 export default function About() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="About Us" />
-        <title>About Us</title>
+
-      </Helmet>
       <Header background="#F22C5F">
         <h1>About Us</h1>
         <p>The team behind Outline</p>

server/pages/Changelog.js

@@ -4,7 +4,7 @@ import { groupBy, map } from 'lodash';
 import format from 'date-fns/format';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
+import PageTitle from './components/PageTitle';
 import Markdown from './components/Markdown';
 import Header from './components/Header';
 import Content from './components/Content';
@@ -25,9 +25,7 @@ function Changelog({ releases }: Props) {
 
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="Changelog" />
-        <title>Changelog</title>
-      </Helmet>
       <Header background="#00ADFF">
         <h1>Changelog</h1>
         <p>We’re building in public. Here’s what has changed recently.</p>

server/pages/Pricing.js

@@ -3,18 +3,17 @@ import * as React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
+import PageTitle from './components/PageTitle';
 import Header from './components/Header';
 import Content from './components/Content';
 import Button from './components/Button';
 import Notice from '../../shared/components/Notice';
+import { mailToUrl, githubUrl } from '../../shared/utils/routeHelpers';
 
 export default function Pricing() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="Pricing" />
-        <title>Pricing</title>
-      </Helmet>
       <Header background="#00adff">
         <h1>Our Pricing</h1>
         <p>Our pricing is simple. You’ll only pay for what you use.</p>
@@ -57,7 +56,9 @@ export default function Pricing() {
                   $
                 </span>
                 <span itemprop="price">5</span>{' '}
-                <Period>per seat per month</Period>
+                <Period>
+                  <strong>per seat</strong> per month
+                </Period>
               </Price>
             </div>
             <div itemprop="description">
@@ -70,15 +71,18 @@ export default function Pricing() {
               </ul>
             </div>
             <Notice>
-              Note: Outline is currently in Beta. This plan is currently free
+              Note: Outline is in Beta. This plan is currently free until public
-              until public release in Q1 2019.
+              release in Q1 2019.
             </Notice>
           </Plan>
         </Grid>
       </Content>
       <Content>
-        <h2>Self Hosted</h2>
+        <Centered>
-        <p>Host your own instance on-premise or in the cloud</p>
+          <br />
+          <h2>Self Hosted</h2>
+          <p>Host your own instance on-premise or in the cloud.</p>
+        </Centered>
         <Grid>
           <Plan
             size={{ desktop: 1 / 2 }}
@@ -98,9 +102,11 @@ export default function Pricing() {
               Outline’s codebase is open source. If you wish to run the service
               on your own infrastructure you can do so.
             </p>
-            <p>
+            <Centered>
-              <Button>GitHub</Button>
+              <Button href={githubUrl()} target="_blank">
-            </p>
+                Source Code
+              </Button>
+            </Centered>
           </Plan>
           <Plan
             size={{ desktop: 1 / 2 }}
@@ -118,12 +124,12 @@ export default function Pricing() {
             </div>
 
             <p itemprop="description">
-              Run Outline on your own infrastructure. Get dedicated support with
+              Support continued development of Outline. Get dedicated support
-              setup, maintainence, and product issues.
+              with setup, maintainence, and product issues.
-            </p>
-            <p>
-              <Button>Contact Us</Button>
             </p>
+            <Centered>
+              <Button href={mailToUrl()}>Contact Us</Button>
+            </Centered>
           </Plan>
         </Grid>
       </Content>
@@ -172,6 +178,10 @@ const Plan = styled(Grid.Unit)`
   }
 `;
 
+const Centered = styled.div`
+  text-align: center;
+`;
+
 const Name = styled.h3`
   text-align: center;
 `;

server/pages/Privacy.js

@@ -1,16 +1,14 @@
 // @flow
 import * as React from 'react';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
+import PageTitle from './components/PageTitle';
 import Header from './components/Header';
 import Content from './components/Content';
 
 export default function Privacy() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="Privacy Policy" />
-        <title>Privacy Policy</title>
-      </Helmet>
       <Header background="#F4F7FA">
         <h1>Privacy Policy</h1>
         <p>How we collect and use your information</p>

server/pages/SubdomainSignin.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import Hero from './components/Hero';
@@ -8,6 +7,7 @@ import HeroText from './components/HeroText';
 import SigninButtons from './components/SigninButtons';
 import AuthErrors from './components/AuthErrors';
 import Centered from './components/Centered';
+import PageTitle from './components/PageTitle';
 import { Team } from '../models';
 
 type Props = {
@@ -36,9 +36,7 @@ function SubdomainSignin({
 
   return (
     <React.Fragment>
-      <Helmet>
+      <PageTitle title={`Sign in to ${team.name}`} />
-        <title>Outline - Sign in to {team.name}</title>
-      </Helmet>
       <Grid>
         <Hero>
           <h1>{lastSignedIn ? 'Welcome back,' : 'Hey there,'}</h1>

server/pages/components/PageTitle.js

@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+function PageTitle({ title }: { title: string }) {
+  return (
+    <Helmet>
+      <title>{title} – Outline</title>
+    </Helmet>
+  );
+}
+
+export default PageTitle;

server/pages/developers/Api.js

@@ -1,17 +1,15 @@
 // @flow
 import * as React from 'react';
-import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
+import Grid from 'styled-components-grid';
+import PageTitle from '../components/PageTitle';
 import Header from '../components/Header';
 import Content from '../components/Content';
 
 export default function Pricing() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="API Reference" />
-        <title>API Reference - Outline</title>
-      </Helmet>
       <Header background="#AA34F0">
         <h1>API Reference</h1>
         <p>Outline is built on an open, best-in-class, API</p>

server/pages/developers/index.js

@@ -1,17 +1,15 @@
 // @flow
 import * as React from 'react';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
+import PageTitle from '../components/PageTitle';
 import Header from '../components/Header';
 import Content from '../components/Content';
 
 export default function Pricing() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="Developers" />
-        <title>Developers - Outline</title>
-      </Helmet>
       <Header background="#AA34F0">
         <h1>Developers</h1>
         <p>Outline is built on an open, best-in-class, API</p>

server/pages/integrations/Integration.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
+import PageTitle from '../components/PageTitle';
 import Markdown from '../components/Markdown';
 import Header from '../components/Header';
 import Content from '../components/Content';
@@ -23,9 +23,7 @@ type Props = {
 export default function Integration({ integration, content }: Props) {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title={`${integration.name} Integration`} />
-        <title>{integration.name} Integration – Outline</title>
-      </Helmet>
       <Header background="#F4F7FA">
         <h1>{integration.name} Integration</h1>
         <p>{integration.description}</p>

server/pages/integrations/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { map, groupBy } from 'lodash';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
+import PageTitle from '../components/PageTitle';
 import Header from '../components/Header';
 import Content from '../components/Content';
 import integrations from './content';
@@ -13,9 +13,7 @@ const categories = groupBy(integrations, i => i.category);
 function Integrations() {
   return (
     <Grid>
-      <Helmet>
+      <PageTitle title="Integrations" />
-        <title>Integrations</title>
-      </Helmet>
       <Header background="#FFB500">
         <h1>Integrations</h1>
         <p>