Use local static image for qr image donation

This commit is contained in:
ditatompel 2024-05-08 18:43:09 +07:00
parent 8821ad7995
commit ad5f0159db
No known key found for this signature in database
GPG key ID: 31D3D06D77950979
3 changed files with 55 additions and 143 deletions

View file

@ -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,
description: metaDefaults.description,
keywords: metaDefaults.keywords,
// Twitter
twitter: {
title: metaDefaults.title,
description: metaDefaults.description
}
title: 'Monero (XMR)',
description:
'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.',
keywords: 'monero,xmr,monero node,xmrnode,cryptocurrency'
},
links: [
{ 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'
}
};
}

View file

@ -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
href="https://www.getmonero.org"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://github.com/monero-project"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://www.reddit.com/r/Monero/"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://twitter.com/monero"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://www.facebook.com/monerocurrency/"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://telegram.me/monero"
class="variant-ghost chip mt-2 hover:variant-filled"
target="_blank"
rel="noopener"
>
<a 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
href="https://moneroworld.com"
class="external"
target="_blank"
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.
about Monero, such as
{#each data.links as link}
<a href={link.uri} class="external" target="_blank" rel="noopener">{link.text}</a>,&nbsp;
{/each} 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
class="card {currentVariant} card-hover overflow-hidden py-2 text-center"
href="/remote-nodes"
>
<a class="card 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>
<!-- 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>
<p>List of Monero remote nodes you can use when you cannot (or don't want to) run your own node.</p>
</div>
</a>
<a class="card {currentVariant} card-hover overflow-hidden py-2 text-center" href="/add-node">
<a class="card 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>
<!-- cspell:disable -->
Add your Monero public node so others can connect to your node.
<!-- cspell:enable -->
</p>
<p>Add your Monero public node so others can connect to your node.</p>
</div>
</a>
<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"
>
<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" >
<h2 class="h2 font-bold">Metrics</h2>
<div class="space-y-4 p-4">
<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>
<p>Collection of my Monero metrics (GitHub repository, blockchain, market, P2Pool) presented through Grafana. ↗</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
of that which is directly necessary for that transaction.
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.
</p>
<p class="my-2">
<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
>.
<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>.
</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
>
<textarea
class="textarea my-2"
id="donationAddress"
name="donationAddress"
data-clipboard="donationAddress"
readonly
>8BWYe6GzbNKbxe3D8mPkfFMQA2rViaZJFhWShhZTjJCNG6EZHkXRZCKHiuKmwwe4DXDYF8KKcbGkvNYaiRG3sNt7JhnVp7D</textarea
<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
>{data.donation.address}</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
src="https://w3-s3-jkt1.ditatompel.com/pub/assets/img/fav/monerotip.png"
alt="ditatompel monero address"
/>
<img src={data.donation.qr} alt="ditatompel's monero address" />
<p>Thank you so much! 🥰</p>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB