Made links in descriptions clickable

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -62,17 +62,24 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   end
 
   @doc """
-  Renders a block of text with each line broken into a separate span.
+  Renders a block of text with each line broken into a separate span and links highlighted.
   """
   attr :text, :string, required: true
 
-  def break_on_newline(assigns) do
+  def render_description(assigns) do
-    broken_text =
+    formatted_text =
-      assigns.text
+      Regex.split(~r{https?://\S+}, assigns.text, include_captures: true)
-      |> String.split("\n", trim: false)
+      |> Enum.map(fn
-      |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+        "http" <> _ = url ->
+          Phoenix.HTML.Tag.content_tag(:a, url, class: "text-blue-500 hover:text-blue-300", href: url, target: "_blank")
 
-    assigns = Map.put(assigns, :text, broken_text)
+        text ->
+          text
+          |> String.split("\n", trim: false)
+          |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+      end)
+
+    assigns = Map.put(assigns, :text, formatted_text)
 
     ~H"""
     <span><%= @text %></span>

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -45,7 +45,7 @@
                   </span>
                 </div>
                 <div :if={@media_item.description} class="mt-4 text-bodydark">
-                  <.break_on_newline text={@media_item.description} />
+                  <.render_description text={@media_item.description} />
                 </div>
               </aside>
             </section>