feat(website): add /sponsorship/ landing page

Adds a dedicated sponsorship page at /sponsorship/ built from the Jinja2
template, with hero stats, tier cards, and CSS. Updates the index.html
sponsor sidebar link to point to /sponsorship/ instead of the GitHub
SPONSORSHIP.md. Adds the URL to the sitemap and test fixtures.

Also renames .impeccable.md to DESIGN.md.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-05-03 09:35:39 +08:00
parent 64781112d8
commit c68b985d7c
7 changed files with 590 additions and 10 deletions
View File
+1 -1
View File
@@ -37,7 +37,7 @@ Your sponsorship puts your product in front of developers at the exact moment th
## Get Started
Email [vinta.chen@gmail.com](mailto:vinta.chen@gmail.com?subject=awesome-python%20Sponsorship) with:
Email [vinta.chen@gmail.com](mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship) with:
- **Tier:** Headline Sponsor ($500/mo) or Featured Sponsor ($150/mo)
- **Content:** Product name, URL, logo, and description (Headline tier) or `[Name](URL) - Description.` entry (Featured tier)
+21
View File
@@ -25,6 +25,9 @@ BUILTIN_SLUG = "built-in"
BUILTIN_PATH = f"/categories/{BUILTIN_SLUG}/"
BUILTIN_PUBLIC_URL = f"{SITE_URL}categories/{BUILTIN_SLUG}/"
SPONSORSHIP_PATH = "/sponsorship/"
SPONSORSHIP_PUBLIC_URL = f"{SITE_URL}sponsorship/"
SOURCE_TYPE_DOMAINS = {
"docs.python.org": "Built-in",
"gitlab.com": "GitLab",
@@ -434,6 +437,23 @@ def build(repo_root: Path) -> None:
encoding="utf-8",
)
sponsorship_dir = site_dir / "sponsorship"
sponsorship_dir.mkdir(parents=True, exist_ok=True)
tpl_sponsorship = env.get_template("sponsorship.html")
hero_stats: list[str] = []
if repo_stars:
hero_stats.append(f"{repo_stars}+ stars on GitHub")
hero_stats.append(f"{total_entries}+ curated projects")
hero_stats.append(f"Updated {build_date.strftime('%B %d, %Y')}")
(sponsorship_dir / "index.html").write_text(
tpl_sponsorship.render(
total_entries=total_entries,
total_categories=len(categories),
hero_stats=hero_stats,
),
encoding="utf-8",
)
seen_subcats: set[tuple[str, str]] = set()
for category in categories:
cat_url_prefix = f"/categories/{category['slug']}/"
@@ -491,6 +511,7 @@ def build(repo_root: Path) -> None:
sitemap_urls.append((BUILTIN_PUBLIC_URL, sitemap_date))
for cat_slug, sub_slug in sorted(seen_subcats):
sitemap_urls.append((subcategory_public_url(cat_slug, sub_slug), sitemap_date))
sitemap_urls.append((SPONSORSHIP_PUBLIC_URL, sitemap_date))
write_sitemap_xml(site_dir / "sitemap.xml", sitemap_urls)
(site_dir / "index.md").write_text(markdown_index, encoding="utf-8")
(site_dir / "llms.txt").write_text(llms_txt, encoding="utf-8")
+308 -1
View File
@@ -1082,6 +1082,298 @@ th[data-sort].sort-asc::after {
color: var(--accent);
}
.sponsorship-hero .category-hero-shell {
padding-bottom: clamp(3.25rem, 6vw, 5rem);
gap: clamp(2rem, 5vw, 3.5rem);
}
.sponsorship-hero-copy h1 {
font-size: clamp(3.4rem, 8.5vw, 6.5rem);
}
.sponsorship-proof {
margin-top: 1.6rem;
}
.sponsorship-proof .proof-sep {
color: oklch(100% 0 0 / 0.32);
margin-inline: 0.15rem;
}
.sponsorship-hero .hero-actions {
margin-top: 1.9rem;
}
.sponsorship-section {
padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
border-bottom: 1px solid var(--line);
}
.sponsorship-section:first-of-type {
padding-top: clamp(3.25rem, 6vw, 4.75rem);
}
.sponsorship-section:last-of-type {
border-bottom: 0;
padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.sponsorship-getstarted {
background: var(--cta-bg);
border-top: 1px solid var(--line);
}
.sponsorship-shell {
display: grid;
grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
gap: clamp(1.75rem, 5vw, 4rem);
align-items: start;
}
.sponsorship-meta {
display: flex;
flex-direction: column;
gap: 0.85rem;
position: sticky;
top: 1.5rem;
}
.sponsorship-meta .section-label {
margin-bottom: 0;
font-size: var(--text-lg);
}
.sponsorship-meta-note {
color: var(--ink-muted);
font-size: var(--text-sm);
line-height: 1.55;
}
.sponsorship-body {
display: flex;
flex-direction: column;
gap: 1.6rem;
font-size: var(--text-lg);
color: var(--ink-soft);
line-height: 1.7;
}
.sponsorship-body p {
text-wrap: pretty;
}
.sponsorship-body code {
font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
font-size: 0.92em;
padding: 0.08rem 0.4rem;
border-radius: 0.4rem;
background: var(--bg-paper-strong);
color: var(--ink);
}
.sponsorship-body a:not(.hero-action):not(.tier-cta) {
color: var(--accent-deep);
text-decoration: underline;
text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em;
transition: color 180ms ease;
}
.sponsorship-body a:not(.hero-action):not(.tier-cta):hover {
color: var(--accent);
}
.sponsorship-lede {
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.6vw, 2rem);
line-height: 1.25;
color: var(--ink);
letter-spacing: -0.01em;
text-wrap: pretty;
}
.sponsorship-facts {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.4rem;
border-top: 1px solid var(--line);
padding-top: 1.6rem;
}
.sponsorship-facts > div {
display: grid;
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2rem);
align-items: baseline;
}
.sponsorship-facts dt {
font-size: var(--text-xs);
font-weight: 800;
letter-spacing: 0.05em;
color: var(--ink);
}
.sponsorship-facts dd {
color: var(--ink-soft);
font-size: var(--text-base);
line-height: 1.65;
}
.tier-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.75rem);
}
.tier {
display: flex;
flex-direction: column;
gap: 1rem;
padding-block: 1.65rem;
border-top: 1px solid var(--line-strong);
}
.tier-eyebrow {
font-size: var(--text-xs);
font-weight: 800;
letter-spacing: 0.05em;
color: var(--ink);
}
.tier-price {
display: flex;
align-items: baseline;
gap: 0.55rem;
margin-bottom: 0.25rem;
}
.tier-amount {
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 4.5rem);
font-weight: 600;
line-height: 0.9;
letter-spacing: -0.025em;
color: var(--ink);
}
.tier-cadence {
color: var(--ink-muted);
font-size: var(--text-base);
font-weight: 600;
letter-spacing: 0.01em;
}
.tier-summary {
font-size: var(--text-lg);
color: var(--ink);
line-height: 1.5;
text-wrap: pretty;
}
.tier-includes {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
border-top: 1px solid var(--line);
padding-top: 1.1rem;
}
.tier-includes li {
position: relative;
padding-left: 1.4rem;
color: var(--ink-soft);
font-size: var(--text-base);
line-height: 1.6;
}
.tier-includes li::before {
content: "";
position: absolute;
left: 0;
top: 0.65rem;
width: 0.55rem;
height: 1px;
background: var(--line-strong);
}
.tier-cta {
align-self: start;
margin-top: 0.75rem;
color: var(--accent-deep);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: underline;
text-decoration-color: var(--accent-underline);
text-underline-offset: 0.22em;
transition: color 180ms ease, text-decoration-color 180ms ease;
}
.tier-cta:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
.past-sponsors {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.past-sponsors li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.65rem;
padding-block: 0.4rem;
}
.past-sponsors a {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
transition: color 180ms ease;
}
.past-sponsors a:hover {
color: var(--accent-deep);
}
.past-sponsor-desc {
color: var(--ink-muted);
font-size: var(--text-base);
}
.sponsorship-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 0.5rem;
}
.sponsorship-cta-row .hero-action-primary {
color: var(--hero-text);
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.sponsorship-fineprint {
font-size: var(--text-base);
color: var(--ink-muted);
}
.final-cta {
padding-block: clamp(3rem, 7vw, 5.5rem);
background: var(--cta-bg);
@@ -1227,10 +1519,25 @@ th[data-sort].sort-asc::after {
.hero-grid,
.results-intro,
.sponsor-shell {
.sponsor-shell,
.sponsorship-shell {
grid-template-columns: 1fr;
}
.sponsorship-meta {
position: static;
}
.tier-list {
grid-template-columns: 1fr;
gap: 0;
}
.sponsorship-facts > div {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.hero-category-nav {
grid-template-columns: 1fr;
gap: 0.95rem;
+1 -8
View File
@@ -85,14 +85,7 @@
<div class="section-shell sponsor-shell">
<header class="sponsor-meta">
<p class="section-label" id="sponsor-heading">Sponsors</p>
<a
class="sponsor-become"
href="https://github.com/vinta/awesome-python/blob/master/SPONSORSHIP.md"
target="_blank"
rel="noopener"
>
Become a sponsor
</a>
<a class="sponsor-become" href="/sponsorship/"> Become a sponsor </a>
</header>
<ul class="sponsor-list">
{% for sponsor in sponsors %}
+252
View File
@@ -0,0 +1,252 @@
{% extends "base.html" %}
{% block title %}Sponsor Awesome Python{% endblock %}
{% block description %}Sponsorship for awesome-python: tiers, audience, and how to get your product in front of professional Python developers evaluating tools for production use.{% endblock %}
{% block canonical_url %}https://awesome-python.com/sponsorship/{% endblock %}
{% block alternate_links %}{% endblock %}
{% block header %}
<header class="category-hero sponsorship-hero">
<div class="hero-sheen" aria-hidden="true"></div>
<div class="hero-noise" aria-hidden="true"></div>
<div class="category-hero-shell">
<nav class="hero-topbar category-topbar" aria-label="Site">
<a href="/" class="hero-brand-mini">Awesome Python</a>
<div class="hero-topbar-actions">
<a href="/#library-index" class="hero-topbar-link">All projects</a>
<a
href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
class="hero-topbar-link hero-topbar-link-strong"
target="_blank"
rel="noopener"
>Submit a project</a
>
</div>
</nav>
<div class="category-hero-copy sponsorship-hero-copy">
<p class="hero-kicker">Sponsorship</p>
<h1>Sponsor Awesome Python</h1>
<p class="category-subtitle">
The #10 most-starred repository on GitHub, and the list Python
developers check when choosing what to use. Your sponsorship puts your
product in front of them at the moment of decision.
</p>
{% if hero_stats %}
<p class="hero-proof sponsorship-proof">
{% for stat in hero_stats %}{{ stat }}{% if not loop.last %}
<span class="proof-sep">/</span> {% endif %}{% endfor %}
</p>
{% endif %}
<div class="hero-actions">
<a
href="mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship"
class="hero-action hero-action-primary"
>Email vinta.chen@gmail.com</a
>
<a
href="https://github.com/vinta/awesome-python"
class="hero-action hero-action-secondary"
target="_blank"
rel="noopener"
>View the repository</a
>
</div>
</div>
</div>
</header>
{% endblock %} {% block content %}
<section class="sponsorship-section sponsorship-audience" data-reveal>
<div class="section-shell sponsorship-shell">
<header class="sponsorship-meta">
<p class="section-label">Audience</p>
</header>
<div class="sponsorship-body">
<p class="sponsorship-lede">
Professional Python developers evaluating libraries and tools for
production use. Not beginners browsing tutorials. People making adoption
decisions.
</p>
<dl class="sponsorship-facts">
<div>
<dt>Who visits</dt>
<dd>
Mid to senior Python developers arriving with a specific question in
mind: a maintained ORM, a fast HTTP client, a task queue worth
running in production.
</dd>
</div>
<div>
<dt>Where they come from</dt>
<dd>
Google Search, GitHub, Reddit, YouTube, ChatGPT and other LLMs,
Hacker News.
</dd>
</div>
<div>
<dt>Why it works</dt>
<dd>
The list ranks on the first page of Google for &ldquo;best Python
libraries,&rdquo; is referenced by ChatGPT and other LLMs when
recommending Python tools, and is the canonical reference developers
send each other.
</dd>
</div>
</dl>
</div>
</div>
</section>
<section class="sponsorship-section sponsorship-tiers" data-reveal>
<div class="section-shell sponsorship-shell">
<header class="sponsorship-meta">
<p class="section-label">Tiers</p>
<p class="sponsorship-meta-note">
One upfront payment per term. Setup takes less than 24 hours.
</p>
</header>
<div class="sponsorship-body">
<ol class="tier-list">
<li class="tier">
<p class="tier-eyebrow">Headline Sponsor</p>
<p class="tier-price">
<span class="tier-amount">$500</span>
<span class="tier-cadence">/ month</span>
</p>
<p class="tier-summary">
Top placement in the README, with logo. Logo on the website.
</p>
<ul class="tier-includes">
<li>
Large logo and one-line description (max 120 characters) pinned at
the very top of the README, above all project entries.
</li>
<li>Logo link in the sponsor section of awesome-python.com.</li>
</ul>
<a
href="mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship%20-%20Headline"
class="tier-cta"
>Email about Headline tier</a
>
</li>
<li class="tier">
<p class="tier-eyebrow">Featured Sponsor</p>
<p class="tier-price">
<span class="tier-amount">$150</span>
<span class="tier-cadence">/ month</span>
</p>
<p class="tier-summary">
Text link pinned at the top of the README. Text link on the website.
</p>
<ul class="tier-includes">
<li>
Text entry (<code>[Name](URL) - Description.</code>, max 120
characters) pinned at the top of the README, directly below
Headline sponsors.
</li>
<li>Text link in the sponsor section of awesome-python.com.</li>
</ul>
<a
href="mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship%20-%20Featured"
class="tier-cta"
>Email about Featured tier</a
>
</li>
</ol>
</div>
</div>
</section>
<section class="sponsorship-section sponsorship-past" data-reveal>
<div class="section-shell sponsorship-shell">
<header class="sponsorship-meta">
<p class="section-label">Previously sponsored by</p>
</header>
<div class="sponsorship-body">
<ul class="past-sponsors">
<li>
<a href="https://www.warp.dev/" target="_blank" rel="noopener"
>Warp</a
>
<span class="past-sponsor-desc"
>The terminal for modern developers.</span
>
</li>
</ul>
</div>
</div>
</section>
<section class="sponsorship-section sponsorship-getstarted" data-reveal>
<div class="section-shell sponsorship-shell">
<header class="sponsorship-meta">
<p class="section-label">Get started</p>
</header>
<div class="sponsorship-body">
<p class="sponsorship-lede">
Email
<a
href="mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship"
>vinta.chen@gmail.com</a
>
with the four items below.
</p>
<dl class="sponsorship-facts">
<div>
<dt>Tier</dt>
<dd>Headline Sponsor ($500/mo) or Featured Sponsor ($150/mo).</dd>
</div>
<div>
<dt>Content</dt>
<dd>
Product name, URL, logo, and description (Headline tier), or
<code>[Name](URL) - Description.</code> entry (Featured tier).
</dd>
</div>
<div>
<dt>Duration</dt>
<dd>1, 3, 6 months, or longer.</dd>
</div>
<div>
<dt>Payment method</dt>
<dd>US bank transfer (ACH/wire) or PayPal.</dd>
</div>
</dl>
<div class="sponsorship-cta-row">
<a
href="mailto:vinta.chen@gmail.com?subject=Awesome%20Python%20Sponsorship"
class="hero-action hero-action-primary"
>Email vinta.chen@gmail.com</a
>
</div>
</div>
</div>
</section>
<section class="sponsorship-section sponsorship-independence" data-reveal>
<div class="section-shell sponsorship-shell">
<header class="sponsorship-meta">
<p class="section-label">Editorial independence</p>
</header>
<div class="sponsorship-body">
<p>
Sponsorship is logo and link placement in the README header. It does not
influence which projects are listed. Listings are curated on merit
through the normal
<a
href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
target="_blank"
rel="noopener"
>contribution process</a
>.
</p>
<p class="sponsorship-fineprint">
We reserve the right to request changes to sponsor text, logos, or links
that are misleading, off-topic, or incompatible with the README
formatting.
</p>
</div>
</div>
</section>
{% endblock %}
+7
View File
@@ -129,6 +129,12 @@ class TestBuild:
"{% endblock %}",
encoding="utf-8",
)
(tpl_dir / "sponsorship.html").write_text(
'{% extends "base.html" %}{% block content %}'
"<h1>Sponsor</h1>"
"{% endblock %}",
encoding="utf-8",
)
(tpl_dir / "llms.txt").write_text(
"# Awesome Python\n"
"\n"
@@ -234,6 +240,7 @@ class TestBuild:
"https://awesome-python.com/categories/widgets/",
"https://awesome-python.com/categories/tools/",
"https://awesome-python.com/categories/widgets/sync/",
"https://awesome-python.com/sponsorship/",
]
assert len(lastmods) == len(locs)
assert all(start_date <= date.fromisoformat(lastmod) <= end_date for lastmod in lastmods)