Render record set descriptions in Markdown

lib/music_library_web/live/record_set_live/index.ex

@@ -5,6 +5,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
 
   alias MusicLibrary.RecordSets
   alias MusicLibrary.RecordSets.RecordSet
+  alias MusicLibraryWeb.Markdown
 
   @default_list_params %{
     page: 1,
@@ -181,4 +182,10 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
 
     {:noreply, stream_insert(socket, :record_sets, updated_set)}
   end
+
+  defp render_description(description) do
+    description
+    |> Markdown.to_html()
+    |> raw()
+  end
 end

lib/music_library_web/live/record_set_live/index.html.heex

@@ -36,14 +36,17 @@
         id={dom_id}
         class="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4"
       >
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-baseline justify-between mb-3">
-          <div>
+          <div class="grow">
             <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
               {record_set.name}
             </h2>
-            <p :if={record_set.description} class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
+            <article
-              {record_set.description}
+              :if={record_set.description}
-            </p>
+              class="text-sm mt-1 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
+            >
+              {render_description(record_set.description)}
+            </article>
           </div>
           <div class="flex items-center gap-2">
             <span class="text-xs text-zinc-500 dark:text-zinc-400">