feat(youtube): add youtube integration

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

@@ -411,6 +411,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/wordpress/connection' },
           ],
         },
+        {
+          text: 'Youtube',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/youtube/connection' }],
+        },
       ],
       '/': [
         {

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

@@ -0,0 +1,28 @@
+# Youtube
+
+:::info
+This page explains the steps you need to follow to set up the Youtube
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com) to create a project.
+2. Click on the project drop-down menu at the top of the page, and click on the **New Project** button.
+3. Enter a name for your project and click on the **Create** button.
+4. Go to [API Library](https://console.cloud.google.com/apis/library) in Google Cloud console.
+5. Search for **Youtube Data API** in the search bar and click on it.
+6. Click on the **Enable** button to enable the API.
+7. Repeat steps 5 and 6 for the **People API**.
+8. Go to [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) in Google Cloud console.
+9. Select **External** here for starting your app in testing mode at first. Click on the **Create** button.
+10. Fill **App Name**, **User Support Email**, and **Developer Contact Information**. Click on the **Save and Continue** button.
+11. Skip adding or removing scopes and click on the **Save and Continue** button.
+12. Click on the **Add Users** button and add a test email because only test users can access the app while publishing status is set to "Testing".
+13. Click on the **Save and Continue** button and now you have configured the consent screen.
+14. Go to [Credentials](https://console.cloud.google.com/apis/credentials) in Google Cloud console.
+15. Click on the **Create Credentials** button and select the **OAuth client ID** option.
+16. Select the application type as **Web application** and fill the **Name** field.
+17. Copy **OAuth Redirect URL** from Automatisch to **Authorized redirect URIs** field, and click on the **Create** button.
+18. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
+19. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
+20. Click **Submit** button on Automatisch.
+21. Congrats! Start using your new Youtube connection within the flows.

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 158 110" enable-background="new 0 0 158 110" xml:space="preserve" width="158"  height="110" >
+<path fill="#f00" d="M154.4,17.5c-1.8-6.7-7.1-12-13.9-13.8C128.2,0.5,79,0.5,79,0.5s-48.3-0.2-60.6,3 c-6.8,1.8-13.3,7.3-15.1,14C0,29.7,0.3,55,0.3,55S0,80.3,3.3,92.5c1.8,6.7,8.4,12.2,15.1,14c12.3,3.3,60.6,3,60.6,3s48.3,0.2,60.6-3 c6.8-1.8,13.1-7.3,14.9-14c3.3-12.1,3.3-37.5,3.3-37.5S157.7,29.7,154.4,17.5z"/>
+<polygon fill="#fff" points="63.9,79.2 103.2,55 63.9,30.8 "/>
+</svg>