Rejigger the bubbles upvote component

Author: joladev

assets/js/app.js

@@ -63,15 +63,15 @@ function initializeCodeCopy() {
 }
 
 function initializeBubblesVotes() {
-  document.querySelectorAll('[data-url]').forEach(el => {
+  document.querySelectorAll('#vote-on-bubbles').forEach(el => {
     const url = el.getAttribute('data-url');
     fetch(`https://bubbles.town/api/vote-count?url=${encodeURIComponent(url)}`)
       .then(r => r.json())
       .then(d => {
         if (!d.id) return
-        el.outerHTML = `
+        el.innerHTML = `
         <a href="https://bubbles.town/entry/${d.id}" class="underline" style="color: #4ecdc4" target="_blank">
-          vote on Bubbles ▲<span class="bubbles-count text-foreground">${d.count ? d.count : ''}</span>
+          Vote on Bubbles ▲<span class="bubbles-count text-foreground">${d.count ? d.count : ''}</span>
         </a>
         `
       })

lib/jola_dev_web/components/core_components.ex

@@ -295,7 +295,6 @@ defmodule JolaDevWeb.CoreComponents do
   end
 
   attr :author, :string, required: true
-  attr :url, :string, required: true
   attr :class, :string, default: nil
 
   def author(assigns) do
@@ -312,7 +311,7 @@ defmodule JolaDevWeb.CoreComponents do
       >
         @jola.dev
       </.link>
-      or why not give it a <span class="vote-on-bubbles" data-url={@url}> vote on <.link href="https://bubbles.town/" class="underline">Bubbles</.link></span>.
+      .
     </p>
     """
   end
@@ -322,7 +321,7 @@ defmodule JolaDevWeb.CoreComponents do
 
   def sponsor(assigns) do
     ~H"""
-    <aside class={["mt-12", @class]}>
+    <aside class={["mt-8", @class]}>
       <div class="rounded-lg border border-accent/30 bg-accent/5 p-6 md:p-8">
         <p class="text-lg font-semibold text-foreground mb-2">
           {assigns.title}
@@ -792,4 +791,12 @@ defmodule JolaDevWeb.CoreComponents do
     </div>
     """
   end
+
+  attr :url, :string, required: true
+
+  def bubbles_vote(assigns) do
+    ~H"""
+    <div id="vote-on-bubbles" data-url={@url} class="mt-2" />
+    """
+  end
 end

lib/jola_dev_web/controllers/blog_html/show.html.heex

@@ -26,9 +26,10 @@
         {raw(@post.body)}
       </div>
 
+      <.bubbles_vote url={Phoenix.Controller.current_url(@conn)} />
+
       <.author
         author={@post.author}
-        url={Phoenix.Controller.current_url(@conn)}
       />
 
       <.sponsor title="Like this post?" />