Skip to content

Commit 9435b06

Browse files
mrbiggredmrbiggred
committed
WIP: Updated the sponsor page layout.
Based on a Claude Design mockup. Added cards for how to help and a nicer way to show the years. Also added sponsor boxes with move info on hover.
1 parent 6125981 commit 9435b06

3 files changed

Lines changed: 499 additions & 36 deletions

File tree

‎data/sponsors.yml‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@
77
# Sponsor fields:
88
# name (required) Display name.
99
# image (optional) Filename in docs/sponsors/.
10-
# link (optional) URL to sponsor's site.
11-
# link_label (optional) Visible text for the link; defaults to the URL.
10+
# tier (optional) Short label shown on the card (e.g. "Primary Sponsor").
1211
# description (optional) Short thank-you or description line.
12+
# links (optional) List of { label, url } pairs shown on the card back.
13+
# link (optional, legacy) Single URL — used only if `links` is not set.
14+
# link_label (optional, legacy) Label for the legacy single `link`.
1315
#
1416
# Consent policy: only list individual donors by name with their explicit
1517
# opt-in consent. When in doubt, leave them out or use "Anonymous".
@@ -20,34 +22,49 @@
2022
# example-org:
2123
# name: Example Org
2224
# image: example.png
23-
# link: https://example.com/
24-
# link_label: example.com
25+
# tier: Community Partner
2526
# description: Thanks to Example Org for supporting the community.
27+
# links:
28+
# - label: Website
29+
# url: https://example.com/
2630

2731
sponsors:
2832
saturday-mp:
2933
name: Saturday Morning Productions
3034
image: smp.jpeg
31-
link: https://saturdaymp.com/
32-
link_label: Saturday MP
33-
description: Thanks to Saturday MP for providing hosting, Zoom, and more.
35+
tier: Primary Sponsor
36+
description: Covers Zoom hosting, website infrastructure, and food for IRL events. Main sponsor since day one.
37+
links:
38+
- label: Website
39+
url: https://saturdaymp.com/
40+
- label: GitHub Sponsors
41+
url: https://github.com/sponsors/saturdaymp
3442

3543
dev-edmonton:
3644
name: Dev Edmonton Society
3745
image: devEd.png
38-
link: https://devedmonton.com/
39-
link_label: DES
40-
description: Thanks to DES for providing a Slack channel.
46+
tier: Community Partner
47+
description: Provides the #meetup-weekly-dev-chat Slack channel where Zoom links and topic discussion live all week.
48+
links:
49+
- label: Website
50+
url: https://devedmonton.com/
51+
- label: Join Slack
52+
url: https://devedmonton.com/#about-our-slack
4153

4254
edmonton-unlimited:
4355
name: Edmonton Unlimited
4456
image: EdmontonUnlimited.jpeg
45-
link: https://edmontonunlimited.com/
46-
link_label: Edmonton Unlimited
47-
description: Thanks to Edmonton Unlimited for providing a Meetup Link.
57+
tier: Community Partner
58+
description: Hosts the Weekly Dev Chat Meetup group, making it easy for new folks to find us and RSVP.
59+
links:
60+
- label: Website
61+
url: https://edmontonunlimited.com/
62+
- label: Meetup Group
63+
url: https://www.meetup.com/startupedmonton/
4864

4965
chris:
5066
name: Chris
67+
tier: Individual Donor
5168
description: Thanks to Chris for being an individual donor.
5269

5370
years:

‎docs/sponsors/index.md‎

Lines changed: 83 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,94 @@
22
hide:
33
- toc
44
---
5-
# Help and Sponsorship
5+
# Support
66

7-
The best way you can help the Weekly Dev Chat is to attend the events as the kind, supportive, and respectful person you are. A close second is to share the Weekly Dev Chat with others who might benefit.
7+
<div class="wdc-sponsors-page" markdown>
88

9-
We also need volunteers to help with a variety of tasks from helping with events, admin work, website maintenance, social media, etc. If you are interested in volunteering, please reach out to Chris via email at <chris.cumming@saturdaymp.com>.
9+
<p>
10+
Like the Weekly Dev Chat and want to help? Then follow the steps below.
11+
</p>
1012

11-
The final way you can help is by sponsoring SaturdayMP, the main Weekly Dev Chat sponsor, via GitHub [sponsors](https://github.com/sponsors/saturdaymp). Saturday MP pays for Zoom, hosting, food for in real life (IRL) events, and other expenses.
13+
<section class="support">
14+
<div class="support-card">
15+
<div class="support-k">01</div>
16+
<h3>Show up</h3>
17+
<p>Attending events is the best way to support the Weekly Dev Chat. Bring your curiousity and be willing to share your knowledge and learn from others.</p>
18+
</div>
19+
<div class="support-card">
20+
<div class="support-k">02</div>
21+
<h3>Spread the Word</h3>
22+
<p>Invite people who follow our values to our events. Everyone and anyone is welcome kind, supportive, and respectful of others.</p>
23+
</div>
24+
<div class="support-card">
25+
<div class="support-k">03</div>
26+
<h3>Sponsor/Volunteer</h3>
27+
<p>Help keep the lights on and/or with the various other tasks required to keep Weekly Dev Chat going.</p>
28+
<a class="support-cta" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">GitHub Sponsors →</a>
29+
<a class="support-cta" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Contact →</a>
30+
</div>
31+
</section>
1232

13-
If you have any other ideas for helping Weekly Dev Chat please give [Chris](mailto:chris.cumming@saturdaymp.com) a shout. Thank you for your help and support, it is much appreciated.
33+
Thanks to our current and past supporters!
1434

1535
{% for year in sponsors.years.keys() | sort(reverse=true) %}
16-
## {{ year }}
17-
18-
{% for id in (sponsors.years[year].corporate or []) + (sponsors.years[year].individual or []) %}
19-
{% if id in sponsors.sponsors %}
20-
{% set s = sponsors.sponsors[id] %}
21-
{% if s.image %}![{{ s.name }}]({{ s.image }}){: style="width:150px;float: left;padding-right: 10px;"}
22-
{% endif %}
23-
**{% if s.link %}[{{ s.name }}]({{ s.link }}){% else %}{{ s.name }}{% endif %}**
24-
25-
{% if s.description %}{{ s.description }}{% endif %}
26-
27-
<div style="clear: both;"></div>
28-
29-
{% else %}
36+
{% set ids = (sponsors.years[year].corporate or []) + (sponsors.years[year].individual or []) %}
37+
<section class="year-group" data-year="{{ year }}">
38+
<div class="year-header">
39+
<h2 class="year-num" id="year-{{ year }}">{{ year }}</h2>
40+
<span class="year-meta">{{ ids|length }} sponsor{{ '' if ids|length == 1 else 's' }}</span>
41+
<div class="year-rule"></div>
42+
</div>
43+
<div class="sponsor-grid">
44+
{% for id in ids %}
45+
{% if id in sponsors.sponsors %}
46+
{% set s = sponsors.sponsors[id] %}
47+
{% set card_links = s.links if s.links else ([{'label': s.link_label or 'Website', 'url': s.link}] if s.link else []) %}
48+
<div class="sponsor-card" tabindex="0">
49+
<div class="card-face card-front">
50+
<div class="card-logo">
51+
{% if s.image %}<img src="{{ s.image }}" alt="{{ s.name }}">{% else %}<div class="card-logo-placeholder">{{ s.name[0] }}</div>{% endif %}
52+
</div>
53+
<div class="card-footer">
54+
<span class="card-tier">{{ s.tier or 'Sponsor' }}</span>
55+
<span class="card-hint">hover for info</span>
56+
</div>
57+
</div>
58+
<div class="card-face card-back">
59+
<div class="card-back-inner">
60+
{% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
61+
<h4 class="card-back-name">{{ s.name }}</h4>
62+
{% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
63+
{% if card_links %}
64+
<div class="card-back-links">
65+
{% for l in card_links %}
66+
<a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} <span class="arrow">↗</span></a>
67+
{% endfor %}
68+
</div>
69+
{% endif %}
70+
</div>
71+
</div>
72+
</div>
73+
{% else %}
3074
> **WARNING:** Unknown sponsor ID `{{ id }}` referenced in `{{ year }}`. Check `data/sponsors.yml` for a typo.
31-
32-
{% endif %}
33-
{% endfor %}
75+
{% endif %}
76+
{% endfor %}
77+
</div>
78+
</section>
3479
{% endfor %}
80+
81+
<section class="become-sponsor">
82+
<div class="become-inner">
83+
<div>
84+
<div class="eyebrow"><span class="dot"></span> Want on this page?</div>
85+
<h3>Become a sponsor</h3>
86+
<p>Any amount helps cover Zoom, hosting, and the occasional IRL pizza. Sponsor Saturday MP and you'll be listed under this year's supporters.</p>
87+
</div>
88+
<div class="become-ctas">
89+
<a class="btn primary" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Sponsor on GitHub</a>
90+
<a class="btn ghost" href="mailto:chris.cumming@saturdaymp.com">Email Chris</a>
91+
</div>
92+
</div>
93+
</section>
94+
95+
</div>

0 commit comments

Comments
 (0)