New Components - screenshot_fyi (#15111)

* screenshot_fyi init

* new component

* pnpm-lock.yaml

Author: michelle0927

components/screenshot_fyi/actions/create-screenshot/create-screenshot.mjs

@@ -0,0 +1,74 @@
+import screenshot_fyi from "../../screenshot_fyi.app.mjs";
+
+export default {
+  key: "screenshot_fyi-create-screenshot",
+  name: "Create Screenshot",
+  description: "Takes a screenshot of a webpage using Screenshot.fyi. [See the documentation](https://www.screenshot.fyi/api-docs)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    screenshot_fyi,
+    url: {
+      type: "string",
+      label: "URL",
+      description: "The URL of the webpage to capture",
+    },
+    width: {
+      type: "integer",
+      label: "Width",
+      description: "Width of the viewport in pixels. Default: `1440`",
+      optional: true,
+    },
+    height: {
+      type: "integer",
+      label: "Height",
+      description: "Height of the viewport in pixels. Default: `900`",
+      optional: true,
+    },
+    fullPage: {
+      type: "boolean",
+      label: "Full Page",
+      description: "Capture the full scrollable page. Default: `false`",
+      optional: true,
+    },
+    format: {
+      type: "string",
+      label: "Format",
+      description: "The format of the screenshot. Default: `jpg`",
+      options: [
+        "png",
+        "jpg",
+        "jpeg",
+      ],
+      optional: true,
+    },
+    disableCookieBanners: {
+      type: "boolean",
+      label: "Disable Cookie Banners",
+      description: "Attempt to remove cookie consent banners. Default: `true`",
+      optional: true,
+    },
+    darkMode: {
+      type: "boolean",
+      label: "Dark Mode",
+      description: "Enable dark mode when taking the screenshot. Default: `false`",
+      optional: true,
+    },
+  },
+  async run({ $ }) {
+    const response = await this.screenshot_fyi.takeScreenshot({
+      $,
+      params: {
+        url: this.url,
+        width: this.width,
+        height: this.height,
+        fullPage: this.fullPage,
+        format: this.format,
+        disableCookieBanners: this.disableCookieBanners,
+        darkMode: this.darkMode,
+      },
+    });
+    $.export("$summary", `Screenshot taken for ${this.url}`);
+    return response;
+  },
+};

components/screenshot_fyi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/screenshot_fyi",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Pipedream screenshot.fyi Components",
   "main": "screenshot_fyi.app.mjs",
   "keywords": [
@@ -11,5 +11,8 @@
   "author": "Pipedream <[email protected]> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.0.3"
   }
-}
+}

components/screenshot_fyi/screenshot_fyi.app.mjs

@@ -1,11 +1,33 @@
+import { axios } from "@pipedream/platform";
+
 export default {
   type: "app",
   app: "screenshot_fyi",
   propDefinitions: {},
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    _baseUrl() {
+      return "https://screenshot.fyi/api";
+    },
+    _makeRequest({
+      $ = this,
+      path,
+      params,
+      ...otherOpts
+    }) {
+      return axios($, {
+        url: `${this._baseUrl()}${path}`,
+        params: {
+          ...params,
+          accessKey: this.$auth.access_key,
+        },
+        ...otherOpts,
+      });
+    },
+    takeScreenshot(opts = {}) {
+      return this._makeRequest({
+        path: "/take",
+        ...opts,
+      });
     },
   },
 };