Consistent page titles

2019-01-06 14:14:44 -08:00
parent 56bda12192
commit c970cddd14
10 changed files with 58 additions and 50 deletions
--- a/server/pages/About.js
+++ b/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>
-        <title>About Us</title>
-      </Helmet>
+      <PageTitle title="About Us" />
+
      <Header background="#F22C5F">
        <h1>About Us</h1>
        <p>The team behind Outline</p>
--- a/server/pages/Changelog.js
+++ b/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>
-        <title>Changelog</title>
-      </Helmet>
+      <PageTitle title="Changelog" />
      <Header background="#00ADFF">
        <h1>Changelog</h1>
        <p>We’re building in public. Here’s what has changed recently.</p>
--- a/server/pages/Pricing.js
+++ b/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>
-        <title>Pricing</title>
-      </Helmet>
+      <PageTitle title="Pricing" />
      <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
-              until public release in Q1 2019.
+              Note: Outline is in Beta. This plan is currently free until public
+              release in Q1 2019.
            </Notice>
          </Plan>
        </Grid>
      </Content>
      <Content>
-        <h2>Self Hosted</h2>
-        <p>Host your own instance on-premise or in the cloud</p>
+        <Centered>
+          <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>
-              <Button>GitHub</Button>
-            </p>
+            <Centered>
+              <Button href={githubUrl()} target="_blank">
+                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
-              setup, maintainence, and product issues.
-            </p>
-            <p>
-              <Button>Contact Us</Button>
+              Support continued development of Outline. Get dedicated support
+              with setup, maintainence, and product issues.
            </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;
 `;
--- a/server/pages/Privacy.js
+++ b/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>
-        <title>Privacy Policy</title>
-      </Helmet>
+      <PageTitle title="Privacy Policy" />
      <Header background="#F4F7FA">
        <h1>Privacy Policy</h1>
        <p>How we collect and use your information</p>
--- a/server/pages/SubdomainSignin.js
+++ b/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>
-        <title>Outline - Sign in to {team.name}</title>
-      </Helmet>
+      <PageTitle title={`Sign in to ${team.name}`} />
      <Grid>
        <Hero>
          <h1>{lastSignedIn ? 'Welcome back,' : 'Hey there,'}</h1>
--- a/server/pages/components/PageTitle.js
+++ b/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;
--- a/server/pages/developers/Api.js
+++ b/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>
-        <title>API Reference - Outline</title>
-      </Helmet>
+      <PageTitle title="API Reference" />
      <Header background="#AA34F0">
        <h1>API Reference</h1>
        <p>Outline is built on an open, best-in-class, API</p>
--- a/server/pages/developers/index.js
+++ b/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>
-        <title>Developers - Outline</title>
-      </Helmet>
+      <PageTitle title="Developers" />
      <Header background="#AA34F0">
        <h1>Developers</h1>
        <p>Outline is built on an open, best-in-class, API</p>
--- a/server/pages/integrations/Integration.js
+++ b/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>
-        <title>{integration.name} Integration – Outline</title>
-      </Helmet>
+      <PageTitle title={`${integration.name} Integration`} />
      <Header background="#F4F7FA">
        <h1>{integration.name} Integration</h1>
        <p>{integration.description}</p>
--- a/server/pages/integrations/index.js
+++ b/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>
-        <title>Integrations</title>
-      </Helmet>
+      <PageTitle title="Integrations" />
      <Header background="#FFB500">
        <h1>Integrations</h1>
        <p>