Feat: Add reading_time component

Signed-off-by: Eduardo Borsa <borsa.dado@gmail.com>

lib/beacon_web/components/components.ex

@@ -32,6 +32,26 @@ defmodule BeaconWeb.Components do
     """
   end
 
+  @doc """
+  Renders a the amount in minutes for a page to be read.
+
+  ## Examples
+
+      <BeaconWeb.Components.reading_time />
+  """
+
+  def reading_time(assigns) do
+    %{template: content} = Beacon.Content.get_page_by(Process.get(:__beacon_site__), path: Process.get(:__beacon_page_path__))
+    content_without_html_tags = String.replace(content, ~r/(<[^>]*>|\n|\s{2,})/, "", global: true)
+    words_per_minute = 270
+    estimated_time_in_minutes = Kernel.trunc((String.split(content_without_html_tags, " ") |> length()) / words_per_minute)
+    assigns = Map.put(assigns, :estimated_time_in_minutes, estimated_time_in_minutes)
+
+    ~H"""
+    <%= @estimated_time_in_minutes %> min read
+    """
+  end
+
   @doc """
   Renders a image previously uploaded in Admin Media Library with srcset.
 

lib/beacon_web/live/page_live.ex

@@ -78,9 +78,10 @@ defmodule BeaconWeb.PageLive do
     %{"path" => path} = params
     %{__site__: site} = socket.assigns
     live_data = Beacon.DataSource.live_data(site, path, Map.drop(params, ["path"]))
-    {{_site, _path}, {page_id, layout_id, _format, page_module, component_module}} = lookup_route!(site, path)
+    {{_site, beacon_page_path}, {page_id, layout_id, _format, page_module, component_module}} = lookup_route!(site, path)
 
     Process.put(:__beacon_site__, site)
+    Process.put(:__beacon_page_path__, beacon_page_path)
 
     socket =
       socket

test/beacon_web/components/components_test.exs

@@ -0,0 +1,61 @@
+defmodule BeaconWeb.ComponentsTest do
+  use BeaconWeb.ConnCase, async: false
+
+  import Phoenix.LiveViewTest
+  import Phoenix.ConnTest
+  import Beacon.Fixtures
+
+  alias Beacon.Content
+
+  setup_all do
+    start_supervised!({Beacon.Loader, Beacon.Config.fetch!(:my_site)})
+    :ok
+  end
+
+  describe "image" do
+    setup context do
+      create_page_with_component("""
+      <main>
+        <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget magna et ex accumsan tempus. Duis scelerisque vitae augue sed egestas. Nunc euismod lectus neque, eget vestibulum dolor iaculis convallis. Suspendisse suscipit justo tortor, et sollicitudin nulla ullamcorper eget. Nunc semper ac mauris ac iaculis. Quisque ac ligula id justo volutpat suscipit vitae nec lacus. Suspendisse fringilla, tellus at gravida convallis, magna lacus facilisis ex, ut convallis lacus nulla fringilla purus.
+        </p>
+
+        <p>
+      Sed a aliquam lorem. Fusce pulvinar sapien sit amet tempus molestie. Sed luctus felis a augue iaculis porttitor. Vestibulum lobortis auctor nisi, et eleifend lorem tempus at. Praesent at massa quis ipsum viverra tristique. Suspendisse consectetur sodales feugiat. Nunc fermentum felis sem, eget vestibulum elit pulvinar vel. Nam a leo eu metus mattis pretium a ac ex. Sed tincidunt, tellus at commodo bibendum, enim orci rhoncus risus, vel sollicitudin velit nisi nec nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+        </p>
+
+        <p>
+      Morbi id velit sollicitudin, porta risus et, malesuada turpis. Phasellus sodales est eget quam dignissim, vel consectetur eros pellentesque. Morbi vulputate tellus eu pellentesque eleifend. Quisque vitae nibh erat. Sed sit amet consectetur nulla. Duis gravida magna eget nisl pharetra, sed laoreet diam molestie. Cras suscipit placerat nulla quis rhoncus.
+        </p>
+
+        <p>
+      Aenean blandit tempor eleifend. Donec vitae sapien vel massa fermentum feugiat a sit amet lectus. Integer sapien nibh, ullamcorper in mauris sit amet, accumsan pulvinar felis. Nulla facilisi. Mauris rhoncus vulputate leo eget accumsan. Aliquam erat volutpat. In sed nisl ac nisi dapibus suscipit. Sed pulvinar nisl vel arcu vulputate, vel auctor ex condimentum. Curabitur in tincidunt ex, sed tincidunt est. Sed non orci mattis, luctus nisl et, tincidunt mauris. Nunc finibus arcu.
+        </p>
+        <BeaconWeb.Components.reading_time />
+      </main>
+      """)
+
+      context
+    end
+
+    test "SUCCESS: reading_time should show 1 min to read the page", %{conn: conn} do
+      {:ok, view, _html} = live(conn, "/home")
+
+      assert render(view) =~ "1 min read"
+    end
+  end
+
+  defp create_page_with_component(template) do
+    layout = published_layout_fixture()
+
+    page_home =
+      page_fixture(
+        layout_id: layout.id,
+        path: "home",
+        template: template
+      )
+
+    Content.publish_page(page_home)
+    Beacon.reload_site(:my_site)
+  end
+end