Extrac _header_content to being able to broadcast changes

adrienpoly · Dec 3, 2024 · bd7bda9 · bd7bda9
1 parent c39ac6e
commit bd7bda9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 37 deletions.
diff --git a/app/models/speaker.rb b/app/models/speaker.rb
@@ -161,7 +161,7 @@ def fetch_bsky_metadata!
   end
 
   def broadcast_header
-    broadcast_update_to self, target: dom_id(self, :header), partial: "speakers/header", locals: {speaker: self}
+    broadcast_update_to self, target: dom_id(self, :header_content), partial: "speakers/header_content", locals: {speaker: self}
   end
 
   def valid_website_url

diff --git a/app/views/speakers/_header.html.erb b/app/views/speakers/_header.html.erb
@@ -1,40 +1,5 @@
 <div class="block lg:flex gap-8 align-center justify-between" id="<%= dom_id(speaker, :header) %>">
-  <div class="flex flex-col lg:flex-row gap-8 items-center lg:justify-right text-center lg:text-left mb-6 lg:mb-0">
-    <div class="relative w-fit">
-      <%= image_tag speaker.github_avatar_url(size: 200),
-            class: "rounded-full border border-[#D9DFE3] size-24 md:size-36",
-            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 flex gap-1">
-          <%= fa("badge-check", class: "fill-white", size: :xs) %>
-
-          Verified
-        </div>
-      <% end %>
-    </div>
-
-    <div class="flex-col flex gap-3 title justify-center">
-      <div class="flex flex-col lg:flex-row justify-center lg:justify-start text-black font-bold gap-2">
-        <h1 style="view-transition-name: title"><%= speaker.name %></h1>
-
-        <% if speaker.pronouns.present? && ["dont_specify", "not_specified"].exclude?(speaker.pronouns_type) %>
-          <span class="text-sm content-center text-[#737373]">(<%= speaker.pronouns %>)</span>
-        <% end %>
-      </div>
-
-      <p class="text-[#636B74] max-w-[700px]">
-        <%= speaker.bio %>
-      </p>
-
-      <div class="mt-2 flex justify-center lg:justify-start">
-        <%= render "speakers/socials", speaker: speaker %>
-      </div>
-    </div>
-  </div>
+  <%= render "speakers/header_content", speaker: speaker %>
 
   <div class="flex flex-col gap-3 place-content-center align-center lg:max-w-[250px]">
     <% if speaker.website.present? %>

diff --git a/app/views/speakers/_header_content.html.erb b/app/views/speakers/_header_content.html.erb
@@ -0,0 +1,36 @@
+<div id="<%= dom_id(speaker, :header_content) %>" class="flex flex-col lg:flex-row gap-8 items-center lg:justify-right text-center lg:text-left mb-6 lg:mb-0">
+  <div class="relative w-fit">
+    <%= image_tag speaker.github_avatar_url(size: 200),
+          class: "rounded-full border border-[#D9DFE3] size-24 md:size-36",
+          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 flex gap-1">
+        <%= fa("badge-check", class: "fill-white", size: :xs) %>
+
+        Verified
+      </div>
+    <% end %>
+  </div>
+
+  <div class="flex-col flex gap-3 title justify-center">
+    <div class="flex flex-col lg:flex-row justify-center lg:justify-start text-black font-bold gap-2">
+      <h1 style="view-transition-name: title"><%= speaker.name %></h1>
+
+      <% if speaker.pronouns.present? && ["dont_specify", "not_specified"].exclude?(speaker.pronouns_type) %>
+        <span class="text-sm content-center text-[#737373]">(<%= speaker.pronouns %>)</span>
+      <% end %>
+    </div>
+
+    <p class="text-[#636B74] max-w-[700px]">
+      <%= speaker.bio %>
+    </p>
+
+    <div class="mt-2 flex justify-center lg:justify-start">
+      <%= render "speakers/socials", speaker: speaker %>
+    </div>
+  </div>
+</div>