✨ Add some testimonials

package.json

@@ -49,6 +49,7 @@
     "vue-faq-accordion": "^1.6.2",
     "vue-scrollTo": "^2.4.1",
     "vue-social-sharing": "^2.4.6",
+    "vue-tweet-embed": "^2.4.0",
     "vue-twentytwenty": "^0.6.2"
   },
   "devDependencies": {

src/App.vue

@@ -667,7 +667,7 @@
       </el-row>
     </div>
 
-    <Testimonials />
+    <Testimonials :theme="theme" />
 
     <HeroImage
       image="specimen"
@@ -717,7 +717,12 @@ export default {
       maxHeight: 'calc(100vw + 48px)',
       loading: Loader
     }),
-    Testimonials,
+    Testimonials: lazyLoadComponent({
+      componentFactory: () => import('@/components/Testimonials'),
+      background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
+      height: '50px',
+      loading: Loader
+    }),
     Faq,
     Credits
   },

src/components/Credits.vue

@@ -198,6 +198,21 @@
           >
             Markus Oberlehner</a>
           <br><br>
+          <em>Embed tweets in Vue apps</em>
+          <br>
+          <a
+            target="_blank"
+            href="https://github.com/tonickkozlov/vue-tweet-embed"
+          >
+            vue-tweet-embed</a>
+          by
+          <a
+            target="_blank"
+            href="https://github.com/tonickkozlov"
+          >
+            Anton Kozlov
+          </a>
+          <br><br>
           <em>The nice JS framework</em>
           <br>
           <a

src/components/Faq.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content alternate-bg">
+  <div class="content">
     <div
       id="faq"
       class="scroll-head"

src/components/Testimonials.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="content">
+    <div
+      id="testimonials"
+      class="scroll-head"
+    />
+    <el-row>
+      <el-col>
+        <h1 class="centre">
+          <em>What people are saying</em>
+        </h1>
+      </el-col>
+    </el-row>
+    <el-row
+      justify="center"
+      :gutter="20"
+    >
+      <el-col
+        v-for="testimonial in selectedTestimonials"
+        :key="testimonial + theme"
+        :xs="24"
+        :lg="6"
+      >
+        <Tweet
+          :id="testimonial"
+          :options="{ theme, conversation: 'none', align: 'center' }"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import { Tweet } from 'vue-tweet-embed'
+
+export default {
+  name: 'Testimonials',
+  components: { Tweet },
+  props: {
+    theme: {
+      type: String,
+      default: localStorage.getItem('theme') || 'dark'
+    }
+  },
+  data () {
+    return {
+      testimonials: [
+        '1144627524078571521',
+        '1142187688751071233',
+        '1395599234531946496',
+        '1149023631835635713',
+        '1359508666446094336',
+        '1438499728937795593',
+        '1249238897994780672',
+        '1430565916815855624',
+        '1340083805370134531',
+        '1159431742245261313',
+        '1188221984959676416',
+        '1201505985984110592',
+        '1188916442902626304',
+        '1344488694804201472',
+        '1178698424109195265'
+      ],
+      selectedTestimonials: []
+    }
+  },
+  mounted () {
+    // Shuffle array
+    const shuffled = this.testimonials.sort(() => 0.5 - Math.random())
+    // Get sub-array of first n elements after shuffled
+    this.selectedTestimonials = shuffled.slice(0, 4)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .twitter-tweet {
+    min-height: 1px;
+  }
+
+  ::v-deep .twitter-tweet iframe {
+    min-height: 1px !important;
+  }
+</style>

src/utils/lazy-load-component.js

@@ -15,7 +15,7 @@ export default function lazyLoadComponent ({
       resolveComponent = resolve
     }),
     loading: {
-      mounted () {
+      async mounted () {
         this.$el.style.backgroundColor = background || '#595959'
         this.$el.style.height = height || 0
         this.$el.style.maxHeight = maxHeight || 'auto'
@@ -25,7 +25,7 @@ export default function lazyLoadComponent ({
           componentFactory().then(resolveComponent)
           return
         }
-
+        await new Promise((resolve) => { setTimeout(() => { resolve() }, 1) })
         const observer = new IntersectionObserver((entries) => {
           // Use `intersectionRatio` because of Edge 15's
           // lack of support for `isIntersecting`.