Added animate.css

app/assets/stylesheets/application.scss

@@ -5,4 +5,5 @@
 @import 'image';
 @import 'search';
 @import 'marquee';
-@import 'breadcrumb';
+@import 'breadcrumb';
+@import "animate.css/animate";

app/helpers/application_helper.rb

@@ -83,14 +83,18 @@ def render_cards(sm: 1, md: 2, lg: 3, xl: 4, gap: 4, &block)
     render(partial: '/partials/cards', locals: { sm: sm, md: md, lg: lg, xl: xl, gap: gap, block: block })
   end
 
-  def render_badge(icon: "", color: "secondary", classes: "", &block)
-    render(partial: '/partials/badge', locals: { color: color, icon: icon, classes: classes, block: block })
+  def render_badge(id: "", icon: "", color: "secondary", classes: "", data: {}, &block)
+    render(partial: '/partials/badge', locals: { id: id, color: color, icon: icon, classes: classes, data: data, block: block })
   end
 
   def render_like(gem)
     render(partial: '/partials/like', locals: { gem: gem })
   end
 
+  def render_likes(gem, suffix = "", classes = "")
+    render(partial: '/partials/likes', locals: { gem: gem, suffix: suffix, classes: classes })
+  end
+
   def render_match(user, pluralize = false)
     render(partial: '/partials/match', locals: { user: user, pluralize: pluralize })
   end

app/views/gems/_card.html.erb

@@ -1,17 +1,15 @@
 <%= turbo_frame_tag dom_id(gem, :card) do %>
   <% cache(gem) do %>
     <div class="col h-100">
-      <div class="card h-100">
+      <div class="card h-100 animate__animated animate__fadeIn">
         <div class="card-body">
           <h5 class="card-title"><%= link_to gem.name, gem_path(gem), data: { turbo_frame: "_top" } %></h5>
           <h6 class="card-subtitle mb-2 text-muted"><%= gem.tag_list %></h6>
           <div class="card-text"><%= gem.title.to_s.truncate(150) %></div>
         </div>
         <div class="card-footer">
           <%= render_like(gem) %>
-          <%= render_badge(icon: "fas fa-heart") do %>
-            <%= human_pluralize(gem.likes_count, "") %>
-          <% end %>
+          <%= render_likes(gem, "", "animate__animated animate__fadeIn") %>
           <%= render_badge(icon: "fas fa-download") do %>
             <%= human_pluralize(gem.downloads_count, "") %>
           <% end %>

app/views/gems/_details.html.erb

@@ -17,13 +17,11 @@
   </div>
   <div class="card-footer text-muted">
     <%= render_like(gem) %>
-    <%= render_badge(icon: "fas fa-heart") do %>
-      <%= human_pluralize(gem.likes_count, "like") %>
-    <% end %>
+    <%= render_likes(gem, "like") %>
     <%= render_badge(icon: "fas fa-download") do %>
       <%= human_pluralize(gem.downloads_count, "download") %>
     <% end %>
-    <% gem.authors.to_a.each do |author| %>
+    <% gem.authors.to_a.take(3).each do |author| %>
       <%= render_badge(icon: "fas fa-user-cog") do %>
         <%= author %>
       <% end %>

app/views/gems/like.turbo_stream.erb

@@ -1,11 +1,11 @@
 <%= turbo_stream.replace "current-user-gems" do %>
   <%= render '/partials/metatags/user_gems', user: current_user.reload %>
 <% end %>
-<%= turbo_stream.replace dom_id(@gem, :card) do %>
-  <%= render '/gems/card', gem: @gem %>
+<%= turbo_stream.replace dom_id(@gem, :likes) do %>
+  <%= render_likes(@gem) %>
 <% end %>
-<%= turbo_stream.replace dom_id(@gem, :details) do %>
-  <%= render '/gems/details', gem: @gem %>
+<%= turbo_stream.replace dom_id(@gem, :like) do %>
+  <%= render_like(@gem) %>
 <% end %>
 <%= turbo_stream.update dom_id(current_user, :likes) do %>
   <%= human_pluralize(current_user.likes_count, "like") %>

app/views/pages/index.html.erb

@@ -1,4 +1,4 @@
-<% title ['Share the gems you love'] %>
+<% title ['Share gems you love'] %>
 
 <div class="p-5 mb-4 bg-light rounded-3" data-controller="marquee" data-marquee-phrases-value='["Discover New Gems","Find Similar Developers","Join The Rails Community","Share Gems You Love"]'>
   <div class="container-fluid py-2 py-sm-3 py-md-5">

app/views/partials/_badge.html.erb

@@ -1,9 +1,11 @@
 <%
+  id ||= ""
   color ||= "secondary"
   icon ||= ""
   classes ||= ""
+  data ||= {}
 %>
-<%= tag.span class: "badge bg-#{color} #{classes} mb-1 mb-sm-0" do %>
+<%= tag.span id: id, class: "badge bg-#{color} #{classes} mb-1 mb-sm-0", data: data do %>
   <%= tag.i "", class: icon if icon.present? %>
   <%= capture(&block) %>
 <% end %>

app/views/partials/_like.html.erb

@@ -1,3 +1,4 @@
-<%= button_to like_gem_path(gem), method: :post, class: "invisible float-end btn btn-block btn-sm btn-primary", data: { controller: "like", like_gem_value: gem.slug } do %>
+<%= button_to like_gem_path(gem), method: :post, class: "invisible btn btn-block btn-sm btn-primary", 
+  form: { id: dom_id(gem, :like), class: "float-end animate__animated animate__fadeIn" }, data: { controller: "like", like_gem_value: gem.slug } do %>
   <%= tag.i "", class: "far fa-heart", data: { like_target: "icon" } %>
 <% end %>

app/views/partials/_likes.html.erb

@@ -0,0 +1,5 @@
+<% suffix ||= "" %>
+<% classes ||= "" %>
+<%= render_badge(id: dom_id(gem, :likes), icon: "fas fa-heart", classes: classes) do %>
+  <%= human_pluralize(gem.likes_count, suffix) %>
+<% end %>

app/views/partials/_match.html.erb

@@ -1,5 +1,5 @@
 <% pluralize ||= false %>
-<%= tag.span class: "badge bg-secondary invisible", title: "Mutually liked gems", data: { controller: "match", match_user_value: user.slug, match_gems_value: user.gem_list.to_a, match_pluralize_value: pluralize } do %>
+<%= tag.span id: dom_id(user, :match), class: "badge bg-secondary invisible", title: "Mutually liked gems", data: { controller: "match", match_user_value: user.slug, match_gems_value: user.gem_list.to_a, match_pluralize_value: pluralize } do %>
   <%= tag.i "", class: "fas fa-gem" %>
   <%= tag.span "", data: { match_target: "matches" } %>
 <% end %>

app/views/tags/_card.html.erb

@@ -1,6 +1,6 @@
 <% cache(tag) do %>
   <div class="col h-100">
-    <div class="card h-100">
+    <div class="card h-100 animate__animated animate__fadeIn">
       <div class="card-body">
         <h5 class="card-title"><%= link_to tag.name, tag_path(tag), data: { turbo_frame: "_top" } %></h5>
       </div>

app/views/users/_card.html.erb

@@ -1,7 +1,7 @@
 <div class="col">
   <%= turbo_frame_tag user do %>
     <% cache(user) do %>
-      <div class="card h-100">
+      <div class="card h-100 animate__animated animate__fadeIn">
         <div class="card-body">
           <div class="ms-2 float-end">
             <%= render_avatar(user, "medium") %>

package.json

@@ -11,6 +11,7 @@
     "@hotwired/turbo-rails": "^7.1.0",
     "@popperjs/core": "^2.11.2",
     "@rails/request.js": "^0.0.6",
+    "animate.css": "^4.1.1",
     "bootstrap": "^5.1.3",
     "bootstrap5-tags": "^1.4.22",
     "esbuild": "^0.14.16",

yarn.lock

@@ -40,6 +40,11 @@
   resolved "https://registry.yarnpkg.com/@rails/request.js/-/request.js-0.0.6.tgz#5f0347a9f363e50ec45118c7134080490cda81d8"
   integrity sha512-dfFWaQXitYJ4kxrgGJNhDNXX54/v10YgoJqBMVe6lhqs6a4N9WD7goZJEvwin82TtK8MqUNhwfyisgKwM6dMdg==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"