Merge pull request #5 from abhi12299/filter-blogs

Filter blogs

components/PostTile.vue

@@ -11,12 +11,16 @@
         </nuxt-link>
         <div class="entry-meta row">
           <div v-for="mk in post.metaKeywords" :key="mk" class="meta-tags">
-            #{{ mk }}
+            <nuxt-link :to="`/blog?keywords=${mk}`"> #{{ mk }} </nuxt-link>
           </div>
         </div>
       </div>
       <div class="entry-media">
-        <img :src="post.headerImageURL" alt="blog post header img" />
+        <img
+          :data-src="post.headerImageURL"
+          class="lazyload"
+          alt="blog post header img"
+        />
       </div>
       <div class="entry-content-bottom">
         <nuxt-link :to="postURL">
@@ -226,10 +230,14 @@ export default {
 }
 
 .meta-tags {
-  text-decoration: underline;
+  /* text-decoration: underline; */
   display: inline;
 }
 
+.meta-tags a:hover {
+  text-decoration: underline;
+}
+
 .meta-tags:not(:last-child) {
   margin-right: 10px;
 }

components/PostTileV2.vue

@@ -2,7 +2,11 @@
   <article class="post-tile-v2" data-aos="fade-up">
     <div class="entry-media float-right">
       <nuxt-link :to="`/post/${post._id}`">
-        <img :src="post.headerImageURL" alt="post-image" />
+        <img
+          :data-src="post.headerImageURL"
+          class="lazyload"
+          alt="post-image"
+        />
       </nuxt-link>
     </div>
     <div class="entry-meta-content float-left">
@@ -12,7 +16,12 @@
         </h2>
       </nuxt-link>
       <span class="entry-meta">
-        {{ post.metaKeywords }} <span>- </span>
+        <span v-for="(mk, idx) in metaKeywords" :key="idx" class="mk-link">
+          <nuxt-link :to="`/blog?keywords=${mk}`">
+            #{{ mk }} {{ idx !== metaKeywords.length - 1 ? ', ' : '' }}
+          </nuxt-link>
+        </span>
+        <span>- </span>
         {{ postedDate }}
       </span>
       <div class="entry-content-bottom">
@@ -120,6 +129,10 @@ export default {
     },
     shareURL() {
       return `${baseURL}/post/${this.$props.post._id}`
+    },
+    metaKeywords() {
+      const { post } = this.$props
+      return post.metaKeywords.split(',').map((mk) => mk.trim())
     }
   },
   mounted() {
@@ -236,6 +249,14 @@ export default {
   font-size: 1.6em;
 }
 
+.mk-link {
+  font-weight: bold;
+}
+
+.mk-link a:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 1200px) {
   .post-tile-v2 .entry-content-bottom {
     bottom: 12px;

components/SingleBlogPost.vue

@@ -16,12 +16,16 @@
         <!-- Part 2 header image -->
         <div class="col-lg-12">
           <div class="entry-media">
-            <img :src="blogPost.headerImageURL" alt="header image" />
+            <img
+              :data-src="blogPost.headerImageURL"
+              class="lazyload"
+              alt="header image"
+            />
           </div>
         </div>
         <!-- Part 3 content -->
         <div class="col-lg-8 offset-lg-2 bottom-border">
-          <div v-html="blogPost.body" class="entry-content" />
+          <div v-html="blogPostbody" class="entry-content" />
           <div class="entry-share-div">
             <h5>Share :</h5>
             <ul class="social-text light list-inline">
@@ -80,7 +84,7 @@
                 :key="mk"
                 class="list-inline-item"
               >
-                <a>{{ mk }}</a>
+                <nuxt-link :to="`/blog?keywords=${mk}`">#{{ mk }}</nuxt-link>
               </li>
             </ul>
           </div>
@@ -99,6 +103,7 @@
 
 <script>
 import $ from 'jquery'
+import cheerio from 'cheerio'
 import utils from '../utils'
 import keys from '../constants/apiKeys'
 import baseURL from '~/constants/apiURL'
@@ -121,6 +126,23 @@ export default {
     }
   },
   computed: {
+    blogPostbody() {
+      const { body } = this.$props.blogPost
+      const container = cheerio.parseHTML(`<div>${body}</div>`)
+
+      cheerio(container[0])
+        .find('img')
+        .each(function(idx, img) {
+          const { src } = img.attribs
+          cheerio(img)
+            .removeAttr('src')
+            .attr('data-src', src)
+            .addClass('lazyload')
+        })
+      // set all images class to be lazyloaded
+      // remove all src attribs and replace with data-src
+      return cheerio(container).html()
+    },
     sharer() {
       const url = this.shareURL
       return utils.getShareURL(url)
@@ -398,6 +420,12 @@ export default {
 
 .single-post .taglist li {
   padding-right: 15px;
+  font-family: PoppinsBold;
+  font-weight: bold;
+}
+
+.single-post .taglist li a:hover {
+  text-decoration: underlineg;
 }
 
 .single-post .taglist li a,

components/dashboard/Media.vue

@@ -3,10 +3,10 @@
     <div class="card">
       <img
         v-if="media.type === 'image'"
-        :src="media.url"
+        :data-src="media.url"
         @click="handlePreview"
         alt="Card image cap"
-        class="card-img-top media-card-img"
+        class="lazyload card-img-top media-card-img"
       />
       <video
         v-else

nuxt.config.js

@@ -37,7 +37,8 @@ module.exports = {
   plugins: [
     { src: '~/plugins/toastr-init', mode: 'client' },
     { src: '~/plugins/aos', mode: 'client' },
-    { src: '~/plugins/removePreloader', mode: 'client' }
+    { src: '~/plugins/removePreloader', mode: 'client' },
+    { src: '~/plugins/lazysizes-client.js', mode: 'client' }
   ],
   /*
    ** Nuxt.js dev-modules
@@ -172,5 +173,6 @@ module.exports = {
         density: '4.0'
       }
     ]
-  }
+  },
+  telemetry: false
 }

package.json

@@ -37,6 +37,7 @@
     "jquery": "^3.4.1",
     "js-cookie": "^2.2.1",
     "jsonwebtoken": "^8.5.1",
+    "lazysizes": "^5.2.2",
     "mongoose": "^5.8.10",
     "multer": "^1.4.2",
     "nodemailer": "^6.4.2",

pages/blog.vue

@@ -24,7 +24,7 @@ export default {
     AllBlogs,
     Pagination
   },
-  watchQuery: ['page'],
+  watchQuery: ['page', 'keywords'],
   data() {
     return {
       metaDesc: `Check out these interesting blogs written by me, ranging from basics of javascript and other languages to advanced concepts.`,

pages/dashboard/media.vue

@@ -13,9 +13,9 @@
     >
       <div v-if="selectedMedia" class="delete-media-container">
         <img
-          :src="selectedMedia.url"
+          :data-src="selectedMedia.url"
           v-if="selectedMedia.type === 'image'"
-          class="delete-media-img"
+          class="lazyload delete-media-img"
         />
         <video
           v-else

plugins/lazysizes-client.js

@@ -0,0 +1 @@
+import 'lazysizes'

plugins/sw-cache.js

@@ -4,7 +4,7 @@ workbox.routing.registerRoute(
   new workbox.strategies.CacheFirst({
     cacheName: 'assets',
     plugins: [
-      new workbox.expiration.Plugin({
+      new workbox.expiration.ExpirationPlugin({
         maxEntries: 30,
         maxAgeSeconds: 24 * 60 * 60
       })
@@ -16,7 +16,7 @@ workbox.routing.registerRoute(
 workbox.routing.registerRoute(
   /\.(mp4|webm)/,
   new workbox.strategies.CacheFirst({
-    plugins: [new workbox.rangeRequests.Plugin()]
+    plugins: [new workbox.rangeRequests.RangeRequestsPlugin()]
   }),
   'GET'
 )

store/posts.js

@@ -11,7 +11,8 @@ export const state = () => ({
   data: null,
   count: 0,
   page: 1,
-  pathname: '' // this is used in 2 routes, hence for distinction
+  pathname: '', // this is used in 2 routes, hence for distinction
+  keywords: null
 })
 
 export const mutations = {
@@ -25,6 +26,7 @@ export const mutations = {
     state.count = payload.count
     state.page = payload.page
     state.pathname = payload.pathname
+    state.keywords = payload.keywords
   },
   [types.SET_POSTS_ERROR](state, payload) {
     state.loading = false
@@ -51,11 +53,16 @@ export const actions = {
     page = page ? (isNaN(parseInt(page)) ? 1 : parseInt(page)) : 1
     page = page > 0 ? page : 1
 
+    const isKeywordFilterSame =
+      (!state.keywords && !keywords) || // when both are nullish
+      state.keywords?.toString() === keywords?.toString()
+
     if (
       state.data &&
       state.page === page &&
       !state.error &&
-      state.pathname === '/blog'
+      state.pathname === '/blog' &&
+      isKeywordFilterSame
     ) {
       return
     }
@@ -105,7 +112,8 @@ export const actions = {
           data: resp.data,
           count: resp.count,
           page,
-          pathname: '/blog'
+          pathname: '/blog',
+          keywords
         })
       }
     } catch (error) {