perf: cleaning code

Author: Flowko

nuxt.config.js

@@ -22,6 +22,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    { src: "~/plugins/axios.js" },
+    { src: "~/plugins/utils.js" },
     { src: "~/plugins/underscore.js", ssr: false },
     { src: "~/plugins/code-editor.js", ssr: false, mode: "client" },
   ],
@@ -30,7 +32,18 @@ export default {
   components: true,
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  buildModules: ["@nuxtjs/tailwindcss", "@nuxtjs/google-fonts", "@nuxtjs/svg"],
+  buildModules: [
+    "@nuxtjs/tailwindcss",
+    "@nuxtjs/google-fonts",
+    "@nuxtjs/svg",
+    [
+      "nuxt-tailvue",
+      {
+        all: true,
+        toast: { defaults: { containerClasses: ["top-auto", "bottom-0"] } },
+      },
+    ],
+  ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [

package.json

@@ -14,22 +14,22 @@
     "@nuxtjs/google-fonts": "^2.0.0",
     "@nuxtjs/moment": "^1.6.1",
     "@nuxtjs/tailwindcss": "^4.2.1",
+    "@zaengle/error-handler": "^1.0.2",
     "body-parser": "^1.20.0",
     "core-js": "^3.19.3",
-    "cors": "^2.8.5",
     "date-fns": "^2.28.0",
     "dotenv": "^16.0.0",
     "express": "^4.17.3",
     "file-url": "^4.0.0",
     "filenamify": "^5.1.0",
     "filenamify-url": "^3.0.0",
-    "got": "^12.1.0",
     "jszip": "^3.10.0",
     "lodash.template": "^4.5.0",
     "make-dir": "^3.1.0",
     "node-fetch": "^3.2.6",
     "nuxt": "^2.15.8",
     "nuxt-buefy": "^0.4.13",
+    "nuxt-tailvue": "^1.0.95",
     "p-map": "^5.5.0",
     "puppeteer": "^14.4.1",
     "sass": "^1.49.7",

pages/index.vue

@@ -463,7 +463,7 @@
 
       <div class="flex items-center justify-end m-4 space-x-4">
         <b-button
-          v-if="result.url"
+          v-if="result && result.url"
           icon-left="download-outline"
           @click="download"
           type="is-success is-light"
@@ -491,7 +491,7 @@
 
       <div class="h-full overflow-y-auto box bg-blueGray-900">
         <p class="title is-5">Website Screenshot</p>
-        <div v-if="!result.url" class="mb-3">
+        <div v-if="result == null" class="mb-3">
           <p class="title is-4">Capture a website screenshot online</p>
           <p class="mt-4 text-white subtitle is-6">
             Generate a full web-page screenshot with our service Site-Shot: Web
@@ -504,7 +504,7 @@
         <b-progress v-if="loading" type="is-info"></b-progress>
 
         <embed
-          v-if="result.url"
+          v-if="result && result.url"
           :src="result.url"
           width="100%"
           style="height: 50vh"
@@ -569,10 +569,7 @@ export default {
       },
       imageFormats: ["png", "jpeg", "webp"],
       pdfFile: null,
-      result: {
-        url: null,
-        filename: null,
-      },
+      result: null,
       loading: false,
       resolutions: [
         {
@@ -687,16 +684,9 @@ export default {
   mounted() {},
   methods: {
     async generateScreenshot() {
-      if (
-        this.selectedType == "multiple-imgs" ||
-        !this.loading ||
-        this.params.url !== null
-      ) {
+      if (!this.loading) {
         this.loading = true;
-        this.result = {
-          url: null,
-          filename: null,
-        };
+        this.result = null;
         this.pdfFile = null;
         const selectedType = this.selectedType;
         let mimeType = "";
@@ -708,40 +698,32 @@ export default {
         }
 
         await this.$axios
-          .post(
-            "/api/screenshot",
-            {
-              ...this.params,
-              scale: this.params.scale / 100,
-              size: [this.params.size],
-              type: selectedType,
-              mimeType,
-            },
-            {
-              responseType: "blob",
-            }
-          )
-          .then((response) => {
-            let blob = new window.Blob([response.data], {
+          .$post("/api/screenshot", {
+            ...this.params,
+            scale: this.params.scale / 100,
+            size: [this.params.size],
+            type: selectedType,
+            mimeType,
+          })
+          .then(({ base64, filename, success }) => {
+            const blob = new window.Blob([this.convertBase64ToBlob(base64)], {
               type: mimeType,
             });
 
-            let headerLine = response.headers["content-disposition"];
-            let startFileNameIndex = headerLine.indexOf('"') + 1;
-            let endFileNameIndex = headerLine.lastIndexOf('"');
-            let filename = headerLine.substring(
-              startFileNameIndex,
-              endFileNameIndex
-            );
-
             if (selectedType == "multiple-imgs") {
-              const link = document.createElement("a");
-              link.href = window.URL.createObjectURL(blob);
-              link.download = filename;
-              link.click();
+              this.download({
+                url: window.URL.createObjectURL(blob),
+                filename: filename,
+              });
             } else {
-              this.result.url = window.URL.createObjectURL(blob);
-              this.result.filename = filename;
+              this.result = {
+                url: window.URL.createObjectURL(blob),
+                filename,
+              };
+            }
+
+            if (success) {
+              this.$success("Screenshot generated successfully");
             }
 
             this.loading = false;
@@ -752,11 +734,11 @@ export default {
           });
       }
     },
-    download() {
-      if (this.result) {
+    download(result) {
+      if (result || this.result) {
         const link = document.createElement("a");
-        link.href = this.result.url;
-        link.download = this.result.filename;
+        link.href = result.url || this.result.url;
+        link.download = result.filename || this.result.filename;
         link.click();
       }
     },
@@ -770,6 +752,27 @@ export default {
         urls.splice(index, 1);
       }
     },
+    convertBase64ToBlob(base64Image) {
+      // Split into two parts
+      const parts = base64Image.split(";base64,");
+
+      // Hold the content type
+      const imageType = parts[0].split(":")[1];
+
+      // Decode Base64 string
+      const decodedData = window.atob(parts[1]);
+
+      // Create UNIT8ARRAY of size same as row data length
+      const uInt8Array = new Uint8Array(decodedData.length);
+
+      // Insert all character code into uInt8Array
+      for (let i = 0; i < decodedData.length; ++i) {
+        uInt8Array[i] = decodedData.charCodeAt(i);
+      }
+
+      // Return BLOB image after conversion
+      return new Blob([uInt8Array], { type: imageType });
+    },
   },
   watch: {
     "params.size"() {
@@ -784,6 +787,7 @@ export default {
     },
     selectedType() {
       this.params.url = null;
+      this.result = null;
       this.params.urls = [
         {
           url: null,

plugins/axios.js

@@ -0,0 +1,10 @@
+import ErrorHandler from "@zaengle/error-handler";
+
+export default ({ $axios, redirect, app }, inject) => {
+  $axios.onError((error) => {
+    const errorResponse = new ErrorHandler().setAll(error).parse();
+    app.$error(
+      error.response ? error.response.data.error : errorResponse.message
+    );
+  });
+};

plugins/utils.js

@@ -0,0 +1,28 @@
+export default ({ app }, inject) => {
+  inject("error", (message) => {
+    app.$toast.show({
+      type: "danger",
+      message,
+      timeout: 5,
+      progress: true,
+      classToast: "bg-red-600",
+      classTitle: "text-red-100",
+      classMessage: "text-red-200 font-serif",
+      classClose: "text-red-300",
+      classTimeout: "bg-red-800",
+    });
+  });
+  inject("success", (message) => {
+    app.$toast.show({
+      type: "success",
+      message,
+      timeout: 5,
+      progress: true,
+      classToast: "bg-green-600",
+      classTitle: "text-green-100",
+      classMessage: "text-green-200 font-serif",
+      classClose: "text-green-300",
+      classTimeout: "bg-green-800",
+    });
+  });
+};

server-middleware/utils.js

@@ -0,0 +1,79 @@
+const fs = require("fs");
+const dateFns = require("date-fns");
+const path = require("path");
+
+import { parse as parseUrl } from "url";
+import template from "lodash.template";
+import filenamifyUrl from "filenamify-url";
+import filenamify from "filenamify";
+import makeDir from "make-dir";
+
+export function generateFilename(options, url) {
+  let hash = parseUrl(url || options.url).hash ?? "";
+  if (/^#!?\/?$/.test(hash)) {
+    hash = "";
+  }
+
+  const now = Date.now();
+  const basename = fs.existsSync(url || options.url)
+    ? path.basename(url || options.url)
+    : url || options.url;
+
+  const filenameTemplate = template(`${options.filename}.${options.format}`);
+  let filename = filenameTemplate({
+    crop: options.fullPage ? "" : "-cropped",
+    date: dateFns.format(now, "yyyy-MM-dd"),
+    time: dateFns.format(now, "HH-mm-ss"),
+    size: options.size,
+    width: options.width,
+    height: options.height,
+    url: `${filenamifyUrl(basename)}${filenamify(hash)}`,
+  });
+
+  const filepath = path.join(__dirname + "/../screenshots", filename);
+
+  return {
+    filepath,
+    filename,
+  };
+}
+
+var CustomBufferBuilder = function () {
+  this.parts = [];
+  this.totalLength = 0;
+};
+
+CustomBufferBuilder.prototype.append = function (part) {
+  var tempBuffer = Buffer.from(part);
+  this.parts.push(tempBuffer);
+  this.totalLength += tempBuffer.length;
+  this.buffer = undefined;
+};
+
+CustomBufferBuilder.prototype.getBuffer = function () {
+  if (!this.buffer) {
+    this.buffer = Buffer.concat(this.parts, this.totalLength);
+  }
+  return this.buffer;
+};
+
+export default CustomBufferBuilder;
+
+export async function saveFile(save, filename, buffer, mimeType) {
+  const filepath = path.join(__dirname + "/../screenshots", filename);
+  if (save) {
+    await makeDir(__dirname + "/../screenshots");
+    await fs.writeFileSync(filepath, buffer);
+  }
+
+  const base64 = buffer.toString("base64");
+  const base64Image = `data:${mimeType};base64,${base64}`;
+
+  return {
+    filename,
+    filepath,
+    mimeType,
+    base64: base64Image,
+    success: true,
+  };
+}