login page formatting

.gitignore

@@ -38,5 +38,11 @@ npm-debug.log
 # Ignore generated CSS file for components
 assets/css/_components.css
 
+# JS Interop
+/assets/js/_hooks/
+
 # Editor config
-.vscode/
+.vscode/
+
+# Ignore generated js hook files for components
+assets/js/_hooks/

assets/tailwind.config.js

@@ -10,7 +10,9 @@ module.exports = {
   content: [
     "./js/**/*.js",
     "../lib/basket_web.ex",
-    "../lib/basket_web/**/*.*ex"
+    "../lib/basket_web/**/*.*ex",
+    "../lib/basket_web/**/*.sface",
+    "../priv/catalogue/**/*.{ex,sface}"
   ],
   darkMode: "class",
   theme: {

config/dev.exs

@@ -26,7 +26,8 @@ config :basket, BasketWeb.Endpoint,
   secret_key_base: "gRiKl5rvtc1Mgj3hhDzBzjHgmPE+PiG47uS8Pxk8KwjZhaaR3WxJ/I6czbmXr0j9",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
-    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+    esbuild: {Esbuild, :install_and_run, [:catalogue, ~w(--sourcemap=inline --watch)]}
   ]
 
 # ## SSL Support
@@ -60,6 +61,7 @@ config :basket, BasketWeb.Endpoint,
       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
       ~r"lib/basket_web/(controllers|live|components)/.*(ex|heex|sface|js)$",
+      ~r"lib/my_app_web/live/.*(sface)$",
       ~r"priv/catalogue/.*(ex)$"
     ]
   ]

mix.exs

@@ -65,7 +65,7 @@ defmodule Basket.MixProject do
       {:jason, "~> 1.4.1"},
       {:dns_cluster, "~> 0.1.3"},
       {:plug_cowboy, "~> 2.7"},
-      {:surface, "~> 0.11.4"},
+      {:surface, "~> 0.11.0"},
       # for surface.init; possible to remove.
       {:sourceror, "~> 1.0.0"},
       {:surface_catalogue, "~> 0.6.2"},
@@ -104,7 +104,8 @@ defmodule Basket.MixProject do
 
   def catalogues do
     [
-      "priv/catalogue"
+      "priv/catalogue",
+      "deps/surface/priv/catalogue"
     ]
   end
 end

mix.lock

@@ -29,7 +29,7 @@
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "httpoison": {:hex, :httpoison, "2.2.1", "87b7ed6d95db0389f7df02779644171d7319d319178f6680438167d7b69b1f3d", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "51364e6d2f429d80e14fe4b5f8e39719cacd03eb3f9a9286e61e216feac2d2df"},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
-  "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
+  "jason": {:hex, :jason, "1.4.3", "d3f984eeb96fe53b85d20e0b049f03e57d075b5acda3ac8d465c969a2536c17b", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "9a90e868927f7c777689baa16d86f4d0e086d968db5c05d917ccff6d443e58a3"},
   "jumper": {:hex, :jumper, "1.0.2", "68cdcd84472a00ac596b4e6459a41b3062d4427cbd4f1e8c8793c5b54f1406a7", [:mix], [], "hexpm", "9b7782409021e01ab3c08270e26f36eb62976a38c1aa64b2eaf6348422f165e1"},
   "makeup": {:hex, :makeup, "1.1.2", "9ba8837913bdf757787e71c1581c21f9d2455f4dd04cfca785c70bbfff1a76a3", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "cce1566b81fbcbd21eca8ffe808f33b221f9eee2cbc7a1706fc3da9ff18e6cac"},
   "makeup_elixir": {:hex, :makeup_elixir, "0.16.2", "627e84b8e8bf22e60a2579dad15067c755531fea049ae26ef1020cad58fe9578", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "41193978704763f6bbe6cc2758b84909e62984c7752b3784bd3c218bb341706b"},