Feature/add open collective

README.md

@@ -100,6 +100,11 @@ Vue Material supports all [modern browsers](http://browserl.ist/?q=%3E%3D+1%25).
 
 <small>May work in other browsers but it's untested.</small>
 
+## Become a part of the Vue Material community
+
+###  This project exists thanks to all the people who contribute
+<a class="contributors-image" href="https://github.com/vuematerial/vue-material/contributors"><img src="https://opencollective.com/vue-material/contributors.svg?width=1500&button=false" /></a>
+
 ## Credits and Thanks
 
 * <a href="https://github.com/elviskang" target="_blank">elviskang</a> for donating the npm package name!

docs/app/i18n/en-US/pages.js

@@ -13,6 +13,9 @@ export default {
     custom: 'Custom Development',
     viewProject: 'View project',
     sponsors: 'Sponsors',
+    contributors: "Become a part of the Vue Material community",
+    contributorsTitle: 'This project exists thanks to all the people who contribute',
+    backersTitle: 'Credits & Thanks',
     backers: 'Backers',
     sponsorsDescription: 'Vue Material does not run under the umbrella of any company or anything like that. It is an independent project created by {0} in his spare time, which has become one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
     beACollective: 'If you think that this project helped you or your company in any way, you can consider becoming a backer/sponsor on Open Collective'

docs/app/pages/Home/HomeHeader.vue

@@ -12,6 +12,8 @@
 
       <div class="home-actions">
         <gh-btns-star slug="vuematerial/vue-material" show-count></gh-btns-star>
+        <!-- Place this tag where you want the button to render. -->
+        <github-button href="https://github.com/sponsors/vuematerial" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @vuematerial on GitHub">Sponsor</github-button>
       </div>
       <div class="home-actions">
         <a href="https://www.npmjs.com/package/vue-material" target="_blank">
@@ -20,6 +22,9 @@
         <a href="https://www.npmjs.com/package/vue-material" target="_blank">
           <img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
         </a>
+        <a href="https://opencollective.com/vue-material" target="_blank">
+          <img src="https://opencollective.com/vue-material/tiers/backer/badge.svg?label=backer&color=brightgreen" />
+        </a>
         <a href="https://discord.gg/vuematerial" target="_blank">
           <img src="https://img.shields.io/discord/379653048798281729.svg?logo=discord&colorB=7289DA" alt="Chat">
         </a>
@@ -33,8 +38,13 @@
 </template>
 
 <script>
+import GithubButton from 'vue-github-button'
+
   export default {
-    name: 'HomeHeader'
+    name: 'HomeHeader',
+    components: {
+      GithubButton
+    },
   }
 </script>
 

docs/app/pages/Home/HomeSponsors.vue

@@ -2,16 +2,37 @@
   <md-content md-tag="section" class="home-sponsors">
     <div class="page-wrapper">
       <h2 class="home-title md-headline">
-        <md-icon>monetization_on</md-icon>
-        {{ $t('pages.home.sponsors') }} &amp; {{ $t('pages.home.backers') }}
+        <md-icon>group</md-icon>
+        {{ $t('pages.home.contributors') }}
       </h2>
 
 
       <div class="home-sponsors-description">
+        <h3><md-icon>person</md-icon> {{ $t('pages.home.contributorsTitle') }}</h3>
+        <a class="contributors-image" href="https://github.com/vuematerial/vue-material/contributors"><img src="https://opencollective.com/vue-material/contributors.svg?width=1500&button=false" /></a>
+        <br><br>
+        <h3><md-icon>monetization_on</md-icon>
+        {{ $t('pages.home.sponsors') }} &amp; {{ $t('pages.home.backers') }}</h3>
+
+        <div class="backers-button">
+          <h3>OpenCollective Sponsors</h3>
+          <object type="image/svg+xml" data="https://opencollective.com/vue-material/tiers/backer.svg?avatarHeight=100&width=600"></object>
+        </div>
+
+
+        <h3><md-icon>favorite</md-icon>
+        {{ $t('pages.home.backersTitle') }}</h3>
+
+
         <i18n path="pages.home.sponsorsDescription" tag="p">
           <a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>
         </i18n>
 
+        <ul>
+          <li><a href="https://github.com/elviskang" target="_blank">elviskang</a> for donating the npm package name!</li>
+          <li><a href="https://github.com/brunocastro" target="_blank">Bruno Castro</a> for the awesome Vue Material Logo. <logo-vue-material animated /></li>
+        </ul>
+
         <div class="d-flex align-items-center">
           <a href="https://www.codeinwp.com/?ref=vuematerial.io" target="_blank">
             <img src="/assets/sponsors/codeinwp-logo.svg" class="home-sponsors-open-1">
@@ -59,17 +80,42 @@
   @import "~vue-material/components/MdAnimation/variables";
   @import "~vue-material/components/MdLayout/mixins";
 
+  .logo-vue-material {
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  object {
+    width: 200px;
+    height: 115px !important;
+  }
+
+  .backers-button {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
 
   .home-sponsors {
     width: calc(100% + 32px);
     margin: 0 -16px -16px;
     padding-bottom: 28px;
     a{
       &:hover{
-        color: transparent !important;
         text-decoration: none;
       }
     }
+
+    p, .contributors-image, .align-items-center {
+      padding-left: 30px;
+    }
+
+    ul {
+      padding-left: 45px;
+    }
   }
 
   .home-sponsors-open {

docs/app/template/MainHeader.vue

@@ -76,11 +76,11 @@
           </md-menu>
         </div>
 
-        <div v-if="!isSplash">
-          <md-button href="http://github.com/vuematerial/vue-material" target="_blank" class="md-icon-button">
-            <md-icon md-src="/assets/icon-github.svg" class="icon-github" />
-          </md-button>
+        <md-button href="http://github.com/vuematerial/vue-material" target="_blank" class="md-icon-button">
+          <md-icon md-src="/assets/icon-github.svg" class="icon-github" />
+        </md-button>
 
+        <div v-if="!isSplash">
           <md-menu md-align-trigger>
             <md-button class="button-theme md-icon-button md-dense md-raised md-primary" md-menu-trigger>
               <md-icon class="icon-github">invert_colors</md-icon>

package.json

@@ -33,7 +33,8 @@
     "release": "sh build/release.sh",
     "new-component": "babel-node build/new-component.js",
     "github-release": "github-release",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "postinstall": "opencollective-postinstall"
   },
   "engines": {
     "node": ">= 7.0"
@@ -42,7 +43,9 @@
     "vue": "^2.5.0"
   },
   "dependencies": {
+    "opencollective-postinstall": "^2.0.2",
     "vue-github-buttons": "^3.1.0",
+    "vue-github-button": "^1.2.0",
     "vue-toc": "0.0.1"
   },
   "devDependencies": {
@@ -128,6 +131,10 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/vue-material"
+  },
   "jest": {
     "moduleNameMapper": {
       "^vue$": "<rootDir>/node_modules/vue/dist/vue.common.js",