195 lines
7.8 KiB
HTML
195 lines
7.8 KiB
HTML
{{ define "main" }}
|
|
<div class="content-grid">
|
|
<main id="main-content">
|
|
|
|
<!-- Donate Header -->
|
|
<div class="donate-header pixel-border">
|
|
<div style="font-family:var(--font-terminal); font-size:0.85rem; color:var(--forest-light); margin-bottom:1rem;">
|
|
<span>~/donate $</span> <span style="color:var(--amber);">cat tip_jar.md</span>
|
|
</div>
|
|
<h1 class="post-title">{{ .Title }}</h1>
|
|
<p style="font-family:var(--font-body); font-style:italic; color:var(--text-warm); font-size:1rem; margin-top:0.5rem;">
|
|
{{- with .Params.subtitle }}{{ . }}{{- else }}If you enjoy the writing and want to keep the tea kettle going, any support is deeply appreciated.{{- end }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Donate Body (optional intro markdown) -->
|
|
{{- with .Content }}
|
|
<div class="resume-body" style="margin-bottom:2rem;">{{ . }}</div>
|
|
{{- end }}
|
|
|
|
<!-- Platforms -->
|
|
<div class="donate-grid">
|
|
|
|
{{- with .Params.kofi }}
|
|
<a href="https://ko-fi.com/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
|
|
<span class="donate-card__icon"><img src="/kofi.webp" width=30px height=30px/></span>
|
|
<div class="donate-card__name">Ko-fi</div>
|
|
<div class="donate-card__handle">ko-fi.com/{{ . }}</div>
|
|
<div class="donate-card__desc">Buy me a cup of cof- I mean, uh, tea. Ko-fi is not the most inclusive name...</div>
|
|
</a>
|
|
{{- end }}
|
|
|
|
{{- with .Params.liberapay }}
|
|
<a href="https://liberapay.com/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
|
|
<span class="donate-card__icon"><img src="/liberapay.svg" width=30px height=30px/></span>
|
|
<div class="donate-card__name">Liberapay</div>
|
|
<div class="donate-card__handle">liberapay.com/{{ . }}</div>
|
|
<div class="donate-card__desc">Like Patreon or Onlyfans but, like, better.</div>
|
|
</a>
|
|
{{- end }}
|
|
|
|
{{- with .Params.github_sponsors }}
|
|
<a href="https://github.com/sponsors/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
|
|
<div class="donate-card__icon">🐙</div>
|
|
<div class="donate-card__name">GitHub Sponsors</div>
|
|
<div class="donate-card__handle">github.com/sponsors/{{ . }}</div>
|
|
<div class="donate-card__desc">Support via GitHub</div>
|
|
</a>
|
|
{{- end }}
|
|
|
|
</div>
|
|
|
|
<!-- Crypto Wallets -->
|
|
{{- $hasCrypto := or .Params.bitcoin .Params.ethereum .Params.monero .Params.litecoin }}
|
|
{{- if $hasCrypto }}
|
|
<div class="donate-section">
|
|
<h2 class="donate-section__title">Crypto Wallets: unlike the fed, I don't have an inflation fetish</h2>
|
|
|
|
{{- with .Params.bitcoin }}
|
|
<div class="wallet-card pixel-border">
|
|
<div class="wallet-card__header">
|
|
<span class="wallet-card__icon"><img src="/bitcoin_logo.png" width=30px height=30px/></span>
|
|
<span class="wallet-card__name">Bitcoin</span>
|
|
<span class="wallet-card__ticker">BTC</span>
|
|
</div>
|
|
<div class="wallet-card__body">
|
|
<div class="wallet-card__address">
|
|
<span class="wallet-card__addr-text" id="btc-addr">{{ . }}</span>
|
|
<button class="wallet-card__copy" onclick="copyAddr('btc-addr', this)">[ copy ]</button>
|
|
</div>
|
|
<canvas class="wallet-qr" id="qr-btc" data-address="{{ . }}"></canvas>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- with .Params.ethereum }}
|
|
<div class="wallet-card pixel-border">
|
|
<div class="wallet-card__header">
|
|
<span class="wallet-card__icon"><img src="/ethereum_logo.png" width=15px height=30px/></span>
|
|
<span class="wallet-card__name">Ethereum</span>
|
|
<span class="wallet-card__ticker">ETH</span>
|
|
</div>
|
|
<div class="wallet-card__body">
|
|
<div class="wallet-card__address">
|
|
<span class="wallet-card__addr-text" id="eth-addr">{{ . }}</span>
|
|
<button class="wallet-card__copy" onclick="copyAddr('eth-addr', this)">[ copy ]</button>
|
|
</div>
|
|
<canvas class="wallet-qr" id="qr-eth" data-address="{{ . }}"></canvas>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- with .Params.monero }}
|
|
<div class="wallet-card pixel-border">
|
|
<div class="wallet-card__header">
|
|
<span class="wallet-card__icon"><img src="/monero_logo.png" width=30px height=30px/></span>
|
|
<span class="wallet-card__name">Monero</span>
|
|
<span class="wallet-card__ticker">XMR</span>
|
|
</div>
|
|
<div class="wallet-card__body">
|
|
<div class="wallet-card__address">
|
|
<span class="wallet-card__addr-text" id="xmr-addr">{{ . }}</span>
|
|
<button class="wallet-card__copy" onclick="copyAddr('xmr-addr', this)">[ copy ]</button>
|
|
</div>
|
|
<canvas class="wallet-qr" id="qr-xmr" data-address="{{ . }}"></canvas>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- with .Params.litecoin }}
|
|
<div class="wallet-card pixel-border">
|
|
<div class="wallet-card__header">
|
|
<span class="wallet-card__icon"><img src="/litecoin.png" width=30px height=30px/></span>
|
|
<span class="wallet-card__name">Litecoin</span>
|
|
<span class="wallet-card__ticker">LTC</span>
|
|
</div>
|
|
<div class="wallet-card__body">
|
|
<div class="wallet-card__address">
|
|
<span class="wallet-card__addr-text" id="ltc-addr">{{ . }}</span>
|
|
<button class="wallet-card__copy" onclick="copyAddr('ltc-addr', this)">[ copy ]</button>
|
|
</div>
|
|
<canvas class="wallet-qr" id="qr-ltc" data-address="{{ . }}"></canvas>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
</div>
|
|
{{- end }}
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
<script>
|
|
// Copy address to clipboard
|
|
function copyAddr(id, btn) {
|
|
var text = document.getElementById(id).textContent.trim();
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
var orig = btn.textContent;
|
|
btn.textContent = '[ copied! ]';
|
|
btn.style.color = 'var(--forest-light)';
|
|
setTimeout(function() { btn.textContent = orig; btn.style.color = ''; }, 2000);
|
|
});
|
|
}
|
|
|
|
// Theme colours (match CSS variables)
|
|
var QR_DARK = '#d4a228'; // --amber: the "on" modules
|
|
var QR_LIGHT = '#130e07'; // --bg-primary: the "off" background
|
|
|
|
// Generate a QR code into each canvas
|
|
document.querySelectorAll('.wallet-qr').forEach(function(canvas) {
|
|
var address = canvas.getAttribute('data-address');
|
|
if (!address) return;
|
|
|
|
// qrcode.js needs a fresh div to render into, then we pull the image
|
|
var tmp = document.createElement('div');
|
|
tmp.style.display = 'none';
|
|
document.body.appendChild(tmp);
|
|
|
|
new QRCode(tmp, {
|
|
text: address,
|
|
width: 160,
|
|
height: 160,
|
|
colorDark: QR_DARK,
|
|
colorLight: QR_LIGHT,
|
|
correctLevel: QRCode.CorrectLevel.M,
|
|
});
|
|
|
|
// qrcode.js creates an <img> inside the div once done
|
|
// Give it a tick to finish then copy to our canvas
|
|
setTimeout(function() {
|
|
var img = tmp.querySelector('img');
|
|
if (!img) return;
|
|
img.onload = function() {
|
|
canvas.width = 160;
|
|
canvas.height = 160;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0, 160, 160);
|
|
document.body.removeChild(tmp);
|
|
};
|
|
// If already loaded
|
|
if (img.complete) {
|
|
canvas.width = 160;
|
|
canvas.height = 160;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0, 160, 160);
|
|
document.body.removeChild(tmp);
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
</main>
|
|
|
|
{{ partial "sidebar.html" . }}
|
|
</div>
|
|
{{ end }}
|