From 786ebb4c782c6d94b632c37b60da4e1985e02a4d Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Wed, 21 Oct 2026 08:57:55 +0800 Subject: [PATCH] feat(website): show the sponsor band on category pages The sponsor band rendered only on the homepage, so visitors who entered on a category page and never opened the homepage saw no sponsors. Category, subcategory, group, and Stdlib pages now show the same band between the hero and the table. Co-Authored-By: Claude --- DESIGN.md | 2 +- website/build.py | 1 + website/templates/category.html | 2 ++ website/tests/test_build.py | 31 +++++++++++++++++++++++++++++++ 4 files changed, 35 insertions(+), 1 deletion(-) diff --git a/DESIGN.md b/DESIGN.md index 69b99542..8cad2e73 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -162,7 +162,7 @@ The component vocabulary is small and table-led. Source of truth: `website/stati - **Hero**. Magazine-cover headline, dark earthy ground, kicker and proof microcopy, primary CTA button using `--hero-btn-start` / `--hero-btn-end`. Subtle grid plus slow sheen. Respects `prefers-reduced-motion`. - **Jump links**. One per use case in a category hero, plus one for the guide. Underlined like the intro's links, with a trailing ↓. Never tag-styled: tags filter the table or open another page, jump links only scroll. - **Guide band**. Everything in a category intro after its "How to choose" list. It sits below the table on the hero's dark gradient, with its H2 above the text. -- **Sponsor band**. Sits below the hero on the home page, on `--bg-paper-strong`. Editorial layout, not a logo wall. Sponsor links share the global accent treatment. +- **Sponsor band**. Sits below the hero on the home page and category pages, on `--bg-paper-strong`. Editorial layout, not a logo wall. Sponsor links share the global accent treatment. - **CTA**. Warm `--cta-bg`, full-bleed within shell. The button itself uses accent tokens. - **Footer**. Dark warm charcoal, part of the same system. Footer links share the global hover and focus treatment. - **Search**. Pill input with `--search-inset` interior and `--search-focus-ring` focus ring. Focus shadow uses `--search-focus-shadow`. diff --git a/website/build.py b/website/build.py index 5d90459b..24b35b72 100755 --- a/website/build.py +++ b/website/build.py @@ -894,6 +894,7 @@ def build(repo_root: Path) -> None: parent_category=parent_category, group_categories=group_categories, category_json_ld=category_json_ld, + sponsors=sponsors, ), encoding="utf-8", ) diff --git a/website/templates/category.html b/website/templates/category.html index 4563dc4f..6b867269 100644 --- a/website/templates/category.html +++ b/website/templates/category.html @@ -208,6 +208,8 @@ {% endmacro %} +{% include "_sponsor_band.html" %} +
{% if entry_groups %} diff --git a/website/tests/test_build.py b/website/tests/test_build.py index 1ccefc6b..eed15fdc 100644 --- a/website/tests/test_build.py +++ b/website/tests/test_build.py @@ -490,6 +490,37 @@ class TestBuild: assert 'href="https://sponsor.example.com/?ref=x&utm_source=awesome-python&utm_content=website"' in index_html assert "utm_content=readme" not in index_html + def test_category_page_shows_sponsor_band(self, tmp_path): + readme = textwrap.dedent("""\ + # Awesome Python + + Intro. + + ## **Sponsors** + + - [Sponsor](https://sponsor.example.com) - Sponsored tool. + + ## Projects + + **Tools** + + ## Widgets + + - [w1](https://example.com) - A widget. + + # Contributing + + Help! + """) + (tmp_path / "README.md").write_text(readme, encoding="utf-8") + self._copy_real_templates(tmp_path) + + build(tmp_path) + + category_html = (tmp_path / "website" / "output" / "categories" / "widgets" / "index.html").read_text(encoding="utf-8") + assert 'href="https://sponsor.example.com"' in category_html + assert '' in category_html + def test_build_cleans_stale_output(self, tmp_path): readme = textwrap.dedent("""\ # T