Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS, copy address and qr code buttons #3

Merged
merged 2 commits into from
Jun 9, 2024
Merged

CSS, copy address and qr code buttons #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
059d5be
CSS, copy address and qr code buttons
madmatvey Jun 9, 2024
1df5c45
changelog
madmatvey Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
jekyll-crypto-donations (0.1.1)
jekyll-crypto-donations (0.1.2)
jekyll (~> 4.3)

GEM
Expand Down
116 changes: 116 additions & 0 deletions assets/css/crypto-donations/crypto-donations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
142 changes: 114 additions & 28 deletions lib/jekyll-crypto-donations.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,112 @@
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
<div>
<h3>Bitcoin (BTC)</h3>
<p>Address: #{btc_address}</p>
<p id="btc-donations">Loading...</p>
<div class="jekyll-crypto-donations__item">
<span class="jekyll-crypto-donations__crypto-name">#{currency[:name]} (#{currency[:ticker]})</span>
<div class="jekyll-crypto-donations__crypto">
<div class="jekyll-crypto-donations__crypto-value">
<div class="jekyll-crypto-donations__crypto-code">
<span>#{address}</span>
</div>
<div class="jekyll-crypto-donations__crypto-buttons">
<button class="jekyll-crypto-donations__crypto-btn-copy">
<svg id="svg" fill="#ededed" stroke="#ededed" width="20" height="20" version="1.1" viewBox="144 144 512 512" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
<g id="IconSvg_bgCarrier" stroke-width="0"></g>
<g id="IconSvg_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0">
<g xmlns="http://www.w3.org/2000/svg">
<path d="m458.74 466.8h123.13 17.23c5.4414 0 10.078-4.6367 10.078-10.078v-86.957-139.15-31.84c0-5.4414-4.6367-10.078-10.078-10.078h-87.359-138.95-31.641c-5.4414 0-10.078 4.6367-10.078 10.078v126.66 17.938c0 13 20.152 13 20.152 0v-126.66-17.938c-3.3242 3.3242-6.75 6.75-10.078 10.078h87.359 138.95 31.641c-3.3242-3.3242-6.75-6.75-10.078-10.078v86.957 139.15 31.84l10.078-10.078h-123.13-17.23c-12.992 0.003906-12.992 20.156 0.003907 20.156z"></path>
<path d="m458.74 591.14h-86.957-139.15-31.84l10.078 10.078v-86.957-139.15-31.84c-3.3242 3.3242-6.75 6.75-10.078 10.078h86.957 139.15 31.84c-3.3242-3.3242-6.75-6.75-10.078-10.078v86.957 139.15 31.84c0 13 20.152 13 20.152 0v-86.957-139.15-31.84c0-5.4414-4.6367-10.078-10.078-10.078h-86.957-139.15-31.84c-5.4414 0-10.078 4.6367-10.078 10.078v86.957 139.15 31.84c0 5.4414 4.6367 10.078 10.078 10.078h86.957 139.15 31.84c13.004-0.003906 13.004-20.156 0.003907-20.156z"></path>
</g>
</g>
<g id="IconSvg_iconCarrier">
<g xmlns="http://www.w3.org/2000/svg">
<path d="m458.74 466.8h123.13 17.23c5.4414 0 10.078-4.6367 10.078-10.078v-86.957-139.15-31.84c0-5.4414-4.6367-10.078-10.078-10.078h-87.359-138.95-31.641c-5.4414 0-10.078 4.6367-10.078 10.078v126.66 17.938c0 13 20.152 13 20.152 0v-126.66-17.938c-3.3242 3.3242-6.75 6.75-10.078 10.078h87.359 138.95 31.641c-3.3242-3.3242-6.75-6.75-10.078-10.078v86.957 139.15 31.84l10.078-10.078h-123.13-17.23c-12.992 0.003906-12.992 20.156 0.003907 20.156z"></path>
<path d="m458.74 591.14h-86.957-139.15-31.84l10.078 10.078v-86.957-139.15-31.84c-3.3242 3.3242-6.75 6.75-10.078 10.078h86.957 139.15 31.84c-3.3242-3.3242-6.75-6.75-10.078-10.078v86.957 139.15 31.84c0 13 20.152 13 20.152 0v-86.957-139.15-31.84c0-5.4414-4.6367-10.078-10.078-10.078h-86.957-139.15-31.84c-5.4414 0-10.078 4.6367-10.078 10.078v86.957 139.15 31.84c0 5.4414 4.6367 10.078 10.078 10.078h86.957 139.15 31.84c13.004-0.003906 13.004-20.156 0.003907-20.156z"></path>
</g>
</g>
</svg>
</button>
<button class="jekyll-crypto-donations__crypto-btn-qr">
<svg id="svg" fill="#ededed" stroke="#ededed" width="20" height="20" version="1.1" viewBox="144 144 512 512" xmlns="http://www.w3.org/2000/svg" stroke-width="0">
<g id="IconSvg_bgCarrier" stroke-width="0"></g>
<g id="IconSvg_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0">
<g xmlns="http://www.w3.org/2000/svg">
<path d="m379.01 588.93h-167.94v-167.93h167.94zm-125.95-41.984h83.969v-83.965h-83.969z"></path>
<path d="m588.93 379.01h-167.93v-167.94h167.94zm-125.95-41.984h83.969l-0.003906-83.969h-83.965z"></path>
<path d="m379.01 379.01h-167.94v-167.94h167.94zm-125.95-41.984h83.969v-83.969h-83.969z"></path>
<path d="m588.93 588.93h-83.969v-41.984h41.984v-41.984h41.984z"></path>
<path d="m462.98 588.93h-41.984v-83.969h41.984v-41.98h41.98v83.965h-41.98z"></path>
<path d="m420.99 420.99h41.984v41.984h-41.984z"></path>
<path d="m504.96 420.99h83.969v41.984h-83.969z"></path>
</g>
</g>
<g id="IconSvg_iconCarrier">
<g xmlns="http://www.w3.org/2000/svg">
<path d="m379.01 588.93h-167.94v-167.93h167.94zm-125.95-41.984h83.969v-83.965h-83.969z"></path>
<path d="m588.93 379.01h-167.93v-167.94h167.94zm-125.95-41.984h83.969l-0.003906-83.969h-83.965z"></path>
<path d="m379.01 379.01h-167.94v-167.94h167.94zm-125.95-41.984h83.969v-83.969h-83.969z"></path>
<path d="m588.93 588.93h-83.969v-41.984h41.984v-41.984h41.984z"></path>
<path d="m462.98 588.93h-41.984v-83.969h41.984v-41.98h41.98v83.965h-41.98z"></path>
<path d="m420.99 420.99h41.984v41.984h-41.984z"></path>
<path d="m504.96 420.99h83.969v41.984h-83.969z"></path>
</g>
</g>
</svg>
</button>
<div class="jekyll-crypto-donations__crypto-total-received">
<span id="jekyll-crypto-donations_#{currency_ticker}-total">Loading...</span>
</div>
</div>
</div>
<div class="jekyll-crypto-donations__crypto-image-qr">
<img alt="" width="150px" heght="150px" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=#{address}">
</div>
</div>
</div>
HTML
end

def btc_html
return "" unless btc_address

currency_html(:btc, btc_address)
end

def eth_html
return "" unless eth_address

<<~HTML
<div>
<h3>Ethereum (ETH)</h3>
<p>Address: #{eth_address}</p>
<p id="eth-donations">Loading...</p>
</div>
HTML
currency_html(:eth, eth_address)
end

def usdt_html
return "" unless usdt_address

<<~HTML
<div>
<h3>USDT (TRC-20)</h3>
<p>Address: #{usdt_address}</p>
<p id="usdt-donations">Loading...</p>
</div>
HTML
currency_html(:usdt, usdt_address)
end

def btc_js
return "" unless btc_address

<<~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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -87,9 +143,10 @@ def site_config(context)

def opening_html
<<~HTML
<div id="crypto-donations">
<h2>Support Us with Crypto Donations</h2>
<p>#{@text}</p>
<div id="jekyll-crypto-donations">
<div class="jekyll-crypto-donations__description">
<span>#{@text}</span>
</div>
HTML
end

Expand All @@ -98,6 +155,22 @@ def closing_html
</div>
<script type="module">
import { getDonations } from '/assets/js/crypto-donations/crypto-donations.js';
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.jekyll-crypto-donations__item').forEach((item) => {
item.querySelector('.jekyll-crypto-donations__crypto-btn-copy').addEventListener('click', () => {
const code = item.querySelector('.jekyll-crypto-donations__crypto-code');
navigator.clipboard.writeText(code.innerText);
code.classList.add('jekyll-crypto-donations__crypto-code--is-copied');
setTimeout(() => {
code.classList.remove('jekyll-crypto-donations__crypto-code--is-copied');
}, 1500);
});

item.querySelector('.jekyll-crypto-donations__crypto-btn-qr').addEventListener('click', () => {
item.querySelector('.jekyll-crypto-donations__crypto').classList.toggle('jekyll-crypto-donations__crypto--show-qr');
});
});
});

document.addEventListener('DOMContentLoaded', async () => {
HTML
Expand Down Expand Up @@ -141,4 +214,17 @@ def render(context)
destination = File.join(site.dest, "assets/js/crypto-donations/crypto-donations.js")
FileUtils.mkdir_p(File.dirname(destination))
FileUtils.cp(source, destination)

source_css = File.expand_path("../assets/css/crypto-donations/crypto-donations.css", __dir__)
destination_css = File.join(site.dest, "assets/css/crypto-donations.css")
FileUtils.mkdir_p(File.dirname(destination_css))
FileUtils.cp(source_css, destination_css)
end

Jekyll::Hooks.register :documents, :pre_render do |document|
if document.output_ext == ".html"
document.content = <<~HTML + document.content # rubocop:disable Style/StringConcatenation
<link rel="stylesheet" href="/assets/css/crypto-donations.css">
HTML
end
end
2 changes: 1 addition & 1 deletion lib/jekyll-crypto-donations/version.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

module Jekyll
module CryptoDonations
VERSION = "0.1.1"
VERSION = "0.1.2"
end
end
1 change: 0 additions & 1 deletion spec/jekyll_crypto_donations_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@

describe "#render" do
it "returns the HTML with all donation addresses" do
expect(tag).to include("Support Us with Crypto Donations")
expect(tag).to include("Additional text")
expect(tag).to include("btc_test_address")
expect(tag).to include("eth_test_address")
Expand Down
Loading