more fixes and live reloading

Author: benbot

assets/css/app.css

@@ -5,3 +5,5 @@
 /* This file is for your main application CSS */
 
 @import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@config "../tailwind.config.js";

assets/tailwind.config.js

@@ -7,10 +7,9 @@ const path = require("path")
 
 module.exports = {
   content: [
-    "../deps/ash_authentication_phoenix/**/*.*ex",
     "./js/**/*.js",
-    "../lib/uro_web.ex",
-    "../lib/uro_web/**/*.*ex"
+    "../lib/uro_web/**/*.*ex",
+    "../lib/uro/**/*.*ex",
   ],
   theme: {
     extend: {
@@ -20,7 +19,6 @@ module.exports = {
     },
   },
   plugins: [
-    require("@tailwindcss/forms"),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:
     //

config/config.exs

@@ -17,7 +17,6 @@ config :tailwind,
        version: "4.0.9",
        uro: [
 	    args: ~w(
-		--config=tailwind.config.js
 		--input=css/app.css
 		--output=../priv/static/assets/app.css
 	    ),
@@ -46,7 +45,7 @@ config :uro, Uro.Endpoint,
   url: [host: "localhost"],
   pubsub_server: Uro.PubSub,
   render_errors: [
-    formats: [html: OruWeb.ErrorHTML, json: OruWeb.ErrorJSON],
+    formats: [html: UroWeb.ErrorHTML, json: UroWeb.ErrorJSON],
     layout: false
   ],
   live_view: [signing_salt: "0dBPUwA2"]

config/dev.exs

@@ -17,7 +17,8 @@ config :uro, Uro.Endpoint,
     patterns: [
       ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
-      ~r"lib/uro_web/(controllers|live|components)/.*(ex|heex)$"
+      ~r"lib/uro_web/(controllers|live|components)/.*(ex|heex)$",
+      ~r"lib/uro/(controllers|live|components)/.*(ex|heex)$"
     ]
   ]
 
@@ -47,3 +48,9 @@ config :uro, Uro.Repo,
 
 redis_url = Helpers.get_env("REDIS_URL", nil)
 config :uro, Redix, url: if(redis_url, do: redis_url, else: "redis://localhost:6379")
+
+config :phoenix_live_view,
+  # Include HEEx debug annotations as HTML comments in rendered markup
+  debug_heex_annotations: true,
+  # Enable helpful, but potentially expensive runtime checks
+  enable_expensive_runtime_checks: true

flake.nix

@@ -18,7 +18,7 @@
   in 
     {
       devShells.x86_64-linux.default = pkgs.x86_64-linux.mkShell {
-        buildInputs = with pkgs.x86_64-linux; [elixir_1_17 elixir-ls tailwindcss-language-server inotify-tools];
+        buildInputs = with pkgs.x86_64-linux; [elixir_1_17 elixir-ls tailwindcss-language-server inotify-tools watchman];
         shellHook = ''
           export HEX_OFFLINE=0
         '';

lib/uro/endpoint.ex

@@ -34,6 +34,15 @@ defmodule Uro.Endpoint do
     gzip: false
   )
 
+  # Code reloading can be explicitly enabled under the
+  # :code_reloader configuration of your endpoint.
+  if code_reloading? do
+    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
+    plug Phoenix.LiveReloader
+    plug Phoenix.CodeReloader
+    plug Phoenix.Ecto.CheckRepoStatus, otp_app: :oru
+  end
+
   plug(Plug.RequestId, assign_as: :request_id)
   plug(Plug.Telemetry, event_prefix: [:phoenix, :endpoint])
 

lib/uro/gettext.ex

@@ -20,7 +20,7 @@ defmodule Uro.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :uro
+  use Gettext.Backend, otp_app: :uro
 end
 
 # TODO(benbot) migrate Uro to UroWeb where needed
@@ -46,5 +46,5 @@ defmodule UroWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :uro
+  use Gettext.Backend, otp_app: :uro
 end

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

@@ -1,32 +1,6 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v{Application.spec(:phoenix, :vsn)}
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
-  </div>
+<header>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+<main>
     <.flash_group flash={@flash} />
     {@inner_content}
-  </div>
 </main>

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

@@ -13,7 +13,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white">
+  <body class="width-[100vw] height-[100vh]">
     {@inner_content}
   </body>
 </html>

lib/uro_web/live/login.live.ex

@@ -3,7 +3,7 @@ defmodule UroWeb.LoginLive do
 
   def render(assigns) do
     ~H"""
-    Hello, world
+    <p class="text-orange orange bg-red">Hellop</p>
     """
   end