Add donation callouts in-app and on the site

Author: Keavon

editor/src/messages/dialog/simple_dialogs/about_graphite_dialog.rs

@@ -20,8 +20,9 @@ impl DialogLayoutHolder for AboutGraphiteDialog {
 
 	fn layout_column_2(&self) -> Layout {
 		let links = [
-			("Website", "Website", "https://graphite.rs"),
+			("Heart", "Donate", "https://graphite.rs/donate/"),
 			("Volunteer", "Volunteer", "https://graphite.rs/volunteer/"),
+			("GraphiteLogo", "Website", "https://graphite.rs"),
 			("Credits", "Credits", "https://github.com/GraphiteEditor/Graphite/graphs/contributors"),
 		];
 		let mut widgets = links

editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs

@@ -585,18 +585,29 @@ impl LayoutHolder for MenuBarMessageHandler {
 						action: MenuBarEntry::create_action(|_| DialogMessage::RequestAboutGraphiteDialog.into()),
 						..MenuBarEntry::default()
 					}],
-					vec![MenuBarEntry {
-						label: "User Manual".into(),
-						icon: Some("UserManual".into()),
-						action: MenuBarEntry::create_action(|_| {
-							FrontendMessage::TriggerVisitLink {
-								url: "https://graphite.rs/learn/".into(),
-							}
-							.into()
-						}),
-						..MenuBarEntry::default()
-					}],
 					vec![
+						MenuBarEntry {
+							label: "Donate to Graphite".into(),
+							icon: Some("Heart".into()),
+							action: MenuBarEntry::create_action(|_| {
+								FrontendMessage::TriggerVisitLink {
+									url: "https://graphite.rs/donate/".into(),
+								}
+								.into()
+							}),
+							..MenuBarEntry::default()
+						},
+						MenuBarEntry {
+							label: "User Manual".into(),
+							icon: Some("UserManual".into()),
+							action: MenuBarEntry::create_action(|_| {
+								FrontendMessage::TriggerVisitLink {
+									url: "https://graphite.rs/learn/".into(),
+								}
+								.into()
+							}),
+							..MenuBarEntry::default()
+						},
 						MenuBarEntry {
 							label: "Report a Bug".into(),
 							icon: Some("Bug".into()),

frontend/assets/icon-16px-solid/heart.svg

@@ -172,6 +172,11 @@
 									<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
 								</td>
 							</tr>
+							<tr>
+								<td colspan="2">
+									<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
+								</td>
+							</tr>
 						</table>
 					</LayoutRow>
 				</LayoutCol>

frontend/src/components/window/workspace/Panel.svelte

@@ -137,6 +137,7 @@ import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-log
 import HandleVisibilityAll from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-all.svg";
 import HandleVisibilityFrontier from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-frontier.svg";
 import HandleVisibilitySelected from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-selected.svg";
+import Heart from "@graphite-frontend/assets/icon-16px-solid/heart.svg";
 import HistoryRedo from "@graphite-frontend/assets/icon-16px-solid/history-redo.svg";
 import HistoryUndo from "@graphite-frontend/assets/icon-16px-solid/history-undo.svg";
 import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg";
@@ -257,6 +258,7 @@ const SOLID_16PX = {
 	HandleVisibilityAll: { svg: HandleVisibilityAll, size: 16 },
 	HandleVisibilityFrontier: { svg: HandleVisibilityFrontier, size: 16 },
 	HandleVisibilitySelected: { svg: HandleVisibilitySelected, size: 16 },
+	Heart: { svg: Heart, size: 16 },
 	HistoryRedo: { svg: HistoryRedo, size: 16 },
 	HistoryUndo: { svg: HistoryUndo, size: 16 },
 	IconsGrid: { svg: IconsGrid, size: 16 },

frontend/src/utility-functions/icons.ts

@@ -490,6 +490,13 @@ impl EditorHandle {
 		Ok(())
 	}
 
+	/// Visit the given URL
+	#[wasm_bindgen(js_name = visitUrl)]
+	pub fn visit_url(&self, url: String) {
+		let message = FrontendMessage::TriggerVisitLink { url };
+		self.dispatch(message);
+	}
+
 	/// Paste layers from a serialized json representation
 	#[wasm_bindgen(js_name = pasteSerializedData)]
 	pub fn paste_serialized_data(&self, data: String) {

frontend/wasm/src/editor_api.rs

@@ -8,11 +8,9 @@ css = ["/page/donate.css", "/component/feature-box.css"]
 <section>
 <div class="block">
 
-# Support Graphite
+# Funding creativity, not corporations
 
-**Safeguard the sustainable, independent future of quality open source creative software.**
-
-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, legal 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 big next step as support grows.
+**Own your tools. Own your art.** Invest in the sustainable, independent future of high-quality creative software that's free, and always will be.
 
 <p class="call-to-action">
 
@@ -23,11 +21,13 @@ Graphite is 100% built and funded by the community. Your contributions directly
 
 <span>
 <a href="#supporter-memberships" class="button arrow">Donate: without an account</a>
-<em>Be done in just a few clicks</em>
+<em>Start to finish in several seconds</em>
 </span>
 
 </p>
 
+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>
 

website/content/donate.md

@@ -10,9 +10,9 @@ css = ["/page/features.css", "/component/feature-box.css", "/component/feature-i
 
 # Graphite features
 
-The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and nondestructive editing workflow which is a unique feature among vector editing software.
+The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. This tooling is built around a procedural graphics engine, letting artists build complex graphics and animations in its visual scripting language.
 
-Throughout 2025, stay tuned for major performance improvements, a multiplatform desktop app with native rendering speed, and the beginnings of a full suite of raster editing tools.
+In 2025, stay tuned for performance improvements, native multiplatform desktop apps, and the beginnings of a full raster editing tool suite.
 
 </div>
 </section>

website/content/features.md

@@ -8,7 +8,7 @@ css = ["/page/volunteer.css", "/component/feature-box.css"]
 <section>
 <div class="block">
 
-# Volunteer
+# Get involved
 
 **Graphite is 100% built by volunteers.** Get involved in the effort to bring great, free creative software to the world.
 

website/content/volunteer/_index.md

@@ -148,6 +148,24 @@ body > .page {
 						font-size: 0;
 					}
 
+					.heart.heart {
+						// The same color is also used below in the SVG after the `%23` (URL-encoded `#`)
+						color: #cc304f;
+
+						&::after {
+							content: "";
+							background-image: url('data:image/svg+xml;utf8,\
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
+								');
+								display: inline-block;
+								width: 0.75em;
+								height: 0.75em;
+								margin-left: 0.25em;
+								margin-bottom: -0.1em;
+								vertical-align: baseline;
+						}
+					}
+
 					@media screen and (max-width: 1200px) {
 						gap: 30px;
 						--height: 50px;

website/sass/base.scss

@@ -107,7 +107,7 @@
 						<a href="/about">About</a>
 						<a href="/blog">Blog</a>
 						<a href="/volunteer">Volunteer</a>
-						<a href="/donate">Donate</a>
+						<a href="/donate" class="heart">Donate</a>
 						<a href="https://editor.graphite.rs" class="button arrow">Launch</a>
 					</div>
 				</div>