Merge pull request #29 from Flowko/adding-folder-structure-for-multip…

…le-images-generation

⛏️ added same URL original structure option top multiple urls option

pages/index.vue

@@ -60,6 +60,28 @@
             class="border !border-red-500"
           ></b-button>
         </div>
+        <b-field>
+          <b-checkbox type="is-info" v-model="params.keepUrlStructure">
+            Use Same URL Original Structure
+            <b-tooltip type="is-success is-dark" position="is-bottom">
+              <template v-slot:content>
+                <div class="text-base">
+                  <b>Unchecked:</b> Saves screenshots of all pages in the same
+                  parent folder.
+                  <br />
+                  <b>Checked:</b> Saves screenshots of all pages in their own
+                  folders.
+                </div>
+              </template>
+              <b-icon
+                type="is-success"
+                icon="information-outline"
+                size="is-small"
+              >
+              </b-icon>
+            </b-tooltip>
+          </b-checkbox>
+        </b-field>
       </div>
 
       <div class="s-grid">
@@ -463,7 +485,6 @@
           @click="generateScreenshot"
           type="is-info"
           class="border !border-primary-100"
-          :disabled="loading || !params.url"
           >Capture Screenshot</b-button
         >
       </div>
@@ -544,6 +565,7 @@ export default {
             url: null,
           },
         ],
+        keepUrlStructure: false,
       },
       imageFormats: ["png", "jpeg", "webp"],
       pdfFile: null,
@@ -659,12 +681,17 @@ export default {
         "Letter",
         "Legal",
       ],
+      disableBtn: true,
     };
   },
   mounted() {},
   methods: {
     async generateScreenshot() {
-      if (!this.loading && this.params.url !== null) {
+      if (
+        this.selectedType == "multiple-imgs" ||
+        !this.loading ||
+        this.params.url !== null
+      ) {
         this.loading = true;
         this.result = {
           url: null,
@@ -755,6 +782,14 @@ export default {
     "params.height"() {
       this.params.size = `${this.params.width}x${this.params.height}`;
     },
+    selectedType() {
+      this.params.url = null;
+      this.params.urls = [
+        {
+          url: null,
+        },
+      ];
+    },
   },
 };
 </script>

server-middleware/website-shot.js

@@ -80,7 +80,11 @@ CustomBufferBuilder.prototype.getBuffer = function () {
 app.post("/screenshot", async (req, res) => {
   const params = req.body;
 
-  if (params.url) {
+  if (
+    params &&
+    ((params.type == "multiple-imgs" && params.urls[0].url != null) ||
+      params.url != null)
+  ) {
     const styles = [];
     const scripts = [];
 
@@ -153,15 +157,19 @@ app.post("/screenshot", async (req, res) => {
         // const { requestUrl } = await got.head(site);
         // return requestUrl;
 
-        console.log(filename);
-
         await captureWebsite
           .buffer(site.url, options)
           .then(async (buffer) => {
             var customBufferBuilder = new CustomBufferBuilder();
             customBufferBuilder.append(buffer);
             var bufferContent = customBufferBuilder.getBuffer();
-            await zip.file(filename, bufferContent, { binary: true });
+            var newFilename = !params.keepUrlStructure
+              ? filename
+              : filename.replaceAll("!", "/");
+            await zip.file(newFilename, bufferContent, {
+              binary: true,
+              createFolders: true,
+            });
           })
           .catch((error) => {
             console.log(error);