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