Merge branch 'main' into #16

lib/phx_tools_web.ex

@@ -73,6 +73,7 @@ defmodule PhxToolsWeb do
       use Phoenix.Component
 
       alias PhxToolsWeb.Components.SharedComponents
+      alias PhxToolsWeb.SeoMetaTagComponent
 
       # Import convenience functions from controllers
       import Phoenix.Controller,

lib/phx_tools_web/components/layouts/root.html.heex

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
+    <SeoMetaTagComponent.seo_meta_tags attributes={assigns[:seo_attributes]} />
     <.live_title>
       <%= assigns[:page_title] || "PhxTools" %>
     </.live_title>

lib/phx_tools_web/components/seo_meta_tag_component.ex

@@ -0,0 +1,80 @@
+defmodule PhxToolsWeb.SeoMetaTagComponent do
+  @moduledoc false
+
+  use PhxToolsWeb, :html
+
+  alias PhxToolsWeb.Endpoint
+
+  @type assigns :: map()
+  @type rendered :: rendered()
+
+  @default_description """
+  Phx.tools is a shell script for Linux and macOS that configures
+  the development environment for you in a few easy steps.
+  Once you finish running the script, you'll be able to start the database server,
+  create a new Phoenix application, and launch the server...
+  """
+
+  attr :attributes, :map
+
+  @spec seo_meta_tags(assigns()) :: rendered()
+  def seo_meta_tags(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:description, fn -> String.trim(@default_description) end)
+      |> assign_new(:image_url, fn -> static_url(Endpoint, ~p"/images/phx_tools.png") end)
+      |> assign_new(:url, fn
+        %{attributes: %{url: url}} -> url
+        _assigns -> url(~p"/")
+      end)
+
+    ~H"""
+    <.open_graph_meta_tags description={@description} image_url={@image_url} url={@url} />
+    <.other_meta_tags
+      description={@description}
+      keywords="elixir, erlang, homebrew, mise, phoenix, postgres, postgresql"
+    />
+    <.twitter_meta_tags description={@description} image_url={@image_url} url={@url} />
+    """
+  end
+
+  attr :description, :string, required: true
+  attr :image_url, :string, required: true
+  attr :url, :string, required: true
+
+  defp open_graph_meta_tags(assigns) do
+    ~H"""
+    <meta property="og:description" content={@description} />
+    <meta property="og:image" content={@image_url} />
+    <meta property="og:title" content="The Complete Development Environment for Elixir and Phoenix" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={@url} />
+    """
+  end
+
+  attr :description, :string, required: true
+  attr :keywords, :string, required: true
+
+  defp other_meta_tags(assigns) do
+    ~H"""
+    <meta property="description" content={@description} />
+    <meta name="keywords" content="elixir, erlang, homebrew, mise, phoenix, postgres, postgresql" />
+    """
+  end
+
+  attr :description, :string, required: true
+  attr :image_url, :string, required: true
+  attr :url, :string, required: true
+
+  defp twitter_meta_tags(assigns) do
+    ~H"""
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:description" content={@description} />
+    <meta name="twitter:image" content={@image_url} />
+    <meta name="twitter:site" content="@optimumBA" />
+    <meta name="twitter:title" content="The Complete Development Environment for Elixir and Phoenix" />
+    <meta name="twitter:type" content="website" />
+    <meta name="twitter:url" content={@url} />
+    """
+  end
+end

lib/phx_tools_web/live/phx_tools_live/index.ex

@@ -6,11 +6,27 @@ defmodule PhxToolsWeb.PhxToolsLive.Index do
   alias PhxToolsWeb.PhxToolsLive.LandingComponent
 
   @impl Phoenix.LiveView
-  def mount(_params, session, socket), do: {:ok, assign_os(socket, session)}
+  def mount(_params, session, socket) do
+    {:ok,
+     socket
+     |> assign(:seo_attributes, %{})
+     |> assign_os(session)}
+  end
 
   defp assign_os(socket, %{"operating_system" => operating_system}),
     do: assign(socket, :operating_system, operating_system)
 
   @impl Phoenix.LiveView
-  def handle_params(_params, _uri, socket), do: {:noreply, socket}
+  def handle_params(_params, _uri, socket),
+    do: {:noreply, apply_action(socket, socket.assigns.live_action)}
+
+  defp apply_action(socket, :linux) do
+    assign(socket, seo_attributes: %{url: url(~p"/linux")})
+  end
+
+  defp apply_action(socket, :macOS) do
+    assign(socket, seo_attributes: %{url: url(~p"/macOS")})
+  end
+
+  defp apply_action(socket, _index), do: socket
 end

test/phx_tools_web/components/seo_meta_tag_component_test.exs

@@ -0,0 +1,60 @@
+defmodule PhxToolsWeb.SeoMetaTagComponentTest do
+  use PhxToolsWeb.ConnCase, async: true
+
+  import Phoenix.LiveViewTest
+
+  alias PhxToolsWeb.SeoMetaTagComponent
+
+  describe "seo_meta_tags/1" do
+    test "renders meta tags with default values" do
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:card\" content=\"summary_large_image\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:description\" content=\"Phx.tools is a shell script for Linux and macOS that configures\nthe development environment for you in a few easy steps.\nOnce you finish running the script, you&#39;ll be able to start the database server,\ncreate a new Phoenix application, and launch the server...\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:image\" content=\"http://localhost:4002/images/phx_tools.png\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:site\" content=\"@optimumBA\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:title\" content=\"The Complete Development Environment for Elixir and Phoenix\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:type\" content=\"website\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta name=\"twitter:url\" content=\"http://localhost:4002/\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"description\" content=\"Phx.tools is a shell script for Linux and macOS that configures\nthe development environment for you in a few easy steps.\nOnce you finish running the script, you&#39;ll be able to start the database server,\ncreate a new Phoenix application, and launch the server...\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"og:description\" content=\"Phx.tools is a shell script for Linux and macOS that configures\nthe development environment for you in a few easy steps.\nOnce you finish running the script, you&#39;ll be able to start the database server,\ncreate a new Phoenix application, and launch the server...\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"og:image\" content=\"http://localhost:4002/images/phx_tools.png\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"og:title\" content=\"The Complete Development Environment for Elixir and Phoenix\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"og:type\" content=\"website\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: nil) =~
+               "<meta property=\"og:url\" content=\"http://localhost:4002/\">"
+    end
+
+    test "renders meta tags with the values passed" do
+      assigns = %{url: "http://sample.link"}
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: assigns) =~
+               "<meta name=\"twitter:url\" content=\"http://sample.link\">"
+
+      assert render_component(&SeoMetaTagComponent.seo_meta_tags/1, attributes: assigns) =~
+               "<meta property=\"og:url\" content=\"http://sample.link\">"
+    end
+  end
+end