feat(list): infinite scroll (#1363)

* feat(list): infinite scroll

* fix(list): inital reset value true

* test: list header

* fix(meta): only set charset once and make it first

* test(list): methods

* test(card): call cloudinaryify

* test(item-component): add snapshot

* fix(list): fetch on server

The virtual list component can't be stringified on the server.

* fix(list): use ul for wrap-tag

* fix(list-item): add view prop

components/List/Card.vue

@@ -8,14 +8,23 @@
     elevation="4"
     class="flex d-flex flex-column"
   >
+    <div v-show="layout === 'columns'">
+      <v-img
+        :src="source({ image: imageUrl, height: 256, width: 'auto' }).src"
+        :srcset="source({ image: imageUrl, height: 256, width: 'auto' }).srcset"
+        itemprop="image"
+        height="256"
+        max-height="256"
+        :alt="name"
+      />
+    </div>
     <v-container>
       <v-row class="align-center justify-center" no-gutters>
-        <v-col cols="auto">
+        <v-col v-show="layout !== 'columns'" cols="auto">
           <v-avatar class="ma-sm-3" size="128" tile>
             <v-img
-              v-if="imageData"
-              :src="imageData.src"
-              :srcset="imageData.srcset"
+              :src="source({ image: imageUrl }).src"
+              :srcset="source({ image: imageUrl }).srcset"
               height="128"
               width="128"
               itemprop="image"
@@ -51,23 +60,7 @@ export default {
     path() {
       return `/${this.type.toLowerCase()}s/${this.slug}`;
     },
-    imageData() {
-      function cloudinaryify(image) {
-        if (!image.startsWith('https://res.cloudinary.com')) {
-          return {
-            src: `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_128,h_128,c_fill,f_auto,q_auto/${image}`,
-            srcset: [
-              `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_128,h_128,c_fill,f_auto,q_auto/${image} 1x`,
-              `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_192,h_192,c_fill,f_auto,q_auto/${image} 1.5x`,
-              `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_256,h_256,c_fill,f_auto,q_auto/${image} 2x`,
-              `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_320,h_320,c_fill,f_auto,q_auto/${image} 2.5x`,
-              `https://res.cloudinary.com/pocketpasta/image/fetch/fl_progressive/w_384,h_384,c_fill,f_auto,q_auto/${image} 3x`,
-            ].join(','),
-          };
-        } else {
-          return image;
-        }
-      }
+    imageUrl() {
       const image = Array.isArray(this.image) ? this.image[0] : this.image;
       if (image) {
         if (
@@ -76,9 +69,9 @@ export default {
           !Array.isArray(image)
         ) {
           const { url } = image;
-          return cloudinaryify(url);
+          return url;
         } else {
-          return cloudinaryify(image);
+          return image;
         }
       } else {
         return null;
@@ -89,6 +82,35 @@ export default {
     truncate(text = '', stop = 150, clamp = '...') {
       return `${text.slice(0, stop)}${stop < text.length ? clamp : ''}`;
     },
+    cloudinaryify({ image, width = 128, height = 128 }) {
+      if (image) {
+        if (!image.startsWith('https://res.cloudinary.com')) {
+          return `https://res.cloudinary.com/pocketpasta/image/fetch/w_${width},h_${height},c_fill,f_auto,q_auto/${image}`;
+        } else {
+          return image;
+        }
+      } else {
+        return '';
+      }
+    },
+    source({ image, width = 128, height = 128 }) {
+      const vm = this;
+      const dprs = [1, 1.5, 2, 2.5, 3];
+      return {
+        src: vm.cloudinaryify({ image, width, height }),
+        srcset: dprs
+          .map((dpr) => {
+            const imageUrl = vm.cloudinaryify({
+              image,
+              width: Number(width) ? Number(width) * dpr : width,
+              height: Number(height) ? Number(height) * dpr : height,
+            });
+            return imageUrl ? `${imageUrl} ${dpr}x` : '';
+          })
+          .filter(Boolean)
+          .join(', '),
+      };
+    },
   },
 };
 </script>

components/List/ItemComponent.vue

@@ -0,0 +1,24 @@
+<template>
+  <card v-bind="source" :type="source['@type']" :layout="view" />
+</template>
+
+<script>
+import Card from '@/components/List/Card.vue';
+export default {
+  components: { Card },
+  props: {
+    index: {
+      // index of current item
+      type: Number,
+    },
+    view: { type: String },
+    source: {
+      // here is: {uid: 'unique_1', text: 'abc'}
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>