Adds self and content for next workshop

- adds support for multiple speakers in a workshop event

Author: Sangeeth Sudheer

.vuepress/components/EventWorkshop.vue

@@ -1,7 +1,8 @@
 <template>
   <section class="talk">
     <h3 class="title">{{ title }}</h3>
-    <EventSpeaker :speaker="speaker" />
+    <div v-if="description" v-html="description"></div>
+    <EventSpeaker v-for="speaker in allSpeakers" :speaker="speaker" />
     <ItemRow v-if="deck">
       <Icon name="deck" slot="icon" />
       <a :href="deck" target="_blank">Speaker Deck</a>
@@ -19,11 +20,16 @@
 
 <script>
 export default {
-  props: ['title', 'speaker', 'deck', 'issue', 'source'],
+  props: ['title', 'speaker', 'speakers', 'description', 'deck', 'issue', 'source'],
   filters: {
     filename (value) {
       return value.split('/').pop()
     }
+  },
+  computed: {
+    allSpeakers() {
+      return this.speakers ? this.speakers : [this.speaker];
+    }
   }
 }
 </script>
@@ -34,10 +40,9 @@ export default {
 }
 .title::before {
   content: "Workshop:";
-  font-size: .5rem;
-  position: absolute;
-  top: -.6em;
-  opacity: .75;
+  padding-right: 10px;
+  display: inline-block;
+  text-decoration: underline;
 }
 </style>
 

23/README.md

@@ -13,7 +13,29 @@ photos:
 agenda:
   - title: Vue - Zero To One Workshop
     type: workshop
-    speaker: Nimit Bhargava <@NimitBhargava>
+    speakers: [ Nimit Bhargava <@NimitBhargava>, Sangeeth Sudheer <@sangeeth96> ]
+    description: |
+      <p>This workshop is aimed at web developers who are new to the Vue.js ecosystem. We will walk you through all the essential bits and pieces of Vue.js that's required to make a modern single page application.</p>
+      <p>If you're familiar with an existing framework such as React or Angular or have worked with JavaScript applications in general, you should be able to follow this workshop with ease. We would only need minimal tooling to run the project and examples (Node.js, Yarn, Visual Studio Code).</p>
+      <p>We will learn these concepts and apply them by building a <a href="https://hnpwa.com/">Hacker News SPA</a>. Since real-world applications often make HTTP calls, we will see how you can do the same within Vue.js and what are the best practices for structuring your Vue.js application. For a sneak peek of what we will be trying to build, check the Hacker News PWA built by Evan You, the creator of Vue.js: <a href="https://github.com/vuejs/vue-hackernews-2.0">https://github.com/vuejs/vue-hackernews-2.0</a></p>
+      <p>For those of you curious about the specific concepts we will be tackling, we've listed them below:</p>
+      <ul>
+        <li>Overview of Vue.js</li>
+        <li>Getting familiar with @vue/cli</li>
+        <li>Modern JavaScript concepts for Vue.js development</li>
+        <li>Understanding reactivity: <code>data</code>, <code>computed</code> and <code>methods</code></li>
+        <li>Creating and composing Single File Components (SFCs)</li>
+        <li>Routing with <code>vue-router</code></li>
+        <li>Styling your Vue.js SFCs</li>
+        <li>Conditionally rendering elements</li>
+        <li>Event handling</li>
+        <li>Basics of state management</li>
+        <li>Vue.js lifecycle methods</li>
+        <li>Rendering lists of items</li>
+        <li>Data binding and Forms in Vue.js</li>
+        <li>Slots</li>
+        <li>Best practices and gotcha's</li>
+      </ul>
 sponsors:
   - type: venue
     sponsor: GeekyAnts Software Pvt Ltd <@geekyants>