Format bio sections

assets/css/app.css

@@ -11,3 +11,7 @@
 .bio a {
   @apply font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200;
 }
+
+.bio .license {
+  @apply italic block;
+}

lib/music_library_web/live/artist_live/show.ex

@@ -52,10 +52,32 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
 
   defp render_bio(nil), do: gettext("Biography not available")
 
+  # Bios start with text, then a link to read more on Last.fm, followed by a license text.
+  # We split the bio at the read more link in order to render the license separately.
+  @last_fm_link_regex ~r/<a.*Read more on Last\.fm<\/a>\.\s*/
   defp render_bio(bio) do
-    PhoenixHTMLHelpers.Format.text_to_html(bio,
+    case String.split(bio, @last_fm_link_regex, include_captures: true) do
-      escape: false,
+      [text, link, license] ->
-      attributes: [class: "mt-4 text-sm/7"]
+        reformatted_bio =
-    )
+          Enum.join(
+            [
+              text,
+              link,
+              ~s(<span class="license">#{license}</span>)
+            ],
+            ""
+          )
+
+        PhoenixHTMLHelpers.Format.text_to_html(reformatted_bio,
+          escape: false,
+          attributes: [class: "mt-2 text-sm/7"]
+        )
+
+      other ->
+        PhoenixHTMLHelpers.Format.text_to_html(other,
+          escape: false,
+          attributes: [class: "mt-2 text-sm/7"]
+        )
+    end
   end
 end