Merge branch 'master' into jori/slack-tweaks

.env.sample

@@ -10,7 +10,7 @@ SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
 PORT=3000
 REDIS_URL=redis://redis:6379
 URL=http://localhost:3000
-DEPLOYMENT=hosted
+DEPLOYMENT=self
 ENABLE_UPDATES=true
 DEBUG=sql,cache,presenters,events
 

server/pages/About.js

@@ -1,19 +1,165 @@
 // @flow
 import React from 'react';
 import Grid from 'styled-components-grid';
+import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
-import Hero from './components/Hero';
+import Flex from '../../shared/components/Flex';
+import Header from './components/Header';
+import Content from './components/Content';
+
+const Authors = styled(Flex).attrs({
+  justify: 'center',
+})`
+  margin: 40px 0;
+`;
+
+const Author = styled(Flex).attrs({
+  column: true,
+  align: 'center',
+})`
+  margin-right: 60px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+const Avatar = styled.img`
+  width: 60px;
+  height: 60px;
+  margin-bottom: 20px;
+
+  border-radius: 50%;
+`;
 
 export default function About() {
   return (
     <Grid>
       <Helmet>
-        <title>About</title>
+        <title>About Us</title>
       </Helmet>
-      <Hero>
-        <h1>About Outline</h1>
-        <p>Just a proof of concept for multiple pages.</p>
-      </Hero>
+      <Header>
+        <h1>About Us</h1>
+        <p>The team behind Outline</p>
+      </Header>
+      <Content>
+        <p>
+          Outline is a wiki and knowledge base built for growing teams. We’re
+          focused on speed, usability and extensibility.
+        </p>
+        <p>
+          The open source project is maintained by Jori Lallo and Tom Moor.
+          Having both run venture-backed software startups previously and seeing
+          many similar VC-funded products try and fail while the market need
+          remained we decided to try a different approach. So don’t worry,
+          Outline is here to last.
+        </p>
+        <p>
+          <i>
+            Outline is currently in public beta. The hosted service will stay
+            free during this period. After that we will offer Outline free for
+            teams up to 5 people and have reasonable plans for larger teams.
+          </i>
+        </p>
+        <Authors>
+          <Author column>
+            <Avatar src="/jori.jpg" />
+            <div>
+              <strong>Jori Lallo</strong>
+            </div>
+            <div>
+              <a href="https://twitter.com/jorilallo" target="_blank">
+                @jorilallo
+              </a>
+            </div>
+          </Author>
+
+          <Author column>
+            <Avatar src="/tom.jpg" />
+            <div>
+              <strong>Tom Moor</strong>
+            </div>
+            <div>
+              <a href="https://twitter.com/tommoor" target="_blank">
+                @tommoor
+              </a>
+            </div>
+          </Author>
+        </Authors>
+
+        <h2>Open Source</h2>
+        <p>
+          Outline is built by a group of core{' '}
+          <a
+            href="https://github.com/outline/outline/graphs/contributors"
+            target="_blank"
+          >
+            maintainers
+          </a>, we believe in being honest and transparent.
+        </p>
+        <ul>
+          <li>
+            <strong>Accountability.</strong> Being open source helps to keep
+            ourselves accountable for progress, code quality, communication, and
+            roadmap.
+          </li>
+          <li>
+            <strong>Community.</strong> We hope that over time we can build up a
+            community of like-minded folks that can contribute plugins,
+            integrations, and core fixes to the project that will benefit
+            everyone.
+          </li>
+          <li>
+            <strong>Marketing.</strong> Every product needs a wedge into the
+            market. Being open source offers many opportunities to market the
+            project with a limited budget.
+          </li>
+          <li>
+            <strong>Security.</strong> We take privacy of your data extremely
+            seriously. Getting more eyes on the code makes us more confident
+            that Outline is as secure as possible.
+          </li>
+        </ul>
+        <p>
+          You can view Outline’s source code on{' '}
+          <a href="https://github.com/outline/outline">GitHub</a>.
+        </p>
+        <h2>FAQ</h2>
+        <p>
+          <h3>Why would I pay you if I can run Outline myself?</h3>
+          You don’t have to but you might have better things to do with your
+          time. When you sign up for Outline, you’ll always be running the
+          latest version, have all the features and we’ll answer the questions
+          your team might have. You’ll also help to keep Outline getting better
+          by supporting us financially.
+        </p>
+        <p>
+          <h3>Can I use Google/GitHub/etc to signup for Outline?</h3>
+          We started with Slack as many teams are already using it and benefit
+          from the integrations. We’ll be adding more login methods soon. Please
+          let us know which one you would like to see next{' '}
+          <a
+            href="https://spectrum.chat/outline/feature-requests?thread=a851c20d-251a-4c7b-8977-e1438894db51"
+            target="_blank"
+          >
+            here
+          </a>.
+        </p>
+        <p>
+          <h3>How can I export my data if you go away?</h3>
+          We’re committed on making your data portable. We’ll soon add better
+          import and export options so you which will let you take your data and
+          view it in HTML form or upload to self-hosted Outline. Until then, you
+          can do this through our <a href="/developers">API</a>.
+        </p>
+        <p>
+          <h3>How can I get in touch with you?</h3>
+          You can drop us a note on our{' '}
+          <a href="https://spectrum.chat/outline">Spectrum</a> community or
+          email us at{' '}
+          <a href="mailto:hello@getoutline.com">hello@getoutline.com</a>.
+        </p>
+      </Content>
     </Grid>
   );
 }

server/pages/components/Content.js

@@ -4,6 +4,6 @@ import styled from 'styled-components';
 export default styled.div`
   width: 100%;
   max-width: 720px;
-  margin: 0 auto;
+  margin: 0 auto 2em;
   padding: 0 2em;
 `;

server/pages/components/Layout.js

@@ -6,6 +6,11 @@ import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
 import { color } from '../../../shared/styles/constants';
 
+export const title = 'Outline';
+export const description =
+  'Your team’s knowledge base - Team wiki, documentation, playbooks, onboarding & more…';
+export const screenshotUrl = `${process.env.URL}/screenshot.png`;
+
 type Props = {
   children?: React$Element<*>,
 };
@@ -17,17 +22,26 @@ export default function Layout({ children }: Props) {
     <html lang="en">
       <head>
         <Helmet>
-          <title>Outline</title>
+          <title>{title}</title>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="referrer" content="origin" />
           <meta name="slack-app-id" content="A0W3UMKBQ" />
-          <meta
-            name="description"
-            content="Your team’s knowledge base - Team wiki, documentation, playbooks, onboarding & more…"
-          />
-          <meta name="og:site_name" content="Outline" />
+          <meta name="description" content={description} />
+
+          <meta name="og:site_name" content={title} />
           <meta name="og:type" content="website" />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="og:image" content={screenshotUrl} />
+
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:domain" value="getoutline.com" />
+          <meta name="twitter:title" value={title} />
+          <meta name="twitter:description" value={description} />
+          <meta name="twitter:image" content={screenshotUrl} />
+          <meta name="twitter:url" value={process.env.URL} />
+
           <meta name="theme-color" content={color.primary} />
           <link
             rel="shortcut icon"

server/pages/components/Navigation.js

@@ -6,10 +6,11 @@ import {
   signin,
   developers,
   changelog,
+  about,
+  privacy,
   githubUrl,
   spectrumUrl,
   blogUrl,
-  twitterUrl,
 } from '../../../shared/utils/routeHelpers';
 import { color } from '../../../shared/styles/constants';
 
@@ -22,7 +23,7 @@ function TopNavigation() {
           <a href="/#features">Features</a>
         </MenuItemDesktop>
         <MenuItemDesktop>
-          <a href={blogUrl()}>Blog</a>
+          <a href={about()}>About</a>
         </MenuItemDesktop>
         <MenuItemDesktop>
           <a href={changelog()}>Changelog</a>
@@ -51,7 +52,7 @@ function BottomNavigation() {
         <a href={blogUrl()}>Medium</a>
       </div>
       <div>
-        <a href={twitterUrl()}>Twitter</a>
+        <a href={privacy()}>Privacy</a>
       </div>
     </BottomNav>
   );

server/routes.js

@@ -10,6 +10,7 @@ import serve from 'koa-static';
 import subdomainRedirect from './middlewares/subdomainRedirect';
 import renderpage from './utils/renderpage';
 import { slackAuth } from '../shared/utils/routeHelpers';
+import { robotsResponse } from './utils/robots';
 
 import Home from './pages/Home';
 import About from './pages/About';
@@ -81,6 +82,9 @@ router.get('/', async ctx => {
   }
 });
 
+// Other
+router.get('/robots.txt', ctx => (ctx.body = robotsResponse(ctx)));
+
 // catch all for react app
 router.get('*', async ctx => {
   await renderapp(ctx);

server/utils/robots.js

@@ -0,0 +1,9 @@
+// @flow
+import { type Context } from 'koa';
+
+const DISALLOW_ROBOTS = `User-agent: *
+Disallow: /`;
+
+export const robotsResponse = (ctx: Context): ?string => {
+  if (ctx.headers.host.indexOf('getoutline.com') < 0) return DISALLOW_ROBOTS;
+};

shared/styles/base.js

@@ -69,10 +69,14 @@ export default `
     margin-bottom: 1em;
   }
 
+  li {
+    padding: .2em 0;
+  }
+
   hr {
     border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border - bottom: 1px solid rgba(255, 255, 255, 0.3);
-}   
+}
 `;

shared/utils/routeHelpers.js

@@ -52,3 +52,11 @@ export function changelog(): string {
 export function signin(): string {
   return '/auth/slack';
 }
+
+export function about(): string {
+  return '/about';
+}
+
+export function privacy(): string {
+  return '/privacy';
+}