Feature/add open collective (#2234)

* feat: code-fund re-positioned

* refactor: remove patreon add opencollective

* feature: change active theme position on dropdown

* feature: fixed white spaces

* feature: fixed white spaces

* refactor: fixe color theme dropdown on main page disabled

* refactor: github button on main page visible

* feat: add new vars

* feat: add sponsors btn & badge backers

* feat: add contributors & become backer button

* feat: add vue github button plugin

* feat: add post install opencollective

* feat(readme): add contributors

Author: dragosct

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 {

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",