Figma, framer, invision, marvel pages
This commit is contained in:
Tom Moor
parent
b7bea4941e
commit
47ea3c343c
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
|
|
@ -58,11 +58,11 @@ export default function Pricing() {
|
|||
return (
|
||||
<Grid>
|
||||
<Helmet>
|
||||
<title>API Documentation - Outline</title>
|
||||
<title>Developers - Outline</title>
|
||||
</Helmet>
|
||||
<Header background="#AA34F0">
|
||||
<h1>Documentation</h1>
|
||||
<p>The API is the heart and soul of Outline.</p>
|
||||
<h1>Developers</h1>
|
||||
<p>Outline is built on an open, best-in-class, API</p>
|
||||
</Header>
|
||||
<Container>
|
||||
<p>
|
||||
|
|
@ -166,6 +166,11 @@ export default function Pricing() {
|
|||
<Arguments />
|
||||
</Method>
|
||||
|
||||
<Method method="users.list" label="List team's users">
|
||||
<Description>List all of the users in the team.</Description>
|
||||
<Arguments pagination />
|
||||
</Method>
|
||||
|
||||
<Method method="users.info" label="Get current user">
|
||||
<Description>
|
||||
This method returns the profile info for the user identified by
|
||||
|
|
@ -630,14 +635,6 @@ export default function Pricing() {
|
|||
</Arguments>
|
||||
</Method>
|
||||
|
||||
<Method method="team.users" label="List team's users">
|
||||
<Description>
|
||||
List team`s users. This endpoint is only available for admin
|
||||
users.
|
||||
</Description>
|
||||
<Arguments pagination />
|
||||
</Method>
|
||||
|
||||
<Method method="shares.list" label="List shared document links">
|
||||
<Description>
|
||||
List all your currently shared document links.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { groupBy, map } from 'lodash';
|
||||
import format from 'date-fns/format';
|
||||
import styled from 'styled-components';
|
||||
import Grid from 'styled-components-grid';
|
||||
|
|
@ -15,7 +16,13 @@ type Release = {
|
|||
created_at: string,
|
||||
};
|
||||
|
||||
function Changelog({ releases }: { releases: Release[] }) {
|
||||
type Props = { releases: Release[] };
|
||||
|
||||
function Changelog({ releases }: Props) {
|
||||
const categories = groupBy(releases, i =>
|
||||
format(new Date(i.created_at), 'MMMM, YYYY')
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Helmet>
|
||||
|
|
@ -28,26 +35,67 @@ function Changelog({ releases }: { releases: Release[] }) {
|
|||
</p>
|
||||
</Header>
|
||||
<Content>
|
||||
{releases.map(release => (
|
||||
<Article key={release.id}>
|
||||
<Heading id={release.name}>
|
||||
<a href={`#${release.name}`}>{release.name}</a>
|
||||
</Heading>
|
||||
<Time dateTime={release.created_at}>
|
||||
{format(new Date(release.created_at), 'MMMM Do, YYYY')}
|
||||
</Time>
|
||||
<Markdown source={release.body} />
|
||||
</Article>
|
||||
))}
|
||||
<Grid>
|
||||
<Grid.Unit
|
||||
size={{ tablet: 1 / 4 }}
|
||||
visible={{ mobile: false, tablet: true }}
|
||||
>
|
||||
<nav>
|
||||
{map(categories, (releases, category) => (
|
||||
<React.Fragment key={category}>
|
||||
<h3>{category.split(',')[0]}</h3>
|
||||
<List>
|
||||
{releases.map(release => (
|
||||
<li key={release.id}>
|
||||
<MenuItem href={`#${release.name}`}>
|
||||
{release.name}
|
||||
</MenuItem>
|
||||
</li>
|
||||
))}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</Grid.Unit>
|
||||
<Grid.Unit size={{ tablet: 3 / 4 }}>
|
||||
{releases.map(release => (
|
||||
<Article key={release.id}>
|
||||
<Heading id={release.name}>
|
||||
<a href={`#${release.name}`}>{release.name}</a>
|
||||
</Heading>
|
||||
<Time dateTime={release.created_at}>
|
||||
{format(new Date(release.created_at), 'MMMM Do, YYYY')}
|
||||
</Time>
|
||||
<Markdown source={release.body} />
|
||||
</Article>
|
||||
))}
|
||||
</Grid.Unit>
|
||||
</Grid>
|
||||
</Content>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
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 Heading = styled.h1`
|
||||
margin-top: 0.5em;
|
||||
|
||||
a {
|
||||
color: ${props => props.theme.text};
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -66,13 +114,6 @@ const Article = styled.div`
|
|||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
zoom: 50%;
|
||||
box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Changelog;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const Header = ({ children, background }: Props) => {
|
|||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
padding: 8em 0 3em;
|
||||
position: relative;
|
||||
|
||||
margin-top: -70px;
|
||||
margin-bottom: 2em;
|
||||
|
|
@ -27,6 +28,17 @@ const Wrapper = styled.div`
|
|||
background: ${props => props.background || 'transparent'};
|
||||
z-index: -1;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 100%;
|
||||
background: ${props => props.background || 'transparent'};
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ function Layout({ children, loggedIn, sessions }: Props) {
|
|||
const Body = styled.body`
|
||||
padding: 0 30px;
|
||||
|
||||
${breakpoint('tablet')`
|
||||
${breakpoint('desktop')`
|
||||
padding: 0;
|
||||
`};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import styled from 'styled-components';
|
|||
export default styled(ReactMarkdown)`
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: ${props => props.theme.smoke};
|
||||
border-left: 6px solid ${props => props.theme.smokeDark};
|
||||
padding: 15px 30px 15px 15px;
|
||||
|
|
@ -15,4 +16,11 @@ export default styled(ReactMarkdown)`
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
zoom: 50%;
|
||||
box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -32,10 +32,13 @@ export default function Integration({ integration, content }: Props) {
|
|||
</Header>
|
||||
<Content>
|
||||
<Grid>
|
||||
<Grid.Unit size={{ desktop: 1 / 4 }}>
|
||||
<Menu integrations={integrations} />
|
||||
<Grid.Unit
|
||||
size={{ tablet: 1 / 4 }}
|
||||
visible={{ mobile: false, tablet: true }}
|
||||
>
|
||||
<Menu integrations={integrations} active={integration.slug} />
|
||||
</Grid.Unit>
|
||||
<Grid.Unit size={{ desktop: 3 / 4 }}>
|
||||
<Grid.Unit size={{ tablet: 3 / 4 }}>
|
||||
<Markdown source={content} />
|
||||
</Grid.Unit>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,12 @@ import * as React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import { map, groupBy } from 'lodash';
|
||||
|
||||
export default function IntegrationMenu({ integrations }: { integrations: * }) {
|
||||
type Props = {
|
||||
integrations: *,
|
||||
active: string,
|
||||
};
|
||||
|
||||
export default function IntegrationMenu({ integrations, active }: Props) {
|
||||
const categories = groupBy(integrations, i => i.category);
|
||||
|
||||
return (
|
||||
|
|
@ -14,7 +19,10 @@ export default function IntegrationMenu({ integrations }: { integrations: * }) {
|
|||
<List>
|
||||
{integrations.map(i => (
|
||||
<li key={i.slug}>
|
||||
<MenuItem href={`/integrations/${i.slug}`}>
|
||||
<MenuItem
|
||||
href={`/integrations/${i.slug}`}
|
||||
active={i.slug === active}
|
||||
>
|
||||
<Logo src={`/images/${i.slug}.png`} alt={i.name} />
|
||||
<span>{i.name}</span>
|
||||
</MenuItem>
|
||||
|
|
@ -31,6 +39,7 @@ const MenuItem = styled.a`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: ${props => (props.active ? '600' : 'inherit')};
|
||||
color: ${props => props.theme.text};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,32 +4,28 @@
|
|||
"name": "Figma",
|
||||
"url": "https://figma.com",
|
||||
"category": "Design",
|
||||
"description": "Figma is a collaborative interface design tool",
|
||||
"content": "Embed interactive Figma designs into your Outline docs. Paste a link to a Figma public share link to instantly convert into a rich preview."
|
||||
"description": "Figma is a collaborative interface design tool"
|
||||
},
|
||||
{
|
||||
"slug": "framer",
|
||||
"name": "Framer",
|
||||
"url": "https://framer.com",
|
||||
"category": "Design",
|
||||
"description": "Framer is an interactive design and prototyping tool",
|
||||
"content": "Embed interactive Framer prototypes into your Outline docs. Paste a link to a Framer cloud link to instantly convert into an interactive embed."
|
||||
"description": "Framer is an interactive design and prototyping tool"
|
||||
},
|
||||
{
|
||||
"slug": "invision",
|
||||
"name": "InVision",
|
||||
"url": "https://invision.com",
|
||||
"category": "Design",
|
||||
"description": "InVision is an online design and prototyping tool",
|
||||
"content": "Embed interactive InVision prototypes into your Outline docs. Paste an InVision share link to instantly convert into an interactive prototype."
|
||||
"description": "InVision is an online design and prototyping tool"
|
||||
},
|
||||
{
|
||||
"slug": "marvel",
|
||||
"name": "Marvel",
|
||||
"url": "https://marvelapp.com",
|
||||
"category": "Design",
|
||||
"description": "The all-in-one platform powering design",
|
||||
"content": "Marvel prototypes inside your Outline docs. Paste a Marvel link to instantly convert into an interactive prototype."
|
||||
"description": "The all-in-one platform powering design"
|
||||
},
|
||||
{
|
||||
"slug": "airtable",
|
||||
|
|
|
|||
|
|
@ -2,4 +2,6 @@ In an Outline document, paste a link to a [Figma](https://figma.com) design and
|
|||
|
||||
Because Figma is an online design tool you can see design work happening in realtime, right within Outline. Embed design specs, product designs, or marketing materials easily.
|
||||
|
||||
|
||||
|
||||
> This integration works without any additional settings or authentication.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
In an Outline document, paste a link to a [Framer](https://framer.com) design or prototype hosted on Framer Cloud and it will be instantly turned into an interactive, live preview.
|
||||
|
||||
Host your prototypes, designs, and mocks inside Outline to document your product or design system. [Learn more about sharing links](https://blog.framer.com/framer-cloud-access-d6bdb192510d) with Framer cloud.
|
||||
|
||||
|
||||
|
||||
> This integration works without any additional settings or authentication.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
In an Outline document, paste a share link to an [InVision](https://invision.com) prototype and it will be immediately converted into an interactive, live embed.
|
||||
|
||||
Embedding prototypes in your knowledge base is a great way to create product specs or document user feedback. [Learn more about sharing links](https://support.invisionapp.com/hc/en-us/sections/200697249-Sharing-Prototypes) from InVision.
|
||||
|
||||
|
||||
|
||||
> This integration works without any additional settings or authentication.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
In an Outline document, paste a share link to a [Marvel](https://marvelapp.com) prototype and it will be immediately converted into an interactive, live embed.
|
||||
|
||||
Embedding prototypes in your knowledge base is a great way to create product specs with engineers or document user feedback.
|
||||
|
||||
|
||||
|
||||
> This integration works without any additional settings or authentication.
|
||||
Reference in New Issue