Add GitHub sponsors support and enhance contributing page: Introduce a new script for syncing GitHub sponsors in package.json. Update contributing.md to acknowledge contributors and sponsors, and enhance the contributing page with a dedicated section for sponsors. Improve styles for sponsor-related content in SCSS files and update templates to include sponsor information across relevant pages.

This commit is contained in:
Hananoshika Yomaru 2026-05-21 11:40:42 -07:00
parent 1a26d53730
commit 78180176b1
15 changed files with 288 additions and 18 deletions

View file

@ -345,6 +345,28 @@ h3 {
margin-bottom: 12px;
}
.sponsors-intro {
max-width: 680px;
margin: -10px 0 20px;
color: var(--soft-ink);
}
.sponsors-cta {
margin: 12px 0 0;
color: var(--soft-ink);
font-size: 0.95rem;
}
.sponsors-cta a {
color: var(--accent);
text-decoration: none;
}
.sponsors-cta a:hover,
.sponsors-cta a:focus-visible {
text-decoration: underline;
}
.tree-cta {
min-height: clamp(680px, 92vh, 980px);
display: flex;

View file

@ -7,6 +7,30 @@
margin-bottom: 16px;
}
.contributing-page__thanks {
max-width: var(--prose-width);
margin: 0 0 24px;
color: var(--soft-ink);
font-size: 1rem;
line-height: 1.7;
p {
margin: 0;
}
a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
a:hover,
a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
}
.contributing-page__lead {
margin: 0 0 36px;
max-width: var(--prose-width);

View file

@ -8,7 +8,11 @@
{% block content %}
<section class="contributing-page">
<div class="container">
{% if page.content %}
<div class="contributing-page__thanks">{{ page.content | safe }}</div>
{% endif %}
{% include "partials/contributing-content.html" %}
</div>
</section>
{% include "partials/sponsors-section.html" %}
{% endblock content %}

View file

@ -13,4 +13,5 @@
{% include "partials/credits-content.html" %}
</div>
</section>
{% include "partials/sponsors-section.html" %}
{% endblock content %}

View file

@ -43,6 +43,8 @@
{% include "partials/community-section.html" %}
{% include "partials/sponsors-section.html" %}
<section id="browse-by-subject">
<div class="container">
<p class="section-kicker">Catalog</p>

View file

@ -1,4 +1,5 @@
{% set credits = load_data(path="data/credits.json", format="json") %}
{% set sponsors_data = load_data(path="data/github-sponsors.json", format="json") %}
{% set libraries = credits.libraries | sort(attribute="name") %}
<div class="credits-prose">
@ -7,6 +8,10 @@
{{ credits.contributors_note }}
<a href="{{ get_url(path='/') | safe }}#contributors">View contributors</a>.
</p>
<p class="credits-contributors-note">
Special thanks to our GitHub Sponsors for helping keep this project free and open.
<a href="{{ sponsors_data.profile_url | safe }}" rel="noopener noreferrer">Sponsor Open Free Books</a>.
</p>
<section class="credits-block" aria-labelledby="credits-project-heading">
<h2 id="credits-project-heading" class="credits-section-title">This project</h2>

View file

@ -0,0 +1,42 @@
{% set sponsors_data = load_data(path="data/github-sponsors.json", format="json") %}
<section id="github-sponsors">
<div class="container">
<p class="section-kicker">Support</p>
<h2 class="section-title">{{ sponsors_data.title }}</h2>
<p class="sponsors-intro">{{ sponsors_data.intro }}</p>
{% if sponsors_data.sponsors and sponsors_data.sponsors | length > 0 %}
<ul class="contributors-avatar-grid sponsors-avatar-grid" role="list" data-scroll-reveal>
{% for sponsor in sponsors_data.sponsors %}
<li class="contributors-avatar-item" data-scroll-reveal-card>
<a
href="{{ sponsor.url | safe }}"
class="contributor-avatar-btn"
rel="noopener noreferrer"
aria-label="GitHub sponsor {{ sponsor.name }}"
title="{{ sponsor.name }}"
>
<img
class="contributor-avatar-img"
src="{{ sponsor.avatar | safe }}"
alt=""
width="48"
height="48"
loading="lazy"
decoding="async"
/>
</a>
</li>
{% endfor %}
</ul>
<p class="sponsors-cta">
<a href="{{ sponsors_data.profile_url | safe }}" rel="noopener noreferrer">Thank you to all sponsors</a>
</p>
{% else %}
<p class="sponsors-cta">
No public sponsors listed yet. <a href="{{ sponsors_data.profile_url | safe }}" rel="noopener noreferrer">Sponsor on GitHub</a>.
</p>
{% endif %}
</div>
</section>