Extract CSS and JS assets into dedicated plug module

sorenone · sorenone · commit 2b8f66b48eac · 2025-09-23T12:36:39.000+01:00
The changes move CSS/JS assets from layouts into a dedicated plug module, enabling cached and
immutable asset serving.
diff --git a/lib/oban/web/assets.ex b/lib/oban/web/assets.ex
@@ -0,0 +1,50 @@
+defmodule Oban.Web.Assets do
+  @moduledoc false
+
+  @behaviour Plug
+
+  import Plug.Conn
+
+  phoenix_js_paths =
+    for app <- ~w(phoenix phoenix_html phoenix_live_view)a do
+      path = Application.app_dir(app, ["priv", "static", "#{app}.js"])
+      Module.put_attribute(__MODULE__, :external_resource, path)
+      path
+    end
+
+  @static_path Application.app_dir(:oban_web, ["priv", "static"])
+
+  @external_resource css_path = Path.join(@static_path, "app.css")
+  @external_resource js_path = Path.join(@static_path, "app.js")
+
+  @css File.read!(css_path)
+
+  @js """
+  #{for path <- phoenix_js_paths, do: path |> File.read!() |> String.replace("//# sourceMappingURL=", "// ")}
+  #{File.read!(js_path)}
+  """
+
+  @impl Plug
+  def init(asset), do: asset
+
+  @impl Plug
+  def call(conn, asset) do
+    {contents, content_type} = contents_and_type(asset)
+
+    conn
+    |> put_resp_header("content-type", content_type)
+    |> put_resp_header("cache-control", "public, max-age=31536000, immutable")
+    |> put_private(:plug_skip_csrf_protection, true)
+    |> send_resp(200, contents)
+    |> halt()
+  end
+
+  defp contents_and_type(:css), do: {@css, "text/css"}
+  defp contents_and_type(:js), do: {@js, "text/javascript"}
+
+  for {key, val} <- [css: @css, js: @js] do
+    md5 = Base.encode16(:crypto.hash(:md5, val), case: :lower)
+
+    def current_hash(unquote(key)), do: unquote(md5)
+  end
+end
diff --git a/lib/oban/web/components/layouts.ex b/lib/oban/web/components/layouts.ex
@@ -1,29 +1,20 @@
 defmodule Oban.Web.Layouts do
   use Oban.Web, :html
 
-  phoenix_js_paths =
-    for app <- ~w(phoenix phoenix_html phoenix_live_view)a do
-      path = Application.app_dir(app, ["priv", "static", "#{app}.js"])
-      Module.put_attribute(__MODULE__, :external_resource, path)
-      path
-    end
-
-  @static_path Application.app_dir(:oban_web, ["priv", "static"])
-
-  @external_resource css_path = Path.join(@static_path, "app.css")
-  @external_resource js_path = Path.join(@static_path, "app.js")
-
-  @css File.read!(css_path)
+  embed_templates "layouts/*"
 
-  @js """
-  #{for path <- phoenix_js_paths, do: path |> File.read!() |> String.replace("//# sourceMappingURL=", "// ")}
-  #{File.read!(js_path)}
-  """
+  defp asset_path(conn, asset) when asset in [:css, :js] do
+    hash = Oban.Web.Assets.current_hash(asset)
 
-  def render("app.css"), do: @css
-  def render("app.js"), do: @js
+    # prefix = conn.private.phoenix_router.__live_dashboard_prefix__()
+    prefix = "/oban"
 
-  embed_templates "layouts/*"
+    Phoenix.VerifiedRoutes.unverified_path(
+      conn,
+      conn.private.phoenix_router,
+      "#{prefix}/#{asset}-#{hash}"
+    )
+  end
 
   def logo(assigns) do
     ~H"""
diff --git a/lib/oban/web/components/layouts/root.html.heex b/lib/oban/web/components/layouts/root.html.heex
@@ -15,9 +15,7 @@
       type="image/png"
     />
 
-    <style phx-track-static nonce={@csp_nonces.style}>
-      <%= raw(render("app.css")) %>
-    </style>
+    <link rel="stylesheet" nonce={@csp_nonces.style} href={asset_path(@conn, :css)} />
 
     <script nonce={@csp_nonces.script}>
       const wantsDark = window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -29,13 +27,12 @@
         document.documentElement.classList.remove("dark")
       }
     </script>
+
+    <script nonce={@csp_nonces.script} src={asset_path(@conn, :js)} defer>
+    </script>
   </head>
 
   <body class="min-h-screen antialiased bg-gray-200 dark:bg-gray-950 text-gray-900 dark:text-gray-100  transition duration-200 ease-out">
     {@inner_content}
   </body>
-
-  <script phx-track-static type="text/javascript" nonce={@csp_nonces.script}>
-    <%= raw(render("app.js")) %>
-  </script>
 </html>
diff --git a/lib/oban/web/router.ex b/lib/oban/web/router.ex
@@ -194,6 +194,9 @@ defmodule Oban.Web.Router do
         {session_name, session_opts, route_opts} = Oban.Web.Router.__options__(prefix, opts)
 
         live_session session_name, session_opts do
+          get "/css-:md5", Oban.Web.Assets, :css, as: :oban_web_asset
+          get "/js-:md5", Oban.Web.Assets, :js, as: :oban_web_asset
+
           live "/", Oban.Web.DashboardLive, :home, route_opts
           live "/:page", Oban.Web.DashboardLive, :index, route_opts
           live "/:page/:id", Oban.Web.DashboardLive, :show, route_opts
