feat: add markdown support to challenge description (#490)

lib/safira_web/components/markdown.ex

@@ -0,0 +1,25 @@
+defmodule SafiraWeb.Components.Markdown do
+  @moduledoc """
+  Markdown component.
+  """
+  use SafiraWeb, :component
+
+  attr :content, :string, default: ""
+  attr :class, :string, default: ""
+
+  def markdown(assigns) do
+    html =
+      assigns.content
+      |> String.trim()
+      |> Earmark.as_html!()
+      |> raw()
+
+    assigns = assign(assigns, :html, html)
+
+    ~H"""
+    <section class={@class}>
+      <%= @html %>
+    </section>
+    """
+  end
+end

lib/safira_web/live/backoffice/challenge_live/form_component.ex

@@ -28,7 +28,12 @@ defmodule SafiraWeb.ChallengeLive.FormComponent do
           <.field field={@form[:type]} type="select" options={type_options()} label="Type" required />
           <.field field={@form[:date]} type="date" label="Date" />
         </div>
-        <.field field={@form[:description]} type="textarea" label="Description" required />
+        <.field
+          field={@form[:description]}
+          type="textarea"
+          label="Description (supports markdown)"
+          required
+        />
 
         <h3 class="font-semibold leading-8"><%= gettext("Prizes") %></h3>
 

lib/safira_web/live/landing/challenges_live/index.ex

@@ -2,6 +2,7 @@ defmodule SafiraWeb.Landing.ChallengesLive.Index do
   @moduledoc false
 
   use SafiraWeb, :landing_view
+  import SafiraWeb.Components.Markdown
 
   on_mount {SafiraWeb.VerifyFeatureFlag, "challenges_enabled"}
 

lib/safira_web/live/landing/challenges_live/index.html.heex

@@ -34,7 +34,7 @@
         </h2>
         <div class="mt-10">
           <p class="font-iregular text-white">
-            <%= @selected_challenge.description %>
+            <.markdown content={@selected_challenge.description} class="[&_a]:text-accent" />
           </p>
         </div>
         <div class="mt-3 flex flex-col"></div>
@@ -58,7 +58,7 @@
           </h2>
           <div class="mt-10">
             <p class="font-iregular text-white">
-              <%= challenge.description %>
+              <.markdown content={challenge.description} class="[&_a]:text-accent" />
             </p>
           </div>
           <div class="mt-3 flex flex-col"></div>

mix.exs

@@ -65,6 +65,7 @@ defmodule Safira.MixProject do
       {:qrcode_ex, "~> 0.1.1"},
       {:credo, "~> 1.6", only: [:dev, :test], runtime: false},
       {:faker, "~> 0.18.0"},
+      {:earmark, "~> 1.4"},
 
       # frontend
       {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},

mix.lock

@@ -10,6 +10,7 @@
   "db_connection": {:hex, :db_connection, "2.7.0", "b99faa9291bb09892c7da373bb82cba59aefa9b36300f6145c5f201c7adf48ec", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dcf08f31b2701f857dfc787fbad78223d61a32204f217f15e881dd93e4bdd3ff"},
   "decimal": {:hex, :decimal, "2.3.0", "3ad6255aa77b4a3c4f818171b12d237500e63525c2fd056699967a3e7ea20f62", [:mix], [], "hexpm", "a4d66355cb29cb47c3cf30e71329e58361cfcb37c34235ef3bf1d7bf3773aeac"},
   "dns_cluster": {:hex, :dns_cluster, "0.1.3", "0bc20a2c88ed6cc494f2964075c359f8c2d00e1bf25518a6a6c7fd277c9b0c66", [:mix], [], "hexpm", "46cb7c4a1b3e52c7ad4cbe33ca5079fbde4840dedeafca2baf77996c2da1bc33"},
+  "earmark": {:hex, :earmark, "1.4.47", "7e7596b84fe4ebeb8751e14cbaeaf4d7a0237708f2ce43630cfd9065551f94ca", [:mix], [], "hexpm", "3e96bebea2c2d95f3b346a7ff22285bc68a99fbabdad9b655aa9c6be06c698f8"},
   "ecto": {:hex, :ecto, "3.12.5", "4a312960ce612e17337e7cefcf9be45b95a3be6b36b6f94dfb3d8c361d631866", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "6eb18e80bef8bb57e17f5a7f068a1719fbda384d40fc37acb8eb8aeca493b6ea"},
   "ecto_sql": {:hex, :ecto_sql, "3.12.1", "c0d0d60e85d9ff4631f12bafa454bc392ce8b9ec83531a412c12a0d415a3a4d0", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "aff5b958a899762c5f09028c847569f7dfb9cc9d63bdb8133bff8a5546de6bf5"},
   "elixir_make": {:hex, :elixir_make, "0.9.0", "6484b3cd8c0cee58f09f05ecaf1a140a8c97670671a6a0e7ab4dc326c3109726", [:mix], [], "hexpm", "db23d4fd8b757462ad02f8aa73431a426fe6671c80b200d9710caf3d1dd0ffdb"},