Merge pull request #61 from ArtuGit/dev

Dev

components/UI/Footer.vue

@@ -17,14 +17,15 @@
           Enjoy your word cards!
         </v-col>
         <v-col cols="12" lg="4" md="6" class="f-section pa-2">
-          Developed by <a href="https://github.com/ArtuGit">Artu</a>
+          Developed by
+          <a href="https://github.com/ArtuGit" rel="noopener">Artu</a>
         </v-col>
         <v-col cols="12" lg="4" md="12" class="f-section pa-2">
           <div>Powered by</div>
           <div class="logo">
-            <a href="https://pixabay.com/" target="_blank"
-              ><img src="@/static/images/logos/Pixabay.svg"
-            /></a>
+            <a href="https://pixabay.com/" rel="noopener" target="_blank">
+              <img src="@/static/images/logos/Pixabay.svg" alt="" />
+            </a>
           </div>
         </v-col>
       </v-row>

components/UI/ImageUpload.vue

@@ -1,6 +1,6 @@
 <!--
   - Developed by Artu, https://github.com/ArtuGit
-  - Copyleft 2020-2021.
+  -  Copyleft, 2020-2021.
   -->
 <template>
   <div class="mt-4">
@@ -24,6 +24,8 @@
             label="Image file"
             type="file"
             accept="image/*"
+            :hint="hint"
+            :persistent-hint="hint"
             @change="processImage"
           ></v-file-input>
         </v-col>
@@ -52,6 +54,15 @@ export default {
       imageDialogObj: null,
     }
   },
+  computed: {
+    hint() {
+      if (this.imageDialogObj) {
+        return ''
+      } else {
+        return 'Leave blank to get an image automatically'
+      }
+    },
+  },
   watch: {
     async imageExisted(newVal, oldVal) {
       this.imageDialogURLTemp = newVal

layouts/default.vue

@@ -33,7 +33,7 @@
     </v-navigation-drawer>
     <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn icon @click.stop="miniVariant = !miniVariant">
+      <v-btn aria-label="Mini" icon @click.stop="miniVariant = !miniVariant">
         <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
       </v-btn>
       <h1>

package.json

@@ -28,6 +28,7 @@
     "core-js": "^3.8.3",
     "express": "^4.17.1",
     "firebase": "^8.2.7",
+    "image-blob-reduce": "^2.2.2",
     "js-cookie": "^2.2.1",
     "lodash.orderby": "^4.6.0",
     "nuxt": "^2.14.12",

plugins/api-helpers.js

@@ -4,7 +4,10 @@
  */
 
 import { authenticate } from 'pixabay-api'
+
+import imageBlobReduce from 'image-blob-reduce'
 const { searchImages } = authenticate(process.env.pixabayKey)
+const reduce = imageBlobReduce()
 
 const fakeRequestPromise = (delay = 1000) => {
   return new Promise((resolve, reject) => {
@@ -119,22 +122,29 @@ function getStorageDirName() {
   else return 'demo'
 }
 
-// ToDo: Resize an uploaded image
+// ToDo: Improve readability and error handling
 function uploadURLToStorage(url) {
   const that = this
   const dirName = getStorageDirName.call(this)
   const fileName = url.split('/').slice(-1)[0]
   return new Promise(function (resolve, reject) {
     getFileBlob(url, (blob) => {
       try {
-        const path = `${dirName}/${fileName}`
-        const storageRef = that.$fire.storage.ref().child(path)
-        storageRef.put(blob).then(function (snapshot) {
-          storageRef.getDownloadURL().then(function (url) {
-            const res = { imagePath: path, url }
-            resolve(res)
+        reduce
+          .toBlob(blob, { max: 400 })
+          .then((blob) => {
+            return blob
+          })
+          .then((blobResized) => {
+            const path = `${dirName}/${fileName}`
+            const storageRef = that.$fire.storage.ref().child(path)
+            storageRef.put(blobResized).then(function (snapshot) {
+              storageRef.getDownloadURL().then(function (url) {
+                const res = { imagePath: path, url }
+                resolve(res)
+              })
+            })
           })
-        })
       } catch (e) {
         alert(e.message)
       }