Update API docs to new layout

server/pages/developers/index.js

@@ -0,0 +1,169 @@
+// @flow
+import * as React from 'react';
+import Grid from 'styled-components-grid';
+import { Helmet } from 'react-helmet';
+import styled from 'styled-components';
+import Header from '../components/Header';
+import Content from '../components/Content';
+
+export default function Pricing() {
+  return (
+    <Grid>
+      <Helmet>
+        <title>Developers - Outline</title>
+      </Helmet>
+      <Header background="#AA34F0">
+        <h1>Developers</h1>
+        <p>Outline is built on an open, best-in-class, API</p>
+      </Header>
+      <Content>
+        <Grid>
+          <Grid.Unit
+            size={{ tablet: 1 / 4 }}
+            visible={{ mobile: false, tablet: true }}
+          >
+            <nav>
+              <h2>Introduction</h2>
+              <List>
+                <li>
+                  <MenuItem href="#requests">Making requests</MenuItem>
+                </li>
+                <li>
+                  <MenuItem href="#authentication">Authentication</MenuItem>
+                </li>
+                <li>
+                  <MenuItem href="#errors">Errors</MenuItem>
+                </li>
+              </List>
+              <h2>API</h2>
+              <List>
+                <li>
+                  <MenuItem href="/developers/api">Reference</MenuItem>
+                </li>
+              </List>
+            </nav>
+          </Grid.Unit>
+          <Grid.Unit size={{ tablet: 3 / 4 }}>
+            <p>
+              As developers, it’s our mission to make the API as great as
+              possible. While Outline is still in public beta, we might make
+              small adjustments, including breaking changes to the API.
+            </p>
+
+            <h2>Making requests</h2>
+            <p>
+              Outline’s API follows simple RPC style conventions where each API
+              endpoint is a method on{' '}
+              <Code>https://www.getoutline.com/api/&lt;METHOD&gt;</Code>. Both{' '}
+              <Code>GET</Code> and <Code>POST</Code> methods are supported but
+              it’s recommeded that you make all call using <Code>POST</Code>.
+              Only HTTPS is supported in production.
+            </p>
+
+            <p>
+              For <Code>GET</Code> requests query string parameters are expected
+              (e.g.
+              <Code>/api/document.info?id=...&token=...</Code>). When making{' '}
+              <Code>POST</Code> requests, request parameters are parsed
+              depending on <Code>Content-Type</Code> header. To make a call
+              using JSON payload, one must pass{' '}
+              <Code>Content-Type: application/json</Code> header:
+            </p>
+
+            <p>
+              <strong>Example POST request:</strong>
+            </p>
+            <Pre>
+              <Code>
+                {`curl https://www.getoutline.com/api/documents.info
+  -X POST
+  -H 'authorization: Bearer API_KEY'
+  -H 'content-type: application/json'
+  -H 'accept: application/json'
+  -d '{"id": "outline-api-NTpezNwhUP"}'
+`}
+              </Code>
+            </Pre>
+
+            <p>
+              <strong>Example GET request:</strong>
+            </p>
+            <Pre>
+              <Code>
+                {`curl https://www.getoutline.com/api/documents.info?id=outline-api-NTpezNwhUP&token=API_KEY
+`}
+              </Code>
+            </Pre>
+
+            <h2>Authentication</h2>
+
+            <p>
+              To access private API endpoints, you must provide a valid API key.
+              You can create new API keys in your{' '}
+              <a href={`${process.env.URL}/settings`}>account settings</a>. Be
+              careful when handling your keys as they give access to all of your
+              documents.
+            </p>
+
+            <p>
+              To authenticate with Outline API, you can supply the API key as a
+              header (<Code>Authorization: Bearer YOUR_API_KEY</Code>) or as
+              part of the payload using <Code>token</Code> parameter. If you’re
+              making <Code>GET</Code> requests, header based authentication is
+              recommended so that your keys don’t leak into logs.
+            </p>
+
+            <p>
+              Some API endpoints allow unauhenticated requests for public
+              resources and they can be called without an API key.
+            </p>
+
+            <h2>Errors</h2>
+
+            <p>
+              All successful API requests will be returned with <Code>200</Code>{' '}
+              status code and <Code>ok: true</Code> in the response payload. If
+              there’s an error while making the request, appropriate status code
+              is returned with the <Code>error</Code> message:
+            </p>
+
+            <Pre>
+              <Code>
+                {`{
+  "ok": false,
+  "error: "Not Found"
+}
+`}
+              </Code>
+            </Pre>
+          </Grid.Unit>
+        </Grid>
+      </Content>
+    </Grid>
+  );
+}
+
+const Pre = styled.pre`
+  padding: 0.5em 1em;
+  background: #f9fbfc;
+  border-radius: 4px;
+  border: 1px solid #e8ebed;
+  overflow: scroll;
+`;
+
+const Code = styled.code`
+  font-size: 15px;
+`;
+
+const MenuItem = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.theme.text};
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;