Filter by speaker first letter (#67)

* filter speakers by first letter

* adjust responsiveness

* remove the github avatar for now

* lint

app/controllers/speakers_controller.rb

@@ -4,7 +4,8 @@ class SpeakersController < ApplicationController
 
   # GET /speakers
   def index
-    @speakers = Speaker.all.order(:name).select(:id, :name, :slug, :talks_count)
+    @speakers = Speaker.all.order(:name).select(:id, :name, :slug, :talks_count, :github)
+    @speakers = @speakers.where("lower(name) LIKE ?", "#{params[:letter].downcase}%") if params[:letter].present?
   end
 
   # GET /speakers/1

app/views/speakers/_speaker.html.erb

@@ -1,5 +1,8 @@
 <%= link_to speaker_path(speaker), id: dom_id(speaker), class: "flex justify-between" do %>
-  <span><%= speaker.name %></span>
+  <div class="flex items-center gap-2">
+    <span><%= speaker.name %></span>
+    <%#= image_tag speaker.github_avatar_url(size: 64), class: "rounded-full h-8 w-8" if speaker.github_avatar_url.present? %>
+  </div>
   <div class="bg-brand-lighter w-12 h-6 flex items-center justify-center rounded-full text-gray">
     <%= speaker.talks_count %>
   </div>

app/views/speakers/index.html.erb

@@ -1,5 +1,16 @@
 <div class="container py-8">
-  <div id="speakers" class="grid grid-cols-3 gap-x-8 gap-y-2 min-w-full">
+  <h1 class="title">Speakers</h1>
+  <div class="flex flex-wrap w-full justify-between py-8 gap-1">
+    <% ("a".."z").each do |letter| %>
+      <%= link_to speakers_path(letter: letter), class: class_names("flex items-center justify-center w-10 text-gray-500 rounded hover:bg-brand-lighter border", "bg-brand-lighter": letter == params[:letter]) do %>
+        <%= letter.upcase %>
+      <% end %>
+    <% end %>
+    <%= link_to speakers_path, class: class_names("flex items-center justify-center w-10 text-gray-500 rounded hover:bg-brand-lighter border", "bg-brand-lighter": params[:letter].blank?) do %>
+        all
+      <% end %>
+  </div>
+  <div id="speakers" class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 lg:gap-x-12 gap-y-2 min-w-full">
       <%= render @speakers %>
   </div>
 </div>

app/views/talks/_card.html.erb

@@ -8,7 +8,7 @@
           width: 310,
           alt: "talk by #{talk.speakers.map(&:name).join(", ")}: #{talk.title}",
           style: "view-transition-name: #{dom_id(talk, :image)}",
-          class: "rounded-lg w-full object-cover" %>
+          class: "w-full object-cover" %>
   <% end %>
   <div class="py-4">
     <div class="flex items-start gap-2">