diff --git a/CHANGELOG.md b/CHANGELOG.md index fd5d5a1..36cd7f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## [0.1.2] - 2024-06-09 + +- drop unused paragraph `Support us with crypto donations`. Feel free to use your own text. +- added some CSS and JS to make it more handy +- added copy address button +- added show QR with the address button +- make some refactoring 🤓 + ## [0.1.1] - 2024-06-07 - add conditional view of donation crypto currences diff --git a/Gemfile.lock b/Gemfile.lock index 8120398..359dc9c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - jekyll-crypto-donations (0.1.1) + jekyll-crypto-donations (0.1.2) jekyll (~> 4.3) GEM diff --git a/assets/css/crypto-donations/crypto-donations.css b/assets/css/crypto-donations/crypto-donations.css new file mode 100644 index 0000000..5614850 --- /dev/null +++ b/assets/css/crypto-donations/crypto-donations.css @@ -0,0 +1,116 @@ +#jekyll-crypto-donations { + font-family: Arial, sans-serif; + margin: 20px 0; + color: var(--text-primary); + padding: 30px 20px 20px; + text-align: center +} + +.jekyll-crypto-donations__title { + font-family: CharterC,sans-serif; + font-size: 32px; + font-weight: 700; + line-height: 38px +} + +.jekyll-crypto-donations__item { + border: 1px solid var(--text-color); + padding: 10px; + margin-bottom: 10px; + border-radius: 5px; + margin-top: 24px +} + +.jekyll-crypto-donations__crypto-name { + font-weight: bold; + margin-bottom: 5px; +} + +.jekyll-crypto-donations__crypto-code span { + font-family: monospace; + background:var(--background-color); + padding: 5px; + border-radius: 3px; + display: inline-block; +} + +.jekyll-crypto-donations__crypto-buttons { + margin-top: -10px; +} + +.jekyll-crypto-donations__button:hover { + color: var(--text-primary)!important +} + +@media (min-width: 885px) { + .jekyll-crypto-donations__button { + font-size:14px + } +} + + +.jekyll-crypto-donations__crypto-btn-copy, +.jekyll-crypto-donations__crypto-btn-qr { + border: none; + padding: 5px 10px; + margin-right: 5px; + fill: var(--text-color); + background: none; + height: 20px; + opacity: .5; + transition: opacity .2s ease; + width: 20px +} + +.jekyll-crypto-donations__crypto-btn-copy:hover, +.jekyll-crypto-donations__crypto-btn-qr:hover { + opacity: 1 +} + +.jekyll-crypto-donations__button>* { + position: relative +} + +.jekyll-crypto-donations__button:active:before { + background-color: var(--background-color) +} + +.jekyll-crypto-donations__button:hover:before { + opacity: 1 +} + +.jekyll-crypto-donations__button:before { + background-color: var(--background-color); + border-radius: inherit; + content: ""; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + transition: opacity .3s ease; + width: 100% +} + +.jekyll-crypto-donations__crypto-image-qr { + display: none; +} + +.jekyll-crypto-donations__crypto--show-qr .jekyll-crypto-donations__crypto-image-qr { + display: inline-block; +} + +.jekyll-crypto-donations__crypto-code--is-copied span { + display: none; + text-align: center +} + +.jekyll-crypto-donations__crypto-code--is-copied:before { + color: var(--text-color); + content: "Copied!"; + font-family: monospace; + background: var(--background-color); + padding: 5px; + border-radius: 3px; + display: inline-block; +} diff --git a/lib/jekyll-crypto-donations.rb b/lib/jekyll-crypto-donations.rb index a0bf2c5..6ecae9c 100644 --- a/lib/jekyll-crypto-donations.rb +++ b/lib/jekyll-crypto-donations.rb @@ -7,48 +7,104 @@ module Jekyll module CryptoDonations # describe {% crypto_donations %} tag content - class DonationsTag < Liquid::Tag + class DonationsTag < Liquid::Tag # rubocop:disable Metrics/ClassLength attr_reader :btc_address, :eth_address, :usdt_address + CRYPTO_CURRENCIES = { + btc: { name: "Bitcoin", ticker: "BTC" }, + eth: { name: "Ethereum", ticker: "ETH" }, + usdt: { name: "Tether", ticker: "USDT TRC-20" } + }.freeze + def initialize(tag_name, text, tokens) super @text = text end - def btc_html - return "" unless btc_address - + def currency_html(currency_ticker, address) + currency = CRYPTO_CURRENCIES[currency_ticker] <<~HTML -
-

Bitcoin (BTC)

-

Address: #{btc_address}

-

Loading...

+
+ #{currency[:name]} (#{currency[:ticker]}) +
+
+
+ #{address} +
+
+ + +
+ Loading... +
+
+
+
+ +
+
HTML end + def btc_html + return "" unless btc_address + + currency_html(:btc, btc_address) + end + def eth_html return "" unless eth_address - <<~HTML -
-

Ethereum (ETH)

-

Address: #{eth_address}

-

Loading...

-
- HTML + currency_html(:eth, eth_address) end def usdt_html return "" unless usdt_address - <<~HTML -
-

USDT (TRC-20)

-

Address: #{usdt_address}

-

Loading...

-
- HTML + currency_html(:usdt, usdt_address) end def btc_js @@ -56,7 +112,7 @@ def btc_js <<~JS const btcDonations = await getDonations('btc', '#{btc_address}'); - document.getElementById('btc-donations').innerText = `Total received: ${btcDonations} BTC`; + document.getElementById('jekyll-crypto-donations_btc-total').innerText = `Total received: ${btcDonations} BTC`; JS end @@ -65,7 +121,7 @@ def eth_js <<~JS const ethDonations = await getDonations('eth', '#{eth_address}'); - document.getElementById('eth-donations').innerText = `Total received: ${ethDonations} ETH`; + document.getElementById('jekyll-crypto-donations_eth-total').innerText = `Total received: ${ethDonations} ETH`; JS end @@ -74,7 +130,7 @@ def usdt_js <<~JS const usdtDonations = await getDonations('usdt', '#{usdt_address}'); - document.getElementById('usdt-donations').innerText = `Total received: ${usdtDonations} USDT`; + document.getElementById('jekyll-crypto-donations_usdt-total').innerText = `Total received: ${usdtDonations} USDT`; JS end @@ -87,9 +143,10 @@ def site_config(context) def opening_html <<~HTML -
-

Support Us with Crypto Donations

-

#{@text}

+
+
+ #{@text} +
HTML end @@ -98,6 +155,22 @@ def closing_html