fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revamp the website's donation page

Browse Source
This commit is contained in:
Keavon Chambers
2026-08-28 23:16:22 -07:00
parent ff2afbccda
commit c64a9e5cee
6 changed files with 666 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
website/content/donate.md
View File

@@ -2,221 +2,209 @@
title = "Donate"
[extra]
css = ["/page/donate.css", "/component/feature-box.css", "/component/feature-icons.css"]
css = ["/page/donate.css", "/component/feature-box.css"]
js = ["/js/page/donate.js"]
+++
<section>
<div class="diptych donate-hero">
<div class="block">
# Funding creativity, not corporations
**Own your tools. Own your art.** Invest in a sustainable, independent future for high-quality creative software that cannot ever be taken away.
**Own your tools. Own your art.** Graphite is 100% built and funded by our community. Invest in a sustainable, independent future for high-quality creative software that cannot ever be taken away.
<div class="call-to-action">
<span>
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Donate: GitHub Sponsors</a>
<em>Avoids processing fees</em>
</span>
<span>
<a href="#supporter-memberships" class="button arrow">Donate: without an account</a>
<em>Start to finish in several seconds</em>
</span>
</div>
<div class="feature-icons three-wide statistics" data-statistics>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.art/icons/icon-atlas-roadmap__3.png" alt="" />
<span data-statistics-dollars></span>
<div class="statistics" data-statistics>
<div class="statistic">
<span class="value" data-statistics-recurring></span>
<span class="label">In memberships</span>
<span class="note">This month</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.art/icons/icon-atlas-features__2.png" alt="" />
<span data-statistics-members></span>
<div class="statistic">
<span class="value" data-statistics-members></span>
<span class="label">Members</span>
<span class="note">This month</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.art/icons/icon-atlas-roadmap__3.png" alt="" />
<span data-statistics-donors></span>
<div class="statistic">
<span class="value" data-statistics-one-time></span>
<span class="label">In one-time gifts</span>
<span class="note">Past year</span>
</div>
<div class="statistic">
<span class="value" data-statistics-donors></span>
<span class="label">One-time donors</span>
<span class="note">Past year</span>
</div>
</div>
<script>
(async () => {
const element = document.querySelector("[data-statistics]");
const dollarsElement = document.querySelector("[data-statistics-dollars]");
const membersElement = document.querySelector("[data-statistics-members]");
const donorsElement = document.querySelector("[data-statistics-donors]");
if (!dollarsElement || !membersElement || !donorsElement) return;
try {
const response = await fetch("https://graphite.art/sponsorship-stats");
const json = await response.json();
if (!json || !json.recurring || !json.one_time_prior_3_month_sum) throw new Error();
const recurringDollars = parseInt(json.recurring.cents) / 100;
const oneTimeAverageDollars = parseInt(json.one_time_prior_3_month_sum.cents) / 100 / 3;
dollarsElement.innerText = "$" + Math.round(recurringDollars + oneTimeAverageDollars).toLocaleString("en-US") + " / month";
membersElement.innerText = json.recurring.count.toLocaleString("en-US") + " members (supporting monthly)";
donorsElement.innerText = Math.round(json.one_time_prior_3_month_sum.count / 3).toLocaleString("en-US") + " one-time donors (past month)";
// Force repaint to work around Safari bug <https://bugs.webkit.org/show_bug.cgi?id=286403> (remove this and its data attribute when the bug is fixed and widely deployed)
element.style.transform = "scale(1)";
} catch {
element.remove();
}
})();
</script>
Graphite is 100% built and funded by the community. Your contributions directly help us level up the scope and speed of the project's development. Resources are put towards infrastructure, operational costs, swag to keep contributors happy and motivated, and outreach like exhibiting at conventions and traveling to conferences to foster industry relationships. Hiring full-time developers is the next crucial milestone.
</div>
</section>
<section id="supporter-memberships" class="feature-box-outer">
<div class="feature-box-inner">
<div class="block">
<h1 class="feature-box-header">Supporter memberships</h1>
---
Click a membership level below to pay directly by card, no account needed.
A small fee of 3.6% + 30¢ reduces what we receive each month. If convenient, consider instead using <a href="https://github.com/sponsors/GraphiteEditor" target="_blank">GitHub Sponsors</a> for **no fees**.
</div>
<div class="triptych">
<a href="https://buy.stripe.com/6oE2btfCK9863vybII" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">⭕ &ldquo;Quark&rdquo; &raquo;</h1>
**$5 / month**
- Your GitHub profile unlocks a shiny achievement acknowledging your contribution *(through GitHub Sponsors only)*
</a>
<a href="https://buy.stripe.com/00gdUb62aesq9TW7st" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">➕ &ldquo;Proton&rdquo; &raquo;</h1>
**$10 / month**
- Get a **"Member" role** and accompanying **gold-colored nametag on Discord**
- *Plus the lower-tier rewards*
</a>
<a href="https://buy.stripe.com/5kAbM38aiacaeac28a" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">⚛️ &ldquo;Carbon&rdquo; &raquo;</h1>
**$15 / month**
- Your name/handle listed in the end-of-year **retrospective blog post** thank-you section
- *Plus the lower-tier rewards*
</a>
<a href="https://buy.stripe.com/28o4jB62a0BA5DGbIL" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🧬 &ldquo;DNA&rdquo; &raquo;</h1>
**$25 / month**
- Your **personal name** (or handle) **on the Graphite website and GitHub readme**
- Option to be mailed a personal **thank-you card with Graphite stickers** (in the US only)
- *Plus the lower-tier rewards*
</a>
<a href="https://buy.stripe.com/28o03laiq0BA8PS6os" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🌱 &ldquo;Organism&rdquo; &raquo;</h1>
**$50 / month**
- Option to be given a public **shout-out of appreciation** from @GraphiteEditor on your choice of social media sites
- *Plus the lower-tier rewards*
</a>
<a href="https://buy.stripe.com/fZedUbduCfwu2ru7sx" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🌄 &ldquo;Biosphere&rdquo; &raquo;</h1>
**$75 / month**
- Your personal name (or handle) may be a **hyperlink** to your personal site or social media profile
- *Plus the lower-tier rewards*
</a>
</div>
<div class="block action-buttons">
<a href="https://donate.stripe.com/6oU8wP6m0c2kb2AermbQY0a" target="_blank" class="button arrow">Or make a one-time donation</a>
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
</div>
</div>
</section>
<section id="corporate-sponsorships" class="feature-box-outer">
<div class="feature-box-inner">
<div class="block">
<h1 class="feature-box-header">Corporate sponsorships</h1>
---
Also available to individuals wanting to make a larger impact. [Reach out](/contact) to pay by invoice or ACH to avoid fees, or for a custom arrangement.
</div>
<div class="triptych">
<a href="https://buy.stripe.com/7sI6rJ1LU5VUaY05kq" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🪨 &ldquo;Charcoal&rdquo; &raquo;</h1>
**$100 / month**
- Your **company name** may be shown **on the Graphite website and GitHub readme** starting at this tier level
- *Plus the lower-tier rewards for members*
</a>
<a href="https://buy.stripe.com/3cs8zR8ai0BA8PSaEL" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🛡️ &ldquo;Carbide&rdquo; &raquo;</h1>
**$250 / month**
- Your name on the website and readme may be a **hyperlink** to your company/personal site
- *Plus the lower-tier rewards for members*
</a>
<a href="https://buy.stripe.com/fZeaHZ76e0BAeaccMU" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">💎 &ldquo;Diamond&rdquo; &raquo;</h1>
**$500 / month**
- Your name and link on the website and readme may instead be a **hyperlinked logo**
- *Plus the lower-tier rewards for members*
</a>
</div>
<div class="block action-buttons">
<a href="https://donate.stripe.com/6oU8wP6m0c2kb2AermbQY0a" target="_blank" class="button arrow">Or make a one-time donation</a>
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
</div>
</div>
<div class="donation-picker" id="supporter-memberships">
<div class="frequency">
<label><input type="radio" name="donation-frequency" value="monthly" checked /><span>Monthly</span></label>
<label><input type="radio" name="donation-frequency" value="one-time" /><span>One-Time</span></label>
</div>
<div class="tier-ladder">
<label class="tier"><input type="radio" name="donation-tier" value="quark" /><span class="name">Quark</span><span class="price">$5</span></label>
<label class="tier"><input type="radio" name="donation-tier" value="proton" /><span class="name">Proton</span><span class="price">$10</span></label>
<label class="tier"><input type="radio" name="donation-tier" value="nucleus" /><span class="name">Nucleus</span><span class="price">$15</span></label>
<label class="tier"><input type="radio" name="donation-tier" value="carbon" checked /><span class="name">Carbon</span><span class="price">$25</span></label>
<label class="tier"><input type="radio" name="donation-tier" value="charcoal" /><span class="name">Charcoal</span><span class="price">$50</span></label>
<label class="tier"><input type="radio" name="donation-tier" value="graphite" /><span class="name">Graphite</span><span class="price">$75</span></label>
<label class="higher-reveal"><input type="checkbox" name="higher-tiers" /><span>Higher tiers with the greatest impact &raquo;</span></label>
<label class="tier higher"><input type="radio" name="donation-tier" value="graphene" /><span class="name">Graphene</span><span class="price">$100</span></label>
<label class="tier higher"><input type="radio" name="donation-tier" value="carbide" /><span class="name">Carbide</span><span class="price">$250</span></label>
<label class="tier higher"><input type="radio" name="donation-tier" value="diamond" /><span class="name">Diamond</span><span class="price">$500</span></label>
</div>
<noscript><style>.amount-ladder { display: none !important; }</style></noscript>
<div class="amount-ladder">
<button type="button" class="amount" data-amount="25">$25</button>
<button type="button" class="amount" data-amount="30">$30</button>
<button type="button" class="amount" data-amount="60">$60</button>
<button type="button" class="amount" data-amount="100">$100</button>
<button type="button" class="amount" data-amount="250">$250</button>
<button type="button" class="amount" data-amount="500">$500</button>
</div>
<p class="corporate-link">Sponsoring on behalf of a company? <a href="/contact">Ask about corporate sponsorship.</a></p>
<div class="picker-body">
<div class="payment-controls">
<a href="https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk" target="_blank" class="manage">Manage your ongoing membership</a>
<div class="payment-method">
<label><input type="radio" name="donation-method" value="direct" checked /><span>Direct Payment</span></label>
<label><input type="radio" name="donation-method" value="github" /><span>GitHub Sponsors</span></label>
</div>
</div>
<div class="tier-panel" data-tier="quark">
<div class="rewards">
<ul>
<li class="unlocked">Support Graphite's development</li>
<li class="unlocked github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/6oE2btfCK9863vybII" class="button arrow action" data-method="direct">Donate $5 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333371" target="_blank" class="button arrow action" data-method="github">Donate $5 monthly</a>
</div>
<div class="tier-panel" data-tier="proton">
<div class="rewards">
<ul>
<li class="unlocked">Members-only Discord channel and gold nametag</li>
<li class="unlocked">Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/00gdUb62aesq9TW7st" class="button arrow action" data-method="direct">Donate $10 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333372" target="_blank" class="button arrow action" data-method="github">Donate $10 monthly</a>
</div>
<div class="tier-panel" data-tier="nucleus">
<div class="rewards">
<ul>
<li class="unlocked">Your name in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/5kAbM38aiacaeac28a" class="button arrow action" data-method="direct">Donate $15 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333373" target="_blank" class="button arrow action" data-method="github">Donate $15 monthly</a>
</div>
<div class="tier-panel" data-tier="carbon">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/28o4jB62a0BA5DGbIL" class="button arrow action" data-method="direct">Donate $25 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333374" target="_blank" class="button arrow action" data-method="github">Donate $25 monthly</a>
</div>
<div class="tier-panel" data-tier="charcoal">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/28o03laiq0BA8PS6os" class="button arrow action" data-method="direct">Donate $50 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333375" target="_blank" class="button arrow action" data-method="github">Donate $50 monthly</a>
</div>
<div class="tier-panel" data-tier="graphite">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/fZedUbduCfwu2ru7sx" class="button arrow action" data-method="direct">Donate $75 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333376" target="_blank" class="button arrow action" data-method="github">Donate $75 monthly</a>
</div>
<div class="tier-panel" data-tier="graphene">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li class="unlocked">Custom hyperlink on your site credits name<span class="info" title="Your link is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/7sI6rJ1LU5VUaY05kq" class="button arrow action" data-method="direct">Donate $100 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=333377" target="_blank" class="button arrow action" data-method="github">Donate $100 monthly</a>
</div>
<div class="tier-panel" data-tier="carbide">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li class="unlocked">Custom avatar picture with your site credits name<span class="info" title="Your avatar is subject to reasonable content approval."></span></li>
<li>Custom hyperlink on your site credits name<span class="info" title="Your link is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/3cs8zR8ai0BA8PSaEL" class="button arrow action" data-method="direct">Donate $250 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=441886" target="_blank" class="button arrow action" data-method="github">Donate $250 monthly</a>
</div>
<div class="tier-panel" data-tier="diamond">
<div class="rewards">
<ul>
<li class="unlocked">Your name higher in our update video and site credits<span class="info" title="Shown in the credits of our YouTube update videos and on this website. Your name is subject to reasonable content approval."></span></li>
<li class="unlocked">A spoken personal thank-you during update video credits</li>
<li>Custom avatar picture with your site credits name<span class="info" title="Your avatar is subject to reasonable content approval."></span></li>
<li>Custom hyperlink on your site credits name<span class="info" title="Your link is subject to reasonable content approval."></span></li>
<li>Members-only Discord channel and gold nametag</li>
<li>Regular dev sneak-peeks and project files from recent YouTube uploads<span class="info" title="Posted as pinned messages in the members-only Discord channel."></span></li>
<li class="github-only">Shiny GitHub profile achievement<span class="info" title="Awarded for supporting through GitHub Sponsors, unless you opt for private payments."></span></li>
</ul>
</div>
<a href="https://buy.stripe.com/fZeaHZ76e0BAeaccMU" class="button arrow action" data-method="direct">Donate $500 monthly</a>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?tier_id=441888" target="_blank" class="button arrow action" data-method="github">Donate $500 monthly</a>
</div>
<div class="tier-panel" data-frequency="one-time">
<div class="rewards">
<ul>
<li>Select a common amount from above or customize it below</li>
<li>We're currently not set up to fulfill membership rewards for one-time donors, but your selfless generosity is appreciated</li>
</ul>
</div>
<form class="one-time-entry" method="POST" action="https://graphite.art/donate/create-donation-session">
<div class="amount-entry">
<label class="amount-field"><span class="currency">$</span><input type="number" name="amount" value="100" min="3" max="10000" step="0.01" required aria-label="Donation amount in US dollars" data-donation-amount /></label>
<button type="submit" class="button arrow action" data-method="direct">Donate</button>
<a href="https://github.com/sponsors/GraphiteEditor/sponsorships?frequency=one-time&amp;amount=100" target="_blank" class="button arrow action" data-method="github" data-github-one-time>Donate</a>
</div>
</form>
</div>
</div>
<div class="picker-footer">
<p class="method-note" data-method="direct">Pay by card or other methods in just a few clicks, no account needed.</p>
<p class="method-note" data-method="github">GitHub subsidizes our processing fees so your full amount reaches us.</p>
</div>
</div>
</div>
</section>