mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
77 lines
2.2 KiB
HTML
77 lines
2.2 KiB
HTML
---
|
|
layout: default
|
|
theme: love
|
|
route: love
|
|
---
|
|
{% include global/header.html %}
|
|
{%
|
|
include docs/hero.html
|
|
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
|
|
docs/elements/tw-button.html
|
|
label="Tweet #bulmaio"
|
|
href=tweet_href
|
|
%}
|
|
{% endcapture %}
|
|
|
|
{%
|
|
include docs/components/call.html
|
|
color="love"
|
|
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 docs/elements/tw.html tweet_id=tweet_id %}
|
|
{% endfor %}
|
|
</div>
|
|
</div> |