mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 05:36:07 +01:00
Add thanks & donations
This commit is contained in:
JP Hastings-Spital
parent
1dd017ebe5
commit
8df1a5fb3c
7 changed files with 358 additions and 13 deletions
6
content/donation-error.md
Normal file
6
content/donation-error.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Oops!
|
||||||
|
emoji: 😰
|
||||||
|
---
|
||||||
|
|
||||||
|
Something went wrong while trying to register your donation. If you weren't using the form on the [thanks page](../thanks/) then please try there, otherwise please [reach out to me by email](../standing-invitation/).
|
||||||
12
content/donation-registered.md
Normal file
12
content/donation-registered.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
title: Thank you!
|
||||||
|
emoji: 🙇♂️
|
||||||
|
---
|
||||||
|
|
||||||
|
Thank you so much! It makes me _enormously_ happy that you're appreciating my work, and doubly so that you're willing to share what you have with others on my behalf.
|
||||||
|
|
||||||
|
Money can set up some very strange incentives in humans, but donating to a charity, supporting a person who inspires you, investing in your community, and so many other acts of openness bring us closer together — for me, the entire point of all this.
|
||||||
|
|
||||||
|
If you'd like to tell me about the person, group or cause that you contrinuted to on my behalf I'd [love to hear about it](../standing-invitation/)!
|
||||||
|
|
||||||
|
_By the way, the counter on the [thanks page](../thanks/) can take a few minutes to update!_
|
||||||
14
content/thanks.md
Normal file
14
content/thanks.md
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
title: Saying thank you
|
||||||
|
emoji: 💞
|
||||||
|
---
|
||||||
|
|
||||||
|
Human connection is really important to me and, in that way and others, on this site and elsewhere, I try to act to leave the world better off than when I arrived.
|
||||||
|
|
||||||
|
It's extremely nice to know when I've achieved that, but it means _even more_ to me when people "pay it forward". If you've appreciated anything on this site, or anything else I've done or made, you'd humble me by sharing your time, effort, money, privilege, or kindness with anyone you feel deserves it.
|
||||||
|
|
||||||
|
Though money is the least of the valuable things I mentioned above, it can make a real difference in many places. If my efforts inspire you to donate money to any cause you feel is worthy, you can register that donation below to let me know.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< donations >}}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="h-card vcard">
|
<div class="h-card vcard">
|
||||||
<a href="https://byjp.me" rel="me" class="u-uid u-url"><img class="profile u-photo " src="profile-512.jpg" /></a>
|
<a href="https://byjp.me" rel="me" class="u-uid u-url"><img class="profile u-photo" src="profile-512.jpg" alt="A photo of me smiling, with short brown hair, a beard and glasses." /></a>
|
||||||
Hello! I'm <em class="p-name fn always-accented">JP Hastings-Spital</em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card">I'm a <span clas="p-job-title">principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="p-org u-url" rel="noopener">Deliveroo</a></span>.
|
Hello! I'm <em class="p-name fn always-accented">JP Hastings-Spital</em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. <span class="h-card">I'm a <span clas="p-job-title">principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="p-org u-url" rel="noopener">Deliveroo</a></span>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
199
layouts/shortcodes/donations.html
Normal file
199
layouts/shortcodes/donations.html
Normal file
|
|
@ -0,0 +1,199 @@
|
||||||
|
{{ $donations := getJSON "https://api.val.town/v1/run/byjp.donations" }}
|
||||||
|
<p>Friends have donated <strong>£{{ $donations.totalGBP }}</strong> (across {{ $donations.currencyCount }} currencies) to worthy causes in thanks. Thank <em>you</em>!</em></p>
|
||||||
|
<style>
|
||||||
|
.donate input[type=number] {
|
||||||
|
width:75px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.donate input[type=number]::-webkit-inner-spin-button,
|
||||||
|
.donate input[type=number]::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.donate label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.donate .select {
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<form class="donate" method="POST" action="https://byjp-registerDonation.express.val.run" style="text-align: center;">
|
||||||
|
<label for="amount">Donation amount</label>
|
||||||
|
<input type="number" name="amount" min="0.001" step="any" value="1.00" size="5"/>
|
||||||
|
<label for="currency">Donation currency</label>
|
||||||
|
<div class="select">
|
||||||
|
<select name="currency">
|
||||||
|
<option value="AED">AED</option>
|
||||||
|
<option value="AFN">AFN</option>
|
||||||
|
<option value="ALL">ALL</option>
|
||||||
|
<option value="AMD">AMD</option>
|
||||||
|
<option value="ANG">ANG</option>
|
||||||
|
<option value="AOA">AOA</option>
|
||||||
|
<option value="ARS">ARS</option>
|
||||||
|
<option value="AUD">AUD</option>
|
||||||
|
<option value="AWG">AWG</option>
|
||||||
|
<option value="AZN">AZN</option>
|
||||||
|
<option value="BAM">BAM</option>
|
||||||
|
<option value="BBD">BBD</option>
|
||||||
|
<option value="BDT">BDT</option>
|
||||||
|
<option value="BGN">BGN</option>
|
||||||
|
<option value="BHD">BHD</option>
|
||||||
|
<option value="BIF">BIF</option>
|
||||||
|
<option value="BMD">BMD</option>
|
||||||
|
<option value="BND">BND</option>
|
||||||
|
<option value="BOB">BOB</option>
|
||||||
|
<option value="BRL">BRL</option>
|
||||||
|
<option value="BSD">BSD</option>
|
||||||
|
<option value="BTC">BTC</option>
|
||||||
|
<option value="BTN">BTN</option>
|
||||||
|
<option value="BWP">BWP</option>
|
||||||
|
<option value="BYN">BYN</option>
|
||||||
|
<option value="BZD">BZD</option>
|
||||||
|
<option value="CAD">CAD</option>
|
||||||
|
<option value="CDF">CDF</option>
|
||||||
|
<option value="CHF">CHF</option>
|
||||||
|
<option value="CLF">CLF</option>
|
||||||
|
<option value="CLP">CLP</option>
|
||||||
|
<option value="CNH">CNH</option>
|
||||||
|
<option value="CNY">CNY</option>
|
||||||
|
<option value="COP">COP</option>
|
||||||
|
<option value="CRC">CRC</option>
|
||||||
|
<option value="CUC">CUC</option>
|
||||||
|
<option value="CUP">CUP</option>
|
||||||
|
<option value="CVE">CVE</option>
|
||||||
|
<option value="CZK">CZK</option>
|
||||||
|
<option value="DJF">DJF</option>
|
||||||
|
<option value="DKK">DKK</option>
|
||||||
|
<option value="DOP">DOP</option>
|
||||||
|
<option value="DZD">DZD</option>
|
||||||
|
<option value="EGP">EGP</option>
|
||||||
|
<option value="ERN">ERN</option>
|
||||||
|
<option value="ETB">ETB</option>
|
||||||
|
<option value="EUR">EUR</option>
|
||||||
|
<option value="FJD">FJD</option>
|
||||||
|
<option value="FKP">FKP</option>
|
||||||
|
<option value="GBP" selected>GBP</option>
|
||||||
|
<option value="GEL">GEL</option>
|
||||||
|
<option value="GGP">GGP</option>
|
||||||
|
<option value="GHS">GHS</option>
|
||||||
|
<option value="GIP">GIP</option>
|
||||||
|
<option value="GMD">GMD</option>
|
||||||
|
<option value="GNF">GNF</option>
|
||||||
|
<option value="GTQ">GTQ</option>
|
||||||
|
<option value="GYD">GYD</option>
|
||||||
|
<option value="HKD">HKD</option>
|
||||||
|
<option value="HNL">HNL</option>
|
||||||
|
<option value="HRK">HRK</option>
|
||||||
|
<option value="HTG">HTG</option>
|
||||||
|
<option value="HUF">HUF</option>
|
||||||
|
<option value="IDR">IDR</option>
|
||||||
|
<option value="ILS">ILS</option>
|
||||||
|
<option value="IMP">IMP</option>
|
||||||
|
<option value="INR">INR</option>
|
||||||
|
<option value="IQD">IQD</option>
|
||||||
|
<option value="IRR">IRR</option>
|
||||||
|
<option value="ISK">ISK</option>
|
||||||
|
<option value="JEP">JEP</option>
|
||||||
|
<option value="JMD">JMD</option>
|
||||||
|
<option value="JOD">JOD</option>
|
||||||
|
<option value="JPY">JPY</option>
|
||||||
|
<option value="KES">KES</option>
|
||||||
|
<option value="KGS">KGS</option>
|
||||||
|
<option value="KHR">KHR</option>
|
||||||
|
<option value="KMF">KMF</option>
|
||||||
|
<option value="KPW">KPW</option>
|
||||||
|
<option value="KRW">KRW</option>
|
||||||
|
<option value="KWD">KWD</option>
|
||||||
|
<option value="KYD">KYD</option>
|
||||||
|
<option value="KZT">KZT</option>
|
||||||
|
<option value="LAK">LAK</option>
|
||||||
|
<option value="LBP">LBP</option>
|
||||||
|
<option value="LKR">LKR</option>
|
||||||
|
<option value="LRD">LRD</option>
|
||||||
|
<option value="LSL">LSL</option>
|
||||||
|
<option value="LYD">LYD</option>
|
||||||
|
<option value="MAD">MAD</option>
|
||||||
|
<option value="MDL">MDL</option>
|
||||||
|
<option value="MGA">MGA</option>
|
||||||
|
<option value="MKD">MKD</option>
|
||||||
|
<option value="MMK">MMK</option>
|
||||||
|
<option value="MNT">MNT</option>
|
||||||
|
<option value="MOP">MOP</option>
|
||||||
|
<option value="MRU">MRU</option>
|
||||||
|
<option value="MUR">MUR</option>
|
||||||
|
<option value="MVR">MVR</option>
|
||||||
|
<option value="MWK">MWK</option>
|
||||||
|
<option value="MXN">MXN</option>
|
||||||
|
<option value="MYR">MYR</option>
|
||||||
|
<option value="MZN">MZN</option>
|
||||||
|
<option value="NAD">NAD</option>
|
||||||
|
<option value="NGN">NGN</option>
|
||||||
|
<option value="NIO">NIO</option>
|
||||||
|
<option value="NOK">NOK</option>
|
||||||
|
<option value="NPR">NPR</option>
|
||||||
|
<option value="NZD">NZD</option>
|
||||||
|
<option value="OMR">OMR</option>
|
||||||
|
<option value="PAB">PAB</option>
|
||||||
|
<option value="PEN">PEN</option>
|
||||||
|
<option value="PGK">PGK</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value="PKR">PKR</option>
|
||||||
|
<option value="PLN">PLN</option>
|
||||||
|
<option value="PYG">PYG</option>
|
||||||
|
<option value="QAR">QAR</option>
|
||||||
|
<option value="RON">RON</option>
|
||||||
|
<option value="RSD">RSD</option>
|
||||||
|
<option value="RUB">RUB</option>
|
||||||
|
<option value="RWF">RWF</option>
|
||||||
|
<option value="SAR">SAR</option>
|
||||||
|
<option value="SBD">SBD</option>
|
||||||
|
<option value="SCR">SCR</option>
|
||||||
|
<option value="SDG">SDG</option>
|
||||||
|
<option value="SEK">SEK</option>
|
||||||
|
<option value="SGD">SGD</option>
|
||||||
|
<option value="SHP">SHP</option>
|
||||||
|
<option value="SLL">SLL</option>
|
||||||
|
<option value="SOS">SOS</option>
|
||||||
|
<option value="SRD">SRD</option>
|
||||||
|
<option value="SSP">SSP</option>
|
||||||
|
<option value="STD">STD</option>
|
||||||
|
<option value="STN">STN</option>
|
||||||
|
<option value="SVC">SVC</option>
|
||||||
|
<option value="SYP">SYP</option>
|
||||||
|
<option value="SZL">SZL</option>
|
||||||
|
<option value="THB">THB</option>
|
||||||
|
<option value="TJS">TJS</option>
|
||||||
|
<option value="TMT">TMT</option>
|
||||||
|
<option value="TND">TND</option>
|
||||||
|
<option value="TOP">TOP</option>
|
||||||
|
<option value="TRY">TRY</option>
|
||||||
|
<option value="TTD">TTD</option>
|
||||||
|
<option value="TWD">TWD</option>
|
||||||
|
<option value="TZS">TZS</option>
|
||||||
|
<option value="UAH">UAH</option>
|
||||||
|
<option value="UGX">UGX</option>
|
||||||
|
<option value="USD">USD</option>
|
||||||
|
<option value="UYU">UYU</option>
|
||||||
|
<option value="UZS">UZS</option>
|
||||||
|
<option value="VES">VES</option>
|
||||||
|
<option value="VND">VND</option>
|
||||||
|
<option value="VUV">VUV</option>
|
||||||
|
<option value="WST">WST</option>
|
||||||
|
<option value="XAF">XAF</option>
|
||||||
|
<option value="XAG">XAG</option>
|
||||||
|
<option value="XAU">XAU</option>
|
||||||
|
<option value="XCD">XCD</option>
|
||||||
|
<option value="XDR">XDR</option>
|
||||||
|
<option value="XOF">XOF</option>
|
||||||
|
<option value="XPD">XPD</option>
|
||||||
|
<option value="XPF">XPF</option>
|
||||||
|
<option value="XPT">XPT</option>
|
||||||
|
<option value="YER">YER</option>
|
||||||
|
<option value="ZAR">ZAR</option>
|
||||||
|
<option value="ZMW">ZMW</option>
|
||||||
|
<option value="ZWL">ZWL</option>
|
||||||
|
</select>
|
||||||
|
<span class="focus"></span>
|
||||||
|
</div>
|
||||||
|
<input type="submit" value="I donated" />
|
||||||
|
</form>
|
||||||
|
|
@ -46,16 +46,6 @@ body {
|
||||||
background-color: $light-background;
|
background-color: $light-background;
|
||||||
color: $light-color;
|
color: $light-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme=dark] & {
|
|
||||||
background-color: $dark-background;
|
|
||||||
color: $dark-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme=light] & {
|
|
||||||
background-color: $light-background;
|
|
||||||
color: $light-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
*[data-emoji] {
|
*[data-emoji] {
|
||||||
|
|
@ -628,3 +618,127 @@ a[href^="#fn:"] {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid $light-color-secondary;
|
||||||
|
background-color: $light-background;
|
||||||
|
color: $light-color;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
border: 1px solid $dark-color-secondary;
|
||||||
|
background-color: $dark-background;
|
||||||
|
color: $dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
border: 1px solid $light-color-secondary;
|
||||||
|
background-color: $light-background;
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
// A reset of styles, including removing the default dropdown arrow
|
||||||
|
appearance: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 0 1em 0 0;
|
||||||
|
margin: 2px 2px 2.5px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
cursor: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
color: $light-color;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
color: $dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
color: $light-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stack above custom arrow
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
// Remove dropdown arrow in IE10 & IE11
|
||||||
|
// @link https://www.filamentgroup.com/lab/select-css.html
|
||||||
|
&::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove focus outline, will add on alternate element
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select {
|
||||||
|
display: inline-grid;
|
||||||
|
grid-template-areas: "select";
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 0.3em 0 0;
|
||||||
|
|
||||||
|
select,
|
||||||
|
&::after {
|
||||||
|
grid-area: select;
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $light-color-secondary;
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
border: 1px solid $dark-color-secondary;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
border: 1px solid $light-color-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1.0;
|
||||||
|
|
||||||
|
background-color: $light-background;
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background-color: $dark-background;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
background-color: $light-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom arrow
|
||||||
|
&:not(.select--multiple)::after {
|
||||||
|
content: "";
|
||||||
|
justify-self: end;
|
||||||
|
width: 0.64em;
|
||||||
|
height: 0.4em;
|
||||||
|
background-color: $light-color-secondary;
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background-color: $dark-color-secondary;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
background-color: $light-color-secondary;
|
||||||
|
}
|
||||||
|
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Interim solution until :focus-within has better support
|
||||||
|
select:focus + .focus {
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
{{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }}
|
{{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }}
|
||||||
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
|
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }}
|
||||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
<link rel="stylesheet" href="{{ $style.RelPermalink | absURL }}">
|
||||||
|
|
||||||
{{ range $val := $.Site.Params.customCSS }}
|
{{ range $val := $.Site.Params.customCSS }}
|
||||||
{{ if gt (len $val) 0 }}
|
{{ if gt (len $val) 0 }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue