Introduce Speaker#avatar_url and rework avatar rendering with image…

… fallbacks (#463)

app/models/speaker.rb

@@ -124,12 +124,41 @@ def create_suggestion_from(params:, user: Current.user)
     super
   end
 
+  def avatar_url(...)
+    bsky_avatar_url(...) || github_avatar_url(...) || fallback_avatar_url(...)
+  end
+
+  def avatar_rank
+    return 1 if bsky_avatar_url.present?
+    return 2 if github_avatar_url.present?
+
+    3
+  end
+
+  def custom_avatar?
+    bsky_avatar_url.present? || github_avatar_url.present?
+  end
+
+  def bsky_avatar_url(...)
+    bsky_metadata.dig("avatar")
+  end
+
   def github_avatar_url(size: 200)
-    return "" unless github.present?
+    return nil unless github.present?
 
     "https://github.com/#{github}.png?size=#{size}"
   end
 
+  def fallback_avatar_url(size: 200)
+    url_safe_initials = name.split(" ").map(&:first).join("+")
+
+    "https://ui-avatars.com/api/?name=#{url_safe_initials}&size=#{size}&background=DC133C&color=fff"
+  end
+
+  def fetch_bsky_metadata!
+    Speaker::FetchBskyMetadata.new.perform(speaker: self)
+  end
+
   def broadcast_about
     broadcast_update_to self, target: dom_id(self, :about), partial: "speakers/about", locals: {speaker: self}
   end

app/views/events/_featured.html.erb

@@ -21,14 +21,14 @@
             <% shown_speakers = [] %>
 
             <% all_speakers = event.speakers.to_a %>
-            <% speakers_with_avatars = all_speakers.select { |speaker| speaker.github.present? } %>
+            <% speakers_with_avatars = all_speakers.select { |speaker| speaker.avatar_url.present? }.sort_by(&:avatar_rank) %>
 
             <% event.keynote_speakers.each do |keynote_speaker| %>
               <% shown_speakers << keynote_speaker %>
 
               <div class="avatar bg-white">
                 <div class="w-12 lg:w-28 xl:w-40">
-                  <img src="<%= keynote_speaker.github_avatar_url %>" onerror="this.parentElement.parentElement.remove()" loading="lazy">
+                  <img src="<%= keynote_speaker.avatar_url %>" onerror="this.parentElement.parentElement.remove()" loading="lazy">
                 </div>
               </div>
             <% end %>
@@ -39,7 +39,7 @@
 
                 <div class="avatar bg-white">
                   <div class="w-12 lg:w-28 xl:w-40">
-                    <img src="<%= speaker.github_avatar_url %>" loading="lazy">
+                    <img src="<%= speaker.avatar_url %>" loading="lazy">
                   </div>
                 </div>
               <% end %>
@@ -57,7 +57,7 @@
 
                 <div class="avatar bg-white">
                   <div class="w-8 xl:w-12">
-                    <img src="<%= speaker.github_avatar_url %>" loading="lazy">
+                    <img src="<%= speaker.avatar_url %>" loading="lazy">
                   </div>
                 </div>
               <% end %>

app/views/leaderboard/_speaker.html.erb

@@ -3,8 +3,8 @@
   <td style="view-transition-name: <%= dom_id(speaker, :Leaderboard) if speaker_counter < 10 %>">
     <%= link_to speaker_path(speaker), class: "link link-hover" do %>
       <div class="flex items-center gap-4">
-        <% if speaker.github.present? %>
-          <%= image_tag speaker.github_avatar_url(size: 128), class: "rounded-full w-10 h-10", alt: "GitHub picture profile of #{speaker.name}", loading: :lazy %>
+        <% if speaker.custom_avatar? %>
+          <%= image_tag speaker.avatar_url(size: 128), class: "rounded-full w-10 h-10", alt: "GitHub picture profile of #{speaker.name}", loading: :lazy %>
         <% else %>
           <div class="rounded-full w-10 h-10 bg-gray-200"></div>
         <% end %>

app/views/speakers/_card.html.erb

@@ -1,7 +1,7 @@
 <%= link_to speaker_path(speaker), class: "flex w-full relative bg-white" do %>
   <div class="card card-compact card-side border h-full w-full">
     <figure>
-      <%= image_tag speaker.github_avatar_url(size: 250),
+      <%= image_tag speaker.avatar_url(size: 250),
             alt: "picture profile of #{speaker.name}",
             class: "w-40 lg:w-full shrink-0 h-full",
             loading: "lazy",

app/views/speakers/_speaker.html.erb

@@ -1,7 +1,7 @@
 <%= link_to speaker_path(speaker), id: dom_id(speaker), class: "flex justify-between" do %>
   <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? %>
+    <%#= image_tag speaker.avatar_url(size: 64), class: "rounded-full h-8 w-8" if speaker.avatar_url.present? %>
   </div>
 
   <%= ui_badge(speaker.talks_count, kind: :secondary, outline: true, size: :lg, class: "min-w-10") %>

app/views/speakers/show.html.erb

@@ -10,20 +10,19 @@
         <% end %>
       </div>
 
-      <% if @speaker.github.present? %>
-        <div class="relative w-fit">
-          <%= image_tag @speaker.github_avatar_url(size: 200),
-                class: "rounded-full mb-4",
-                height: 200,
-                width: 200,
-                alt: "GitHub picture profile of #{@speaker.github}",
-                loading: :lazy %>
+      <div class="relative w-fit">
+        <%= image_tag @speaker.avatar_url(size: 200),
+              class: "rounded-full mt-4",
+              height: 200,
+              width: 200,
+              alt: "GitHub picture profile of #{@speaker.github}",
+              loading: :lazy %>
+
+        <% if @speaker.verified? %>
+          <div class="absolute right-0 top-0 badge badge-accent">Verified</div>
+        <% end %>
+      </div>
 
-          <% if @speaker.verified? %>
-            <div class="absolute right-0 top-0 badge badge-accent">Verified</div>
-          <% end %>
-        </div>
-      <% end %>
       <%= render "speakers/about", speaker: @speaker %>
       <%= render "speakers/actions", speaker: @speaker %>
     </div>

app/views/spotlight/speakers/_speaker.html.erb

@@ -2,7 +2,7 @@
   <div class="avatar placeholder">
     <div class="w-8 rounded-full bg-gray-300">
       <span class="hidden only:block text-primary"><%= speaker.name.split.map(&:first).then { |initials| [initials.first, initials.last].join }.upcase %></span>
-      <img src="<%= speaker.github_avatar_url %>" loading="lazy" alt="<%= speaker.name %>" height="200" width="200" onerror="this.remove()">
+      <img src="<%= speaker.avatar_url %>" loading="lazy" alt="<%= speaker.name %>" height="200" width="200" onerror="this.remove()">
     </div>
   </div>
   <%= speaker.name %>

app/views/talks/_explore_event.html.erb

@@ -12,7 +12,7 @@
       <% speakers_with_avatars.each do |speaker| %>
         <div class="avatar bg-white border-2">
           <div class="w-8">
-            <img src="<%= speaker.github_avatar_url %>" loading="lazy">
+            <img src="<%= speaker.avatar_url %>" loading="lazy">
           </div>
         </div>
       <% end %>

app/views/talks/_speaker.html.erb

@@ -2,8 +2,8 @@
   <div class="flex items-center gap-4">
     <div class="avatar placeholder">
       <div class="w-12 rounded-full bg-primary text-neutral-content">
-        <% if speaker.github.present? %>
-          <%= image_tag speaker.github_avatar_url(size: 48) %>
+        <% if speaker.custom_avatar? %>
+          <%= image_tag speaker.avatar_url(size: 48) %>
         <% else %>
           <span class="text-lg"><%= speaker.name.split(" ").map(&:first).join %></span>
         <% end %>
@@ -22,6 +22,8 @@
       <div class="text-xs text-gray-500 line-clamp-1">
         <% if speaker.github.present? %>
           <%= "@#{speaker.github}" %>
+        <% elsif speaker.bsky.present? %>
+          <%= "@#{speaker.bsky}" %>
         <% else %>
           <%= pluralize(speaker.talks.count, "talk") %>
         <% end %>

app/views/talks/_talk.html.erb

@@ -90,8 +90,8 @@
                   <% talk.speakers.to_a.from(speaker_preview_count).each do |speaker| %>
                     <div class="avatar placeholder border-none">
                       <%= content_tag :div, class: "w-12 rounded-full bg-primary text-neutral-content" do %>
-                        <% if speaker.github.present? %>
-                          <%= image_tag speaker.github_avatar_url(size: 48) %>
+                        <% if speaker.custom_avatar? %>
+                          <%= image_tag speaker.avatar_url(size: 48) %>
                         <% else %>
                           <span class="text-lg"><%= speaker.name.split(" ").map(&:first).join %></span>
                         <% end %>