docs: Add trigger and connection pages of webhooks app

packages/backend/src/routes/webhooks.ts

@@ -5,6 +5,7 @@ const router = Router();
 
 router.get('/:flowId', webhookHandler);
 router.put('/:flowId', webhookHandler);
+router.patch('/:flowId', webhookHandler);
 router.post('/:flowId', webhookHandler);
 
 export default router;

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

@@ -174,7 +174,10 @@ export default defineConfig({
           text: 'Webhooks',
           collapsible: true,
           collapsed: true,
-          items: [{ text: 'Triggers', link: '/apps/webhooks/triggers' }],
+          items: [
+            { text: 'Triggers', link: '/apps/webhooks/triggers' },
+            { text: 'Connection', link: '/apps/webhooks/connection' },
+          ],
         },
       ],
       '/': [

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

@@ -0,0 +1,7 @@
+# Webhooks
+
+Webhooks is a built-in app shipped with Automatisch, and it doesn't need to authenticate with any other external service to run.
+
+## How to use
+
+You will be given a webhook URL in the test substep on the editor page, and you can use it to send a GET, POST, PUT, or PATCH request to Automatisch to trigger the flow.

packages/docs/pages/apps/webhooks/triggers.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/webhooks.svg
+items:
+  - name: Catch raw webhook
+    desc: Triggers when the webhook receives a request.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="48px" height="48px"><g id="surface56721297">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,12.156863%,32.156864%);fill-opacity:1;" d="M 35 37 C 32.800781 37 31 35.199219 31 33 C 31 30.800781 32.800781 29 35 29 C 37.199219 29 39 30.800781 39 33 C 39 35.199219 37.199219 37 35 37 Z M 35 37 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,12.156863%,32.156864%);fill-opacity:1;" d="M 35 43 C 32 43 29.101562 41.601562 27.199219 39.300781 L 30.300781 36.800781 C 31.398438 38.199219 33.199219 39.101562 35 39.101562 C 38.300781 39.101562 41 36.398438 41 33.101562 C 41 29.800781 38.300781 27.101562 35 27.101562 C 34 27.101562 33 27.398438 32.101562 27.800781 L 30.398438 28.800781 L 23.300781 16 L 26.800781 14.101562 L 32.101562 23.5 C 33.101562 23.199219 34.101562 23 35.101562 23 C 40.601562 23 45.101562 27.5 45.101562 33 C 45.101562 38.5 40.5 43 35 43 Z M 35 43 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,12.156863%,32.156864%);fill-opacity:1;" d="M 14 43 C 8.5 43 4 38.5 4 33 C 4 28.398438 7.101562 24.5 11.5 23.300781 L 12.5 27.199219 C 9.898438 27.898438 8 30.300781 8 33 C 8 36.300781 10.699219 39 14 39 C 17.300781 39 20 36.300781 20 33 L 20 31 L 35 31 L 35 35 L 23.800781 35 C 22.898438 39.601562 18.800781 43 14 43 Z M 14 43 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,34.901962%,96.862745%);fill-opacity:1;" d="M 14 37 C 11.800781 37 10 35.199219 10 33 C 10 30.800781 11.800781 29 14 29 C 16.199219 29 18 30.800781 18 33 C 18 35.199219 16.199219 37 14 37 Z M 14 37 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,12.156863%,32.156864%);fill-opacity:1;" d="M 25 19 C 22.800781 19 21 17.199219 21 15 C 21 12.800781 22.800781 11 25 11 C 27.199219 11 29 12.800781 29 15 C 29 17.199219 27.199219 19 25 19 Z M 25 19 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,34.901962%,96.862745%);fill-opacity:1;" d="M 15.699219 34 L 12.300781 32 L 18.199219 22.300781 C 16.199219 20.398438 15 17.800781 15 15 C 15 9.5 19.5 5 25 5 C 30.5 5 35 9.5 35 15 C 35 15.898438 34.898438 16.699219 34.699219 17.5 L 30.800781 16.5 C 30.898438 16 31 15.5 31 15 C 31 11.699219 28.300781 9 25 9 C 21.699219 9 19 11.699219 19 15 C 19 17.101562 20.101562 19 21.898438 20.101562 L 23.601562 21.101562 Z M 15.699219 34 "/>
+</g></svg>

packages/web/src/config/urls.ts

@@ -67,4 +67,5 @@ export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
 export const DASHBOARD = FLOWS;
 
 // External links
-export const WEBHOOK_DOCS = 'https://automatisch.io/docs'
+export const WEBHOOK_DOCS =
+  'https://automatisch.io/docs/apps/webhooks/connection';