feat(#53): GitHub Sponsors + Stripe Payment Link support CTAs#122
Merged
Conversation
Adds a SupportBlock component (in the footer) wiring the two revenue items from #53: - GitHub Sponsors link (recurring / MRR) via PUBLIC_SPONSORS_URL - Stripe Payment Link (one-time / revenue_status) via PUBLIC_SUPPORT_PAYMENT_URL Inert by default — renders nothing until the operator sets the env URLs, so no broken links ship. Set the two PUBLIC_ vars to activate. Remaining for #53 (yours): create the Sponsors tiers + Stripe Payment Link, post the outreach (Reddit/Dev.to/HN), recruit testers — the real-world actions an agent can't perform. Verified: lint, typecheck:strict (0 hints), build; block renders nothing while the envs are unset (0 pages). https://claude.ai/code/session_01PW9DnyVijUNmUJ4qMfgpHn
Reviewer's GuideAdds a new SupportBlock footer component that conditionally renders sponsor/payment CTAs based on public env vars, and wires it into the global footer. Flow diagram for conditional SupportBlock rendering in footerflowchart LR
Env[import.meta.env]
Env -->|PUBLIC_SPONSORS_URL| Sponsors[sponsorsUrl]
Env -->|PUBLIC_SUPPORT_PAYMENT_URL| Payment[supportPaymentUrl]
Sponsors --> HasAny[hasAny]
Payment --> HasAny
HasAny -->|true| SupportBlock[SupportBlock]
HasAny -->|false| NoRender[SupportBlock renders nothing]
Footer[Footer.astro] --> SupportBlock
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new SupportBlock component to display support CTAs in the footer when relevant environment variables are set. The review feedback recommends adding an empty Props interface to comply with the repository's TypeScript style guide, removing a hardcoded margin to prevent vertical misalignment within the footer, and setting opacity: 1 on hover to prevent global link styles from reducing the contrast of the button-styled links.
Comment on lines
+1
to
+9
| --- | ||
| // Support CTAs for issue #53 (revenue_status + MRR). | ||
| // Inert until the operator supplies the URLs via env: | ||
| // PUBLIC_SPONSORS_URL — GitHub Sponsors page (recurring / MRR) | ||
| // PUBLIC_SUPPORT_PAYMENT_URL — Stripe Payment Link (one-time / revenue_status) | ||
| const sponsorsUrl = import.meta.env.PUBLIC_SPONSORS_URL?.trim(); | ||
| const supportPaymentUrl = import.meta.env.PUBLIC_SUPPORT_PAYMENT_URL?.trim(); | ||
| const hasAny = Boolean(sponsorsUrl || supportPaymentUrl); | ||
| --- |
There was a problem hiding this comment.
According to the repository style guide, all components must define a Props interface, even if they do not currently accept any props. This ensures consistent TypeScript type safety across the codebase.
---
// Support CTAs for issue #53 (revenue_status + MRR).
// Inert until the operator supplies the URLs via env:
// PUBLIC_SPONSORS_URL — GitHub Sponsors page (recurring / MRR)
// PUBLIC_SUPPORT_PAYMENT_URL — Stripe Payment Link (one-time / revenue_status)
export interface Props {}
const sponsorsUrl = import.meta.env.PUBLIC_SPONSORS_URL?.trim();
const supportPaymentUrl = import.meta.env.PUBLIC_SUPPORT_PAYMENT_URL?.trim();
const hasAny = Boolean(sponsorsUrl || supportPaymentUrl);
---
References
- Use Props interfaces for all components. (link)
Comment on lines
+40
to
+46
| .support-block { | ||
| display: flex; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| gap: var(--space-sm); | ||
| margin-top: var(--space-md); | ||
| } |
There was a problem hiding this comment.
The .support-block component is rendered as a direct child of .footer__inner, which uses align-items: center on desktop and gap: var(--space-md) on mobile. Having a hardcoded margin-top: var(--space-md) on .support-block causes vertical misalignment on desktop and uneven vertical spacing on mobile. Removing this margin ensures clean, consistent alignment across all screen sizes.
.support-block {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
Comment on lines
+66
to
+73
| .support-block__btn:hover { | ||
| border-color: var(--accent); | ||
| color: var(--accent-text); | ||
| } | ||
| .support-block__btn--sponsor:hover { | ||
| border-color: var(--accent-hover); | ||
| color: var(--accent-hover); | ||
| } |
There was a problem hiding this comment.
The global a:hover style in global.css sets opacity: 0.7. For button-styled links like .support-block__btn, this hover opacity can make the text and borders look faded and reduce contrast. Adding opacity: 1 to the hover states ensures the custom hover colors (var(--accent-text) and var(--accent-hover)) remain vibrant and accessible.
.support-block__btn:hover {
border-color: var(--accent);
color: var(--accent-text);
opacity: 1;
}
.support-block__btn--sponsor:hover {
border-color: var(--accent-hover);
color: var(--accent-hover);
opacity: 1;
}
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
…city:1 on hover
- Add `export type Props = {}` (house style: all components define Props)
- Remove hardcoded `margin-top` from .support-block (footer uses gap/flexbox)
- Add `opacity: 1` to both btn:hover states to override global a:hover opacity
https://claude.ai/code/session_01PW9DnyVijUNmUJ4qMfgpHn
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
More code for #53 (revenue + MRR items), per your call.
Adds a
SupportBlockcomponent (footer) wiring the two "Immediate" revenue items from #53:PUBLIC_SPONSORS_URLrevenue_status) viaPUBLIC_SUPPORT_PAYMENT_URLInert by default — renders nothing until the env URLs are set, so no broken links ship. Set the two
PUBLIC_vars in the deploy environment to activate.What still needs you (the real-world part of #53): create the Sponsors tiers + the Stripe Payment Link, then the outreach (Reddit/Dev.to/HN posts, recruiting testers, CFPs).
Test plan
npm run lint/typecheck:strict— clean / 0 hintsnpm run build— block renders nothing while envs unset (0 pages); footer unaffectedhttps://claude.ai/code/session_01PW9DnyVijUNmUJ4qMfgpHn
Generated by Claude Code
Summary by Sourcery
Add a configurable support call-to-action block to the site footer that surfaces external funding links when provided via environment variables.
New Features:
Enhancements: