Re-design the sponsors page

AGENTS.md

@@ -11,8 +11,28 @@ Weekly Dev Chat website — MkDocs Material static site. Read `mkdocs.yml` and r
 - Use `./create_post.sh` to scaffold a new post (calculates next Tuesday automatically).
 - **Multiple posts on the same date:** If a date folder already has an `index.md`, prefix the filename with a number and dash (e.g., `0-index.md`). The newest/latest post should use the lowest number so it appears first on the homepage. The original `index.md` keeps its name.
 
+## Sponsors
+
+- Sponsor data lives in `data/sponsors.yml` (loaded via the `mkdocs-macros` plugin). The file's header comment documents the schema and consent policy.
+- Sponsor logos go in `docs/assets/sponsors/`. Reference them with just the filename in the `image:` field.
+- Optimize logos with `python3 scripts/optimize_image.py <path>` before committing.
+- The page itself is `docs/sponsors/index.md`; styles are in `docs/stylesheets/sponsors.css`.
+
 ## Guardrails
 
 - Pushing to `main` triggers automatic deployment to production. Do not push without explicit approval.
 - Do not modify `.github/workflows/ci.yml` unless explicitly asked.
-- Verify changes build cleanly with `mkdocs serve` before committing.
+- Verify changes build cleanly with `docker compose run --rm app mkdocs serve` before committing.
+
+## Using Docker Compose
+
+All Python, mkdocs, and similar commands should run via Docker Compose to ensure consistent Python versions:
+
+```bash
+docker compose run --rm app <command>
+
+# Examples:
+docker compose run --rm app mkdocs serve
+docker compose run --rm app mkdocs build
+docker compose run --rm app python -m pip list
+```

README.md

@@ -173,6 +173,10 @@ python scripts/find_tags_categories.py
 
 This script requires `pyyaml`, which is included in `requirements.txt`. It is also run automatically by the `create_post` scripts when scaffolding a new post.
 
+## Updating Sponsors
+
+Sponsor and donor entries live in [`data/sponsors.yml`](data/sponsors.yml), which is loaded into the sponsors page via the [`mkdocs-macros`](https://mkdocs-macros-plugin.readthedocs.io/) plugin. The file's header comment documents the schema, consent policy, and how to reference one sponsor across multiple years. Place sponsor logos in `docs/assets/sponsors/` and reference the filename via the `image:` field (e.g. `image: example.png` → `docs/assets/sponsors/example.png`). Optimize logos with `python3 scripts/optimize_image.py` before committing.
+
 ## Project Structure
 
 ```
@@ -185,8 +189,11 @@ This script requires `pyyaml`, which is included in `requirements.txt`. It is al
 ├── requirements-dev.in         # Dev-only dependency pins (e.g. Pillow)
 ├── requirements-dev.txt        # Compiled dev dependencies
 ├── scripts/
-│   ├── find_tags_categories.py # List all existing tags and categories
+│   |── find_tags_categories.py # List all existing tags and categories
+│   |── find_tags_categories.py # List all existing tags and categories
 │   └── optimize_image.py       # Optimize images for the web (PNG/JPEG → WebP)
+├── data/
+│   └── sponsors.yml           # Sponsor & donor data (consumed by macros plugin)
 ├── .github/
 │   ├── dependabot.yml         # Dependabot configuration
 │   └── workflows/
@@ -198,11 +205,13 @@ This script requires `pyyaml`, which is included in `requirements.txt`. It is al
     ├── tags.md                # Tags index page (auto-populated by tags plugin)
     ├── hosts/                 # Current hosts
     ├── past-hosts/            # Past hosts
-    ├── sponsors/              # Sponsors
+    ├── sponsors/              # Sponsors page (index.md)
     ├── posts/                 # Blog posts (YYYY/MM/DD/)
     ├── assets/                # Images, logos
+    │   └── sponsors/          # Sponsor logos (referenced by data/sponsors.yml)
     └── stylesheets/
-        └── extra.css          # Custom CSS
+        ├── extra.css          # Site-wide custom CSS
+        └── sponsors.css       # Sponsors page styling
 ```
 
 ## Common Commands

data/sponsors.yml

@@ -0,0 +1,73 @@
+# Sponsors & Donors data for Weekly Dev Chat
+#
+# Sponsor details are defined once under `sponsors:` and referenced by ID
+# in each year under `years:`. This avoids duplicating a sponsor's record
+# when they return across multiple years — update their info in one place.
+#
+# Sponsor fields:
+#   name         (required) Display name.
+#   image        (optional) Filename in docs/sponsors/.
+#   tier         (optional) Short label shown on the card (e.g. "Primary Sponsor").
+#   description  (optional) Short thank-you or description line.
+#   links        (optional) List of { label, url } pairs shown on the card back.
+#   link         (optional, legacy) Single URL — used only if `links` is not set.
+#   link_label   (optional, legacy) Label for the legacy single `link`.
+#
+# Consent policy: only list individual donors by name with their explicit
+# opt-in consent. When in doubt, leave them out or use "Anonymous".
+#
+# Example (commented out — copy, uncomment, and edit when adding a sponsor):
+#
+# sponsors:
+#   example-org:
+#     name: Example Org
+#     image: example.png
+#     tier: Community Partner
+#     description: Thanks to Example Org for supporting the community.
+#     links:
+#       - label: Website
+#         url: https://example.com/
+
+sponsors:
+  saturday-mp:
+    name: Saturday Morning Productions
+    image: saturday-morning-productions.jpeg
+    tier: Primary Sponsor
+    description: Main financial sponsor.
+    links:
+      - label: Website
+        url: https://saturdaymp.com/
+      - label: GitHub Sponsors
+        url: https://github.com/sponsors/saturdaymp
+
+  dev-edmonton:
+    name: Dev Edmonton Society
+    image: dev-edmonton.png
+    tier: Community Partner
+    description: Slack workspace and other promotional support.
+    links:
+      - label: Website
+        url: https://devedmonton.com/
+
+  edmonton-unlimited:
+    name: Edmonton Unlimited
+    image: edmonton-unlimited.jpeg
+    tier: Community Partner
+    description: Meetup group and other promotional support.
+
+    links:
+      - label: Website
+        url: https://edmontonunlimited.com/
+      - label: Meetup
+        url: https://www.meetup.com/Edmonton-Unlimited/
+
+years:
+  2026:
+    - saturday-mp
+    - dev-edmonton
+    - edmonton-unlimited
+
+  2025:
+    - saturday-mp
+    - dev-edmonton
+    - edmonton-unlimited

docs/posts/2026/05/05/index.md

@@ -23,4 +23,4 @@ Others have commented on their [recent decline](https://dbushell.com/2026/04/29/
 
 Everyone and anyone are welcome to [join](https://weeklydevchat.com/join/) as long as you are kind, supportive, and respectful of others. Zoom link will be posted at 12pm MDT.
 
-![alt text](github.png)
+![alt text](github.webp)

docs/sponsors/index.md

@@ -2,33 +2,132 @@
 hide:
   - toc
 ---
-# Help and Sponsorship
+# Sponsors
 
-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.
+<div class="wdc-sponsors-page" markdown>
+  <p class="lead">The Weekly Dev Chat is powered by community members like you!</p>
+  <section class="support">
+    <div class="support-card">
+      <h3>Show Up</h3>
+      <p>Attending events is the best way to support the Weekly Dev Chat.  Bring your curiosity and be willing to share your knowledge and learn from others.</p>
+    </div>
+    <div class="support-card">
+      <h3>Spread the Word</h3>
+      <p>Invite others who follow our values to an event.  Everyone and anyone is welcome as long as they are kind, supportive, and respectful of others.</p>
+    </div>
+    <div class="support-card">
+      <h3>Sponsor</h3>
+      <p>Help keep the lights on and get things done with contributions of money, time, skills, or other resources.  Every little bit helps.</p>
+    </div>
+  </section>
 
-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>.
+  <section class="become-sponsor">
+    <div class="eyebrow"><span class="dot"></span> Want on this page?</div>
+    <div class="become-inner">
+      <div>
+        <h3>Thank you to our Current and Past Sponsors!</h3>
+        <p>Email us if you have any questions or would like to make non-financial contributions.</p>
+      </div>
+      <div class="become-ctas">
+        <a class="btn primary" href="https://buy.stripe.com/dRmaEY4HJ2xUgcG8PdfIs01">Sponsor</a>
+        <a class="btn primary" href="mailto:chris@weeklydevchat.com">Email</a>
+      </div>
+    </div>
+  </section>
 
-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.
+  {% for year in sponsors.years.keys() | sort(reverse=true) %}
+  {% set valid_ids = (sponsors.years[year] or []) | select('in', sponsors.sponsors) | list %}
+  <section class="year-group" data-year="{{ year }}">
+    <div class="year-header">
+      <h2 class="year-num" id="year-{{ year }}">{{ year }}</h2>
+      <span class="year-meta">{{ valid_ids|length }} sponsor{{ '' if valid_ids|length == 1 else 's' }} (click/tap for info)</span>
+      <div class="year-rule"></div>
+    </div>
+    <div class="sponsor-grid">
+      {% for id in valid_ids %}
+          {% set s = sponsors.sponsors[id] %}
+          {% set card_links = s.links if s.links else ([{'label': s.link_label or 'Website', 'url': s.link}] if s.link else []) %}
+          <div class="sponsor-card" role="button" tabindex="0">
+            <div class="card-face card-front">
+              <div class="card-logo">
+                {% if s.image %}<img src="../assets/sponsors/{{ s.image }}" alt="{{ s.name }}">{% else %}<div class="card-logo-placeholder">{{ (s.name or 'Anonymous')[0] }}</div>{% endif %}
+              </div>
+              <div class="card-footer">
+                <span class="card-tier">{{ s.name or 'Sponsor' }}</span>
+              </div>
+            </div>
+            <div class="card-face card-back">
+              <div class="card-back-inner">
+                {% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
+                <h4 class="card-back-name">{{ s.name }}</h4>
+                {% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
+                {% if card_links %}
+                  <div class="card-back-links">
+                    {% for l in card_links %}
+                      <a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} <span class="arrow">↗</span></a>
+                    {% endfor %}
+                  </div>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endfor %}
 
-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.
+  <dialog id="wdc-sponsor-modal">
+    <div class="wdc-sponsor-modal-inner">
+      <button class="wdc-sponsor-modal-close" aria-label="Close">&#x2715;</button>
+      <div class="wdc-sponsor-modal-tier"></div>
+      <h3 class="wdc-sponsor-modal-name"></h3>
+      <p class="wdc-sponsor-modal-desc"></p>
+      <div class="wdc-sponsor-modal-links"></div>
+    </div>
+  </dialog>
 
-Sponsors
---------
+</div>
 
-![](smp.webp){: style="width:150px;float: left;padding-right: 10px;"}
+<script>
+(function () {
+  var modal = document.getElementById('wdc-sponsor-modal');
+  if (!modal) return;
+  var mTier  = modal.querySelector('.wdc-sponsor-modal-tier');
+  var mName  = modal.querySelector('.wdc-sponsor-modal-name');
+  var mDesc  = modal.querySelector('.wdc-sponsor-modal-desc');
+  var mLinks = modal.querySelector('.wdc-sponsor-modal-links');
+  var mClose = modal.querySelector('.wdc-sponsor-modal-close');
 
-**Saturday Morning Productions**
+  function openModal(card) {
+    var tier  = card.querySelector('.card-back-tier');
+    var name  = card.querySelector('.card-back-name');
+    var desc  = card.querySelector('.card-back-desc');
+    var links = card.querySelector('.card-back-links');
+    mTier.textContent  = tier  ? tier.textContent.trim()  : '';
+    mTier.hidden       = !tier;
+    mName.textContent  = name  ? name.textContent.trim()  : '';
+    mDesc.textContent  = desc  ? desc.textContent.trim()  : '';
+    mDesc.hidden       = !desc;
+    mLinks.innerHTML   = links ? links.innerHTML           : '';
+    mLinks.hidden      = !links;
+    modal.showModal();
+  }
 
-Thanks to [Saturday MP](https://saturdaymp.com/) for providing hosting, Zoom, and more.
+  document.querySelectorAll('.wdc-sponsors-page .sponsor-card').forEach(function (card) {
+    card.addEventListener('click', function () {
+      card.blur();
+      openModal(card);
+    });
+    card.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        card.blur();
+        openModal(card);
+      }
+    });
+  });
 
-![](devEd.webp){: style="width:150px;float: left;padding-right: 10px;"}
-
-**Dev Edmonton Society**
-
-Thanks to [DES](https://devedmonton.com/) for providing a Slack channel.
-
-![](EdmontonUnlimited.webp){: style="width:150px;float: left;padding-right: 10px;"}
-
-**Edmonton Unlimited**
-
-Thanks to [Edmonton Unlimited](https://edmontonunlimited.com/) for providing a [Meetup Link](https://edmontonunlimited.com/).
+  mClose.addEventListener('click', function () { modal.close(); });
+  modal.addEventListener('click', function (e) { if (e.target === modal) modal.close(); });
+})();
+</script>

docs/stylesheets/extra.css

@@ -1,3 +1,13 @@
+.md-typeset h1 {
+  font-weight: 300;
+  font-size: clamp(32px, 4.5vw, 48px);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--md-primary-fg-color, #009688);
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
 .logo-article-img {
   width: 300px;
   margin-left: 20px;
@@ -8,4 +18,4 @@
     float: right;
     margin-left: 10px;
   }
-}
+}