Skip to content

Commit 3bb08ef

Browse files
pascalgrimaudpascalgrimaud
authored
Merge pull request #28 from renanfranca/20-improve-sponsor-section
improve sponsor section
2 parents 2e00be3 + fc4a194 commit 3bb08ef

22 files changed

+3235
-577
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,9 @@ Desktop.ini
139139
######################
140140
.vitepress/cache
141141
.vitepress/dist
142+
143+
######################
144+
# Vitest
145+
######################
146+
.vitest/coverage
147+

‎.vitepress/data/sponsors/bronzeSponsors.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Sponsor } from './sponsors';
2+
3+
export const bronze: Sponsor[] = [
4+
{
5+
memberId: 720740,
6+
name: 'Geoffray Gruel',
7+
url: 'https://www.linkedin.com/in/ggruel/',
8+
img: '/sponsors/guest-b627ebd3-720740.png',
9+
},
10+
];

‎.vitepress/data/sponsors/goldSponsors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { Sponsor } from './sponsors';
2+
3+
export const gold: Sponsor[] = [];

‎.vitepress/data/sponsors/platinumSponsors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { Sponsor } from './sponsors';
2+
3+
export const platinum: Sponsor[] = [];

‎.vitepress/data/sponsors/silverSponsors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { Sponsor } from './sponsors';
2+
3+
export const silver: Sponsor[] = [];

‎.vitepress/data/sponsors/sponsors.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { bronze } from './bronzeSponsors';
2+
import { gold } from './goldSponsors';
3+
import { platinum } from './platinumSponsors';
4+
import { silver } from './silverSponsors';
5+
6+
export type Sponsor = {
7+
memberId: number;
8+
name: string;
9+
img: string;
10+
url: string;
11+
};
12+
13+
type SponsorTier = 'platinum' | 'gold' | 'silver' | 'bronze';
14+
15+
type SponsorTierConfig = {
16+
tier: string;
17+
size: string;
18+
items: Sponsor[];
19+
};
20+
21+
const sponsorData = {
22+
platinum: platinum,
23+
gold: gold,
24+
silver: silver,
25+
bronze: bronze,
26+
} satisfies Record<SponsorTier, Sponsor[]>;
27+
28+
const tierConfig: Record<SponsorTier, { displayName: string; size: string }> = {
29+
platinum: { displayName: 'Platinum sponsors', size: 'big' },
30+
gold: { displayName: 'Gold sponsors', size: 'medium' },
31+
silver: { displayName: 'Silver sponsors', size: 'small' },
32+
bronze: { displayName: 'Bronze sponsors', size: 'mini' },
33+
};
34+
35+
const tierOrder: SponsorTier[] = ['platinum', 'gold', 'silver', 'bronze'];
36+
37+
const generateSponsors = (): SponsorTierConfig[] => {
38+
const sponsorTiers: SponsorTierConfig[] = [];
39+
40+
tierOrder.forEach(tierKey => {
41+
const sponsors = sponsorData[tierKey];
42+
if (sponsors.length > 0) {
43+
sponsorTiers.push({
44+
tier: tierConfig[tierKey].displayName,
45+
size: tierConfig[tierKey].size,
46+
items: sponsors,
47+
});
48+
}
49+
});
50+
51+
return sponsorTiers;
52+
};
53+
54+
export const sponsors = generateSponsors();

‎.vitepress/theme/components/HomePage.vue‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<script setup lang="ts">
2+
import { VPButton, VPHomeSponsors } from 'vitepress/theme';
3+
import { onMounted, onUnmounted, ref } from 'vue';
4+
import { sponsors } from '../../data/sponsors/sponsors';
5+
6+
const backersImageWidth = ref(310);
7+
8+
const updateBackersWidth = () => {
9+
if (window.innerWidth >= 768) {
10+
backersImageWidth.value = 760;
11+
} else {
12+
backersImageWidth.value = 310;
13+
}
14+
};
15+
16+
onMounted(() => {
17+
updateBackersWidth();
18+
window.addEventListener('resize', updateBackersWidth);
19+
});
20+
21+
onUnmounted(() => {
22+
window.removeEventListener('resize', updateBackersWidth);
23+
});
24+
</script>
25+
26+
<template>
27+
<div class="content">
28+
<div class="content-container">
29+
<main class="main">
30+
<VPHomeSponsors
31+
v-if="sponsors"
32+
message="Seed4J is planted 🌱 by the community, grown with the support of amazing sponsors."
33+
:data="sponsors"
34+
/>
35+
<div class="vp-backer">
36+
<div class="container">
37+
<section class="vp-backer-section">
38+
<h3 class="vp-backer-tier">Backers</h3>
39+
<div class="vp-backer-grid-item">
40+
<object
41+
:data="`https://opencollective.com/seed4j/tiers/backers.svg?avatarHeight=40&width=${backersImageWidth}&button=false`"
42+
type="image/svg+xml"
43+
class="backers-svg"
44+
aria-label="Backers"
45+
>
46+
Backers
47+
</object>
48+
</div>
49+
</section>
50+
</div>
51+
</div>
52+
<div class="action">
53+
<VPButton theme="sponsor" :text="`💚 Sponsor Seed4J`" :href="`https://opencollective.com/seed4j`" />
54+
</div>
55+
</main>
56+
</div>
57+
</div>
58+
</template>
59+
60+
<style scoped>
61+
.VPHomeSponsors {
62+
margin: 96px 0 0 0;
63+
}
64+
65+
:deep(.vp-sponsor) {
66+
border-radius: 16px 16px 0 0 !important;
67+
}
68+
69+
:deep(.vp-sponsor-grid-image) {
70+
max-width: 100%;
71+
filter: none !important;
72+
transition: filter 0.25s;
73+
border-radius: 50%;
74+
}
75+
76+
:deep(.dark .vp-sponsor-grid-image) {
77+
filter: none !important;
78+
}
79+
80+
:deep(.dark .vp-sponsor-grid-item:hover) {
81+
background-color: var(--vp-c-bg-soft) !important;
82+
}
83+
84+
85+
:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
86+
max-width: 64px;
87+
max-height: 35px !important;
88+
}
89+
90+
:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
91+
max-width: 96px;
92+
max-height: 40px !important;
93+
}
94+
95+
:deep(.vp-sponsor-grid.small .vp-sponsor-grid-image) {
96+
max-width: 96px;
97+
max-height: 45px !important;
98+
}
99+
100+
:deep(.vp-sponsor-grid.medium .vp-sponsor-grid-image) {
101+
max-width: 120px;
102+
max-height: 50px !important;
103+
}
104+
105+
:deep(.vp-sponsor-grid.big .vp-sponsor-grid-image) {
106+
max-width: 192px;
107+
max-height: 60px !important;
108+
}
109+
110+
.vp-backer {
111+
padding: 0 24px;
112+
}
113+
114+
@media (min-width: 768px) {
115+
.vp-backer {
116+
padding: 0 48px;
117+
}
118+
}
119+
120+
@media (min-width: 960px) {
121+
.vp-backer {
122+
padding: 0 64px;
123+
}
124+
}
125+
126+
.container {
127+
margin: 0 auto;
128+
max-width: 1152px;
129+
}
130+
131+
.vp-backer-section {
132+
padding: 4px 0 0 0;
133+
border-radius: 0 0 16px 16px;
134+
overflow: hidden;
135+
}
136+
137+
.vp-backer-tier {
138+
padding: 13px 0 11px;
139+
font-size: 14px;
140+
margin: 0 0 4px !important;
141+
text-align: center;
142+
letter-spacing: 1px !important;
143+
line-height: 24px;
144+
width: 100%;
145+
font-weight: 600;
146+
color: var(--vp-c-text-2);
147+
background-color: var(--vp-c-bg-soft);
148+
}
149+
150+
.vp-backer-grid-item {
151+
padding: 10px;
152+
background-color: var(--vp-c-bg-soft);
153+
transition: background-color 0.25s;
154+
}
155+
156+
.backers-svg {
157+
background-color: var(--vp-c-bg-soft);
158+
}
159+
160+
.action {
161+
display: flex;
162+
justify-content: center;
163+
gap: 1rem;
164+
margin-top: 30px;
165+
}
166+
</style>

‎.vitepress/theme/components/Sponsors.vue‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

0 commit comments

Comments
 (0)