Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 11:26:15 +01:00
Code Issues Packages Projects Releases Activity

feat(website): improve the donation page

Browse Source
This commit is contained in:
Elian Doran
2025-09-27 13:18:48 +03:00
parent 892e84deaa
commit d71d1ce8b4
3 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/website/src/components/Button.tsx
View File

@@ -17,6 +17,7 @@ export default function Button({ href, iconSvg, openExternally, text, className,
className={`button ${className} ${outline ? "outline" : ""}`} className={`button ${className} ${outline ? "outline" : ""}`}
href={href} href={href}
target={openExternally ? "_blank" : undefined} target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
> >
{iconSvg && <><Icon svg={iconSvg} />{" "}</>} {iconSvg && <><Icon svg={iconSvg} />{" "}</>}
{text} {text}

7
apps/website/src/pages/Donate/Donate.css
View File

@@ -2,7 +2,7 @@ section.donate {
background: var(--background-color); background: var(--background-color);
} }
section.donate ul { section.donate ul.donate-buttons {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
gap: 1em; gap: 1em;
@@ -10,6 +10,11 @@ section.donate ul {
flex-direction: column; flex-direction: column;
} }
section.donate h3 {
font-size: 1.5em;
color: var(--brand-1);
}
@media (min-width: 720px) { @media (min-width: 720px) {
section.donate ul { section.donate ul {
gap: 0 1em; gap: 0 1em;

84
apps/website/src/pages/Donate/Donate.tsx
View File

@@ -4,51 +4,63 @@ import githubIcon from "../../assets/boxicons/bx-github.svg?raw";
import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw"; import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw";
import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw"; import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw";
import Button from "../../components/Button"; import Button from "../../components/Button";
import Card from "../../components/Card";
export default function Donate() { export default function Donate() {
return ( return (
<> <>
<Section title="Financial donations" className="donate"> <Section title="Support us" className="donate">
<p>A <a href="https://github.com/TriliumNext/Trilium/graphs/commit-activity">significant amount of time</a> is spent maintaining and bringing the best out of Trilium.</p> <div class="grid-2-cols">
<Card title="Financial donations">
<p>
Trilium is built and maintained with <a href="https://github.com/TriliumNext/Trilium/graphs/commit-activity" target="_blank">hundreds of hours of work</a>.
Your support keeps it open-source, improves features, and covers costs such as hosting.
</p>
<p>Consider supporting the main developer of the application via:</p> <p>Consider supporting the main developer (<a href="https://github.com/eliandoran">eliandoran</a>) of the application via:</p>
<ul> <ul class="donate-buttons">
<li> <li>
<Button <Button
iconSvg={githubIcon} iconSvg={githubIcon}
href="https://github.com/sponsors/eliandoran" href="https://github.com/sponsors/eliandoran"
text="GitHub Sponsors" text="GitHub Sponsors"
openExternally openExternally
/> />
</li> </li>
<li> <li>
<Button <Button
iconSvg={paypalIcon} iconSvg={paypalIcon}
href="https://paypal.me/eliandoran" href="https://paypal.me/eliandoran"
text="PayPal" text="PayPal"
openExternally openExternally
outline outline
/> />
</li> </li>
<li> <li>
<Button <Button
iconSvg={buyMeACoffeeIcon} iconSvg={buyMeACoffeeIcon}
href="https://buymeacoffee.com/eliandoran" href="https://buymeacoffee.com/eliandoran"
text="Buy Me A Coffee" text="Buy Me A Coffee"
openExternally openExternally
outline outline
/> />
</li> </li>
</ul> </ul>
</Section> </Card>
<Section title="Other ways to contribute"> <Card title="Other ways to contribute">
<ul> <ul>
<li>Help us translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</li> <li>Translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</li>
</ul> <li>Interact with the community on <a href="https://github.com/orgs/TriliumNext/discussions" target="_blank">GitHub Discussions</a> or on <a href="https://matrix.to/#/#triliumnext:matrix.org">Matrix</a>.</li>
<li>Report bugs via <a href="https://github.com/TriliumNext/Trilium/issues" target="_blank">GitHub issues</a>.</li>
<li>Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.</li>
<li>Spread the word: Share Trilium Notes with friends, or on blogs and social media.</li>
</ul>
</Card>
</div>
</Section> </Section>
</> </>
) )