From 6effb7dca270d897f65ff3734095b5f51bfe9159 Mon Sep 17 00:00:00 2001
From: AMontagu <adrienmontagu@gmail.com>
Date: Thu, 9 Apr 2020 15:58:47 +0200
Subject: [PATCH] Feature/add presentations (#108)

* add presentation listing

* filter working

* add title filter and input design and add newline at EOF

* update text of presentation readme

* add pr template and submit presentation message

* add real presnetation, pr template, submit text and vue vrsion field

* add conditional display and accordion

* add new line at the end of json files

* change html comment

* Update src/.vuepress/config.js

* Update src/presentations/README.md

* Update language

Co-authored-by: Ben Hong <ben@bencodezen.io>
---
 .../ISSUE_TEMPLATE/presentation-submission.md |  13 ++
 .../pull-request-presentation.md              |  35 +++++
 .../components/PresentationFilters.vue        | 141 +++++++++++++++++
 .../components/PresentationInfoLine.vue       |  32 ++++
 src/.vuepress/components/PresentationItem.vue |  71 +++++++++
 src/.vuepress/components/PresentationList.vue | 146 ++++++++++++++++++
 src/.vuepress/config.js                       |  13 ++
 src/.vuepress/data/index.js                   |  18 +++
 .../Create your own component library.json    |  21 +++
 .../2018/Setup a complex vue project.json     |  21 +++
 .../Webpack/2020/The Vue on Webpack.json      |  21 +++
 src/presentations/README.md                   |  28 ++++
 12 files changed, 560 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/presentation-submission.md
 create mode 100644 .github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
 create mode 100644 src/.vuepress/components/PresentationFilters.vue
 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/Components/2018/Create your own component library.json
 create mode 100644 src/.vuepress/data/presentations/Pattern/2018/Setup a complex vue project.json
 create mode 100644 src/.vuepress/data/presentations/Webpack/2020/The Vue on Webpack.json
 create mode 100644 src/presentations/README.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..18472f8
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE/pull-request-presentation.md
@@ -0,0 +1,35 @@
+---
+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": "",
+  "vueVersion": "",
+  "event": {
+    "name": "",
+    "link": ""
+  },
+  "gitRepository": "",
+  "videoLink": "",
+  "reachSpeaker": {
+    "twitter": "",
+    "github": "",
+    "vueDiscord": "",
+    "email": ""
+  },
+  "description": ""
+}
\ No newline at end of file
diff --git a/src/.vuepress/components/PresentationFilters.vue b/src/.vuepress/components/PresentationFilters.vue
new file mode 100644
index 0000000..5d06688
--- /dev/null
+++ b/src/.vuepress/components/PresentationFilters.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <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;">
+      <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>
+
+<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="css" scoped>
+  .select-css {
+    margin-right: 20px;
+    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
new file mode 100644
index 0000000..89e5675
--- /dev/null
+++ b/src/.vuepress/components/PresentationInfoLine.vue
@@ -0,0 +1,32 @@
+<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>
diff --git a/src/.vuepress/components/PresentationItem.vue b/src/.vuepress/components/PresentationItem.vue
new file mode 100644
index 0000000..ed8c691
--- /dev/null
+++ b/src/.vuepress/components/PresentationItem.vue
@@ -0,0 +1,71 @@
+<template>
+  <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" />
+      <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 v-if="isExpanded">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
+    }
+  },
+  data() {
+    return {
+      isExpanded: false,
+    }
+  },
+  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;
+}
+.accordion{
+  cursor: pointer;
+}
+</style>
diff --git a/src/.vuepress/components/PresentationList.vue b/src/.vuepress/components/PresentationList.vue
new file mode 100644
index 0000000..dd353f6
--- /dev/null
+++ b/src/.vuepress/components/PresentationList.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <h3>Filters:</h3>
+    <PresentationFilters :value="filters" />
+    <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">
+          <!-- 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>-->
+            <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>
+
+<script>
+import {presentationData} from '../data';
+import PresentationItem from './PresentationItem';
+import PresentationFilters from './PresentationFilters';
+
+export default {
+  name: "PresentationList",
+  components: {
+    PresentationItem
+  },
+  data() {
+    return {
+      filters: {
+        theme: "",
+        year: "",
+        author: "",
+        event: "",
+        country: "",
+        language: "",
+        title: "",
+      }
+    };
+  },
+  computed: {
+    presentationFiltered() {
+      // 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);
+    },
+    filteredPresentationsCount() {
+      // This computed count all the presentation filtered
+      return Object.keys(this.presentationFiltered).reduce((count, theme) => {
+        return count + this.filteredPresentationsCountByTheme(theme);
+      }, 0);
+    }
+  },
+  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;
+      }
+      if (filters["title"] && !presentation["title"].toLowerCase().includes(filters["title"].toLowerCase())) {
+        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/config.js b/src/.vuepress/config.js
index 87e5af5..32938a7 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -50,6 +50,19 @@ module.exports = {
 					}
 				]
 			},
+			{
+				text: 'Presentation',
+				items: [
+					{
+						text: 'Discover',
+						link: '/presentations/#discover'
+					},
+					{
+						text: "Submit",
+						link: '/presentations/#submit'
+					},
+				]
+			},
 			{
 				text: 'Contact',
 				items: [
diff --git a/src/.vuepress/data/index.js b/src/.vuepress/data/index.js
index dc36fe3..fd09b89 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,20 @@ dataFiles.keys().forEach((fileName) => {
   data[year] = fileData.default || fileData;
 });
 
+presentationDataFiles.keys().forEach((fileName) => {
+  let fileData = presentationDataFiles(fileName);
+  fileName = fileName.replace(/\.\//, '').replace(/\.json/, '')
+  const [theme, year, title] = fileName.split("/", 3)
+  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/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..74c29aa
--- /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."
+}
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..649218e
--- /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)"
+}
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..0d129ba
--- /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."
+}
diff --git a/src/presentations/README.md b/src/presentations/README.md
new file mode 100644
index 0000000..067bc72
--- /dev/null
+++ b/src/presentations/README.md
@@ -0,0 +1,28 @@
+---
+sidebar: auto
+---
+
+# Presentations
+
+## Introduction
+
+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)
+
+## Discover
+
+
+<PresentationList />
+
+
+## Submit
+
+Sharing your presentation with the community is entirely voluntary.
+
+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>
+
+
+<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>