Use local static image for qr image donation

frontend/src/routes/(front)/+page.js

@@ -1,22 +1,34 @@
 /** @type {import('./$types').PageLoad} */
 export async function load({ data }) {
-	/* prettier-ignore */
-	const metaDefaults = {
-		title: 'Monero (XMR)',
-		description: 'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.',
-		keywords: 'monero,xmr,monero node,xmrnode,cryptocurrency'
-	};
-
 	return {
 		meta: {
-			title: metaDefaults.title,
+			title: 'Monero (XMR)',
-			description: metaDefaults.description,
+			description:
-			keywords: metaDefaults.keywords,
+				'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.',
-			// Twitter
+			keywords: 'monero,xmr,monero node,xmrnode,cryptocurrency'
-			twitter: {
+		},
-				title: metaDefaults.title,
+		links: [
-				description: metaDefaults.description
+			{ text: 'moneroworld.com', uri: 'https://moneroworld.com' },
-			}
+			{ text: 'monero.how', uri: 'https://www.monero.how' },
+			{ text: 'monero.observer', uri: 'https://www.monero.observer' },
+			{ text: 'sethforprivacy.com', uri: 'https://sethforprivacy.com' },
+			{ text: 'localmonero.co', uri: 'https://localmonero.co/knowledge' },
+			{ text: 'revuo-xmr.com', uri: 'https://revuo-xmr.com/' }
+		],
+		stagenet: [
+			{ label: 'P2P', value: 'testnet.xmr.ditatompel.com:28080', key: 'tnetP2P' },
+			{ label: 'RPC', value: 'testnet.xmr.ditatompel.com:28089', key: 'tnetRPC' },
+			{ label: 'RPC SSL', value: 'testnet.xmr.ditatompel.com:443', key: 'tnetSSL' }
+		],
+		testnet: [
+			{ label: 'P2P', value: 'testnet.xmr.ditatompel.com:28080', key: 'tnetP2P' },
+			{ label: 'RPC', value: 'testnet.xmr.ditatompel.com:28089', key: 'tnetRPC' },
+			{ label: 'RPC SSL', value: 'testnet.xmr.ditatompel.com:443', key: 'tnetSSL' }
+		],
+		donation: {
+			address:
+				'8BWYe6GzbNKbxe3D8mPkfFMQA2rViaZJFhWShhZTjJCNG6EZHkXRZCKHiuKmwwe4DXDYF8KKcbGkvNYaiRG3sNt7JhnVp7D',
+			qr: '/img/monerotip.png'
 		}
 	};
 }

frontend/src/routes/(front)/+page.svelte

@@ -11,7 +11,6 @@
 
 	/** @type {import('./$types').PageData} */
 	export let data;
-	let currentVariant = 'bg-initial';
 	let donationCopied = false;
 
 	/** @param {Event & { target: HTMLInputElement }} e */
@@ -30,18 +29,6 @@
 			donationCopied = false;
 		}, 2500);
 	}
-
-	let snetProtos = [
-		{ label: 'P2P', value: 'stagenet.xmr.ditatompel.com:38080', key: 'snetP2P' },
-		{ label: 'RPC', value: 'stagenet.xmr.ditatompel.com:38089', key: 'snetRPC' },
-		{ label: 'RPC SSL', value: 'stagenet.xmr.ditatompel.com:443', key: 'snetSSL' }
-	];
-
-	let tnetProtos = [
-		{ label: 'P2P', value: 'testnet.xmr.ditatompel.com:28080', key: 'tnetP2P' },
-		{ label: 'RPC', value: 'testnet.xmr.ditatompel.com:28089', key: 'tnetRPC' },
-		{ label: 'RPC SSL', value: 'testnet.xmr.ditatompel.com:443', key: 'tnetSSL' }
-	];
 </script>
 
 <header id="hero" class="hero-gradient py-7">
@@ -49,58 +36,29 @@
 		<h1 class="h1 pb-2 font-extrabold">{data.meta.title}</h1>
 		<p>{data.meta.description}</p>
 
+		<!-- prettier-ignore -->
 		<div class="pt-2">
-			<a
+			<a href="https://www.getmonero.org" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://www.getmonero.org"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnMonero class="h-4 w-4" /></span>
 				<span>GetMonero.org</span>
 			</a>
-			<a
+			<a href="https://github.com/monero-project" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://github.com/monero-project"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnGitHub fill="currentColor" class="h-4 w-4" /></span>
 				<span>monero-project</span>
 			</a>
-			<a
+			<a href="https://www.reddit.com/r/Monero/" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://www.reddit.com/r/Monero/"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnReddit fill="currentColor" class="h-4 w-4" /></span>
 				<span>r/Monero</span>
 			</a>
-			<a
+			<a href="https://twitter.com/monero" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://twitter.com/monero"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnTwitter fill="currentColor" class="h-4 w-4" /></span>
 				<span>@monero</span>
 			</a>
-			<a
+			<a href="https://www.facebook.com/monerocurrency/" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://www.facebook.com/monerocurrency/"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnFacebook fill="currentColor" class="h-4 w-4" /></span>
 				<span>monerocurrency</span>
 			</a>
-			<a
+			<a href="https://telegram.me/monero" class="variant-ghost chip mt-2 hover:variant-filled" target="_blank" rel="noopener">
-				href="https://telegram.me/monero"
-				class="variant-ghost chip mt-2 hover:variant-filled"
-				target="_blank"
-				rel="noopener"
-			>
 				<span><IcnTelegram fill="currentColor" class="h-4 w-4" /></span>
 				<span>monero</span>
 			</a>
@@ -116,75 +74,32 @@
 		<p>If you're new to Monero, the official links above is a perfect place to start.</p>
 		<p class="py-2">
 			Of course, there are lots of personal and community sites which generally discusses a lot
-			about Monero, such as <a
+			about Monero, such as
-				href="https://moneroworld.com"
+			{#each data.links as link}
-				class="external"
+				<a href={link.uri} class="external" target="_blank" rel="noopener">{link.text}</a>,&nbsp;
-				target="_blank"
+			{/each} etc; can be an other good reference for you.
-				rel="noopener">moneroworld.com</a
-			>,
-			<a href="https://www.monero.how" class="external" target="_blank" rel="noopener">monero.how</a
-			>,
-			<a href="https://www.monero.observer" class="external" target="_blank" rel="noopener"
-				>monero.observer</a
-			>,
-			<a href="https://sethforprivacy.com" class="external" target="_blank" rel="noopener"
-				>sethforprivacy.com</a
-			>,
-			<a
-				href="https://localmonero.co
-/knowledge"
-				class="external"
-				target="_blank"
-				rel="noopener">localmonero.co</a
-			>,
-			<a href="https://revuo-xmr.com/" class="external" target="_blank" rel="noopener"
-				>revuo-xmr.com</a
-			>, etc, can be an other good reference for you.
 		</p>
 		<p>You can find few resources I provide related to Monero below:</p>
 	</div>
 
+	<!-- prettier-ignore -->
 	<div class="section-container text-token grid grid-cols-1 gap-2 md:grid-cols-3">
-		<a
+		<a class="card card-hover overflow-hidden py-2 text-center" href="/remote-nodes/">
-			class="card {currentVariant} card-hover overflow-hidden py-2 text-center"
-			href="/remote-nodes"
-		>
 			<h2 class="h2 font-bold">Remote Nodes</h2>
 			<div class="space-y-4 p-4">
-				<p>
+				<p>List of Monero remote nodes you can use when you cannot (or don't want to) run your own node.</p>
-					<!-- cspell:disable -->
-					List of Monero remote nodes you can use when you cannot (or don't want to) run your own node.
-					<!-- cspell:enable -->
-				</p>
 			</div>
 		</a>
-
+		<a class="card card-hover overflow-hidden py-2 text-center" href="/add-node/">
-		<a class="card {currentVariant} card-hover overflow-hidden py-2 text-center" href="/add-node">
 			<h2 class="h2 font-bold">Add Node</h2>
 			<div class="space-y-4 p-4">
-				<p>
+				<p>Add your Monero public node so others can connect to your node.</p>
-					<!-- cspell:disable -->
-					Add your Monero public node so others can connect to your node.
-					<!-- cspell:enable -->
-				</p>
 			</div>
 		</a>
-
+		<a class="card card-hover overflow-hidden py-2 text-center" href="https://monitor.ditatompel.com/d/xmr_metrics/monero-metrics?orgId=2" target="_blank" rel="noopener" >
-		<a
-			class="card {currentVariant} card-hover overflow-hidden py-2 text-center"
-			href="https://monitor.ditatompel.com/d/xmr_metrics/monero-metrics?orgId=2"
-			target="_blank"
-			rel="noopener"
-		>
 			<h2 class="h2 font-bold">Metrics</h2>
 			<div class="space-y-4 p-4">
-				<p>
+				<p>Collection of my Monero metrics (GitHub repository, blockchain, market, P2Pool) presented through Grafana. ↗</p>
-					<!-- cspell:disable -->
-					Collection of my Monero metrics (GitHub repository, blockchain, market, P2Pool) presented through
-					Grafana.
-					<small>* Will open in new window</small>
-					<!-- cspell:enable -->
-				</p>
 			</div>
 		</a>
 	</div>
@@ -198,7 +113,7 @@
 				Stagenet is what you need to learn Monero safely. Stagenet is technically equivalent to
 				mainnet, both in terms of features and consensus rules.
 			</p>
-			{#each snetProtos as { label, value, key }}
+			{#each data.stagenet as { label, value, key }}
 				<div class="input-group input-group-divider my-2 grid-cols-[auto_1fr_auto]">
 					<div class="input-group-shim"><label for={key}>{label}</label></div>
 					<input class="text-center" type="text" id={key} name={key} {value} data-clipboard={key} />
@@ -217,7 +132,7 @@
 				Testnet is the <em>"experimental"</em> network and blockchain where things get released long
 				before mainnet. As a normal user, use mainnet instead.
 			</p>
-			{#each tnetProtos as { label, value, key }}
+			{#each data.testnet as { label, value, key }}
 				<div class="input-group input-group-divider my-2 grid-cols-[auto_1fr_auto]">
 					<div class="input-group-shim"><label for={key}>{label}</label></div>
 					<input class="text-center" type="text" id={key} name={key} {value} data-clipboard={key} />
@@ -234,19 +149,13 @@
 
 <section id="privacy-quote">
 	<div class="text-token mx-auto w-full max-w-4xl py-4 text-center">
+		<!-- prettier-ignore -->
 		<blockquote class="blockquote">
 			<p class="text-3xl">
-				Since we desire privacy, we must ensure that each party to a transaction have knowledge only
+				Since we desire privacy, we must ensure that each party to a transaction have knowledge only of that which is directly necessary for that transaction.
-				of that which is directly necessary for that transaction.
 			</p>
 			<p class="my-2">
-				<strong>Eric Hughes</strong> in
+				<strong>Eric Hughes</strong> in <a href="https://www.activism.net/cypherpunk/manifesto.html" class="external" target="_blank" rel="noopener"><cite title="Source Title">A Cypherpunk's Manifesto</cite></a>.
-				<a
-					href="https://www.activism.net/cypherpunk/manifesto.html"
-					class="external"
-					target="_blank"
-					rel="noopener"><cite title="Source Title">A Cypherpunk's Manifesto</cite></a
-				>.
 			</p>
 		</blockquote>
 	</div>
@@ -255,29 +164,20 @@
 <section id="monero-donation" class="section-container text-token text-center">
 	<div class="mx-auto flex w-full max-w-4xl flex-row items-center gap-10">
 		<div class="md:basis-3/4">
-			<label for="donationAddress">If you like to buy me a coffee, here is my Monero address:</label
+			<label for="donate">If you like to buy me a coffee, here is my Monero address:</label>
-			>
+			<textarea class="textarea my-2" id="donate" name="donate" data-clipboard="donate" readonly
-			<textarea
+				>{data.donation.address}</textarea
-				class="textarea my-2"
-				id="donationAddress"
-				name="donationAddress"
-				data-clipboard="donationAddress"
-				readonly
-				>8BWYe6GzbNKbxe3D8mPkfFMQA2rViaZJFhWShhZTjJCNG6EZHkXRZCKHiuKmwwe4DXDYF8KKcbGkvNYaiRG3sNt7JhnVp7D</textarea
 			>
 			<button
 				class="variant-filled-success btn"
-				use:clipboard={{ input: 'donationAddress' }}
+				use:clipboard={{ input: 'donate' }}
 				disabled={donationCopied}
 				on:click={copyDonationAddr}
 				>{donationCopied ? 'Donation Address Copied! 🤩' : 'Copy Donation Address'}</button
 			>
 		</div>
 		<div class="md:basis-1/4">
-			<img
+			<img src={data.donation.qr} alt="ditatompel's monero address" />
-				src="https://w3-s3-jkt1.ditatompel.com/pub/assets/img/fav/monerotip.png"
-				alt="ditatompel monero address"
-			/>
 			<p>Thank you so much! 🥰</p>
 		</div>
 	</div>