Styling home page draft with basic links

Author: BrooklinJazz

.formatter.exs

@@ -1,6 +1,6 @@
 [
   import_deps: [:ecto, :ecto_sql, :phoenix],
   subdirectories: ["priv/*/migrations"],
-  plugins: [Phoenix.LiveView.HTMLFormatter],
+  plugins: [Phoenix.LiveView.HTMLFormatter, TailwindFormatter],
   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
 ]

assets/tailwind.config.js

@@ -11,16 +11,26 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        sm: '480px',
+        md: '768px',
+        lg: '976px',
+        xl: '1440px',
+        '4k': '2160px',
+      },
       colors: {
         brand: "#FD4F00",
+      },
+      backgroundImage: {
+        'home-page-background': "url('https://cdn.midjourney.com/f1b780e6-5c1c-4f3e-9d4f-fe01f4a63884/grid_0.png')"
       }
     },
   },
   plugins: [
     require("@tailwindcss/forms"),
-    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"]))
+    plugin(({ addVariant }) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"]))
   ]
 }

config/prod.exs

@@ -9,7 +9,8 @@ import Config
 # manifest is generated by the `mix phx.digest` task,
 # which you should run after static files are built and
 # before starting your production server.
-config :elixir_newbie, ElixirNewbieWeb.Endpoint, cache_static_manifest: "priv/static/cache_manifest.json"
+config :elixir_newbie, ElixirNewbieWeb.Endpoint,
+  cache_static_manifest: "priv/static/cache_manifest.json"
 
 # Configures Swoosh API Client
 config :swoosh, :api_client, ElixirNewbie.Finch

lib/elixir_newbie_web/components/core_components.ex

@@ -87,13 +87,13 @@ defmodule ElixirNewbieWeb.CoreComponents do
                   </p>
                 </header>
                 <%= render_slot(@inner_block) %>
-                <div :if={@confirm != [] or @cancel != []} class="ml-6 mb-4 flex items-center gap-5">
+                <div :if={@confirm != [] or @cancel != []} class="mb-4 ml-6 flex items-center gap-5">
                   <.button
                     :for={confirm <- @confirm}
                     id={"#{@id}-confirm"}
                     phx-click={@on_confirm}
                     phx-disable-with
-                    class="py-2 px-3"
+                    class="px-3 py-2"
                   >
                     <%= render_slot(confirm) %>
                   </.button>
@@ -191,7 +191,7 @@ defmodule ElixirNewbieWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="space-y-8 bg-white mt-10">
+      <div class="mt-10 space-y-8 bg-white">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -303,7 +303,7 @@ defmodule ElixirNewbieWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
+        class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-zinc-500 focus:outline-none focus:ring-zinc-500 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
@@ -386,7 +386,7 @@ defmodule ElixirNewbieWeb.CoreComponents do
 
   def error(assigns) do
     ~H"""
-    <p class="phx-no-feedback:hidden mt-3 flex gap-3 text-sm leading-6 text-rose-600">
+    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
       <Heroicons.exclamation_circle mini class="mt-0.5 h-5 w-5 flex-none fill-rose-500" />
       <%= render_slot(@inner_block) %>
     </p>
@@ -441,35 +441,35 @@ defmodule ElixirNewbieWeb.CoreComponents do
   def table(assigns) do
     ~H"""
     <div id={@id} class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
-      <table class="mt-11 w-[40rem] sm:w-full">
+      <table class="w-[40rem] mt-11 sm:w-full">
         <thead class="text-left text-[0.8125rem] leading-6 text-zinc-500">
           <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
             <th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
           </tr>
         </thead>
         <tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700">
           <tr
             :for={row <- @rows}
             id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
-            class="relative group hover:bg-zinc-50"
+            class="group relative hover:bg-zinc-50"
           >
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
               class={["p-0", @row_click && "hover:cursor-pointer"]}
             >
               <div :if={i == 0}>
-                <span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
+                <span class="absolute top-0 -left-4 h-full w-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
+                <span class="absolute top-0 -right-4 h-full w-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
               </div>
               <div class="block py-4 pr-6">
                 <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
                   <%= render_slot(col, row) %>
                 </span>
               </div>
             </td>
-            <td :if={@action != []} class="p-0 w-14">
+            <td :if={@action != []} class="w-14 p-0">
               <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
                 <span
                   :for={action <- @action}
@@ -530,7 +530,7 @@ defmodule ElixirNewbieWeb.CoreComponents do
         navigate={@navigate}
         class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
       >
-        <Heroicons.arrow_left solid class="w-3 h-3 stroke-current inline" />
+        <Heroicons.arrow_left solid class="inline h-3 w-3 stroke-current" />
         <%= render_slot(@inner_block) %>
       </.link>
     </div>

lib/elixir_newbie_web/components/layouts/app.html.heex

@@ -1,4 +1,4 @@
-<header class="px-4 sm:px-6 lg:px-8">
+<header class="px-4 sm:px-6 lg:px-8 text-white">
   <div class="flex items-center justify-between border-b border-zinc-100 py-3">
     <div class="flex items-center gap-4">
       <.link navigate={~p"/blog"}>Home</.link>
@@ -11,7 +11,7 @@
   </div>
 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+  <div class="mx-auto sm:w-full md:w-3/4 lg:w-full xl:w-3/4">
     <.flash kind={:info} title="Success!" flash={@flash} />
     <.flash kind={:error} title="Error!" flash={@flash} />
     <.flash

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

@@ -11,7 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body class="bg-[url('https://cdn.midjourney.com/f1b780e6-5c1c-4f3e-9d4f-fe01f4a63884/grid_0.png')] bg-cover bg-top antialiased">
     <%= @inner_content %>
   </body>
 </html>

lib/elixir_newbie_web/live/home_live.ex

@@ -3,7 +3,26 @@ defmodule ElixirNewbieWeb.HomeLive do
 
   def render(assigns) do
     ~H"""
-    Home
+    <section class="flex h-fit w-full flex-col gap-12 xl:gap-24 4k:gap-36 lg:flex-row">
+      <article class="grid h-fit w-full grid-cols-6 grid-rows-6">
+        <div class="rounded-full row-start-1 row-end-6 col-start-1 aspect-square col-end-6 rounded-full bg-cover bg-[url('/images/wizard_home_page.png')]" />
+        <.link href="https://twitter.com/BrooklinJMyers" class="rounded-full border-2 border-white bg-[url('/images/twitter.png')] bg-cover row-start-3 col-start-5 relative left-1/2"></.link>
+        <.link href="https://github.com/BrooklinJazz" class="rounded-full border-2 border-white bg-[url('/images/github.png')] bg-cover relative col-start-5 row-start-4 bg-pink-300"></.link>
+        <.link href="https://www.linkedin.com/in/brooklinmyers/" class="rounded-full border-2 border-white bg-[url('/images/linkedin.png')] bg-cover row-start-5 col-start-4 relative left-1/2"></.link>
+        <.link href="https://github.com/DockYard-Academy/beta_curriculum" class="rounded-full border-2 border-white bg-[url('/images/dockyard_magic.png')] bg-cover  bg-pink-500 row-start-5 col-start-3 relative left-1/2 top-1/2"></.link>
+      </article>
+      <article class="h-100 flex w-full flex-col text-xl lg:text-2xl text-white 4k:text-4xl">
+        You walk through the woods and find a Wizard.
+
+        “Hello, I’m Brooklin” the Wizard says.
+        “I’m here to teach you Elixir”.
+
+        The wizard takes you to a fork in the road, many paths lie before you. What do you do?
+        <.link class="bg-[url('/images/wavy_books.png')] bg-cover bg-bottom mt-6 xl:mt-10 rounded-3xl border p-6 lg:p-8 4k:p-12 pl-8 text-left" patch={~p"/blog"}>1. Read the Blog</.link>
+        <.link class="bg-[url('/images/flower_background.png')] bg-cover bg-center mt-4 xl:mt-8 rounded-3xl border p-6 lg:p-8 4k:p-12 pl-8 text-left" patch={~p"/podcast"}>2. Listen to the Podcast</.link>
+        <.link class="bg-[url('/images/dark_mushrooms.png')] bg-cover bg-center mt-4 xl:mt-8 rounded-3xl border p-6 lg:p-8 4k:p-12 pl-8 text-left" patch={~p"/resources"}>3. Learning Resources</.link>
+      </article>
+    </section>
     """
   end
 

mix.exs

@@ -50,7 +50,8 @@ defmodule ElixirNewbie.MixProject do
       {:telemetry_poller, "~> 1.0"},
       {:gettext, "~> 0.20"},
       {:jason, "~> 1.2"},
-      {:plug_cowboy, "~> 2.5"}
+      {:plug_cowboy, "~> 2.5"},
+      {:tailwind_formatter, "~> 0.3.1", only: :dev, runtime: false}
     ]
   end
 

mix.lock

@@ -35,6 +35,7 @@
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "swoosh": {:hex, :swoosh, "1.9.0", "23b0678abc29158d3881970d2264724ecf960ac12b8657b657a717445ac01a8f", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "548e8f680182064e94354264065275d424eb60bc207fcd1891bcdc3d40845704"},
   "tailwind": {:hex, :tailwind, "0.1.9", "25ba09d42f7bfabe170eb67683a76d6ec2061952dc9bd263a52a99ba3d24bd4d", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "9213f87709c458aaec313bb5f2df2b4d2cedc2b630e4ae821bf3c54c47a56d0b"},
+  "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.1", "ca8cb6508d69c2bb494e23c08d579eb5e447a823c0f6a355790daefb335c44c9", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "94d5c8cc1aa0e1650fc1440b579afa87988ef97958773d5df5bbca50f61410c8"},
   "telemetry": {:hex, :telemetry, "1.1.0", "a589817034a27eab11144ad24d5c0f9fab1f58173274b1e9bae7074af9cbee51", [:rebar3], [], "hexpm", "b727b2a1f75614774cff2d7565b64d0dfa5bd52ba517f16543e6fc7efcc0df48"},
   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.1", "315d9163a1d4660aedc3fee73f33f1d355dcc76c5c3ab3d59e76e3edf80eef1f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7be9e0871c41732c233be71e4be11b96e56177bf15dde64a8ac9ce72ac9834c6"},
   "telemetry_poller": {:hex, :telemetry_poller, "1.0.0", "db91bb424e07f2bb6e73926fcafbfcbcb295f0193e0a00e825e589a0a47e8453", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b3a24eafd66c3f42da30fc3ca7dda1e9d546c12250a2d60d7b81d264fbec4f6e"},

priv/static/images/book_shelf.png

@@ -9,6 +9,7 @@ defmodule ElixirNewbieWeb.ErrorHTMLTest do
   end
 
   test "renders 500.html" do
-    assert render_to_string(ElixirNewbieWeb.ErrorHTML, "500", "html", []) == "Internal Server Error"
+    assert render_to_string(ElixirNewbieWeb.ErrorHTML, "500", "html", []) ==
+             "Internal Server Error"
   end
 end

priv/static/images/dark_mushrooms.png

@@ -1,6 +1,9 @@
 defmodule ElixirNewbieWeb.HomeLiveTest do
-	use ExUnit.Case
-	doctest ElixirNewbieWeb.HomeLive
-	alias ElixirNewbieWeb.HomeLive
+  use ElixirNewbieWeb.ConnCase
+  doctest ElixirNewbieWeb.HomeLive
 
+  test "connected mount", %{conn: conn} do
+    assert {:ok, _view, html} = live(conn, "/")
+    assert html =~ "Brooklin"
+  end
 end

priv/static/images/dockyard_magic.png

@@ -28,6 +28,9 @@ defmodule ElixirNewbieWeb.ConnCase do
       import Plug.Conn
       import Phoenix.ConnTest
       import ElixirNewbieWeb.ConnCase
+
+      # Import conveniences for testing LiveView
+      import Phoenix.LiveViewTest
     end
   end