From 634155448f17cdddbbafbe8b008e9396dfc2319f Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sun, 29 Mar 2020 16:36:46 +0200
Subject: [PATCH 01/12] add presentation listing

---
 package.json                                  |  4 +-
 .../components/PresentationInfoLine.vue       | 34 +++++++++++
 src/.vuepress/components/PresentationItem.vue | 61 +++++++++++++++++++
 src/.vuepress/components/PresentationList.vue | 36 +++++++++++
 src/.vuepress/config.js                       | 18 +++++-
 src/.vuepress/data/index.js                   | 22 +++++++
 .../Example/2020/My Example Presentation.json | 19 ++++++
 src/presentations/README.md                   | 21 +++++++
 8 files changed, 212 insertions(+), 3 deletions(-)
 create mode 100644 src/.vuepress/components/PresentationInfoLine.vue
 create mode 100644 src/.vuepress/components/PresentationItem.vue
 create mode 100644 src/.vuepress/components/PresentationList.vue
 create mode 100644 src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
 create mode 100644 src/presentations/README.md

diff --git a/package.json b/package.json
index 8fcf5cf..2aa7d34 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
 	"description": "Source code for events.vuejs.org",
 	"main": "index.js",
 	"scripts": {
-		"dev": "vuepress dev src",
-		"build": "vuepress build src"
+		"dev": "NODE_ENV=development vuepress dev src",
+		"build": "NODE_ENV=production vuepress build src"
 	},
 	"repository": {
 		"type": "git",
diff --git a/src/.vuepress/components/PresentationInfoLine.vue b/src/.vuepress/components/PresentationInfoLine.vue
new file mode 100644
index 0000000..30a0d27
--- /dev/null
+++ b/src/.vuepress/components/PresentationInfoLine.vue
@@ -0,0 +1,34 @@
+<template>
+  <li>{{text}} 
+    <a 
+      v-if="link" 
+      :href="link"
+      target="_blank"
+      rel="noopener noreferrer">
+      {{value}}
+    </a>
+    <span v-else>{{value}}</span>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "PresentationInfoLine",
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    link: {
+      type: String,
+      default: ""
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/.vuepress/components/PresentationItem.vue b/src/.vuepress/components/PresentationItem.vue
new file mode 100644
index 0000000..56cf46c
--- /dev/null
+++ b/src/.vuepress/components/PresentationItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <h4>{{presentation.title}} ({{year}}) <span class="author-by">by {{presentation.author}}</span></h4>
+    <ul>
+      <PresentationInfoLine text="Source Language:" :value="presentation.sourceLanguage" />
+      <PresentationInfoLine text="City:" :value="`${presentation.city}, ${presentation.country}`" />
+      <PresentationInfoLine text="Event:" :value="presentation.event.name" :link="presentation.event.link" />
+      <PresentationInfoLine text="Git:" :value="presentation.gitRepository" :link="presentation.gitRepository" />
+      <PresentationInfoLine text="Video:" :value="presentation.video" :link="presentation.video" />
+      <PresentationInfoLine text="Source Language:" :value="presentation.sourceLanguage" />
+      <li>Reach Speaker: 
+        <ul>
+          <PresentationInfoLine text="Twitter:" :value="presentation.reachSpeaker.twitter" :link="presentation.reachSpeaker.twitter" />
+          <PresentationInfoLine text="Github:" :value="presentation.reachSpeaker.github" :link="presentation.reachSpeaker.github" />
+          <PresentationInfoLine text="Vue Discord:" :value="presentation.reachSpeaker.vueDiscord" />
+          <PresentationInfoLine text="Email:" :value="presentation.reachSpeaker.email" />
+        </ul>
+      </li>
+    </ul>
+    <strong>Description:</strong>
+    <p>{{presentation.description}}</p>
+  </div>
+</template>
+
+<script>
+import PresentationInfoLine from './PresentationInfoLine';
+
+export default {
+  name: "PresentationItem",
+  components: {
+    PresentationInfoLine,
+  },
+  props: {
+    presentation: {
+      type: Object,
+      required: true
+    },
+    year: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    presentationWithMeta() {
+      const presentationWithMeta = {};
+      Object.entries(this.presentation).forEach(([key, value]) => {
+        if(["description"].includes(key)) {
+          return;
+        }
+
+      })
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+.author-by {
+  float: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
new file mode 100644
index 0000000..d02fc36
--- /dev/null
+++ b/src/.vuepress/components/PresentationList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    test
+    <div v-for="(yearPresentation, theme) in presentationFiltered" :key="theme">
+      <h2>{{ theme }}</h2>
+      <div v-for="(presentations, year) in yearPresentation" :key="`${theme}-${year}`">
+        <!--<h3>{{ year }}</h3>-->
+        <div v-for="presentation in presentations" :key="presentation.title">
+          <PresentationItem :presentation="presentation" :year="year" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {presentationData} from '../data';
+import PresentationItem from './PresentationItem';
+
+export default {
+  name: "PresentationList",
+  components: {
+    PresentationItem
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    presentationFiltered() {
+      return presentationData;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 3fa0ef9..74d295b 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -46,6 +46,19 @@ module.exports = {
 					}
 				]
 			},
+			{
+				text: 'Presentation',
+				items: [
+					{
+						text: 'Discover',
+						link: '/presentations/#discover'
+					},
+					{
+						text: "Submit your",
+						link: '/presentations/#submit'
+					},
+				]
+			},
 			{
 				text: 'Contact',
 				items: [
@@ -179,5 +192,8 @@ module.exports = {
 				ga: 'UA-46852172-1'
 			}
 		]
-	]
+	],
+	define: {
+    NODE_ENV: process.env.NODE_ENV,
+  }
 }
diff --git a/src/.vuepress/data/index.js b/src/.vuepress/data/index.js
index dc36fe3..ecbde68 100644
--- a/src/.vuepress/data/index.js
+++ b/src/.vuepress/data/index.js
@@ -1,6 +1,8 @@
 const dataFiles = require.context(".", false, /\.json$/);
+const presentationDataFiles = require.context("./presentations", true, /\.json$/);
 
 const data = {};
+const presentationData = {};
 
 dataFiles.keys().forEach((fileName) => {
   const fileData = dataFiles(fileName);
@@ -8,4 +10,24 @@ dataFiles.keys().forEach((fileName) => {
   data[year] = fileData.default || fileData;
 });
 
+presentationDataFiles.keys().forEach((fileName) => {
+  console.log(NODE_ENV)
+  let fileData = presentationDataFiles(fileName);
+  fileName = fileName.replace(/\.\//, '').replace(/\.json/, '')
+  const [theme, year, title] = fileName.split("/", 3)
+  if (theme === "example" && NODE_ENV !== "development") {
+    return;
+  }
+  if (!presentationData[theme]) {
+    presentationData[theme] = {}
+  }
+  if (!presentationData[theme][year]) {
+    presentationData[theme][year] = []
+  }
+  fileData = fileData.default || fileData;
+  fileData = {...fileData, title}
+  presentationData[theme][year].push(fileData.default || fileData)
+});
+
 export default data;
+export { data, presentationData};
diff --git a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
new file mode 100644
index 0000000..24223f1
--- /dev/null
+++ b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
@@ -0,0 +1,19 @@
+{
+  "author": "Adrien Montagu",
+  "sourceLanguage": "English",
+  "city": "Lyon",
+  "country": "France",
+  "event": {
+    "name": null,
+    "link": null
+  },
+  "gitRepository": null,
+  "videoLink": null,
+  "reachSpeaker": {
+    "twitter": null,
+    "github": "https://github.com/amontagu",
+    "vueDiscord": "Adrien Montagu#0597",
+    "email": null
+  },
+  "description": "This presentation is only an example on how a speaker can share his presentation on this github."
+}
\ No newline at end of file
diff --git a/src/presentations/README.md b/src/presentations/README.md
new file mode 100644
index 0000000..4c6d2a7
--- /dev/null
+++ b/src/presentations/README.md
@@ -0,0 +1,21 @@
+---
+sidebar: auto
+---
+
+# Introduction
+
+## Introduction
+
+Vue.js Events is an effort to centralize all public presentation about Vue.js and associated library and framework. It allow to quiclky find a presentation by theme and year. It also allow event organizer to reuse presentation to share knowledge at local area without recreating presentation each time.
+
+// TODO more introduction ? Wording ?
+
+To submit your go to the end of the page or [click here](/presentations/#submit)
+
+# Discover
+
+
+<PresentationList />
+
+
+# Submit
\ No newline at end of file

From c29fc95c5573232facabba96a984e6a22f337872 Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sun, 29 Mar 2020 18:15:52 +0200
Subject: [PATCH 02/12] filter working

---
 .../components/PresentationFilters.vue        | 81 ++++++++++++++++++
 src/.vuepress/components/PresentationList.vue | 83 ++++++++++++++++++-
 src/.vuepress/data/index.js                   |  4 +-
 .../Example/2020/My Example Presentation.json |  2 +-
 .../2019/My Example Presentation2.json        | 19 +++++
 5 files changed, 183 insertions(+), 6 deletions(-)
 create mode 100644 src/.vuepress/components/PresentationFilters.vue
 create mode 100644 src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json

diff --git a/src/.vuepress/components/PresentationFilters.vue b/src/.vuepress/components/PresentationFilters.vue
new file mode 100644
index 0000000..4d57ce8
--- /dev/null
+++ b/src/.vuepress/components/PresentationFilters.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <select label="Theme" v-model="value.theme">
+      <option value="">Choose</option>
+      <option v-for="item in themes">{{item}}</option>
+    </select>
+    <select label="Year" v-model="value.year">
+      <option value="">Choose</option>
+      <option v-for="item in years">{{item}}</option>
+    </select>
+    <select label="Author" v-model="value.author">
+      <option value="">Choose</option>
+      <option v-for="item in getItemsForPresentationKey('author')">{{item}}</option>
+    </select>
+    <select label="Event" v-model="value.event">
+      <option value="">Choose</option>
+      <option v-for="item in getItemsForPresentationKey('event', 'name')">{{item}}</option>
+    </select>
+    <select label="Country" v-model="value.country">
+      <option value="">Choose</option>
+      <option v-for="item in getItemsForPresentationKey('country')">{{item}}</option>
+    </select>
+    <select label="Language" v-model="value.language">
+      <option value="">Choose</option>
+      <option v-for="item in getItemsForPresentationKey('sourceLanguage')">{{item}}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+import {presentationData} from '../data';
+export default {
+  name: "PresentationFilters",
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+  },
+  computed: {
+    themes() {
+      return Object.keys(presentationData);
+    },
+    years() {
+      let years = [];
+      Object.values(presentationData).forEach(presentationByYear => {
+        // presentationByYear look like {2019: [...], 2020: [...]}
+        // So basically we concat the keys of presentationByYear with already found years and put it in a set to avoid duplcate
+        years = [...new Set(years.concat(Object.keys(presentationByYear)))]
+      })
+      return years
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getItemsForPresentationKey(key, subKey=null) {
+      const items = new Set();
+      Object.values(presentationData).forEach(presentationsByYear => {
+        // presentationByYear look like {2019: [...], 2020: [...]}
+
+        Object.values(presentationsByYear).forEach(presentations => {
+          presentations.forEach(presentation => {
+            // presentation is a presentation object as declared in json file
+            if(!subKey && presentation[key]) {
+              return items.add(presentation[key])
+            }
+            else if(presentation[key] && presentation[key][subKey]) {
+              items.add(presentation[key][subKey])
+            }
+          })
+        })
+      })
+      return items
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
index d02fc36..ac725a9 100644
--- a/src/.vuepress/components/PresentationList.vue
+++ b/src/.vuepress/components/PresentationList.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
-    test
+    <PresentationFilters :value="filters" />
     <div v-for="(yearPresentation, theme) in presentationFiltered" :key="theme">
       <h2>{{ theme }}</h2>
       <div v-for="(presentations, year) in yearPresentation" :key="`${theme}-${year}`">
         <!--<h3>{{ year }}</h3>-->
+        <!-- put a message that say that no presentation with current filter are available and user need to change filters to see presentation in this theme ? -->
         <div v-for="presentation in presentations" :key="presentation.title">
           <PresentationItem :presentation="presentation" :year="year" />
         </div>
@@ -16,6 +17,7 @@
 <script>
 import {presentationData} from '../data';
 import PresentationItem from './PresentationItem';
+import PresentationFilters from './PresentationFilters';
 
 export default {
   name: "PresentationList",
@@ -23,13 +25,88 @@ export default {
     PresentationItem
   },
   data() {
-    return {};
+    return {
+      filters: {
+        theme: "",
+        year: "",
+        author: "",
+        event: "",
+        country: "",
+        language: "",
+      }
+    };
   },
   computed: {
     presentationFiltered() {
-      return presentationData;
+      // The filter loop over themes then years then presentations to filter them. With this logic we iterate only once on all presentations. The logic look like this:
+      // Is theme in the theme filtered ? 
+      //    yes -> Is the year in the year filtered ?
+      //        yes -> is the presentation has the same value that the filter ?
+      //            yes -> display this presentation
+      //            no -> remove this presentation 
+      //        no -> remove all the presentation of this year
+      //    no -> remove all presentation of this theme
+      return this.filterByTheme(presentationData, this.filters);
     }
   },
+  methods: {
+    filterByTheme(presentationByTheme, filters) {
+      // presentationByTheme is presentationData object
+      let allowed;
+      // If we want to filter by theme we assign it. If not we assign all the key to not filter it
+      if(filters["theme"]) {
+        allowed = [filters["theme"]]
+      } else {
+        allowed = Object.keys(presentationByTheme);
+      }
+      // This code basically just filter by key
+      return Object.keys(presentationByTheme)
+        .filter(key => allowed.includes(key))
+        .reduce((obj, key) => {
+          obj[key] = this.filterByYear(presentationByTheme[key], filters);
+          return obj;
+        }, {});
+    },
+    filterByYear(presentationByYear, filters) {
+      // presentationByYear look like {2019: [...], 2020: [...]}
+      // If we want to filter by year we assign it. If not we assign all the key to not filter it
+      let allowed;
+      if(filters["year"]) {
+        allowed = [filters["year"]]
+      } else {
+        allowed = Object.keys(presentationByYear);
+      }
+      // we filter presentation by year and when we set the presentations data we filter them directly to avoid multiple loop
+      return Object.keys(presentationByYear)
+        .filter(key => allowed.includes(key))
+        .reduce((obj, key) => {
+          obj[key] = this.filterPresentations(presentationByYear[key], filters);
+          return obj;
+        }, {});
+    },
+    filterPresentations(presentations, filters) {
+      // prepare filter by multiple value
+      return presentations.filter(presentation => {
+        return this.presentationMatchFilter(presentation, filters)
+      })
+
+    },
+    presentationMatchFilter(presentation, filters) {
+      if (filters["author"] && filters["author"] !== presentation["author"]) {
+        return false;
+      }
+      if (filters["country"] && filters["country"] !== presentation["country"]) {
+        return false;
+      }
+      if (filters["language"] && filters["language"] !== presentation["language"]) {
+        return false;
+      }
+      if (filters["event"] && filters["event"] !== presentation["event"]["name"]) {
+        return false;
+      }
+      return true;
+    }
+  }
 };
 </script>
 
diff --git a/src/.vuepress/data/index.js b/src/.vuepress/data/index.js
index ecbde68..0cc9276 100644
--- a/src/.vuepress/data/index.js
+++ b/src/.vuepress/data/index.js
@@ -11,11 +11,11 @@ dataFiles.keys().forEach((fileName) => {
 });
 
 presentationDataFiles.keys().forEach((fileName) => {
-  console.log(NODE_ENV)
   let fileData = presentationDataFiles(fileName);
   fileName = fileName.replace(/\.\//, '').replace(/\.json/, '')
   const [theme, year, title] = fileName.split("/", 3)
-  if (theme === "example" && NODE_ENV !== "development") {
+  // Example folder are juste for test and pr review. We do not want them in production
+  if (["example", "example2"].includes(theme.toLowerCase()) && NODE_ENV !== "development") {
     return;
   }
   if (!presentationData[theme]) {
diff --git a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
index 24223f1..88ecf08 100644
--- a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
+++ b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
@@ -4,7 +4,7 @@
   "city": "Lyon",
   "country": "France",
   "event": {
-    "name": null,
+    "name": "event",
     "link": null
   },
   "gitRepository": null,
diff --git a/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json b/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json
new file mode 100644
index 0000000..dd4ca7f
--- /dev/null
+++ b/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json	
@@ -0,0 +1,19 @@
+{
+  "author": "Adrien Montagu2",
+  "sourceLanguage": "English2",
+  "city": "Lyon",
+  "country": "France2",
+  "event": {
+    "name": "Event2",
+    "link": null
+  },
+  "gitRepository": null,
+  "videoLink": null,
+  "reachSpeaker": {
+    "twitter": null,
+    "github": "https://github.com/amontagu",
+    "vueDiscord": "Adrien Montagu#0597",
+    "email": null
+  },
+  "description": "This presentation is only an example on how a speaker can share his presentation on this github."
+}
\ No newline at end of file

From f98241fdaabc11d340970dcc54ebd8427f609e86 Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 13:50:24 +0200
Subject: [PATCH 03/12] add title filter and input design and add newline at
 EOF

---
 .../components/PresentationFilters.vue        | 107 ++++++++++++++----
 .../components/PresentationInfoLine.vue       |   2 -
 src/.vuepress/components/PresentationItem.vue |   3 +-
 src/.vuepress/components/PresentationList.vue |   6 +-
 .../Example/2020/My Example Presentation.json |   1 +
 .../2019/My Example Presentation2.json        |   1 +
 6 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/src/.vuepress/components/PresentationFilters.vue b/src/.vuepress/components/PresentationFilters.vue
index 4d57ce8..00c8ed5 100644
--- a/src/.vuepress/components/PresentationFilters.vue
+++ b/src/.vuepress/components/PresentationFilters.vue
@@ -1,29 +1,36 @@
 <template>
   <div>
-    <select label="Theme" v-model="value.theme">
-      <option value="">Choose</option>
-      <option v-for="item in themes">{{item}}</option>
-    </select>
-    <select label="Year" v-model="value.year">
-      <option value="">Choose</option>
-      <option v-for="item in years">{{item}}</option>
-    </select>
-    <select label="Author" v-model="value.author">
-      <option value="">Choose</option>
-      <option v-for="item in getItemsForPresentationKey('author')">{{item}}</option>
-    </select>
-    <select label="Event" v-model="value.event">
-      <option value="">Choose</option>
-      <option v-for="item in getItemsForPresentationKey('event', 'name')">{{item}}</option>
-    </select>
-    <select label="Country" v-model="value.country">
-      <option value="">Choose</option>
-      <option v-for="item in getItemsForPresentationKey('country')">{{item}}</option>
-    </select>
-    <select label="Language" v-model="value.language">
-      <option value="">Choose</option>
-      <option v-for="item in getItemsForPresentationKey('sourceLanguage')">{{item}}</option>
-    </select>
+    <div style="margin-top: 20px;">
+      <label for="title-input">Title:</label>
+      <input id="title-input" class="input-css" v-model="value.title" placeholder="Type to filter title that contains your search" />
+    </div>
+    <div style="margin-top: 20px;">
+      <p>Filters:</p>
+      <select v-model="value.theme" class="select-css">
+        <option value="">Theme</option>
+        <option v-for="item in themes">{{item}}</option>
+      </select>
+      <select v-model="value.year" class="select-css">
+        <option value="">Year</option>
+        <option v-for="item in years">{{item}}</option>
+      </select>
+      <select v-model="value.author" class="select-css">
+        <option value="">Author</option>
+        <option v-for="item in getItemsForPresentationKey('author')">{{item}}</option>
+      </select>
+      <select v-model="value.event" class="select-css">
+        <option value="">Event</option>
+        <option v-for="item in getItemsForPresentationKey('event', 'name')">{{item}}</option>
+      </select>
+      <select v-model="value.country" class="select-css">
+        <option value="">Country</option>
+        <option v-for="item in getItemsForPresentationKey('country')">{{item}}</option>
+      </select>
+      <select v-model="value.language" class="select-css">
+        <option value="">Language</option>
+        <option v-for="item in getItemsForPresentationKey('sourceLanguage')">{{item}}</option>
+      </select>
+    </div>
   </div>
 </template>
 
@@ -78,4 +85,54 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="css" scoped>
+  .select-css {
+    margin-right: 10px;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: 700;
+    color: #444;
+    line-height: 1.3;
+    padding: .6em 1.4em .5em .8em;
+    box-sizing: border-box;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
+    border-radius: .5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+  }
+  .select-css::-ms-expand {
+    display: none;
+  }
+  .select-css:hover {
+    border-color: #888;
+  }
+  .select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+  }
+  .select-css option {
+    font-weight:normal;
+  }
+
+
+  .input-css {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/src/.vuepress/components/PresentationInfoLine.vue b/src/.vuepress/components/PresentationInfoLine.vue
index 30a0d27..89e5675 100644
--- a/src/.vuepress/components/PresentationInfoLine.vue
+++ b/src/.vuepress/components/PresentationInfoLine.vue
@@ -30,5 +30,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/.vuepress/components/PresentationItem.vue b/src/.vuepress/components/PresentationItem.vue
index 56cf46c..78bf2ba 100644
--- a/src/.vuepress/components/PresentationItem.vue
+++ b/src/.vuepress/components/PresentationItem.vue
@@ -2,6 +2,7 @@
   <div>
     <h4>{{presentation.title}} ({{year}}) <span class="author-by">by {{presentation.author}}</span></h4>
     <ul>
+      <PresentationInfoLine text="Slides:" :value="presentation.slides" :link="presentation.slides" />
       <PresentationInfoLine text="Source Language:" :value="presentation.sourceLanguage" />
       <PresentationInfoLine text="City:" :value="`${presentation.city}, ${presentation.country}`" />
       <PresentationInfoLine text="Event:" :value="presentation.event.name" :link="presentation.event.link" />
@@ -58,4 +59,4 @@ export default {
 .author-by {
   float: right;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
index ac725a9..11c92b8 100644
--- a/src/.vuepress/components/PresentationList.vue
+++ b/src/.vuepress/components/PresentationList.vue
@@ -33,6 +33,7 @@ export default {
         event: "",
         country: "",
         language: "",
+        title: "",
       }
     };
   },
@@ -104,10 +105,11 @@ export default {
       if (filters["event"] && filters["event"] !== presentation["event"]["name"]) {
         return false;
       }
+      if (filters["title"] && !presentation["title"].toLowerCase().includes(filters["title"].toLowerCase())) {
+        return false;
+      }
       return true;
     }
   }
 };
 </script>
-
-<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
index 88ecf08..d355cda 100644
--- a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
+++ b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
@@ -1,4 +1,5 @@
 {
+  "slides": "",
   "author": "Adrien Montagu",
   "sourceLanguage": "English",
   "city": "Lyon",
diff --git a/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json b/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json
index dd4ca7f..964b5d4 100644
--- a/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json	
+++ b/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json	
@@ -1,4 +1,5 @@
 {
+  "slides": "",
   "author": "Adrien Montagu2",
   "sourceLanguage": "English2",
   "city": "Lyon",

From 2cd78138992dfd6c62fc72513deed642d9091c32 Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 13:55:25 +0200
Subject: [PATCH 04/12] update text of presentation readme

---
 src/presentations/README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/presentations/README.md b/src/presentations/README.md
index 4c6d2a7..03e8263 100644
--- a/src/presentations/README.md
+++ b/src/presentations/README.md
@@ -6,9 +6,7 @@ sidebar: auto
 
 ## Introduction
 
-Vue.js Events is an effort to centralize all public presentation about Vue.js and associated library and framework. It allow to quiclky find a presentation by theme and year. It also allow event organizer to reuse presentation to share knowledge at local area without recreating presentation each time.
-
-// TODO more introduction ? Wording ?
+This is an effort to centralize all public presentations about Vue.js and associated libraries/frameworks. It catalogs presentations by theme and year, and can be used to help speakers find presentations that are open for reuse. So that knowledge can be shared at local events without having to recreate each presentation.
 
 To submit your go to the end of the page or [click here](/presentations/#submit)
 

From 7778df6917cdcfa6d0c01b2d351749cae61867bf Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 14:27:57 +0200
Subject: [PATCH 05/12] add pr template and submit presentation message

---
 .../ISSUE_TEMPLATE/presentation-submission.md | 13 +++++++
 .../pull-request-presentation.md              | 34 +++++++++++++++++++
 src/presentations/README.md                   |  9 ++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 .github/ISSUE_TEMPLATE/presentation-submission.md
 create mode 100644 .github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md

diff --git a/.github/ISSUE_TEMPLATE/presentation-submission.md b/.github/ISSUE_TEMPLATE/presentation-submission.md
new file mode 100644
index 0000000..ad7edb4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/presentation-submission.md
@@ -0,0 +1,13 @@
+---
+name: Presentation Submission
+about: Submit Vue.js presentation to post for the community
+title: "[Presentation]"
+labels: ''
+assignees: ''
+---
+
+## Presentation
+
+No need to post an issue for a presentation just get the presentation author authorization and submit a pull request following [this format](https://github.com/vuejs/events/compare/master...presnetation-pr-example?template=pull-request-presentation.md)
+
+If you meet a deadlink or a wrong informations please contact the author of the presentation.
diff --git a/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md b/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
new file mode 100644
index 0000000..3594e68
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
@@ -0,0 +1,34 @@
+---
+name: Presentation PR
+about: Share a new presnetation
+title: ''
+labels: ''
+assignees: ''
+---
+
+Thank you for submitting a presentation.
+
+To submit a presentation you just need to add a json file that contain your data at: src/.vuepress/data/presentations/\[theme\]/\[year\]/presentation-title.json
+
+The json format is the following, please copy it fully even if some fields are not filled:
+
+{
+  "slides": "",
+  "author": "",
+  "sourceLanguage": "",
+  "city": "",
+  "country": "",
+  "event": {
+    "name": "",
+    "link": ""
+  },
+  "gitRepository": "",
+  "videoLink": "",
+  "reachSpeaker": {
+    "twitter": "",
+    "github": "",
+    "vueDiscord": "",
+    "email": ""
+  },
+  "description": ""
+}
\ No newline at end of file
diff --git a/src/presentations/README.md b/src/presentations/README.md
index 03e8263..2e508ca 100644
--- a/src/presentations/README.md
+++ b/src/presentations/README.md
@@ -16,4 +16,11 @@ To submit your go to the end of the page or [click here](/presentations/#submit)
 <PresentationList />
 
 
-# Submit
\ No newline at end of file
+# Submit
+
+This page is only interresting if YOU share your presentation with the community.
+
+Adding your is really simple. You just have to create a pull request with a json file containing all the data about the presentation you want to share.
+
+<a href="http://example.com/" target="_blank">Click here to see an example</a>
+<a href="https://github.com/vuejs/events/compare/master...presnetation-pr-example?template=pull-request-presentation.md" target="_blank">Click here to submit your</a>

From f9476cd0189906067edef36cd1a0cb7f8247470d Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 14:56:05 +0200
Subject: [PATCH 06/12] add real presnetation, pr template, submit text and vue
 vrsion field

---
 .../pull-request-presentation.md              |  1 +
 package.json                                  |  4 ++--
 src/.vuepress/components/PresentationItem.vue |  1 +
 src/.vuepress/config.js                       |  5 +----
 src/.vuepress/data/index.js                   |  4 ----
 .../Example/2020/My Example Presentation.json | 20 ------------------
 .../2019/My Example Presentation2.json        | 20 ------------------
 .../Webpack/2020/The Vue on Webpack.json      | 21 +++++++++++++++++++
 .../Create your own component library.json    | 21 +++++++++++++++++++
 .../2018/Setup a complex vue project.json     | 21 +++++++++++++++++++
 src/presentations/README.md                   | 12 ++++++-----
 11 files changed, 75 insertions(+), 55 deletions(-)
 delete mode 100644 src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
 delete mode 100644 src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json
 create mode 100644 src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json
 create mode 100644 src/.vuepress/data/presentations/components/2018/Create your own component library.json
 create mode 100644 src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json

diff --git a/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md b/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
index 3594e68..18472f8 100644
--- a/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
@@ -18,6 +18,7 @@ The json format is the following, please copy it fully even if some fields are n
   "sourceLanguage": "",
   "city": "",
   "country": "",
+  "vueVersion": "",
   "event": {
     "name": "",
     "link": ""
diff --git a/package.json b/package.json
index 2aa7d34..8fcf5cf 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
 	"description": "Source code for events.vuejs.org",
 	"main": "index.js",
 	"scripts": {
-		"dev": "NODE_ENV=development vuepress dev src",
-		"build": "NODE_ENV=production vuepress build src"
+		"dev": "vuepress dev src",
+		"build": "vuepress build src"
 	},
 	"repository": {
 		"type": "git",
diff --git a/src/.vuepress/components/PresentationItem.vue b/src/.vuepress/components/PresentationItem.vue
index 78bf2ba..4807cdf 100644
--- a/src/.vuepress/components/PresentationItem.vue
+++ b/src/.vuepress/components/PresentationItem.vue
@@ -3,6 +3,7 @@
     <h4>{{presentation.title}} ({{year}}) <span class="author-by">by {{presentation.author}}</span></h4>
     <ul>
       <PresentationInfoLine text="Slides:" :value="presentation.slides" :link="presentation.slides" />
+      <PresentationInfoLine text="Vue version:" :value="presentation.vueVersion" />
       <PresentationInfoLine text="Source Language:" :value="presentation.sourceLanguage" />
       <PresentationInfoLine text="City:" :value="`${presentation.city}, ${presentation.country}`" />
       <PresentationInfoLine text="Event:" :value="presentation.event.name" :link="presentation.event.link" />
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 74d295b..9d94f27 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -192,8 +192,5 @@ module.exports = {
 				ga: 'UA-46852172-1'
 			}
 		]
-	],
-	define: {
-    NODE_ENV: process.env.NODE_ENV,
-  }
+	]
 }
diff --git a/src/.vuepress/data/index.js b/src/.vuepress/data/index.js
index 0cc9276..fd09b89 100644
--- a/src/.vuepress/data/index.js
+++ b/src/.vuepress/data/index.js
@@ -14,10 +14,6 @@ presentationDataFiles.keys().forEach((fileName) => {
   let fileData = presentationDataFiles(fileName);
   fileName = fileName.replace(/\.\//, '').replace(/\.json/, '')
   const [theme, year, title] = fileName.split("/", 3)
-  // Example folder are juste for test and pr review. We do not want them in production
-  if (["example", "example2"].includes(theme.toLowerCase()) && NODE_ENV !== "development") {
-    return;
-  }
   if (!presentationData[theme]) {
     presentationData[theme] = {}
   }
diff --git a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json b/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json
deleted file mode 100644
index d355cda..0000000
--- a/src/.vuepress/data/presentations/Example/2020/My Example Presentation.json	
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "slides": "",
-  "author": "Adrien Montagu",
-  "sourceLanguage": "English",
-  "city": "Lyon",
-  "country": "France",
-  "event": {
-    "name": "event",
-    "link": null
-  },
-  "gitRepository": null,
-  "videoLink": null,
-  "reachSpeaker": {
-    "twitter": null,
-    "github": "https://github.com/amontagu",
-    "vueDiscord": "Adrien Montagu#0597",
-    "email": null
-  },
-  "description": "This presentation is only an example on how a speaker can share his presentation on this github."
-}
\ No newline at end of file
diff --git a/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json b/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json
deleted file mode 100644
index 964b5d4..0000000
--- a/src/.vuepress/data/presentations/Example2/2019/My Example Presentation2.json	
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "slides": "",
-  "author": "Adrien Montagu2",
-  "sourceLanguage": "English2",
-  "city": "Lyon",
-  "country": "France2",
-  "event": {
-    "name": "Event2",
-    "link": null
-  },
-  "gitRepository": null,
-  "videoLink": null,
-  "reachSpeaker": {
-    "twitter": null,
-    "github": "https://github.com/amontagu",
-    "vueDiscord": "Adrien Montagu#0597",
-    "email": null
-  },
-  "description": "This presentation is only an example on how a speaker can share his presentation on this github."
-}
\ No newline at end of file
diff --git a/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json b/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json
new file mode 100644
index 0000000..a22d371
--- /dev/null
+++ b/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json	
@@ -0,0 +1,21 @@
+{
+  "slides": null,
+  "author": "Adrien Montagu",
+  "sourceLanguage": "English",
+  "city": "Lyon",
+  "country": "France",
+  "vueVersion": "2",
+  "event": {
+    "name": "Vue Global Meetup #1",
+    "link": "https://www.eventbrite.com/e/vue-global-meetup-tickets-101090117262?aff=ebdssbonlinesearch"
+  },
+  "gitRepository": "https://github.com/AMontagu/WebpackAndVue",
+  "videoLink": null,
+  "reachSpeaker": {
+    "twitter": null,
+    "github": "https://github.com/amontagu",
+    "vueDiscord": "Adrien Montagu#0597",
+    "email": "adrienmontagu@gmail.com"
+  },
+  "description": "Let discover how Vue and Webpack work together: Create complex dev server, adding custom plugin, understanding the vue webpack config and more. The slide are coming soon."
+}
\ No newline at end of file
diff --git a/src/.vuepress/data/presentations/components/2018/Create your own component library.json b/src/.vuepress/data/presentations/components/2018/Create your own component library.json
new file mode 100644
index 0000000..755b0e7
--- /dev/null
+++ b/src/.vuepress/data/presentations/components/2018/Create your own component library.json	
@@ -0,0 +1,21 @@
+{
+  "slides": "https://github.com/AMontagu/vue-components-lib/blob/master/componentReuse.pptx",
+  "author": "Adrien Montagu",
+  "sourceLanguage": "French",
+  "city": "Lyon",
+  "country": "France",
+  "vueVersion": "2",
+  "event": {
+    "name": "Vue.js Lyon #4",
+    "link": "https://www.meetup.com/fr-FR/Vue-js-Lyon/events/255052432/"
+  },
+  "gitRepository": "https://github.com/AMontagu/vue-complex-project",
+  "videoLink": null,
+  "reachSpeaker": {
+    "twitter": null,
+    "github": "https://github.com/amontagu",
+    "vueDiscord": "Adrien Montagu#0597",
+    "email": "adrienmontagu@gmail.com"
+  },
+  "description": "Discover how to create your own component library."
+}
\ No newline at end of file
diff --git a/src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json b/src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json
new file mode 100644
index 0000000..e0b8e7f
--- /dev/null
+++ b/src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json	
@@ -0,0 +1,21 @@
+{
+  "slides": "https://github.com/AMontagu/vue-complex-project/blob/master/VueWorkshop.pptx",
+  "author": "Adrien Montagu",
+  "sourceLanguage": "French",
+  "city": "Lyon",
+  "country": "France",
+  "vueVersion": "2",
+  "event": {
+    "name": "Vue.js Lyon Workshop",
+    "link": "https://www.meetup.com/fr-FR/Vue-js-Lyon/events/253089389/"
+  },
+  "gitRepository": "https://github.com/AMontagu/vue-complex-project",
+  "videoLink": null,
+  "reachSpeaker": {
+    "twitter": null,
+    "github": "https://github.com/amontagu",
+    "vueDiscord": "Adrien Montagu#0597",
+    "email": "adrienmontagu@gmail.com"
+  },
+  "description": "How create a good base for a complex project in Vue ? See how integrate vue-i18n, code splitting, automatic component registration, vuex namespace, with a bonus or login reusable logic (on the separate branch withLogin)"
+}
\ No newline at end of file
diff --git a/src/presentations/README.md b/src/presentations/README.md
index 2e508ca..834e079 100644
--- a/src/presentations/README.md
+++ b/src/presentations/README.md
@@ -2,7 +2,7 @@
 sidebar: auto
 ---
 
-# Introduction
+# Presentations
 
 ## Introduction
 
@@ -10,17 +10,19 @@ This is an effort to centralize all public presentations about Vue.js and associ
 
 To submit your go to the end of the page or [click here](/presentations/#submit)
 
-# Discover
+## Discover
 
 
 <PresentationList />
 
 
-# Submit
+## Submit
 
 This page is only interresting if YOU share your presentation with the community.
 
 Adding your is really simple. You just have to create a pull request with a json file containing all the data about the presentation you want to share.
 
-<a href="http://example.com/" target="_blank">Click here to see an example</a>
-<a href="https://github.com/vuejs/events/compare/master...presnetation-pr-example?template=pull-request-presentation.md" target="_blank">Click here to submit your</a>
+<a href="https://github.com/vuejs/events/tree/master/src/.vuepress/data/presentations" target="_blank">Click here to see examples</a>
+
+
+<a href="https://github.com/vuejs/events/compare/master...presentation-pr-example?template=pull-request-presentation.md" target="_blank">Click here to submit your</a>

From 04c13b8bae730934e9b065c0a60250018ed90d5a Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 15:31:13 +0200
Subject: [PATCH 07/12] add conditional display and accordion

---
 .../components/PresentationFilters.vue        | 55 ++++++++++---------
 src/.vuepress/components/PresentationItem.vue | 16 ++++--
 src/.vuepress/components/PresentationList.vue | 45 ++++++++++++---
 .../Create your own component library.json    |  0
 .../2018/Setup a complex vue project.json     |  0
 5 files changed, 79 insertions(+), 37 deletions(-)
 rename src/.vuepress/data/presentations/{components => Components}/2018/Create your own component library.json (100%)
 rename src/.vuepress/data/presentations/{pattern => Pattern}/2018/Setup a complex vue project.json (100%)

diff --git a/src/.vuepress/components/PresentationFilters.vue b/src/.vuepress/components/PresentationFilters.vue
index 00c8ed5..5d06688 100644
--- a/src/.vuepress/components/PresentationFilters.vue
+++ b/src/.vuepress/components/PresentationFilters.vue
@@ -5,31 +5,34 @@
       <input id="title-input" class="input-css" v-model="value.title" placeholder="Type to filter title that contains your search" />
     </div>
     <div style="margin-top: 20px;">
-      <p>Filters:</p>
-      <select v-model="value.theme" class="select-css">
-        <option value="">Theme</option>
-        <option v-for="item in themes">{{item}}</option>
-      </select>
-      <select v-model="value.year" class="select-css">
-        <option value="">Year</option>
-        <option v-for="item in years">{{item}}</option>
-      </select>
-      <select v-model="value.author" class="select-css">
-        <option value="">Author</option>
-        <option v-for="item in getItemsForPresentationKey('author')">{{item}}</option>
-      </select>
-      <select v-model="value.event" class="select-css">
-        <option value="">Event</option>
-        <option v-for="item in getItemsForPresentationKey('event', 'name')">{{item}}</option>
-      </select>
-      <select v-model="value.country" class="select-css">
-        <option value="">Country</option>
-        <option v-for="item in getItemsForPresentationKey('country')">{{item}}</option>
-      </select>
-      <select v-model="value.language" class="select-css">
-        <option value="">Language</option>
-        <option v-for="item in getItemsForPresentationKey('sourceLanguage')">{{item}}</option>
-      </select>
+      <div>
+        <select v-model="value.theme" class="select-css">
+          <option value="">Theme</option>
+          <option v-for="item in themes">{{item}}</option>
+        </select>
+        <select v-model="value.year" class="select-css">
+          <option value="">Year</option>
+          <option v-for="item in years">{{item}}</option>
+        </select>
+        <select v-model="value.author" class="select-css">
+          <option value="">Author</option>
+          <option v-for="item in getItemsForPresentationKey('author')">{{item}}</option>
+        </select>
+      </div>
+      <div style="margin-top: 10px;">
+        <select v-model="value.event" class="select-css">
+          <option value="">Event</option>
+          <option v-for="item in getItemsForPresentationKey('event', 'name')">{{item}}</option>
+        </select>
+        <select v-model="value.country" class="select-css">
+          <option value="">Country</option>
+          <option v-for="item in getItemsForPresentationKey('country')">{{item}}</option>
+        </select>
+        <select v-model="value.language" class="select-css">
+          <option value="">Language</option>
+          <option v-for="item in getItemsForPresentationKey('sourceLanguage')">{{item}}</option>
+        </select>
+      </div>
     </div>
   </div>
 </template>
@@ -87,7 +90,7 @@ export default {
 
 <style lang="css" scoped>
   .select-css {
-    margin-right: 10px;
+    margin-right: 20px;
     font-size: 16px;
     font-family: sans-serif;
     font-weight: 700;
diff --git a/src/.vuepress/components/PresentationItem.vue b/src/.vuepress/components/PresentationItem.vue
index 4807cdf..ed8c691 100644
--- a/src/.vuepress/components/PresentationItem.vue
+++ b/src/.vuepress/components/PresentationItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <h4>{{presentation.title}} ({{year}}) <span class="author-by">by {{presentation.author}}</span></h4>
-    <ul>
+  <div style="margin-bottom: 35px;">
+    <h4 class="accordion" @click="isExpanded = !isExpanded">{{presentation.title}} ({{year}}) <span class="author-by">by {{presentation.author}} {{ isExpanded ? "-" : "+"}}</span></h4>
+    <ul v-if="isExpanded">
       <PresentationInfoLine text="Slides:" :value="presentation.slides" :link="presentation.slides" />
       <PresentationInfoLine text="Vue version:" :value="presentation.vueVersion" />
       <PresentationInfoLine text="Source Language:" :value="presentation.sourceLanguage" />
@@ -19,7 +19,7 @@
         </ul>
       </li>
     </ul>
-    <strong>Description:</strong>
+    <strong v-if="isExpanded">Description:</strong>
     <p>{{presentation.description}}</p>
   </div>
 </template>
@@ -42,6 +42,11 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      isExpanded: false,
+    }
+  },
   computed: {
     presentationWithMeta() {
       const presentationWithMeta = {};
@@ -60,4 +65,7 @@ export default {
 .author-by {
   float: right;
 }
+.accordion{
+  cursor: pointer;
+}
 </style>
diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
index 11c92b8..a21edd8 100644
--- a/src/.vuepress/components/PresentationList.vue
+++ b/src/.vuepress/components/PresentationList.vue
@@ -1,16 +1,26 @@
 <template>
   <div>
+    <h3>Filters:</h3>
     <PresentationFilters :value="filters" />
-    <div v-for="(yearPresentation, theme) in presentationFiltered" :key="theme">
-      <h2>{{ theme }}</h2>
-      <div v-for="(presentations, year) in yearPresentation" :key="`${theme}-${year}`">
-        <!--<h3>{{ year }}</h3>-->
-        <!-- put a message that say that no presentation with current filter are available and user need to change filters to see presentation in this theme ? -->
-        <div v-for="presentation in presentations" :key="presentation.title">
-          <PresentationItem :presentation="presentation" :year="year" />
+    <h3>Presentations by themes:</h3>
+    <div v-if="filteredPresentationsCount > 0">
+      <div v-for="(yearPresentation, theme) in presentationFiltered" :key="theme">
+        <div v-if="filteredPresentationsCountByTheme(theme) > 0">
+          <h2>{{ theme }} ({{filteredPresentationsCountByTheme(theme)}} {{pluralize("presentation", filteredPresentationsCountByTheme(theme))}})</h2>
+          <div v-for="(presentations, year) in yearPresentation" :key="`${theme}-${year}`">
+            <!--<h3>{{ year }}</h3>-->
+            <!-- put a message that say that no presentation with current filter are available and user need to change filters to see presentation in this theme ? -->
+            <div v-for="presentation in presentations" :key="presentation.title">
+              <PresentationItem :presentation="presentation" :year="year" />
+              <hr class="dashed">
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div v-else>
+      <p>No presentation match with the current filters you selected.</p>
+    </div>
   </div>
 </template>
 
@@ -48,6 +58,12 @@ export default {
       //        no -> remove all the presentation of this year
       //    no -> remove all presentation of this theme
       return this.filterByTheme(presentationData, this.filters);
+    },
+    filteredPresentationsCount() {
+      // This computed count all the presentation filtered
+      return Object.keys(this.presentationFiltered).reduce((count, theme) => {
+        return count + this.filteredPresentationsCountByTheme(theme);
+      }, 0);
     }
   },
   methods: {
@@ -109,7 +125,22 @@ export default {
         return false;
       }
       return true;
+    },
+    filteredPresentationsCountByTheme(theme) {
+      // This methode count all the presentation filtered by theme
+      return Object.keys(this.presentationFiltered[theme]).reduce((count, year) => {
+        return count + this.presentationFiltered[theme][year].length;
+      }, 0);
+    },
+    pluralize(text, number){
+      return number > 1 ? text + "s" : text
     }
   }
 };
 </script>
+
+<style lang="css" scoped>
+  hr.dashed {
+    border-top: 5px dashed #bbb;
+  }
+</style>
diff --git a/src/.vuepress/data/presentations/components/2018/Create your own component library.json b/src/.vuepress/data/presentations/Components/2018/Create your own component library.json
similarity index 100%
rename from src/.vuepress/data/presentations/components/2018/Create your own component library.json
rename to src/.vuepress/data/presentations/Components/2018/Create your own component library.json
diff --git a/src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json b/src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json
similarity index 100%
rename from src/.vuepress/data/presentations/pattern/2018/Setup a complex vue project.json
rename to src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json

From b7e099df7959ad8c65f592f2f2d0a48103622a6a Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 15:32:30 +0200
Subject: [PATCH 08/12] add new line at the end of json files

---
 .../Components/2018/Create your own component library.json      | 2 +-
 .../presentations/Pattern/2018/Setup a complex vue project.json | 2 +-
 .../data/presentations/Webpack/2020/The Vue on Webpack.json     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/.vuepress/data/presentations/Components/2018/Create your own component library.json b/src/.vuepress/data/presentations/Components/2018/Create your own component library.json
index 755b0e7..74c29aa 100644
--- a/src/.vuepress/data/presentations/Components/2018/Create your own component library.json	
+++ b/src/.vuepress/data/presentations/Components/2018/Create your own component library.json	
@@ -18,4 +18,4 @@
     "email": "adrienmontagu@gmail.com"
   },
   "description": "Discover how to create your own component library."
-}
\ No newline at end of file
+}
diff --git a/src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json b/src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json
index e0b8e7f..649218e 100644
--- a/src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json	
+++ b/src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json	
@@ -18,4 +18,4 @@
     "email": "adrienmontagu@gmail.com"
   },
   "description": "How create a good base for a complex project in Vue ? See how integrate vue-i18n, code splitting, automatic component registration, vuex namespace, with a bonus or login reusable logic (on the separate branch withLogin)"
-}
\ No newline at end of file
+}
diff --git a/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json b/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json
index a22d371..0d129ba 100644
--- a/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json	
+++ b/src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json	
@@ -18,4 +18,4 @@
     "email": "adrienmontagu@gmail.com"
   },
   "description": "Let discover how Vue and Webpack work together: Create complex dev server, adding custom plugin, understanding the vue webpack config and more. The slide are coming soon."
-}
\ No newline at end of file
+}

From 50adbb4657862ec112701d0063058a79423ba9c5 Mon Sep 17 00:00:00 2001
From: Montagu Adrien <adrienmontagu@gmail.com>
Date: Sat, 4 Apr 2020 15:45:03 +0200
Subject: [PATCH 09/12] change html comment

---
 src/.vuepress/components/PresentationList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
index a21edd8..dd353f6 100644
--- a/src/.vuepress/components/PresentationList.vue
+++ b/src/.vuepress/components/PresentationList.vue
@@ -6,10 +6,10 @@
     <div v-if="filteredPresentationsCount > 0">
       <div v-for="(yearPresentation, theme) in presentationFiltered" :key="theme">
         <div v-if="filteredPresentationsCountByTheme(theme) > 0">
+          <!-- Title actually show it like this: Theme (3 presentations) --> 
           <h2>{{ theme }} ({{filteredPresentationsCountByTheme(theme)}} {{pluralize("presentation", filteredPresentationsCountByTheme(theme))}})</h2>
           <div v-for="(presentations, year) in yearPresentation" :key="`${theme}-${year}`">
             <!--<h3>{{ year }}</h3>-->
-            <!-- put a message that say that no presentation with current filter are available and user need to change filters to see presentation in this theme ? -->
             <div v-for="presentation in presentations" :key="presentation.title">
               <PresentationItem :presentation="presentation" :year="year" />
               <hr class="dashed">

From 48ce0ddefcd119b864679638cd3bda89b9f27eeb Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Apr 2020 09:55:56 -0400
Subject: [PATCH 10/12] Update src/.vuepress/config.js

---
 src/.vuepress/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 9d94f27..5300b5b 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -54,7 +54,7 @@ module.exports = {
 						link: '/presentations/#discover'
 					},
 					{
-						text: "Submit your",
+						text: "Submit",
 						link: '/presentations/#submit'
 					},
 				]

From 25bc09ef7239a63ee3ef797af88642c66602514c Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Apr 2020 09:56:58 -0400
Subject: [PATCH 11/12] Update src/presentations/README.md

---
 src/presentations/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/presentations/README.md b/src/presentations/README.md
index 834e079..7ebd196 100644
--- a/src/presentations/README.md
+++ b/src/presentations/README.md
@@ -18,7 +18,7 @@ To submit your go to the end of the page or [click here](/presentations/#submit)
 
 ## Submit
 
-This page is only interresting if YOU share your presentation with the community.
+Sharing your presentation with the community is entirely voluntary.
 
 Adding your is really simple. You just have to create a pull request with a json file containing all the data about the presentation you want to share.
 

From c18b262a20ad85e7b88f5fc7ff9de248902fa9ca Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Thu, 9 Apr 2020 09:57:53 -0400
Subject: [PATCH 12/12] Update language

---
 src/presentations/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/presentations/README.md b/src/presentations/README.md
index 7ebd196..067bc72 100644
--- a/src/presentations/README.md
+++ b/src/presentations/README.md
@@ -20,7 +20,7 @@ To submit your go to the end of the page or [click here](/presentations/#submit)
 
 Sharing your presentation with the community is entirely voluntary.
 
-Adding your is really simple. You just have to create a pull request with a json file containing all the data about the presentation you want to share.
+To add your presentation, you need to create a pull request with a JSON file containing all the data about the presentation you want to share.
 
 <a href="https://github.com/vuejs/events/tree/master/src/.vuepress/data/presentations" target="_blank">Click here to see examples</a>