Content pages

server/pages/Changelog.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import format from 'date-fns/format';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
-import ReactMarkdown from 'react-markdown';
 import { Helmet } from 'react-helmet';
+import Markdown from './components/Markdown';
 import Header from './components/Header';
 import Content from './components/Content';
 
@@ -36,7 +36,7 @@ function Changelog({ releases }: { releases: Release[] }) {
             <Time dateTime={release.created_at}>
               {format(new Date(release.created_at), 'MMMM Do, YYYY')}
             </Time>
-            <ReactMarkdown source={release.body} />
+            <Markdown source={release.body} />
           </Article>
         ))}
       </Content>

server/pages/Integration.js

@@ -1,29 +0,0 @@
-// @flow
-import * as React from 'react';
-import { find } from 'lodash';
-import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
-import Header from './components/Header';
-import Content from './components/Content';
-import IntegrationMenu from './components/IntegrationMenu';
-import integrations from '../config/integrations';
-
-export default function Integration({ slug }: { slug: string }) {
-  const integation = find(integrations, i => i.slug === slug);
-
-  return (
-    <Grid>
-      <Helmet>
-        <title>{integation.name} Integration</title>
-      </Helmet>
-      <Header>
-        <h1>{integation.name} Integration</h1>
-        <p>{integation.description}</p>
-      </Header>
-      <Content>
-        <IntegrationMenu integrations={integrations} />
-        <div />
-      </Content>
-    </Grid>
-  );
-}

server/pages/components/IntegrationMenu.js

@@ -1,24 +0,0 @@
-// @flow
-import { map, groupBy } from 'lodash';
-import * as React from 'react';
-
-export default function IntegrationMenu({ integrations }) {
-  const categories = groupBy(integrations, i => i.category);
-
-  return (
-    <nav>
-      {map(categories, (integrations, category) => (
-        <React.Fragment>
-          <h3>{category}</h3>
-          <ul>
-            {integrations.map(i => (
-              <li>
-                <a href={`/integrations/${i.slug}`}>{i.name}</a>
-              </li>
-            ))}
-          </ul>
-        </React.Fragment>
-      ))}
-    </nav>
-  );
-}

server/pages/components/Markdown.js

@@ -0,0 +1,18 @@
+// @flow
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+
+export default styled(ReactMarkdown)`
+  blockquote {
+    margin-left: 0;
+    background-color: ${props => props.theme.smoke};
+    border-left: 6px solid ${props => props.theme.smokeDark};
+    padding: 15px 30px 15px 15px;
+    font-style: italic;
+    font-size: 16px;
+
+    p {
+      margin: 0;
+    }
+  }
+`;

server/pages/components/Navigation.js

@@ -4,6 +4,7 @@ import { sortBy } from 'lodash';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Centered from './Centered';
+import OutlineLogo from '../../../shared/components/OutlineLogo';
 import TeamLogo from '../../../shared/components/TeamLogo';
 import { fadeAndScaleIn } from '../../../shared/styles/animations';
 import {
@@ -37,7 +38,9 @@ function TopNavigation({ sessions, loggedIn }: Props) {
 
   return (
     <Nav>
-      <Brand href={process.env.URL}>Outline</Brand>
+      <Brand href={process.env.URL}>
+        <OutlineLogo size={18} fill="#000" />&nbsp;Outline
+      </Brand>
       <Menu>
         <MenuItemDesktop>
           <a href={features()}>Features</a>
@@ -247,6 +250,8 @@ const BottomNav = styled.nav`
 `;
 
 const Brand = styled.a`
+  display: flex;
+  align-items: center;
   font-weight: 600;
   font-size: 20px;
   text-decoration: none;

server/pages/integrations/Integration.js

@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import Grid from 'styled-components-grid';
+import { Helmet } from 'react-helmet';
+import Markdown from '../components/Markdown';
+import Header from '../components/Header';
+import Content from '../components/Content';
+import Menu from './Menu';
+import integrations from './content';
+
+type TIntegration = {
+  slug: string,
+  name: string,
+  url: string,
+  description: string,
+};
+
+type Props = {
+  integration: TIntegration,
+  content: string,
+};
+
+export default function Integration({ integration, content }: Props) {
+  return (
+    <Grid>
+      <Helmet>
+        <title>{integration.name} Integration</title>
+      </Helmet>
+      <Header background="#F4F7FA">
+        <h1>{integration.name} Integration</h1>
+        <p>{integration.description}</p>
+      </Header>
+      <Content>
+        <Grid>
+          <Grid.Unit size={{ desktop: 1 / 4 }}>
+            <Menu integrations={integrations} />
+          </Grid.Unit>
+          <Grid.Unit size={{ desktop: 3 / 4 }}>
+            <Markdown source={content} />
+          </Grid.Unit>
+        </Grid>
+      </Content>
+    </Grid>
+  );
+}

server/pages/integrations/Menu.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { map, groupBy } from 'lodash';
+
+export default function IntegrationMenu({ integrations }: { integrations: * }) {
+  const categories = groupBy(integrations, i => i.category);
+
+  return (
+    <nav>
+      {map(categories, (integrations, category) => (
+        <React.Fragment key={category}>
+          <h3>{category}</h3>
+          <List>
+            {integrations.map(i => (
+              <li key={i.slug}>
+                <MenuItem href={`/integrations/${i.slug}`}>
+                  <Logo src={`/images/${i.slug}.png`} alt={i.name} />
+                  <span>{i.name}</span>
+                </MenuItem>
+              </li>
+            ))}
+          </List>
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+}
+
+const MenuItem = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.theme.text};
+`;
+
+const Logo = styled.img`
+  user-select: none;
+  height: 18px;
+  border-radius: 2px;
+  margin-right: 8px;
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;

server/pages/integrations/content.json

@@ -0,0 +1,138 @@
+[
+  {
+    "slug": "figma",
+    "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."
+  },
+  {
+    "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."
+  },
+  {
+    "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."
+  },
+  {
+    "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."
+  },
+  {
+    "slug": "airtable",
+    "name": "Airtable",
+    "url": "https://airtable.com",
+    "category": "Collaboration",
+    "description": "Part spreadsheet, part database, and entirely flexible",
+    "content": "Embed interactive tables into your Outline docs. Paste a link to an Airtable public share link to instantly convert into a rich preview."
+  },
+  {
+    "slug": "lucidchart",
+    "name": "Lucidchart",
+    "url": "https://lucidchart.com",
+    "category": "Collaboration",
+    "description": "Create flowcharts and technical diagrams with ease",
+    "content": "Embed an interactive chart inside your Outline doc. Paste a link to any shared Lucidchart to instantly convert into a rich preview."
+  },
+  {
+    "slug": "realtime-board",
+    "name": "Realtime Board",
+    "url": "https://realtimeboard.com",
+    "category": "Collaboration",
+    "description": "Simple whiteboarding for cross-functional team collaboration",
+    "content": "Embed an interactive whiteboard inside your Outline doc. Paste a link to any shared Realtime Board to instantly convert to a board."
+  },
+  {
+    "slug": "slack",
+    "name": "Slack",
+    "url": "https://slack.com",
+    "category": "Collaboration",
+    "description": "Chat, collaboration, and file sharing for teams",
+    "content": ""
+  },
+  {
+    "slug": "trello",
+    "name": "Trello",
+    "url": "https://trello.com",
+    "category": "Collaboration",
+    "description": "Boards, lists, and cards to organize your projects",
+    "content": ""
+  },
+  {
+    "slug": "typeform",
+    "name": "Typeform",
+    "url": "https://typeform.com",
+    "category": "Collaboration",
+    "description": "Data collection tool and surveys, for professionals",
+    "content": ""
+  },
+  {
+    "slug": "codepen",
+    "name": "Codepen",
+    "url": "https://codepen.io",
+    "category": "Developers",
+    "description": "A social development environment and editor",
+    "content": ""
+  },
+  {
+    "slug": "github-gist",
+    "name": "GitHub Gist",
+    "url": "https://gist.github.com",
+    "category": "Developers",
+    "description": "Sharable code snippets, hosted by GitHub",
+    "content": ""
+  },
+  {
+    "slug": "mode-analytics",
+    "name": "Mode Analytics",
+    "url": "https://modeanalytics.com",
+    "category": "Developers",
+    "description": "Connect and analyze data from anywhere",
+    "content": ""
+  },
+  {
+    "slug": "numeracy",
+    "name": "Numeracy",
+    "url": "https://numeracy.io",
+    "category": "Developers",
+    "description": "A SQL pad for writing, iterating, and exploring data",
+    "content": ""
+  },
+  {
+    "slug": "loom",
+    "name": "Loom",
+    "url": "https://useloom.com",
+    "category": "Media",
+    "description": "Get your message across with instantly shareable videos",
+    "content": ""
+  },
+  {
+    "slug": "youtube",
+    "name": "YouTube",
+    "url": "https://youtube.com",
+    "category": "Media",
+    "description": "A popular little website for sharing videos",
+    "content": ""
+  },
+  {
+    "slug": "vimeo",
+    "name": "Vimeo",
+    "url": "https://vimeo.com",
+    "category": "Media",
+    "description": "A customizable and embeddable video player",
+    "content": ""
+  }
+]

server/pages/integrations/figma.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a link to a [Figma](https://figma.com) design and we will instantly convert it to an interactive, live preview.
+
+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.

server/pages/integrations/index.js

@@ -4,9 +4,9 @@ import { map, groupBy } from 'lodash';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
-import Header from './components/Header';
-import Content from './components/Content';
-import integrations from '../config/integrations';
+import Header from '../components/Header';
+import Content from '../components/Content';
+import integrations from './content';
 
 const categories = groupBy(integrations, i => i.category);