feat(docs): Add Github Sponsorship

Author: rstoenescu

docs/src/components/HeaderMenu.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
 div
   q-btn-dropdown.text-bold(:align="align", flat, no-caps, stretch, :label="`v${$q.version}`", auto-close)
-    q-list
+    q-list(dense padding)
+      q-item-label(header) Older docs
       q-item(
         v-for="version in ['17', '16', '15', '14', '13']"
         :key="version"
@@ -13,13 +14,13 @@ div
         q-item-section {{ `v0.${version}` }}
 
   q-btn-dropdown.text-bold(:align="align", flat, no-caps, stretch, label="Links", auto-close)
-    q-list
+    q-list(dense padding)
       q-item(clickable, tag="a", href="https://github.com/quasarframework/quasar-awesome", target="_blank")
         q-item-section.text-yellow-9(avatar)
           q-icon(name="flare")
         q-item-section Awesome Quasar
 
-      q-item(clickable, tag="a", href="https://medium.com/quasar-framework", target="_blank")
+      q-item(clickable, tag="a", href="https://blog.quasar.dev", target="_blank")
         q-item-section.text-primary(avatar)
           q-icon(name="fab fa-medium")
         q-item-section Quasar Blog
@@ -29,7 +30,7 @@ div
           q-icon(name="fab fa-github")
         q-item-section GitHub
 
-      q-item-label(header) Quick Tools
+      q-item-label.q-mt-md(header) Quick Tools
 
       q-item(clickable, to="/style/theme-builder")
         q-item-section.text-teal(avatar)
@@ -41,7 +42,7 @@ div
           q-icon(name="dashboard")
         q-item-section Layout Builder
 
-      q-item-label(header) Playground
+      q-item-label.q-mt-md(header) Playground
 
       q-item(clickable, tag="a", href="https://codepen.io/rstoenescu/pen/VgQbdx", target="_blank")
         q-item-section.text-brown-5(avatar)
@@ -58,7 +59,7 @@ div
           q-icon(name="fas fa-cubes")
         q-item-section Codesandbox
 
-      q-item-label(header) Social
+      q-item-label.q-mt-md(header) Social
 
       q-item(clickable, tag="a", href="https://forum.quasar.dev/category/1/announcements", target="_blank")
         q-item-section.text-purple(avatar)
@@ -71,7 +72,7 @@ div
         q-item-section Twitter
 
   q-btn-dropdown.text-bold(:align="align", flat, no-caps, stretch, label="Support", auto-close)
-    q-list
+    q-list(dense padding)
 
       q-item(clickable, tag="a", href="https://chat.quasar.dev", target="_blank")
         q-item-section.text-primary(avatar)
@@ -88,7 +89,12 @@ div
           q-icon(name="fab fa-stack-overflow")
         q-item-section Stack Overflow
 
-      q-separator
+      q-separator.q-my-md
+
+      q-item(clickable, tag="a", href="https://github.com/users/rstoenescu/sponsorship", target="_blank")
+        q-item-section(avatar)
+          q-icon(name="fab fa-github")
+        q-item-section Github Sponsorship
 
       q-item(clickable, tag="a", href="https://www.patreon.com/quasarframework", target="_blank")
         q-item-section.text-red(avatar)

docs/src/components/page-parts/sponsors-and-backers/DonatingButtons.vue

@@ -1,11 +1,29 @@
 <template>
   <div class="row q-gutter-sm">
+    <q-btn
+      push
+      color="black"
+      style="height: 65px; width: 250px;"
+      no-caps
+      type="a"
+      href="https://github.com/users/rstoenescu/sponsorship"
+      target="_blank"
+    >
+      <div class="row items-center no-wrap">
+        <q-icon left name="fab fa-github" />
+
+        <div class="text-center">
+          Github Sponsorship<br><strong>(recommended)</strong>
+        </div>
+      </div>
+    </q-btn>
+
     <q-btn
       push
       color="primary"
-      style="height: 50px;"
+      style="height: 65px; width: 250px;"
       icon="fab fa-patreon"
-      label="Become a Patron"
+      label="Patreon"
       no-caps
       type="a"
       href="https://www.patreon.com/quasarframework"
@@ -19,23 +37,19 @@
       <q-btn
         push
         color="secondary"
-        style="height: 50px;"
-        icon="fab fa-paypal"
-        label="One-time through Paypal"
+        style="height: 65px; width: 250px;"
         type="submit"
         no-caps
-      />
+      >
+        <div class="row items-center no-wrap">
+          <q-icon left name="fab fa-paypal" />
+
+          <div class="text-center">
+            Paypal<br>(one time)
+          </div>
+        </div>
+      </q-btn>
       <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
     </form>
-
-    <q-btn
-      push
-      disable
-      color="black"
-      style="height: 50px;"
-      icon="fab fa-github"
-      label="Github Sponsorship (coming soon)"
-      no-caps
-    />
   </div>
 </template>

docs/src/components/page-parts/sponsors-and-backers/SponsorList.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  .row.q-gutter-sm
+    sponsor(img="campus-cloud-services.png" name="Campus Cloud Services" url="http://campuscloudservices.com/")
+    sponsor(img="truelogic.png" name="Truelogic" url="https://truelogic.com/")
+    sponsor(img="juggle-street.png" name="Juggle Street" url="https://www.jugglestreet.com.au/")
+    sponsor(img="com-com-services.png" name="Com Com Services" url="http://comcomservices.com/")
+    sponsor(img="kalisio.png" name="Kalisio" url="https://kalisio.com/")
+    sponsor(img="platform-purple.png" name="Platform Purple" url="https://platformpurple.com/")
+    sponsor(img="bgasoft.png" name="BGASoft" url="https://www.bgasoft.com/")
+    sponsor(img="letsbutterfly.png" name="LetsButterfly" url="https://www.letsbutterfly.com/")
+    sponsor(img="project-finance.png" name="Project Finance" url="https://www.projectfinance.io/")
+</template>
+
+<script>
+import Sponsor from 'components/page-parts/sponsors-and-backers/Sponsor'
+
+export default {
+  name: 'SponsorList',
+
+  components: {
+    Sponsor
+  }
+}
+</script>

docs/src/layouts/Layout.vue

@@ -27,12 +27,12 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
       .row.justify-center.q-my-lg
         q-btn(
           type="a"
-          href="https://www.patreon.com/quasarframework"
+          href="https://github.com/users/rstoenescu/sponsorship"
           target="_blank"
           size="13px"
           color="primary"
-          icon="fab fa-patreon"
-          label="Become a Patron"
+          icon="favorite_border"
+          label="Donate to Quasar"
         )
 
       app-menu.q-my-lg

docs/src/pages/Landing.vue

@@ -126,40 +126,16 @@
 
   section.padding.bg-white.text-grey-10.text-center
     div
-      .text-h6.text-primary.q-mb-xl Proudly sponsored by
-      .q-gutter-md.flex.flex-center
-        a
-          img(width='200px', src='https://cdn.quasar.dev/sponsors/think-health-data.png')
-        a(href='https://truelogic.com', target='_blank')
-          img(width='200px', src='https://cdn.quasar.dev/sponsors/truelogic.png')
-        a(href='https://www.tayloredtechnology.net', target='_blank')
-          img(width='200px', src='https://cdn.quasar.dev/sponsors/taylored-technology-big.jpeg')
-        a(href='http://campuscloudservices.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/campus-cloud-services.png')
-        a(href='https://www.jugglestreet.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/juggle-street.png')
-        a(href='http://comcomservices.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/com-com-services.png')
-        a(href='http://www.kalisio.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/kalisio.png')
-        a(href='http://platformpurple.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/platform-purple.png')
-        a(href='http://www.bgasoft.com', target='_blank')
-          img(width='222px', src='https://cdn.quasar.dev/sponsors/bgasoft.png')
-        a(href='https://www.letsbutterfly.com/', target='_blank')
-          img(width='170px', src='https://cdn.quasar.dev/sponsors/letsbutterfly.png')
-
-      .text-h6.text-primary.q-mt-xl.q-mb-lg.q-pt-md Partners
-      .q-gutter-md.flex.flex-center
+      .text-h6.text-primary.q-mb-xl Silver, Gold and Platinum Sponsors:
 
-        a(href='https://utopian.io/', target='_blank')
-          img(width='170px', src='https://cdn.quasar.dev/sponsors/utopian.png')
+      sponsor-list.justify-center
 
-        a(href='https://wallabyjs.com/', target='_blank')
-          img(width='110px', src='https://cdn.quasar.dev/sponsors/wallaby.png')
+      .text-h6.text-primary.q-mt-xl.q-mb-lg.q-pt-md Our partners:
+      .q-gutter-md.flex.flex-center
 
-        a(href='https://snyk.io/', target='_blank')
-          img(width='170px', src='https://cdn.quasar.dev/sponsors/snyk.png')
+        sponsor(img="utopian.png" name="Utopian" url="https://utopian.io/")
+        sponsor(img="wallaby.png" name="Wallabyjs" url="https://wallabyjs.com/")
+        sponsor(img="snyk.png" name="Snyk" url="https://snyk.io/")
 
   section.landing__footer
     div.text-center
@@ -204,9 +180,17 @@
 </template>
 
 <script>
+import Sponsor from 'components/page-parts/sponsors-and-backers/Sponsor'
+import SponsorList from 'components/page-parts/sponsors-and-backers/SponsorList'
+
 export default {
   name: 'Landing',
 
+  components: {
+    Sponsor,
+    SponsorList
+  },
+
   meta: {
     title: 'Quasar Framework'
   },

docs/src/pages/sponsors-and-backers.md

@@ -1,7 +1,7 @@
 ---
 title: Sponsors and Backers
 components:
-  - sponsors-and-backers/Sponsor
+  - sponsors-and-backers/SponsorList
   - sponsors-and-backers/DonatingButtons
 ---
 
@@ -16,40 +16,16 @@ Please read our manifesto on [Why donations are important](/why-donate).
 ## Donating
 You can help Quasar Development by making a monthly pledge through Patreon or send a one-time donation through Paypal. If you are representing a company who wants to become a **Sponsor** and need an invoice for your donations, please send an email to `razvan.stoenescu [at] gmail [dot] com`.
 
+Donating through the **Github Sponsorship is recommended** because Github will also match your donation (making it worth double your amount).
+
 <donating-buttons />
 
-All of your donations are used for Quasar Development purposes exclusively.
+All donations are used for Quasar Development purposes exclusively.
 
 ::: tip
 For a full list of our wonderful people who make Quasar happen, visit the [Backers](https://github.com/quasarframework/quasar/blob/dev/backers.md) page.
 :::
 
-## Platinum Sponsors
-
-<div class="q-gutter-sm row items-start">
-  <sponsor img="think-health-data.png" name="Think Health Data" />
-
-  <sponsor img="truelogic.png" name="Truelogic" url="https://truelogic.com/" />
-
-  <sponsor img="taylored-technology.jpeg" name="Taylored Technology" url="https://tayloredtechnology.net/" />
-</div>
-
-## Gold Backers
-
-<div class="q-gutter-sm row">
-  <sponsor img="campus-cloud-services.png" name="Campus Cloud Services" url="http://campuscloudservices.com/" />
-
-  <sponsor img="juggle-street.png" name="Juggle Street" url="https://www.jugglestreet.com.au/" />
-
-  <sponsor img="com-com-services.png" name="Com Com Services" url="http://comcomservices.com/" />
-
-  <sponsor img="kalisio.png" name="Kalisio" url="https://kalisio.com/" />
-
-  <sponsor img="platform-purple.png" name="Platform Purple" url="https://platformpurple.com/" />
-
-  <sponsor img="bgasoft.png" name="BGASoft" url="https://www.bgasoft.com/" />
-
-  <sponsor img="letsbutterfly.png" name="LetsButterfly" url="https://www.letsbutterfly.com/" />
+## Silver, Gold and Platinum Sponsors
 
-  <sponsor img="project-finance.png" name="Project Finance" url="https://www.projectfinance.io/" />
-</div>
+<sponsor-list />

docs/src/pages/why-donate.md

@@ -63,9 +63,11 @@ Even a small donation could mean a huge difference to them, not least because it
 ## Donating
 You can help Quasar Development by making a monthly pledge through Patreon or send a one-time donation through Paypal. If you are representing a company who wants to become a **Sponsor** and need an invoice for your donations, please send an email to `razvan.stoenescu [at] gmail [dot] com`.
 
+Donating through the **Github Sponsorship is recommended** because Github will also match your donation (making it worth double your amount).
+
 <donating-buttons />
 
-All of your donations are used for Quasar Development purposes exclusively.
+All donations are used for Quasar Development purposes exclusively.
 
 ::: tip
 For a full list of our wonderful people who make Quasar happen, visit the [Backers](https://github.com/quasarframework/quasar/blob/dev/backers.md) page.