Add donation callouts in-app and on the site

This commit is contained in:
Keavon Chambers 2025-04-25 00:05:58 -07:00
parent 2dee47a6ee
commit d445bffe31
11 changed files with 68 additions and 21 deletions

View file

@ -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

View file

@ -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()),

View file

@ -0,0 +1,3 @@
<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="#dc6a7d" />
</svg>

After

Width:  |  Height:  |  Size: 263 B

View file

@ -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>

View file

@ -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 },

View file

@ -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) {

View file

@ -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>

View file

@ -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>

View file

@ -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.

View file

@ -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;

View file

@ -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>