docs: Adjust the functionality of build integration

packages/docs/pages/build-integrations/actions.md

@@ -44,7 +44,7 @@ export default defineApp({
 Create the `actions/index.ts` file inside of the `thecatapi` folder.
 
 ```typescript
-import mark-cat-image-as-favorite from './mark-cat-image-as-favorite';
+import markCatImageAsFavorite from './mark-cat-image-as-favorite';
 
 export default [markCatImageAsFavorite];
 ```
@@ -55,7 +55,7 @@ If you add new actions, you need to add them to the actions/index.ts file and ex
 
 ## Add metadata
 
-Create the `actions/mark-cat-image-as-favorite.ts` file inside the `thecatapi` folder.
+Create the `actions/mark-cat-image-as-favorite/index.ts` file inside the `thecatapi` folder.
 
 ```typescript
 import defineAction from '../../../../helpers/define-action';
@@ -100,11 +100,11 @@ export default defineAction({
   // ...
 
   async run($) {
-    const requestPath = `/v1/favorites`;
+    const requestPath = '/v1/favourites';
     const imageId = $.step.parameters.imageId;
 
     const headers = {
-      'x-api-key': $.auth.data.apiKey,
+      'x-api-key': $.auth.data.apiKey as string,
     };
 
     const response = await $.http.post(

packages/docs/pages/build-integrations/app.md

@@ -62,7 +62,7 @@ export default defineApp({
 
 ## Create the favicon
 
-Even though we have defined the `iconUrl` inside the app definition, we still need to create the icon file. Let's create the `assets` folder inside the `thecatapi` folder and save [this SVG file](../public/example-app/cat.svg) as `favicon.svg` inside of the `assets` folder. After saving the file, you can go to the `My Apps` page on Automatisch and click on `Add connection` button, and then you will see `The cat API` service with the icon.
+Even though we have defined the `iconUrl` inside the app definition, we still need to create the icon file. Let's create the `assets` folder inside the `thecatapi` folder and save [this SVG file](../public/example-app/cat.svg) as `favicon.svg` inside of the `assets` folder.
 
 :::tip
 If you're looking for SVG icons for third-party services, you can use the following repositories.
@@ -71,3 +71,7 @@ If you're looking for SVG icons for third-party services, you can use the follow
 - [edent/SuperTinyIcons](https://github.com/edent/SuperTinyIcons)
 
 :::
+
+## Test the app definition
+
+Now, you can go to the `My Apps` page on Automatisch and click on `Add connection` button, and then you will see `The cat API` service with the icon.

packages/docs/pages/build-integrations/auth.md

@@ -48,6 +48,7 @@ export default defineApp({
 Let's create the `auth/index.ts` file inside of the `thecatapi` folder.
 
 ```bash
+mkdir auth
 touch auth/index.ts
 ```
 
@@ -194,6 +195,8 @@ You might be wondering why we need to have two separate functions even though we
 If your integration requires you to connect through the authorization URL of the third-party service, you need to use the `generateAuthUrl` method together with the `verifyCredentials` and the `isStillVerified` methods. Check [3-legged OAuth](/build-integrations/examples#_3-legged-oauth) examples to see how to implement them.
 :::
 
+## Test the authentication
+
 Now we have completed the authentication of the cat API. Go to the `My Apps` page in Automatisch, try to add a new connection, select `The Cat API` and use the `API Key` you got with an email. Then you can also check the test connection and reconnect functionality there.
 
 Let's move on to the next page to build a trigger.

packages/docs/pages/build-integrations/triggers.md

@@ -57,7 +57,7 @@ If you add new triggers, you need to add them to the `triggers/index.ts` file an
 
 ## Add metadata
 
-Create the `triggers/search-cat-images.ts` file inside of the `thecatapi` folder.
+Create the `triggers/search-cat-images/index.ts` file inside of the `thecatapi` folder.
 
 ```typescript
 import defineTrigger from '../../../../helpers/define-trigger';
@@ -82,7 +82,7 @@ Let's briefly explain what we defined here.
 - `description`: The description of the trigger.
 - `run`: The function that is executed when the trigger is triggered.
 
-## Implement trigger
+## Implement the trigger
 
 :::danger
 
@@ -93,7 +93,8 @@ Let's briefly explain what we defined here.
 
 Implement the `run` function by adding highlighted lines.
 
-```typescript{6-29}
+```typescript{1,7-30}
+import { IJSONObject } from '@automatisch/types';
 import defineTrigger from '../../../../helpers/define-trigger';
 
 export default defineTrigger({
@@ -103,7 +104,7 @@ export default defineTrigger({
     let response;
 
     const headers = {
-      'x-api-key': $.auth.data.apiKey,
+      'x-api-key': $.auth.data.apiKey as string,
     };
 
     do {
@@ -114,7 +115,7 @@ export default defineTrigger({
         const dataItem = {
           raw: image,
           meta: {
-            internalId: image.id,
+            internalId: image.id as string
           },
         };
 
@@ -152,6 +153,6 @@ Let's say the trigger started to execute. It fetched the first five pages of dat
 
 :::
 
-### Test the trigger
+## Test the trigger
 
 Go to the flows page of Automatisch and create a new flow. Choose `The cat API` app and the `Search cat images` trigger and click `Test & Continue` button. If you a see JSON response in the user interface, it means that the trigger is working properly.