coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minimal developer page improves to bring inline

Browse Source
This commit is contained in:
Tom Moor
2018-12-21 00:35:40 -08:00
parent 47ea3c343c
commit 122fdfa34b
3 changed files with 629 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
server/pages/Api.js
View File

@ -4,12 +4,9 @@ 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';
const Container = styled.div`
max-width: 720px;
margin: 0 auto;
padding: 0 2em;
pre {
padding: 0.5em 1em;
background: #f9fbfc;
@ -49,7 +46,11 @@ const Container = styled.div`
h3 {
code {
font-size: 1.08em;
font-size: 1em;
padding: 2px 4px;
background: #333;
border-radius: 4px;
color: #fff;
}
}
`;
@ -64,29 +65,53 @@ export default function Pricing() {
<h1>Developers</h1>
<p>Outline is built on an open, best-in-class, API</p>
</Header>
<Content>
<Container>
<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>
</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.
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{' '}
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.
<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.
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:
<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>
@ -117,33 +142,35 @@ export default function Pricing() {
<h2>Authentication</h2>
<p>
To access private API endpoints, you must provide a valid API key. You
can create new API keys in your{' '}
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.
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.
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.
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:
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>
@ -155,13 +182,14 @@ export default function Pricing() {
`}
</code>
</pre>
</Grid.Unit>
</Grid>
<h2>Methods</h2>
<Methods>
<Method method="auth.info" label="Get current auth">
<Description>
This method returns the user and team info for the user identified
by the token.
This method returns the user and team info for the user
identified by the token.
</Description>
<Arguments />
</Method>
@ -209,29 +237,37 @@ export default function Pricing() {
<Method method="users.promote" label="Promote a new admin user">
<Description>
Promote a user to be a team admin. This endpoint is only available
for admin users.
Promote a user to be a team admin. This endpoint is only
available for admin users.
</Description>
<Arguments pagination>
<Argument id="id" description="User ID to be promoted" required />
<Argument
id="id"
description="User ID to be promoted"
required
/>
</Arguments>
</Method>
<Method method="users.demote" label="Demote existing admin user">
<Description>
Demote existing team admin if there are more than one as one admin
is always required. This endpoint is only available for admin
users.
Demote existing team admin if there are more than one as one
admin is always required. This endpoint is only available for
admin users.
</Description>
<Arguments pagination>
<Argument id="id" description="User ID to be demoted" required />
<Argument
id="id"
description="User ID to be demoted"
required
/>
</Arguments>
</Method>
<Method method="users.suspend" label="Suspend user account">
<Description>
Admin can suspend users to reduce the number of accounts on their
billing plan or prevent them from accessing documention.
Admin can suspend users to reduce the number of accounts on
their billing plan or prevent them from accessing documention.
</Description>
<Arguments pagination>
<Argument
@ -247,8 +283,8 @@ export default function Pricing() {
label="Activate a suspended user account"
>
<Description>
Admin can re-active a suspended user. This will update the billing
plan and re-enable their access to the documention.
Admin can re-active a suspended user. This will update the
billing plan and re-enable their access to the documention.
</Description>
<Arguments pagination>
<Argument
@ -306,8 +342,8 @@ export default function Pricing() {
<Method method="collections.delete" label="Delete a collection">
<Description>
Delete a collection and all of its documents. This action can’t be
undone so please be careful.
Delete a collection and all of its documents. This action can’t
be undone so please be careful.
</Description>
<Arguments>
<Argument id="id" description="Collection ID" required />
@ -362,10 +398,10 @@ export default function Pricing() {
<Method method="documents.create" label="Create a new document">
<Description>
This method allows you to publish a new document under an existing
collection. By default a document is set to the parent collection
root. If you want to create a subdocument, you can pass{' '}
<code>parentDocument</code> to set parent document.
This method allows you to publish a new document under an
existing collection. By default a document is set to the parent
collection root. If you want to create a subdocument, you can
pass <code>parentDocument</code> to set parent document.
</Description>
<Arguments>
<Argument
@ -392,7 +428,8 @@ export default function Pricing() {
id="parentDocument"
description={
<span>
<code>ID</code> of the parent document within the collection
<code>ID</code> of the parent document within the
collection
</span>
}
/>
@ -452,12 +489,15 @@ export default function Pricing() {
</Arguments>
</Method>
<Method method="documents.move" label="Move document in a collection">
<Method
method="documents.move"
label="Move document in a collection"
>
<Description>
Move a document into a new location inside the collection. This is
easily done by defining the parent document ID. If no parent
document is provided, the document will be moved to the collection
root.
Move a document into a new location inside the collection. This
is easily done by defining the parent document ID. If no parent
document is provided, the document will be moved to the
collection root.
</Description>
<Arguments>
<Argument
@ -599,7 +639,9 @@ export default function Pricing() {
method="documents.pinned"
label="Get pinned documents for a collection"
>
<Description>Return pinned documents for a collection</Description>
<Description>
Return pinned documents for a collection
</Description>
<Arguments pagination />
</Method>
@ -607,7 +649,9 @@ export default function Pricing() {
method="documents.revision"
label="Get revision for a document"
>
<Description>Return a specific revision of a document.</Description>
<Description>
Return a specific revision of a document.
</Description>
<Arguments>
<Argument
id="id"
@ -623,8 +667,8 @@ export default function Pricing() {
label="Get revisions for a document"
>
<Description>
Return revisions for a document. Upon each edit, a new revision is
stored.
Return revisions for a document. Upon each edit, a new revision
is stored.
</Description>
<Arguments pagination>
<Argument
@ -655,8 +699,8 @@ export default function Pricing() {
<Method method="shares.revoke" label="Revoke a share link">
<Description>
Makes the share link inactive so that it can no longer be used to
access the document.
Makes the share link inactive so that it can no longer be used
to access the document.
</Description>
<Arguments>
<Argument id="id" description="Share ID" required />
@ -664,12 +708,22 @@ export default function Pricing() {
</Method>
</Methods>
</Container>
</Content>
</Grid>
);
}
const MethodList = styled.ul`
margin-bottom: 80px;
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;
`;
const Methods = (props: { children: React.Node }) => {
@ -677,16 +731,26 @@ const Methods = (props: { children: React.Node }) => {
const methods = children.map(child => child.props.method);
return (
<div>
<MethodList>
<React.Fragment>
<Grid>
<Grid.Unit
size={{ tablet: 1 / 4 }}
visible={{ mobile: false, tablet: true }}
>
<nav>
<h2>Reference</h2>
<List>
{methods.map(method => (
<li key={method}>
<a href={`#${method}`}>{method}</a>
<MenuItem href={`#${method}`}>{method}</MenuItem>
</li>
))}
</MethodList>
{children}
</div>
</List>
</nav>
</Grid.Unit>
<Grid.Unit size={{ tablet: 3 / 4 }}>{children}</Grid.Unit>
</Grid>
</React.Fragment>
);
};
@ -741,7 +805,7 @@ const Method = (props: MethodProps) => {
return (
<MethodContainer>
<h3 id={props.method}>
<code>{props.method}</code> - {props.label}
<code>{props.method}</code> {props.label}
</h3>
<div>{description}</div>
<Request>HTTP request & arguments</Request>

4
server/pages/Changelog.js
View File

@ -30,9 +30,7 @@ function Changelog({ releases }: Props) {
</Helmet>
<Header background="#00ADFF">
<h1>Changelog</h1>
<p>
We’re building in public. Here’s what we’ve been changing recently.
</p>
<p>We’re building in public. Here’s what has changed recently.</p>
</Header>
<Content>
<Grid>

4
server/pages/components/Header.js
View File

@ -32,8 +32,8 @@ const Wrapper = styled.div`
content: '';
position: absolute;
top: 0;
left: -10%;
width: 120%;
left: -30px;
width: 100vw;
height: 100%;
background: ${props => props.background || 'transparent'};
z-index: -10;