Figma, framer, invision, marvel pages

server/pages/integrations/Integration.js

@@ -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>

server/pages/integrations/Menu.js

@@ -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};
 `;
 

server/pages/integrations/content.json

@@ -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",

server/pages/integrations/figma.md

@@ -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.
 
+![Figma Outline Integration](/images/screenshots/figma.png)
+
 > This integration works without any additional settings or authentication.

server/pages/integrations/framer.md

@@ -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.
+
+![Framer Outline Integration](/images/screenshots/framer.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/invision.md

@@ -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.
+
+![InVision Outline Integration](/images/screenshots/invision.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/marvel.md

@@ -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.
+
+![Marvel Outline Integration](/images/screenshots/marvel.png)
+
+> This integration works without any additional settings or authentication.