Skip to content

Commit a360920

Browse files
yyx990803yyx990803
committed
sponsors page
1 parent 645a72f commit a360920

File tree

4 files changed

+177
-5
lines changed

4 files changed

+177
-5
lines changed

‎.vitepress/config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -551,6 +551,13 @@ export default defineConfigWithTheme<Config>({
551551
content: 'https://vuejs.org/images/logo.png'
552552
}
553553
],
554+
[
555+
'link',
556+
{
557+
rel: 'preconnect',
558+
href: 'https://sponsors.vuejs.org'
559+
}
560+
],
554561
[
555562
'script',
556563
{},

‎.vitepress/theme/styles/pages.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,13 @@
33
.vt-doc.style-guide h2 .header-anchor {
44
opacity: 1;
55
}
6+
7+
.vt-doc.sponsor h3 {
8+
text-align: center;
9+
padding-bottom: 1em;
10+
border-bottom: 1px solid var(--vt-c-divider-light);
11+
}
12+
13+
.vt-doc.sponsor h3 .header-anchor {
14+
display: none;
15+
}

‎src/sponsor/Sponsors.vue

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script lang="ts">
2+
let data = $ref<Data>()
3+
const base = `https://sponsors.vuejs.org`
4+
</script>
5+
6+
<script setup lang="ts">
7+
import { onMounted } from 'vue'
8+
9+
interface Sponsor {
10+
url: string
11+
img: string
12+
name: string
13+
}
14+
15+
interface Data {
16+
special: Sponsor[]
17+
platinum: Sponsor[]
18+
platinum_china: Sponsor[]
19+
gold: Sponsor[]
20+
silver: Sponsor[]
21+
bronze: Sponsor[]
22+
}
23+
24+
const { tier } = defineProps<{ tier: keyof Data }>()
25+
26+
onMounted(async () => {
27+
if (!data) {
28+
data = await (await fetch(`${base}/data.json`)).json()
29+
}
30+
})
31+
</script>
32+
33+
<template>
34+
<div v-if="data" class="sponsor-container" :class="tier">
35+
<a
36+
v-for="{ url, img, name } of data[tier]"
37+
class="sponsor-item"
38+
:href="url"
39+
target="_blank"
40+
rel="sponsored noopener"
41+
>
42+
<img loading="lazy" :src="`${base}/images/${img}`" :alt="name" />
43+
</a>
44+
</div>
45+
</template>
46+
47+
<style scoped>
48+
.sponsor-container {
49+
display: flex;
50+
flex-wrap: wrap;
51+
justify-content: space-around;
52+
align-items: center;
53+
}
54+
.sponsor-item {
55+
padding: 10px;
56+
margin-bottom: 30px;
57+
}
58+
.special .sponsor-item img {
59+
max-width: 300px;
60+
max-height: 150px;
61+
}
62+
.platinum .sponsor-item img,
63+
.platinum_china .sponsor-item img {
64+
max-width: 200px;
65+
max-height: 100px;
66+
}
67+
.gold .sponsor-item img {
68+
max-width: 140px;
69+
max-height: 70px;
70+
}
71+
.silver .sponsor-item img {
72+
max-width: 120px;
73+
max-height: 60px;
74+
}
75+
76+
@media (max-width: 600px) {
77+
.sponsor-item {
78+
padding: 6px;
79+
margin-bottom: 20px;
80+
}
81+
.platinum .sponsor-item img,
82+
.platinum_china .sponsor-item img {
83+
max-width: 150px;
84+
max-height: 75px;
85+
}
86+
.gold .sponsor-item img,
87+
.silver .sponsor-item img {
88+
max-width: 100px;
89+
max-height: 50px;
90+
}
91+
}
92+
</style>

‎src/sponsor/index.md

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,76 @@
11
---
22
sidebar: false
3-
aside: false
3+
ads: false
4+
editLink: false
45
---
56

6-
# Sponsorships <sup class="vt-badge">WIP</sup>
7+
<script setup>
8+
import Sponsors from './Sponsors.vue'
9+
</script>
10+
11+
# Become a Vue.js Sponsor
712

813
Vue.js is an MIT licensed open source project and completely free to use.
9-
However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
14+
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.
15+
16+
## Sponsoring Vue as a Business
17+
18+
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.
19+
20+
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.
21+
22+
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.
23+
24+
## Sponsoring Vue as an Individual
25+
26+
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).
27+
28+
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.
29+
30+
## How to Sponsor
31+
32+
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.
33+
34+
## Tier Benefits
35+
36+
- **Global Special**:
37+
- Limited to one sponsor globally (currently filled).
38+
- Exclusive above the fold logo placement on the front page of [vuejs.org](/).
39+
- Most prominent logo placement in all locations from tiers below.
40+
- **Platinum (USD$2,000/mo)**:
41+
- Prominent logo placement on the front page of [vuejs.org](/).
42+
- Prominent logo placement in sidebar of all content pages.
43+
- Prominent logo placement in the README of [`vuejs/core`](https://github.com/vuejs/core) and [`vuejs/vue`](https://github.com/vuejs/core).
44+
- **Gold (USD$500/mo)**:
45+
- Large logo placement on the front page of [vuejs.org](/).
46+
- Large Logo placement in the README of `vuejs/core` and `vuejs/vue`.
47+
- **Silver (USD$500/mo)**:
48+
- Medium logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
49+
- **Bronze (USD$500/mo)**:
50+
- Small logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
51+
- **Generous Backer (USD$50/mo)**:
52+
- Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`, above other individual backers.
53+
- **Individual Backer (USD$5/mo)**:
54+
- Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
55+
56+
## Current Sponsors
57+
58+
### Special Global Sponsor
59+
60+
<Sponsors tier="special" />
61+
62+
### Platinum
63+
64+
<Sponsors tier="platinum" />
65+
66+
### Platinum (China)
67+
68+
<Sponsors tier="platinum_china" />
69+
70+
### Gold
71+
72+
<Sponsors tier="gold" />
1073

11-
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.
74+
### Silver
1275

13-
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.
76+
<Sponsors tier="silver" />

0 commit comments

Comments
 (0)