feat: add feedback carousel and feedbacks for #20

Author: sangeeth.s

.editorconfig

@@ -0,0 +1,4 @@
+[*]
+indent_style = space
+tab_width = 2
+insert_final_newline = true

.vuepress/components/EventTalk.vue

@@ -5,6 +5,9 @@
       <iframe :src="recording" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
     </div>
     <div v-if="description" v-html="description"></div>
+    <ItemRow v-if="feedbacks">
+      <FeedbackGallery :feedbacks="feedbacks" />
+    </ItemRow>
     <EventSpeaker :speaker="speaker" :bio="bio" />
     <ItemRow v-if="deck">
       <Icon name="deck" slot="icon" />
@@ -19,7 +22,7 @@
 
 <script>
 export default {
-  props: ['title', 'description', 'speaker', 'bio', 'deck', 'issue', 'recording'],
+  props: ['title', 'description', 'speaker', 'bio', 'deck', 'issue', 'recording', 'feedbacks'],
   filters: {
     filename (value) {
       return value.split('/').pop()

.vuepress/components/FeedbackGallery.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="feedbacks-wrapper">
+    <p>
+      <slot>
+        Here are some feedbacks from our attendees for this talk:
+      </slot>
+    </p>
+    <Carousel
+      class="feedbacks-carousel"
+      :perPage="1"
+      :autoplay="true"
+      :loop="true"
+    >
+      <Slide v-for="(feedback, i) in feedbacks" :key="i" class="slide">
+        <div class="slide">
+          <blockquote class="quote">{{ feedback }}</blockquote>
+        </div>
+      </Slide>
+    </Carousel>
+  </div>
+</template>
+
+<script>
+import { Carousel, Slide } from "../../node_modules/vue-carousel/src/index.js";
+
+export default {
+  props: {
+    feedbacks: Array
+  },
+  components: { Carousel, Slide }
+};
+</script>
+
+<style scoped>
+/* Fixes for the vue-carousel */
+.feedbacks-wrapper >>> .VueCarousel-dot-container {
+  margin-top: 0 !important;
+}
+
+.feedbacks-wrapper >>> .VueCarousel-dot {
+  margin-top: 0 !important;
+}
+
+.feedbacks-wrapper {
+  margin: 1rem 0;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+.feedbacks-carousel {
+  width: 100%;
+}
+
+.slide {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+.quote {
+  border-left: none;
+  padding: 0;
+  text-align: center;
+  color: #3eaf7c;
+  font-style: italic;
+  line-height: 1.3;
+  font-size: 2rem;
+  width: 100%;
+  margin: 0;
+}
+
+.quote::before {
+  content: "\201C";
+}
+
+.quote::after {
+  content: "\201D";
+}
+</style>

20-lets-talk-about-test/README.md

@@ -28,12 +28,20 @@ agenda:
       <br>I'll also talk about
       <br>1. Why is it necessary. 
       <br>2. What type of bugs can be caught by Visual Testing.
+    feedbacks:
+      - "I liked the use cypress for visual testing. Would like to implement in one of our application."
+      - "I learned that there's a thing called Visual Testing and that's a great way to test visual layouts easily."
+      - "It was something useful for my day to day work. Thanks ✨"
   - title: Revisiting Tests and How to Sneak Test Driven Development Into Your Work
     type: talk
     speaker: Chandrashekhar
     bio: I'm a frontend developer and a Javascript fan. Currently write Vue and vanilla JS at work, and play with React hooks at night. Evenings are for walks and coffees at Udupis of Bangalore.
     recording: https://www.youtube.com/embed/_vYqSq-PC3g
     description: People have sung paeans about TDD. Here's one more - but this time, we'll look at the "gotchas", useful workflows/patterns and a way to sneak TDD into your work when your team leaves no time for it in the planning. All in the context of Vue, Jest and the holy ghost of unit tests.
+    feedbacks:
+      - "I liked the concept of using test driven development in our product. It may help developer a lot to get better code then earlier."
+      - "Loved the idea behind why to test. Testing that drives code discipline."
+      - "Informed and well explained with examples."
 sponsors:
   - type: venue
     sponsor: Hasura <@HasuraHQ>