Update the Author Show LiveView to show the avatar image and aliases.

lib/decentralised_book_index_web/components/my_components/author_card.ex

@@ -34,7 +34,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
         <div class="flex flex-col items-center py-5">
             <.link navigate={~p"/authors/#{@author.id}"}>
                 <%= if @author.avatar_url != nil do %>
-                    <img class="w-36 h-36 mb-3 rounded-full shadow-lg" src={@author.avatar_url} alt="Bonnie image"/>
+                    <img class="w-36 h-36 mb-3 rounded-full shadow-lg" src={@author.avatar_url} alt={"#{@author.name} image"} />
                 <% else %>
                     <div class="relative w-36 h-36 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
                         <svg class="absolute w-36 h-36 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>

lib/decentralised_book_index_web/live/author_live/show.ex

@@ -5,8 +5,7 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
   def render(assigns) do
     ~H"""
     <.header>
-      Author {@author.id}
-      <:subtitle>This is a author record from your database.</:subtitle>
+      {@author.name}
 
       <:actions>
         <.link navigate={~p"/authors/#{@author}/edit"}>
@@ -17,15 +16,38 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
       </:actions>
     </.header>
 
-    <.list>
-      <:item title="Id">{@author.id}</:item>
+    <div class="flex flex-wrap flex-[2_1_auto] gap-5">
+      <%= if @author.avatar_url != nil do %>
+        <img class="w-36 h-36 mb-3 rounded-full shadow-lg mt-14 mx-auto md:mx-0" src={@author.avatar_url} alt={"#{@author.name} image"}/>
+      <% else %>
+        <div class="relative w-36 h-36 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600 mt-14 mx-auto md:mx-0">
+          <svg class="absolute w-36 h-36 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
+        </div>
+      <% end %>
 
-      <:item title="Name">{@author.name}</:item>
+      <.list class="mt-5">
+        <:item title="Id">{@author.id}</:item>
 
-      <:item title="Description">{@author.description}</:item>
+        <:item title="Name">{@author.name}</:item>
 
-      <:item title="Avatar url">{@author.avatar_url}</:item>
-    </.list>
+        <:item title="Description">{@author.description}</:item>
+      </.list>
+    </div>
+
+    <%= if @alternative_names != [] do %>
+      <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white mt-10">Alternatives names</h2>
+      <ul class="max-w-md space-y-1 text-gray-700 list-disc list-inside dark:text-white">
+        <%= for alias_author <- @alternative_names do %>
+          <.link navigate={~p"/authors/#{alias_author.id}"}>
+            <li>
+              <span class="no-underline hover:underline">
+                {alias_author.name}
+              </span>
+            </li>
+          </.link>
+        <% end %>
+      </ul>
+    <% end %>
 
     <.back navigate={~p"/authors"}>Back to authors</.back>
     """
@@ -38,13 +60,15 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    author = Ash.get!(DecentralisedBookIndex.Metadata.Author, id, actor: socket.assigns.current_user)
+    alternative_names = DecentralisedBookIndex.Metadata.get_author_alternative_names!(author)
+
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(
-       :author,
-       Ash.get!(DecentralisedBookIndex.Metadata.Author, id, actor: socket.assigns.current_user)
-     )}
+     |> assign(:author, author)
+     |> assign(:alternative_names, alternative_names)
+    }
   end
 
   defp page_title(:show), do: "Show Author"