bulma/docs/love.html
2022-02-03 12:51:38 +00:00

94 lines
2.7 KiB
HTML

---
fulltitle: Love for Bulma 😍
layout: default
route: love
breadcrumb:
- home
- love
tweets:
- id: "900692286744535041"
date: "2:12 PM - 24 Aug 2017"
content: 'So impressed with the speed and clarity of implementing <a href="https://twitter.com/search?q=%23bulma">#bulma</a> CSS framework on a new project. Kudos <a href="https://twitter.com/jgthms">@jgthms</a>'
fullname: "Jamie Hylands"
username: "JamieAHylands"
avatar: "https://pbs.twimg.com/profile_images/872757791236272128/31VmJF-L_normal.jpg"
hearts: "1"
retweets: "0"
---
{% include global/navbar.html id="Love" %}
{%
include components/hero.html
color="love"
icon="fas fa-heart"
title="**Love** for Bulma"
subtitle="Happy thoughts from all around the world"
%}
{% assign encoded_url = site.data.meta.title | urlencode %}
{% assign encoded_url_bis = 'https://bulma.io' | urlencode %}
{% assign tweet_href = 'https://twitter.com/intent/tweet?text=' | append: encoded_url | append: '&hashtags=bulmaio&url=' | append: encoded_url_bis | append: '&via=jgthms' %}
{% capture call_button %}
{% include
elements/tw-button.html
label="Tweet #bulmaio"
href=tweet_href
%}
{% endcapture %}
{%
include components/call.html
color="twitter"
text='Are you a Bulma fan too? <strong>Show your support!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>'
button=call_button
%}
<script type="text/javascript">
function compareTweets(key) {
return (a, b) => {
const avalue = parseInt(a.dataset[key]);
const bvalue = parseInt(b.dataset[key]);
if (avalue > bvalue)
return -1;
if (avalue < bvalue)
return 1;
return 0;
}
}
function sortTweets(key) {
const $pills = document.querySelectorAll("#bd-pills .bd-pill-button");
$pills.forEach($pill => $pill.classList.remove('is-active'));
window.event.target.classList.add('is-active');
const $tweets = document.querySelectorAll("#love-tweets .bd-tw");
const tweets = Array.from($tweets);
let sorted = tweets.sort(compareTweets(key));
sorted.forEach(e =>
document.querySelector("#love-tweets .bd-tws-list").appendChild(e));
}
</script>
<nav id="bd-pills" class="bd-pills">
<div class="bd-pills-body">
<span class="bd-pill-label">Sort by</span>
<button class="bd-pill-button is-active" onclick="sortTweets('id')">Date</button>
<button class="bd-pill-button" onclick="sortTweets('likes')">Likes</button>
</div>
</nav>
<div id="love-tweets" class="bd-tws">
<div class="bd-tws-list">
{% for tweet_pair in site.data.love.tweets_by_id reversed %}
{% assign tweet_id = tweet_pair[0] %}
{% include elements/tw.html tweet_id=tweet_id %}
{% endfor %}
</div>
</div>