Optimize images

server/pages/components/Markdown.js

@@ -23,4 +23,11 @@ export default styled(ReactMarkdown)`
     box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
   }
+
+  code {
+    font-size: 15px;
+    background: ${props => props.theme.smoke};
+    padding: 2px 4px;
+    border-radius: 2px;
+  }
 `;

server/pages/integrations/Integration.js

@@ -24,7 +24,7 @@ export default function Integration({ integration, content }: Props) {
   return (
     <Grid>
       <Helmet>
-        <title>{integration.name} Integration</title>
+        <title>{integration.name} Integration – Outline</title>
       </Helmet>
       <Header background="#F4F7FA">
         <h1>{integration.name} Integration</h1>

server/pages/integrations/airtable.md

@@ -0,0 +1,7 @@
+In an Outline document, paste a share link to an [Airtable](https://airtable.com) table and it will be immediately converted into an interactive, live embed.
+
+Embedding a table in your knowledge base will stay upto date with your original data source automatically.
+
+![Airtable Outline Integration](/images/screenshots/airtable.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/codepen.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a share link to a [Codepen](https://codepen.io) card and it will be immediately converted into an embedded version where you can view the source or the result.
+
+Pen's can be anything from a simple code snippet, to an embedded 3D graphic, visualization and more.
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/content.json

@@ -32,103 +32,69 @@
     "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."
+    "description": "Part spreadsheet, part database, and entirely flexible"
   },
   {
     "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."
+    "description": "Create flowcharts and technical diagrams with ease"
   },
   {
     "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."
+    "description": "Simple whiteboarding for cross-functional team collaboration"
   },
   {
     "slug": "slack",
     "name": "Slack",
     "url": "https://slack.com",
     "category": "Collaboration",
-    "description": "Chat, collaboration, and file sharing for teams",
-    "content": ""
+    "description": "Chat, collaboration, and file sharing for teams"
   },
   {
     "slug": "trello",
     "name": "Trello",
     "url": "https://trello.com",
     "category": "Collaboration",
-    "description": "Boards, lists, and cards to organize your projects",
-    "content": ""
+    "description": "Boards, lists, and cards to organize your projects"
   },
   {
     "slug": "typeform",
     "name": "Typeform",
     "url": "https://typeform.com",
     "category": "Collaboration",
-    "description": "Data collection tool and surveys, for professionals",
-    "content": ""
+    "description": "Data collection tool and surveys, for professionals"
   },
   {
     "slug": "codepen",
     "name": "Codepen",
     "url": "https://codepen.io",
     "category": "Developers",
-    "description": "A social development environment and editor",
-    "content": ""
+    "description": "A social development environment and editor"
   },
   {
     "slug": "github-gist",
     "name": "GitHub Gist",
     "url": "https://gist.github.com",
     "category": "Developers",
-    "description": "Sharable code snippets, hosted by GitHub",
-    "content": ""
+    "description": "Sharable code snippets, hosted by GitHub"
   },
   {
     "slug": "mode-analytics",
     "name": "Mode Analytics",
     "url": "https://modeanalytics.com",
     "category": "Developers",
-    "description": "Connect and analyze data from anywhere",
-    "content": ""
+    "description": "Connect and analyze data from any data source"
   },
   {
     "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": ""
+    "description": "A SQL pad for writing, iterating, and exploring data"
   }
 ]

server/pages/integrations/github-gist.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a link to a public [Gist](https://gist.github.com) and it will be immediately converted into an embedded version. Embedding code in your knowledge base is a great way to document best practices.
+
+Outline also supports native code blocks, simply start a line with three backticks (```) to create a code block with syntax highlighting.
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/lucidchart.md

@@ -0,0 +1,7 @@
+In an Outline document, paste a share link to a [Lucidchart](https://lucidchart.com) diagram or chart and it will be immediately converted into an interactive embedded version.
+
+Embed diagrams in your knowledge base to commuicate flows, technical diagrams, and more alongside your written documentation
+
+![Lucidchart Outline Integration](/images/screenshots/lucidchart.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/mode-analytics.md

@@ -0,0 +1,3 @@
+In an Outline document, paste a link to a public [Mode Analytics](https://modeanalytics.com) report and it will be converted into an interactive, embedded graph or table. Embedded graphs are perfect for communicating business metrics and KPI's.
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/numeracy.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a link to any [Numeracy](https://numeracy.co) chart and it will be converted into an interactive, embedded chart or table. Embedding graphs are perfect for communicating business metrics and KPI's.
+
+![Numeracy Outline Integration](/images/screenshots/numeracy.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/realtime-board.md

@@ -0,0 +1,7 @@
+In an Outline document, paste a share link to a [Realtime Board](https://realtimeboard.com/) whiteboard and it will be immediately converted into a realtime, interactive embed.
+
+Embedded whiteboards in your knowledge base to commuicate plans and ideas, technical diagrams, designs, timelines and more alongside your written documentation
+
+![Realtime Board Outline Integration](/images/screenshots/realtime-board.png)
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/slack.md

@@ -0,0 +1,20 @@
+## Sign In with Slack
+
+Sign In with Slack means your team doesn't have to worry about invites, passwords, or managing new team members. Everyone on your team can login with their existing Slack account and will automatically join your private knowledgebase.
+
+> Note: Your team will also get a matching custom subdomain that you can link to from elsewhere.
+
+
+## Search your Knowledgebase
+
+Optionally [Connect to Slack](https://www.getoutline.com/settings/integrations/slack) to enable the `/outline` slack command. Once enabled team members can easily search your wiki from within Slack by typing `/outline search term`.
+
+![Slack Search Integration](/images/screenshots/slack-search.png)
+
+## Notifications
+
+Outline can optionally post into any Slack #channel when documents are created or edited. You can also choose to route notifications based on the Collection.
+
+![Slack Channel Integration](/images/screenshots/slack-channel.png)
+
+> To setup channel notifications head to [your integration settings](https://www.getoutline.com/settings/integrations/slack) in the Outline admin

server/pages/integrations/trello.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a share link to a [Trello](https://trello.com) card and it will be immediately converted into an embedded preview.
+
+Embed trello cards in your knowledge base to commuicate roadmap items, ideas, and more alongside your written documentation. Not sure how? [Learn more about sharing from Trello](https://help.trello.com/article/824-sharing-links-to-cards-and-boards). 
+
+> This integration works without any additional settings or authentication.

server/pages/integrations/typeform.md

@@ -0,0 +1,5 @@
+In an Outline document, paste a share link to a [Typeform survey](https://typeform.com) and it will be immediately converted into an embedded version of the survey. All you have to do is share the doc and wait for responses to roll in.
+
+![Typeform Outline Integration](/images/screenshots/typeform.png)
+
+> This integration works without any additional settings or authentication.