Skip to content

Commit c08441e

Browse files
daKmoRdaKmoR
committed
chore: add sponsors
1 parent 9f0d335 commit c08441e

File tree

9 files changed

+173
-2
lines changed

9 files changed

+173
-2
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
/.idea
33
/.vscode
44

5+
# @11ty/eleventy-cache-assets
6+
.cache
7+
58
## system files
69
.DS_Store
710

‎README.md‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,27 @@ We are always looking for contributors of all skill levels! If you're looking to
6464

6565
If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/web/blob/master/CONTRIBUTING.md). Also, feel free to drop into [Slack](https://modern-web.dev/discover/slack/) and say hi. 👋
6666

67-
### Financial Contributors
67+
## Sponsored by
6868

69-
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/modern-web/contribute)]
69+
<a href="https://google.com/chrome" style="border: none;" target="_blank" rel="noopener">
70+
<img src="https://github.com/open-wc/open-wc/blob/master/docs/_assets/supporters/chrome.svg" width="100" alt="Chrome's Web Framework & Tools Performance Fund Logo" />
71+
</a>
72+
73+
<a href="https://divriots.com/" style="border: none;" target="_blank" rel="noopener">
74+
<img src="https://github.com/open-wc/open-wc/blob/master/docs/_assets/supporters/divriots-light.svg#gh-light-mode-only" width="200" alt="Divriots Logo" />
75+
</a>
76+
77+
Become a sponsor and help us sustain our community. [[Contribute](https://opencollective.com/modern-web/contribute)]
78+
79+
## Supported by
80+
81+
<a href="http://browserstack.com/" style="border: none;" target="_blank" rel="noopener">
82+
<img src="https://github.com/open-wc/open-wc/blob/master/assets/images/Browserstack-logo.svg" width="200" alt="Browserstack Logo" />
83+
</a>
84+
85+
<a href="http://netlify.com/" style="border: none;" target="_blank" rel="noopener">
86+
<img src="https://www.netlify.com/img/press/logos/full-logo-light.svg" width="185" alt="netlify logo" />
87+
</a>
7088

7189
---
7290

‎docs/_assets/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,3 +182,85 @@ footer {
182182
fill: #fff;
183183
}
184184
}
185+
186+
/** Supported by **/
187+
188+
body[layout^='layout-home'] .supported-by-items {
189+
max-width: 550px;
190+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
191+
margin: 0 auto;
192+
margin-top: 40px;
193+
}
194+
195+
.supported-by-items p {
196+
margin-top: 10px;
197+
text-align: center;
198+
}
199+
200+
.supported-by-items img {
201+
min-height: 100px;
202+
}
203+
204+
.supported-by-items > div:nth-child(2) a {
205+
width: 100px;
206+
margin: 0 auto;
207+
display: block;
208+
}
209+
210+
.supporters {
211+
text-align: center;
212+
margin-top: 40px;
213+
}
214+
215+
.supporters > a {
216+
display: inline-block;
217+
margin-left: -25px;
218+
transition: opacity .3s;
219+
opacity: .9;
220+
}
221+
222+
.supporters > a:hover {
223+
opacity: 1;
224+
position: relative;
225+
z-index: 1;
226+
}
227+
228+
.supporters > a > img {
229+
width: 30px;
230+
height: 30px;
231+
width: calc(30px + 5vw);
232+
height: calc(30px + 5vw);
233+
max-width: 60px;
234+
max-height: 60px;
235+
margin-bottom: 6px;
236+
color: #fff;
237+
border: 2px solid #333;
238+
transition: border .3s;
239+
object-fit: cover;
240+
border-radius: 50%;
241+
background: #333;
242+
}
243+
244+
img.dark {
245+
display: none;
246+
}
247+
248+
@media (prefers-color-scheme: dark) {
249+
img.dark {
250+
display: block;
251+
}
252+
253+
img.light {
254+
display: none;
255+
}
256+
257+
.supporters > a > img {
258+
border-color: #fff;
259+
background: #fff;
260+
}
261+
}
262+
263+
.cta-contribute {
264+
margin-top: 10px !important;
265+
text-align: center;
266+
}

‎docs/_assets/supporters/chrome.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_assets/supporters/divriots-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_assets/supporters/divriots-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_data/supporters.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const cache = require('@11ty/eleventy-cache-assets');
2+
3+
const url = `https://opencollective.com/modern-web/members/all.json`;
4+
5+
module.exports = async function getSupporters() {
6+
const supportersRaw = await cache(url, {
7+
duration: '1d',
8+
type: 'json',
9+
});
10+
11+
const supporters = supportersRaw
12+
.filter(
13+
supporter =>
14+
supporter.role === 'BACKER' &&
15+
(!supporter.tier || !supporter.tier.includes('Sponsor')) &&
16+
supporter.isActive,
17+
)
18+
.map(supporter => ({
19+
image: supporter.image || '/_merged_assets/logo.svg',
20+
name: supporter.name,
21+
href: supporter.website || supporter.profile,
22+
}));
23+
24+
return supporters;
25+
};
26+
27+
module.exports();

‎docs/_includes/_joiningBlocks/_layoutHome/content/25-supporters.njk‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h2 class="reason-header">{{ supportedByHeader | safe }}</h2>
2+
<div class="reasons supported-by-items">
3+
{% for item in supportedByItems %}
4+
<div>
5+
<a href="{{ item.href }}" target="_blank" rel="noopener">
6+
<img src="{{ item.image }}" alt="{{ item.name }}" width="{{ item.width }}" class="light" />
7+
<img src="{{ item.imageDark }}" alt="{{ item.name }}" width="{{ item.width }}" class="dark" />
8+
</a>
9+
<p><strong>{{ item.tier }}</strong> Sponsor</p>
10+
</div>
11+
{% endfor %}
12+
</div>
13+
14+
<div class="supporters">
15+
{% for supporter in supporters %}
16+
<a href="{{ supporter.href }}" target="_blank" rel="noopener noreferrer">
17+
<img src="{{ supporter.image }}" alt="{{ supporter.name }}" title="{{ supporter.name }}" />
18+
</a>
19+
{% endfor %}
20+
</div>
21+
22+
<p class="cta-contribute">
23+
<a href="https://opencollective.com/modern-web">Contribute on Open Collective</a>
24+
</p>

‎docs/index.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,18 @@ reasons:
2020
text: 'Write code that is close to what actually runs in the browser, reducing abstractions and complexity.',
2121
},
2222
]
23+
supportedByHeader: 'Modern Web is <a href="https://opencollective.com/modern-web">supported</a> by:'
24+
supportedByItems:
25+
- name: Divriots
26+
width: 300
27+
href: https://divriots.com/
28+
image: /_merged_assets/supporters/divriots-light.svg
29+
imageDark: /_merged_assets/supporters/divriots-dark.svg
30+
tier: Silver
31+
- name: Chrome's Web Framework & Tools Performance Fund
32+
width: 100
33+
href: https://google.com/chrome
34+
image: /_merged_assets/supporters/chrome.svg
35+
imageDark: /_merged_assets/supporters/chrome.svg
36+
tier: Gold
2337
---

0 commit comments

Comments
 (0)