Add love sorting

docs/_includes/elements/tw.html

@@ -1,7 +1,10 @@
 {% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
 {% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
 
-<article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
+<article
+  data-likes="{{ tweet.hearts }}"
+  data-id="{{ tweet.id }}"
+  class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">

docs/_sass/components/pill.scss

@@ -0,0 +1,44 @@
+.bd-pills {
+  @extend %block;
+  align-items: center;
+  color: $text-light;
+  display: flex;
+  justify-content: center;
+}
+
+.bd-pill-label {
+  padding: 0 0.5em;
+}
+
+.bd-pills-body {
+  background: $background;
+  align-items: center;
+  background: #fafafa;
+  border-radius: 0.5em;
+  display: flex;
+  padding: 0.25em;
+}
+
+.bd-pill-button {
+  @extend %reset;
+  border-radius: 0.25em;
+  color: $text;
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0.5em 0.75em;
+  position: relative;
+  transition-duration: 0.5s;
+  transition-property: color, background-color;
+
+  &:hover {
+    background-color: $white;
+    color: $text-strong;
+  }
+
+  &.is-active {
+    background-color: $white;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.125em 0.125em rgba(0, 0, 0, 0.05);
+    color: $text-strong;
+    z-index: 1;
+  }
+}

docs/bulma-docs.scss

@@ -222,6 +222,7 @@ $navbar-breakpoint: $tablet;
 @import "./_sass/components/spacing-table";
 @import "./_sass/components/survey";
 @import "./_sass/components/color";
+@import "./_sass/components/pill";
 
 @import "./_sass/pages/index";
 @import "./_sass/pages/docs";

docs/css/bulma-docs.css

@@ -95,7 +95,7 @@ fieldset[disabled] .bulma-control-extend {
 
 .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
 .subtitle:not(:last-child), .block:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child), .bd-tabs:not(:last-child), .bd-example:not(:last-child), .bd-snippet:not(:last-child), .bd-content .highlight:not(:last-child),
-.bd-content .bd-highlight-full:not(:last-child), .bd-book-cover:not(:last-child), .bd-side-sponsrs:not(:last-child) {
+.bd-content .bd-highlight-full:not(:last-child), .bd-book-cover:not(:last-child), .bd-pills:not(:last-child), .bd-side-sponsrs:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
@@ -221,7 +221,7 @@ fieldset[disabled] .bulma-control-extend {
   top: 0;
 }
 
-.navbar-burger, .bd-tabs-nav button, .bd-category-toggle, .bd-navbar-search-icon {
+.navbar-burger, .bd-tabs-nav button, .bd-category-toggle, .bd-navbar-search-icon, .bd-pill-button {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -16889,7 +16889,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   justify-content: center;
 }
 
-.navbar-burger, .bd-tabs-nav button, .bd-category-toggle, .bd-navbar-search-icon {
+.navbar-burger, .bd-tabs-nav button, .bd-category-toggle, .bd-navbar-search-icon, .bd-pill-button {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -19520,6 +19520,49 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   width: 24px;
 }
 
+.bd-pills {
+  align-items: center;
+  color: #7a7a7a;
+  display: flex;
+  justify-content: center;
+}
+
+.bd-pill-label {
+  padding: 0 0.5em;
+}
+
+.bd-pills-body {
+  background: whitesmoke;
+  align-items: center;
+  background: #fafafa;
+  border-radius: 0.5em;
+  display: flex;
+  padding: 0.25em;
+}
+
+.bd-pill-button {
+  border-radius: 0.25em;
+  color: #4a4a4a;
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0.5em 0.75em;
+  position: relative;
+  transition-duration: 0.5s;
+  transition-property: color, background-color;
+}
+
+.bd-pill-button:hover {
+  background-color: white;
+  color: #363636;
+}
+
+.bd-pill-button.is-active {
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.125em 0.125em rgba(0, 0, 0, 0.05);
+  color: #363636;
+  z-index: 1;
+}
+
 :root {
   --bd-index-vertical: 1.5rem;
   --bd-index-gap: 3rem;

docs/love.html

@@ -45,7 +45,45 @@ tweets:
   button=call_button
 %}
 
-<div class="bd-tws">
+<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] %}