feat(trello): add trello integration (#1380)

packages/docs/pages/.vitepress/config.js

@@ -373,6 +373,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/todoist/connection' },
           ],
         },
+        {
+          text: 'Trello',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/trello/connection' }],
+        },
         {
           text: 'Twilio',
           collapsible: true,

packages/docs/pages/apps/trello/connection.md

@@ -0,0 +1,16 @@
+# Trello
+
+:::info
+This page explains the steps you need to follow to set up the Trello
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [link](https://trello.com/power-ups/admin) in order to create a Trello Power-Up.
+2. Click on the **New** button.
+3. Fill the form fields and click the **Create** button.
+4. Click on the **Generate a new API key** button.
+5. A popup will open. Click the **Generate a new API key** button again.
+6. Copy **OAuth Redirect URL** from Automatisch and paste it in **Allowed origins** and click on the **Add** button.
+7. Copy the **API key** value to the **API key** field on Automatisch.
+8. Click **Submit** button on Automatisch.
+9. Congrats! Start using your new Trello connection within the flows.

packages/docs/pages/public/favicons/trello.svg

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" role="presentation" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5ZM5 6C5 5.44772 5.44772 5 6 5H10C10.5523 5 11 5.44772 11 6V16C11 16.5523 10.5523 17 10 17H6C5.44772 17 5 16.5523 5 16V6ZM14 5C13.4477 5 13 5.44772 13 6V12C13 12.5523 13.4477 13 14 13H18C18.5523 13 19 12.5523 19 12V6C19 5.44772 18.5523 5 18 5H14Z" fill="#0079bf"></path></svg>