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 { Helmet } from 'react-helmet';
import styled from 'styled-components'; import styled from 'styled-components';
import Header from './components/Header'; import Header from './components/Header';
import Content from './components/Content';
const Container = styled.div` const Container = styled.div`
max-width: 720px;
margin: 0 auto;
padding: 0 2em;
pre { pre {
padding: 0.5em 1em; padding: 0.5em 1em;
background: #f9fbfc; background: #f9fbfc;
@ -49,7 +46,11 @@ const Container = styled.div`
h3 { h3 {
code { 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> <h1>Developers</h1>
<p>Outline is built on an open, best-in-class, API</p> <p>Outline is built on an open, best-in-class, API</p>
</Header> </Header>
<Content>
<Container> <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> <p>
As developers, it’s our mission to make the API as great as possible. As developers, it’s our mission to make the API as great as
While Outline is still in public beta, we might make small possible. While Outline is still in public beta, we might make
adjustments, including breaking changes to the API. small adjustments, including breaking changes to the API.
</p> </p>
<h2>Making requests</h2> <h2>Making requests</h2>
<p> <p>
Outline’s API follows simple RPC style conventions where each API Outline’s API follows simple RPC style conventions where each
endpoint is a method on{' '} API endpoint is a method on{' '}
<code>https://www.getoutline.com/api/&lt;METHOD&gt;</code>. Both{' '} <code>https://www.getoutline.com/api/&lt;METHOD&gt;</code>. Both{' '}
<code>GET</code> and <code>POST</code> methods are supported but it’s <code>GET</code> and <code>POST</code> methods are supported but
recommeded that you make all call using <code>POST</code>. Only HTTPS it’s recommeded that you make all call using <code>POST</code>.
is supported in production. Only HTTPS is supported in production.
</p> </p>
<p> <p>
For <code>GET</code> requests query string parameters are expected For <code>GET</code> requests query string parameters are
(e.g. expected (e.g.
<code>/api/document.info?id=...&token=...</code>). When making{' '} <code>/api/document.info?id=...&token=...</code>). When making{' '}
<code>POST</code> requests, request parameters are parsed depending on{' '} <code>POST</code> requests, request parameters are parsed
<code>Content-Type</code> header. To make a call using JSON payload, depending on <code>Content-Type</code> header. To make a call
one must pass <code>Content-Type: application/json</code> header: using JSON payload, one must pass{' '}
<code>Content-Type: application/json</code> header:
</p> </p>
<p> <p>
@ -117,33 +142,35 @@ export default function Pricing() {
<h2>Authentication</h2> <h2>Authentication</h2>
<p> <p>
To access private API endpoints, you must provide a valid API key. You To access private API endpoints, you must provide a valid API
can create new API keys in your{' '} key. You can create new API keys in your{' '}
<a href={`${process.env.URL}/settings`}>account settings</a>. Be <a href={`${process.env.URL}/settings`}>account settings</a>. Be
careful when handling your keys as they give access to all of your careful when handling your keys as they give access to all of
documents. your documents.
</p> </p>
<p> <p>
To authenticate with Outline API, you can supply the API key as a To authenticate with Outline API, you can supply the API key as
header (<code>Authorization: Bearer YOUR_API_KEY</code>) or as part of a header (<code>Authorization: Bearer YOUR_API_KEY</code>) or as
the payload using <code>token</code> parameter. If you’re making{' '} part of the payload using <code>token</code> parameter. If
<code>GET</code> requests, header based authentication is recommended you’re making <code>GET</code> requests, header based
so that your keys don’t leak into logs. authentication is recommended so that your keys don’t leak into
logs.
</p> </p>
<p> <p>
Some API endpoints allow unauhenticated requests for public resources Some API endpoints allow unauhenticated requests for public
and they can be called without an API key. resources and they can be called without an API key.
</p> </p>
<h2>Errors</h2> <h2>Errors</h2>
<p> <p>
All successful API requests will be returned with <code>200</code>{' '} All successful API requests will be returned with{' '}
status code and <code>ok: true</code> in the response payload. If <code>200</code> status code and <code>ok: true</code> in the
there’s an error while making the request, appropriate status code is response payload. If there’s an error while making the request,
returned with the <code>error</code> message: appropriate status code is returned with the <code>error</code>{' '}
message:
</p> </p>
<pre> <pre>
@ -155,13 +182,14 @@ export default function Pricing() {
`} `}
</code> </code>
</pre> </pre>
</Grid.Unit>
</Grid>
<h2>Methods</h2>
<Methods> <Methods>
<Method method="auth.info" label="Get current auth"> <Method method="auth.info" label="Get current auth">
<Description> <Description>
This method returns the user and team info for the user identified This method returns the user and team info for the user
by the token. identified by the token.
</Description> </Description>
<Arguments /> <Arguments />
</Method> </Method>
@ -209,29 +237,37 @@ export default function Pricing() {
<Method method="users.promote" label="Promote a new admin user"> <Method method="users.promote" label="Promote a new admin user">
<Description> <Description>
Promote a user to be a team admin. This endpoint is only available Promote a user to be a team admin. This endpoint is only
for admin users. available for admin users.
</Description> </Description>
<Arguments pagination> <Arguments pagination>
<Argument id="id" description="User ID to be promoted" required /> <Argument
id="id"
description="User ID to be promoted"
required
/>
</Arguments> </Arguments>
</Method> </Method>
<Method method="users.demote" label="Demote existing admin user"> <Method method="users.demote" label="Demote existing admin user">
<Description> <Description>
Demote existing team admin if there are more than one as one admin Demote existing team admin if there are more than one as one
is always required. This endpoint is only available for admin admin is always required. This endpoint is only available for
users. admin users.
</Description> </Description>
<Arguments pagination> <Arguments pagination>
<Argument id="id" description="User ID to be demoted" required /> <Argument
id="id"
description="User ID to be demoted"
required
/>
</Arguments> </Arguments>
</Method> </Method>
<Method method="users.suspend" label="Suspend user account"> <Method method="users.suspend" label="Suspend user account">
<Description> <Description>
Admin can suspend users to reduce the number of accounts on their Admin can suspend users to reduce the number of accounts on
billing plan or prevent them from accessing documention. their billing plan or prevent them from accessing documention.
</Description> </Description>
<Arguments pagination> <Arguments pagination>
<Argument <Argument
@ -247,8 +283,8 @@ export default function Pricing() {
label="Activate a suspended user account" label="Activate a suspended user account"
> >
<Description> <Description>
Admin can re-active a suspended user. This will update the billing Admin can re-active a suspended user. This will update the
plan and re-enable their access to the documention. billing plan and re-enable their access to the documention.
</Description> </Description>
<Arguments pagination> <Arguments pagination>
<Argument <Argument
@ -306,8 +342,8 @@ export default function Pricing() {
<Method method="collections.delete" label="Delete a collection"> <Method method="collections.delete" label="Delete a collection">
<Description> <Description>
Delete a collection and all of its documents. This action can’t be Delete a collection and all of its documents. This action can’t
undone so please be careful. be undone so please be careful.
</Description> </Description>
<Arguments> <Arguments>
<Argument id="id" description="Collection ID" required /> <Argument id="id" description="Collection ID" required />
@ -362,10 +398,10 @@ export default function Pricing() {
<Method method="documents.create" label="Create a new document"> <Method method="documents.create" label="Create a new document">
<Description> <Description>
This method allows you to publish a new document under an existing This method allows you to publish a new document under an
collection. By default a document is set to the parent collection existing collection. By default a document is set to the parent
root. If you want to create a subdocument, you can pass{' '} collection root. If you want to create a subdocument, you can
<code>parentDocument</code> to set parent document. pass <code>parentDocument</code> to set parent document.
</Description> </Description>
<Arguments> <Arguments>
<Argument <Argument
@ -392,7 +428,8 @@ export default function Pricing() {
id="parentDocument" id="parentDocument"
description={ description={
<span> <span>
<code>ID</code> of the parent document within the collection <code>ID</code> of the parent document within the
collection
</span> </span>
} }
/> />
@ -452,12 +489,15 @@ export default function Pricing() {
</Arguments> </Arguments>
</Method> </Method>
<Method method="documents.move" label="Move document in a collection"> <Method
method="documents.move"
label="Move document in a collection"
>
<Description> <Description>
Move a document into a new location inside the collection. This is Move a document into a new location inside the collection. This
easily done by defining the parent document ID. If no parent is easily done by defining the parent document ID. If no parent
document is provided, the document will be moved to the collection document is provided, the document will be moved to the
root. collection root.
</Description> </Description>
<Arguments> <Arguments>
<Argument <Argument
@ -599,7 +639,9 @@ export default function Pricing() {
method="documents.pinned" method="documents.pinned"
label="Get pinned documents for a collection" 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 /> <Arguments pagination />
</Method> </Method>
@ -607,7 +649,9 @@ export default function Pricing() {
method="documents.revision" method="documents.revision"
label="Get revision for a document" 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> <Arguments>
<Argument <Argument
id="id" id="id"
@ -623,8 +667,8 @@ export default function Pricing() {
label="Get revisions for a document" label="Get revisions for a document"
> >
<Description> <Description>
Return revisions for a document. Upon each edit, a new revision is Return revisions for a document. Upon each edit, a new revision
stored. is stored.
</Description> </Description>
<Arguments pagination> <Arguments pagination>
<Argument <Argument
@ -655,8 +699,8 @@ export default function Pricing() {
<Method method="shares.revoke" label="Revoke a share link"> <Method method="shares.revoke" label="Revoke a share link">
<Description> <Description>
Makes the share link inactive so that it can no longer be used to Makes the share link inactive so that it can no longer be used
access the document. to access the document.
</Description> </Description>
<Arguments> <Arguments>
<Argument id="id" description="Share ID" required /> <Argument id="id" description="Share ID" required />
@ -664,12 +708,22 @@ export default function Pricing() {
</Method> </Method>
</Methods> </Methods>
</Container> </Container>
</Content>
</Grid> </Grid>
); );
} }
const MethodList = styled.ul` const MenuItem = styled.a`
margin-bottom: 80px; 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 }) => { const Methods = (props: { children: React.Node }) => {
@ -677,16 +731,26 @@ const Methods = (props: { children: React.Node }) => {
const methods = children.map(child => child.props.method); const methods = children.map(child => child.props.method);
return ( return (
<div> <React.Fragment>
<MethodList> <Grid>
<Grid.Unit
size={{ tablet: 1 / 4 }}
visible={{ mobile: false, tablet: true }}
>
<nav>
<h2>Reference</h2>
<List>
{methods.map(method => ( {methods.map(method => (
<li key={method}> <li key={method}>
<a href={`#${method}`}>{method}</a> <MenuItem href={`#${method}`}>{method}</MenuItem>
</li> </li>
))} ))}
</MethodList> </List>
{children} </nav>
</div> </Grid.Unit>
<Grid.Unit size={{ tablet: 3 / 4 }}>{children}</Grid.Unit>
</Grid>
</React.Fragment>
); );
}; };
@ -741,7 +805,7 @@ const Method = (props: MethodProps) => {
return ( return (
<MethodContainer> <MethodContainer>
<h3 id={props.method}> <h3 id={props.method}>
<code>{props.method}</code> - {props.label} <code>{props.method}</code> {props.label}
</h3> </h3>
<div>{description}</div> <div>{description}</div>
<Request>HTTP request & arguments</Request> <Request>HTTP request & arguments</Request>

4
server/pages/Changelog.js
View File

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

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

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