diff --git a/public/images/screenshots/airtable.png b/public/images/screenshots/airtable.png new file mode 100755 index 00000000..ce2ced1c Binary files /dev/null and b/public/images/screenshots/airtable.png differ diff --git a/public/images/screenshots/figma.png b/public/images/screenshots/figma.png old mode 100644 new mode 100755 index 42b3c6b3..70226ba3 Binary files a/public/images/screenshots/figma.png and b/public/images/screenshots/figma.png differ diff --git a/public/images/screenshots/framer.png b/public/images/screenshots/framer.png old mode 100644 new mode 100755 index 74d0f0c2..74be5e87 Binary files a/public/images/screenshots/framer.png and b/public/images/screenshots/framer.png differ diff --git a/public/images/screenshots/invision.png b/public/images/screenshots/invision.png old mode 100644 new mode 100755 index ba5f852e..32e31420 Binary files a/public/images/screenshots/invision.png and b/public/images/screenshots/invision.png differ diff --git a/public/images/screenshots/lucidchart.png b/public/images/screenshots/lucidchart.png new file mode 100755 index 00000000..50f76820 Binary files /dev/null and b/public/images/screenshots/lucidchart.png differ diff --git a/public/images/screenshots/marvel.png b/public/images/screenshots/marvel.png old mode 100644 new mode 100755 index 940715f7..7416afca Binary files a/public/images/screenshots/marvel.png and b/public/images/screenshots/marvel.png differ diff --git a/public/images/screenshots/numeracy.png b/public/images/screenshots/numeracy.png new file mode 100755 index 00000000..85190790 Binary files /dev/null and b/public/images/screenshots/numeracy.png differ diff --git a/public/images/screenshots/realtime-board.png b/public/images/screenshots/realtime-board.png new file mode 100755 index 00000000..f30783b0 Binary files /dev/null and b/public/images/screenshots/realtime-board.png differ diff --git a/public/images/screenshots/slack-channel.png b/public/images/screenshots/slack-channel.png new file mode 100755 index 00000000..37fc0098 Binary files /dev/null and b/public/images/screenshots/slack-channel.png differ diff --git a/public/images/screenshots/slack-search.png b/public/images/screenshots/slack-search.png new file mode 100755 index 00000000..f17c0669 Binary files /dev/null and b/public/images/screenshots/slack-search.png differ diff --git a/public/images/screenshots/typeform.png b/public/images/screenshots/typeform.png new file mode 100755 index 00000000..fa005a37 Binary files /dev/null and b/public/images/screenshots/typeform.png differ diff --git a/server/pages/components/Markdown.js b/server/pages/components/Markdown.js index 0210dc4d..9537707a 100644 --- a/server/pages/components/Markdown.js +++ b/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; + } `; diff --git a/server/pages/integrations/Integration.js b/server/pages/integrations/Integration.js index bc261980..d64fd3f0 100644 --- a/server/pages/integrations/Integration.js +++ b/server/pages/integrations/Integration.js @@ -24,7 +24,7 @@ export default function Integration({ integration, content }: Props) { return ( - {integration.name} Integration + {integration.name} Integration – Outline

{integration.name} Integration

diff --git a/server/pages/integrations/airtable.md b/server/pages/integrations/airtable.md new file mode 100644 index 00000000..ebe3c505 --- /dev/null +++ b/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. diff --git a/server/pages/integrations/codepen.md b/server/pages/integrations/codepen.md new file mode 100644 index 00000000..f6edae4f --- /dev/null +++ b/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. diff --git a/server/pages/integrations/content.json b/server/pages/integrations/content.json index 9ff91adb..130ee3c3 100644 --- a/server/pages/integrations/content.json +++ b/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" } ] \ No newline at end of file diff --git a/server/pages/integrations/github-gist.md b/server/pages/integrations/github-gist.md new file mode 100644 index 00000000..696256d0 --- /dev/null +++ b/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. diff --git a/server/pages/integrations/lucidchart.md b/server/pages/integrations/lucidchart.md new file mode 100644 index 00000000..56040c6c --- /dev/null +++ b/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. diff --git a/server/pages/integrations/mode-analytics.md b/server/pages/integrations/mode-analytics.md new file mode 100644 index 00000000..affa5060 --- /dev/null +++ b/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. diff --git a/server/pages/integrations/numeracy.md b/server/pages/integrations/numeracy.md new file mode 100644 index 00000000..51d7b86f --- /dev/null +++ b/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. diff --git a/server/pages/integrations/realtime-board.md b/server/pages/integrations/realtime-board.md new file mode 100644 index 00000000..fd99b078 --- /dev/null +++ b/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. diff --git a/server/pages/integrations/slack.md b/server/pages/integrations/slack.md new file mode 100644 index 00000000..e01d1de8 --- /dev/null +++ b/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 diff --git a/server/pages/integrations/trello.md b/server/pages/integrations/trello.md new file mode 100644 index 00000000..fcd0bcfb --- /dev/null +++ b/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. diff --git a/server/pages/integrations/typeform.md b/server/pages/integrations/typeform.md new file mode 100644 index 00000000..d44aef07 --- /dev/null +++ b/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.