v3

src/routes/donate/+page.md

@@ -1,50 +0,0 @@
----
-title: Donate
----
-
-<script>
-	import LinkButton from "$lib/LinkButton.svelte";
-</script>
-
-<svelte:head>
-	<title>{title} | Project Segfault</title>
-</svelte:head>
-
-# { title }
-
-## What we do with donations
-These donations primarily help us pay for our VPSes, domain names and other expenses related to crucial infrastructure we have to maintain. We also sometimes donate to developers who maintain software we rely heavily on such as our authentication provider.
-
-## Donation methods
-You can currently donate by credit card through [Liberapay](https://liberapay.com) and cryptocurrencies.
-
-### Credit card
-
-<LinkButton url="https://liberapay.com/ProjectSegfault/donate" icon="i-simple-icons:liberapay" title="Donate" bg="#F6C915" color="#151515" />
-
-### Cryptocurrency
-
-You can use [projectsegfau.lt](https://projectsegfau.lt) as a crypto wallet address in supported OpenAlias clients such as [MyMonero](https://mymonero.com/), [Electrum](https://electrum.org/) and [Electrum-LTC](https://electrum-ltc.org/).
-
-#### Monero
-
-Address: `47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA`  
-![Monero QR code](/Monero.png)
-
-#### Bitcoin
-
-Address: `bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd`  
-![Bitcoin QR code](/Bitcoin.png)
-
-#### Litecoin
-
-Address: `ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj`  
-![Litecoin QR code](/Litecoin.png)
-
-_You can find all of our financial reports on [our transparency repository on Gitea](https://git.projectsegfau.lt/ProjectSegfault/transparency/)._
-
-<style>
-    code {
-        word-wrap: break-word;
-    }
-</style>

src/routes/donate/+page.svelte

@@ -0,0 +1,35 @@
+
+<script lang="ts">
+	import CryptoInfo from "./CryptoInfo.svelte";
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+</script>
+
+<h1>{data.title}</h1>
+
+<h2>What we do with donations</h2>
+
+<p>These donations primarily help us pay for our VPSes, domain names and other expenses related to crucial infrastructure we have to maintain. We also sometimes donate to developers who maintain software we rely heavily on such as our authentication provider.</p>
+
+<h2>Donation methods</h2>
+
+<p>You can currently donate by credit card through <a href="https://liberapay.com">Liberapay</a> and cryptocurrencies.</p>
+
+<h3>Credit card</h3>
+<a href="https://liberapay.com/ProjectSegfault/donate" class="button !bg-amber !text-black w-fit"><div class="i-simple-icons:liberapay" /> Liberapay</a>
+
+<h3>Cryptocurrencies</h3>
+<p>You can use <a href="https://projectsegfau.lt">projectsegfau.lt</a> as a crypto wallet address in supported OpenAlias clients such as <a href="https://mymonero.com">MyMonero</a>, <a href="https://electrum.org">Electrum</a> and <a href="https://electrum-ltc.org">Electrum-LTC</a>.</p>
+
+<h4>Monero</h4>
+
+<CryptoInfo address="47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA" qr="Monero.png" />
+
+<h4>Bitcoin</h4>
+
+<CryptoInfo address="bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd" qr="Bitcoin.png" />
+
+<h4>Litecoin</h4>
+
+<CryptoInfo address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj" qr="Litecoin.png" />

src/routes/donate/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from "./$types";
+
+export const load = (() => {
+    return {
+      title: "Donate"
+    };
+}) satisfies PageLoad;

src/routes/donate/CryptoInfo.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let address: string = "";
+	export let qr: string = "";
+</script>
+
+{#if address}
+	<details class="p-0">
+		<summary>Address</summary>
+		<code class="break-words whitespace-normal">49burTxWHyqa9NkkC9PV33D79PrwARMq8aic4XezTx36i66qyLA3afYXicycTTA5st93CV5Rr9AGkKpeE5GPueRN2PkfFQN</code>
+	</details>
+{/if}
+
+{#if qr}
+	<details class="p-0">
+		<summary>QR code</summary>
+		<img src="/qr/{qr}" alt="QR code" class="mt-2" />
+	</details>
+{/if}