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