fix(website): fix the reponsive images placeholder values

juliomrqz · Jun 2, 2019 · d38eb7f · d38eb7f
1 parent 33df70c
commit d38eb7f
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 172 deletions.
diff --git a/packages/website/components/ImageResponsive.vue b/packages/website/components/ImageResponsive.vue
@@ -2,15 +2,15 @@
   <span
     v-lazy-container="{ selector: 'img' }"
     class="image-placeholder"
-    :class="{ fluid: fluid, 'rounded-full': rounded }"
+    :class="{ fluid: fluid }"
   >
     <img
-      :src="imagePlaceholder"
-      :data-src="imageSource"
-      :data-loading="imagePlaceholder"
+      :src="placeholder"
+      :data-src="source"
+      :data-loading="placeholder"
       :width="`${width}`"
       :height="`${height}`"
-      :class="finalClass"
+      :class="classes"
       :alt="alt"
     >
   </span>
@@ -23,6 +23,10 @@ export default {
       type: String,
       required: true
     },
+    placeholder: {
+      type: String,
+      required: true
+    },
     alt: {
       type: String,
       required: true
@@ -42,28 +46,6 @@ export default {
     fluid: {
       type: Boolean,
       default: false
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    imageSource() {
-      return require(`~/assets/img/${this.source}`)
-    },
-    imagePlaceholder() {
-      const { placeholder } = require(`~/assets/img/${this.source}?resize&placeholder=true`)
-      return placeholder
-    },
-    finalClass() {
-      let theClass = this.classes
-
-      if (this.rounded) {
-        theClass += ' rounded-full'
-      }
-
-      return theClass
     }
   }
 }

diff --git a/packages/website/components/blog/AuthorCard.vue b/packages/website/components/blog/AuthorCard.vue
@@ -5,12 +5,13 @@
       class="flex flex-wrap items-center text-grey-darker"
     >
       <ImageResponsive
-        :source="`avatars/${post.author.username}.jpg`"
+        :source="require(`~/assets/img/avatars/${post.author.username}.jpg`)"
+        :placeholder="require(`~/assets/img/avatars/${post.author.username}.jpg?lqip`)"
         :alt="post.author.name"
-        :rounded="true"
         classes="w-10 h-10"
         :width="40"
         :height="40"
+        class="rounded-full"
       />
 
       <span class="ml-4 font-semibold relative z-10">
@@ -30,12 +31,13 @@
       class="flex flex-wrap flex-col items-center justify-center text-grey-darker sm:justify-start sm:flex-row"
     >
       <ImageResponsive
-        :source="`avatars/${post.author.username}.jpg`"
+        :source="require(`~/assets/img/avatars/${post.author.username}.jpg`)"
+        :placeholder="require(`~/assets/img/avatars/${post.author.username}.jpg?lqip`)"
         :alt="post.author.name"
-        :rounded="true"
         classes="w-12 h-12"
         :width="40"
         :height="40"
+        class="rounded-full"
       />
 
       <div class="flex flex-col mx-4 mt-2 sm:mt-0">

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -18,7 +18,6 @@
     "svg": "vsvg -s ./assets/icons -t ./components/icons --es6"
   },
   "dependencies": {
-    "@bazzite/nuxt-netlify": "^0.1.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.18",
     "@nuxtjs/axios": "^5.5.3",
     "@nuxtjs/google-analytics": "^2.2.0",
@@ -40,6 +39,7 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@bazzite/nuxt-netlify": "^0.1.0",
     "@bazzite/nuxt-optimized-images": "^0.2.1",
     "@wordpress/wordcount": "^2.3.0",
     "babel-eslint": "^10.0.1",
@@ -52,15 +52,14 @@
     "imagemin-svgo": "^7.0.0",
     "loader-utils": "^1.2.3",
     "lodash.pick": "^4.4.0",
+    "lqip-loader": "^2.2.0",
     "markdown-it": "^8.4.2",
     "markdown-it-attrs": "^2.4.1",
     "markdown-it-github-headings": "^1.1.1",
     "markdown-it-inline-comments": "^1.0.1",
     "markdown-it-link-attributes": "^2.1.0",
     "markdown-it-prism": "^2.0.2",
-    "prettier": "1.17.1",
-    "responsive-loader": "^1.2.0",
-    "sharp": "^0.22.0"
+    "prettier": "1.17.1"
   },
   "engines": {
     "node": ">=8.10"