gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki 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
No known key found for this signature in database
3 changed files with 55 additions and 37 deletions
Show Stats 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" : ""}`}
href={href}
target={openExternally ? "_blank" : undefined}
rel={openExternally ? "noopener noreferrer" : undefined}
>
{iconSvg && <><Icon svg={iconSvg} />{" "}</>}
{text}

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

@ -2,7 +2,7 @@ section.donate {
background: var(--background-color);
}
section.donate ul {
section.donate ul.donate-buttons {
list-style-type: none;
display: flex;
gap: 1em;
@ -10,6 +10,11 @@ section.donate ul {
flex-direction: column;
}
section.donate h3 {
font-size: 1.5em;
color: var(--brand-1);
}
@media (min-width: 720px) {
section.donate ul {
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 buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw";
import Button from "../../components/Button";
import Card from "../../components/Card";
export default function Donate() {
return (
<>
<Section title="Financial donations" 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>
<Section title="Support us" className="donate">
<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>
<li>
<Button
iconSvg={githubIcon}
href="https://github.com/sponsors/eliandoran"
text="GitHub Sponsors"
openExternally
/>
</li>
<ul class="donate-buttons">
<li>
<Button
iconSvg={githubIcon}
href="https://github.com/sponsors/eliandoran"
text="GitHub Sponsors"
openExternally
/>
</li>
<li>
<Button
iconSvg={paypalIcon}
href="https://paypal.me/eliandoran"
text="PayPal"
openExternally
outline
/>
</li>
<li>
<Button
iconSvg={paypalIcon}
href="https://paypal.me/eliandoran"
text="PayPal"
openExternally
outline
/>
</li>
<li>
<Button
iconSvg={buyMeACoffeeIcon}
href="https://buymeacoffee.com/eliandoran"
text="Buy Me A Coffee"
openExternally
outline
/>
</li>
</ul>
</Section>
<li>
<Button
iconSvg={buyMeACoffeeIcon}
href="https://buymeacoffee.com/eliandoran"
text="Buy Me A Coffee"
openExternally
outline
/>
</li>
</ul>
</Card>
<Section title="Other ways to contribute">
<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>
</ul>
<Card title="Other ways to contribute">
<ul>
<li>Translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</li>
<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>
</>
)