display note backlinks in contexts

lib/memex_web/components/context_content.ex

@@ -0,0 +1,44 @@
+defmodule MemexWeb.Components.ContextContent do
+  @moduledoc """
+  Display the content for a context
+  """
+  use MemexWeb, :component
+  alias Memex.Contexts.Context
+  alias Phoenix.HTML
+
+  attr :context, Context, required: true
+
+  def context_content(assigns) do
+    ~H"""
+    <div
+      id={"show-context-content-#{@context.id}"}
+      class="input input-primary h-128 min-h-128 inline-block"
+      phx-hook="MaintainAttrs"
+      phx-update="ignore"
+      readonly
+      phx-no-format
+    ><p class="inline"><%= add_links_to_content(@context.content) %></p></div>
+    """
+  end
+
+  defp add_links_to_content(content) do
+    Regex.replace(
+      ~r/\[\[([\p{L}\p{N}\-]+)\]\]/,
+      content,
+      fn _whole_match, slug ->
+        link =
+          HTML.Link.link(
+            "[[#{slug}]]",
+            to: Routes.note_show_path(Endpoint, :show, slug),
+            class: "link inline",
+            data: [qa: "context-note-#{slug}"]
+          )
+          |> HTML.Safe.to_iodata()
+          |> IO.iodata_to_binary()
+
+        "</p>#{link}<p class=\"inline\">"
+      end
+    )
+    |> HTML.raw()
+  end
+end

lib/memex_web/components/note_card.ex

@@ -1,29 +0,0 @@
-defmodule MemexWeb.Components.NoteCard do
-  @moduledoc """
-  Display card for an note
-  """
-
-  use MemexWeb, :component
-
-  def note_card(assigns) do
-    ~H"""
-    <div class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
-      border border-gray-400 rounded-lg shadow-lg hover:shadow-md
-      transition-all duration-300 ease-in-out">
-      <h1 class="title text-xl">
-        <%= @note.name %>
-      </h1>
-
-      <h2 class="title text-md">
-        <%= gettext("visibility: %{visibility}", visibility: @note.visibility) %>
-      </h2>
-
-      <%= if @inner_block do %>
-        <div class="flex space-x-4 justify-center items-center">
-          <%= render_slot(@inner_block) %>
-        </div>
-      <% end %>
-    </div>
-    """
-  end
-end