sponsors page

wahid-moh · Jan 21, 2022 · a360920 · a360920
1 parent 645a72f
commit a360920
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 5 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -551,6 +551,13 @@ export default defineConfigWithTheme<Config>({
         content: 'https://vuejs.org/images/logo.png'
       }
     ],
+    [
+      'link',
+      {
+        rel: 'preconnect',
+        href: 'https://sponsors.vuejs.org'
+      }
+    ],
     [
       'script',
       {},

diff --git a/.vitepress/theme/styles/pages.css b/.vitepress/theme/styles/pages.css
@@ -3,3 +3,13 @@
 .vt-doc.style-guide h2 .header-anchor {
   opacity: 1;
 }
+
+.vt-doc.sponsor h3 {
+  text-align: center;
+  padding-bottom: 1em;
+  border-bottom: 1px solid var(--vt-c-divider-light);
+}
+
+.vt-doc.sponsor h3 .header-anchor {
+  display: none;
+}
diff --git a/src/sponsor/Sponsors.vue b/src/sponsor/Sponsors.vue
@@ -0,0 +1,92 @@
+<script lang="ts">
+let data = $ref<Data>()
+const base = `https://sponsors.vuejs.org`
+</script>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+interface Sponsor {
+  url: string
+  img: string
+  name: string
+}
+
+interface Data {
+  special: Sponsor[]
+  platinum: Sponsor[]
+  platinum_china: Sponsor[]
+  gold: Sponsor[]
+  silver: Sponsor[]
+  bronze: Sponsor[]
+}
+
+const { tier } = defineProps<{ tier: keyof Data }>()
+
+onMounted(async () => {
+  if (!data) {
+    data = await (await fetch(`${base}/data.json`)).json()
+  }
+})
+</script>
+
+<template>
+  <div v-if="data" class="sponsor-container" :class="tier">
+    <a
+      v-for="{ url, img, name } of data[tier]"
+      class="sponsor-item"
+      :href="url"
+      target="_blank"
+      rel="sponsored noopener"
+    >
+      <img loading="lazy" :src="`${base}/images/${img}`" :alt="name" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.sponsor-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+.sponsor-item {
+  padding: 10px;
+  margin-bottom: 30px;
+}
+.special .sponsor-item img {
+  max-width: 300px;
+  max-height: 150px;
+}
+.platinum .sponsor-item img,
+.platinum_china .sponsor-item img {
+  max-width: 200px;
+  max-height: 100px;
+}
+.gold .sponsor-item img {
+  max-width: 140px;
+  max-height: 70px;
+}
+.silver .sponsor-item img {
+  max-width: 120px;
+  max-height: 60px;
+}
+
+@media (max-width: 600px) {
+  .sponsor-item {
+    padding: 6px;
+    margin-bottom: 20px;
+  }
+  .platinum .sponsor-item img,
+  .platinum_china .sponsor-item img {
+    max-width: 150px;
+    max-height: 75px;
+  }
+  .gold .sponsor-item img,
+  .silver .sponsor-item img {
+    max-width: 100px;
+    max-height: 50px;
+  }
+}
+</style>
diff --git a/src/sponsor/index.md b/src/sponsor/index.md
@@ -1,13 +1,76 @@
 ---
 sidebar: false
-aside: false
+ads: false
+editLink: false
 ---
 
-# Sponsorships <sup class="vt-badge">WIP</sup>
+<script setup>
+import Sponsors from './Sponsors.vue'
+</script>
+
+# Become a Vue.js Sponsor
 
 Vue.js is an MIT licensed open source project and completely free to use.
-However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+The tremendous amount of effort needed to maintain such a large ecosystem and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
+
+## Sponsoring Vue as a Business
+
+Sponsoring Vue gives you great exposure to over **1.7 million** Vue developers around the world through our website and GitHub project READMEs. In addition, supporting OSS improves the reputation of your brand, which is an important asset for any company that interacts with developers.
+
+If you are using Vue to build a revenue-generating product, it makes business sense to sponsor Vue's development: **it ensures the project that your product relies on stays healthy and actively maintained.** The exposure and positive brand image in the Vue community also makes it easier to attract and recruit Vue developers.
+
+If you are building a product where your target customers are developers, you will gain high quality traffic through the sponsorship exposure, since all our visitors are developers. The sponsorship also builds brand recognition and improves conversion.
+
+## Sponsoring Vue as an Individual
+
+If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying us coffee once in a while. Many of our team members accept sponsorships and donations via GitHub Sponsors. Look for the "Sponsor" button on each team member's profile on our [team page](/about/team).
+
+You can also try to convince your employer to sponsor Vue as a business. This may not be easy, but business sponsorships typically make a much larger impact on the sustainability of OSS projects than individual donations, so you will help us much more if you succeed.
+
+## How to Sponsor
+
+Sponsorships can be done via [GitHub Sponsors](https://github.com/sponsors/yyx990803) or [OpenCollective](https://opencollective.com/vuejs). Invoices can be obtained via GitHub's payment system. Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements based on tiers specified below.
+
+## Tier Benefits
+
+- **Global Special**:
+  - Limited to one sponsor globally (currently filled).
+  - Exclusive above the fold logo placement on the front page of [vuejs.org](/).
+  - Most prominent logo placement in all locations from tiers below.
+- **Platinum (USD$2,000/mo)**:
+  - Prominent logo placement on the front page of [vuejs.org](/).
+  - Prominent logo placement in sidebar of all content pages.
+  - Prominent logo placement in the README of [`vuejs/core`](https://github.com/vuejs/core) and [`vuejs/vue`](https://github.com/vuejs/core).
+- **Gold (USD$500/mo)**:
+  - Large logo placement on the front page of [vuejs.org](/).
+  - Large Logo placement in the README of `vuejs/core` and `vuejs/vue`.
+- **Silver (USD$500/mo)**:
+  - Medium logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
+- **Bronze (USD$500/mo)**:
+  - Small logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
+- **Generous Backer (USD$50/mo)**:
+  - Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`, above other individual backers.
+- **Individual Backer (USD$5/mo)**:
+  - Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
+
+## Current Sponsors
+
+### Special Global Sponsor
+
+<Sponsors tier="special" />
+
+### Platinum
+
+<Sponsors tier="platinum" />
+
+### Platinum (China)
+
+<Sponsors tier="platinum_china" />
+
+### Gold
+
+<Sponsors tier="gold" />
 
-If you run a business and are using Vue in a revenue-generating product, it makes business sense to sponsor Vue development: **it ensures the project that your product relies on stays healthy and actively maintained.** It can also help your exposure in the Vue community and makes it easier to attract Vue developers.
+### Silver
 
-If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while.
+<Sponsors tier="silver" />