diff --git a/public/images/screenshots/airtable.png b/public/images/screenshots/airtable.png new file mode 100755 index 000000000..ce2ced1c5 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 42b3c6b36..70226ba36 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 74d0f0c2d..74be5e879 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 ba5f852e2..32e314209 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 000000000..50f76820a 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 940715f7d..7416afca5 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 000000000..851907909 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 000000000..f30783b07 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 000000000..37fc0098c 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 000000000..f17c0669c 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 000000000..fa005a370 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 0210dc4d2..9537707a6 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 bc2619802..d64fd3f09 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 000000000..ebe3c5059 --- /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 000000000..f6edae4fb --- /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 9ff91adb7..130ee3c3c 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 000000000..696256d0b --- /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 000000000..56040c6c1 --- /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 000000000..affa50600 --- /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 000000000..51d7b86f3 --- /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 000000000..fd99b0784 --- /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 000000000..e01d1de8b --- /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 000000000..fcd0bcfb4 --- /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 000000000..d44aef076 --- /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.