diff --git a/lib/simpleshop_theme_web/router.ex b/lib/simpleshop_theme_web/router.ex
index 77496d0..5333159 100644
--- a/lib/simpleshop_theme_web/router.ex
+++ b/lib/simpleshop_theme_web/router.ex
@@ -23,6 +23,15 @@ defmodule SimpleshopThemeWeb.Router do
get "/", PageController, :home
end
+ # Image serving routes (public, no auth required)
+ scope "/images", SimpleshopThemeWeb do
+ pipe_through :browser
+
+ get "/:id", ImageController, :show
+ get "/:id/thumbnail", ImageController, :thumbnail
+ get "/:id/recolored/:color", ImageController, :recolored_svg
+ end
+
# Other scopes may use custom stacks.
# scope "/api", SimpleshopThemeWeb do
# pipe_through :api
diff --git a/mix.exs b/mix.exs
index 7e1ad23..dc32016 100644
--- a/mix.exs
+++ b/mix.exs
@@ -67,7 +67,8 @@ defmodule SimpleshopTheme.MixProject do
{:jason, "~> 1.2"},
{:dns_cluster, "~> 0.2.0"},
{:bandit, "~> 1.5"},
- {:tidewave, "~> 0.5", only: :dev}
+ {:tidewave, "~> 0.5", only: :dev},
+ {:image, "~> 0.54"}
]
end
diff --git a/mix.lock b/mix.lock
index c95fed8..8e5d9ef 100644
--- a/mix.lock
+++ b/mix.lock
@@ -21,6 +21,7 @@
"heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "0435d4ca364a608cc75e2f8683d374e55abbae26", [tag: "v2.2.0", sparse: "optimized", depth: 1]},
"hpax": {:hex, :hpax, "1.0.3", "ed67ef51ad4df91e75cc6a1494f851850c0bd98ebc0be6e81b026e765ee535aa", [:mix], [], "hexpm", "8eab6e1cfa8d5918c2ce4ba43588e894af35dbd8e91e6e55c817bca5847df34a"},
"idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
+ "image": {:hex, :image, "0.62.1", "1dd3d8d0d29d6562aa2141b5ef08c0f6a60e2a9f843fe475499b2f4f1ef60406", [:mix], [{:bumblebee, "~> 0.6", [hex: :bumblebee, repo: "hexpm", optional: true]}, {:evision, "~> 0.1.33 or ~> 0.2", [hex: :evision, repo: "hexpm", optional: true]}, {:exla, "~> 0.9", [hex: :exla, repo: "hexpm", optional: true]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: true]}, {:kino, "~> 0.13", [hex: :kino, repo: "hexpm", optional: true]}, {:nx, "~> 0.9", [hex: :nx, repo: "hexpm", optional: true]}, {:nx_image, "~> 0.1", [hex: :nx_image, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.1 or ~> 3.2 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.13", [hex: :plug, repo: "hexpm", optional: true]}, {:req, "~> 0.4", [hex: :req, repo: "hexpm", optional: true]}, {:rustler, "> 0.0.0", [hex: :rustler, repo: "hexpm", optional: true]}, {:scholar, "~> 0.3", [hex: :scholar, repo: "hexpm", optional: true]}, {:sweet_xml, "~> 0.7", [hex: :sweet_xml, repo: "hexpm", optional: false]}, {:vix, "~> 0.33", [hex: :vix, repo: "hexpm", optional: false]}], "hexpm", "5a5a7acaf68cfaed8932d478b95152cd7d84071442cac558c59f2d31427e91ab"},
"jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
"lazy_html": {:hex, :lazy_html, "0.1.8", "677a8642e644eef8de98f3040e2520d42d0f0f8bd6c5cd49db36504e34dffe91", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "0d8167d930b704feb94b41414ca7f5779dff9bca7fcf619fcef18de138f08736"},
"mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
@@ -38,6 +39,7 @@
"plug": {:hex, :plug, "1.19.1", "09bac17ae7a001a68ae393658aa23c7e38782be5c5c00c80be82901262c394c0", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "560a0017a8f6d5d30146916862aaf9300b7280063651dd7e532b8be168511e62"},
"plug_crypto": {:hex, :plug_crypto, "2.1.1", "19bda8184399cb24afa10be734f84a16ea0a2bc65054e23a62bb10f06bc89491", [:mix], [], "hexpm", "6470bce6ffe41c8bd497612ffde1a7e4af67f36a15eea5f921af71cf3e11247c"},
"req": {:hex, :req, "0.5.16", "99ba6a36b014458e52a8b9a0543bfa752cb0344b2a9d756651db1281d4ba4450", [:mix], [{:brotli, "~> 0.3.1", [hex: :brotli, repo: "hexpm", optional: true]}, {:ezstd, "~> 1.0", [hex: :ezstd, repo: "hexpm", optional: true]}, {:finch, "~> 0.17", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mime, "~> 2.0.6 or ~> 2.1", [hex: :mime, repo: "hexpm", optional: false]}, {:nimble_csv, "~> 1.0", [hex: :nimble_csv, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "974a7a27982b9b791df84e8f6687d21483795882a7840e8309abdbe08bb06f09"},
+ "sweet_xml": {:hex, :sweet_xml, "0.7.5", "803a563113981aaac202a1dbd39771562d0ad31004ddbfc9b5090bdcd5605277", [:mix], [], "hexpm", "193b28a9b12891cae351d81a0cead165ffe67df1b73fe5866d10629f4faefb12"},
"swoosh": {:hex, :swoosh, "1.20.0", "b04134c2b302da74c3a95ca4ddde191e4854d2847d6687783fecb023a9647598", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {: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]}, {:idna, "~> 6.0", [hex: :idna, repo: "hexpm", optional: false]}, {: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]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "13e610f709bae54851d68afb6862882aa646e5c974bf49e3bf5edd84a73cf213"},
"tailwind": {:hex, :tailwind, "0.4.1", "e7bcc222fe96a1e55f948e76d13dd84a1a7653fb051d2a167135db3b4b08d3e9", [:mix], [], "hexpm", "6249d4f9819052911120dbdbe9e532e6bd64ea23476056adb7f730aa25c220d1"},
"telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
@@ -46,6 +48,7 @@
"thousand_island": {:hex, :thousand_island, "1.4.3", "2158209580f633be38d43ec4e3ce0a01079592b9657afff9080d5d8ca149a3af", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "6e4ce09b0fd761a58594d02814d40f77daff460c48a7354a15ab353bb998ea0b"},
"tidewave": {:hex, :tidewave, "0.5.3", "1378aefa93dbf887c2df60842be4cf312c57fdf99dbf91c5227cd4344050876e", [:mix], [{:circular_buffer, "~> 0.4 or ~> 1.0", [hex: :circular_buffer, repo: "hexpm", optional: false]}, {:igniter, "~> 0.6", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_live_reload, ">= 1.6.1", [hex: :phoenix_live_reload, repo: "hexpm", optional: true]}, {:plug, "~> 1.17", [hex: :plug, repo: "hexpm", optional: false]}, {:req, "~> 0.5", [hex: :req, repo: "hexpm", optional: false]}], "hexpm", "605a1b912b7a8b56498077b3426be96b7129c4ac06d166311d408dccd0e5e0d3"},
"unicode_util_compat": {:hex, :unicode_util_compat, "0.7.1", "a48703a25c170eedadca83b11e88985af08d35f37c6f664d6dcfb106a97782fc", [:rebar3], [], "hexpm", "b3a917854ce3ae233619744ad1e0102e05673136776fb2fa76234f3e03b23642"},
+ "vix": {:hex, :vix, "0.35.0", "f6319b715e3b072e53eba456a21af5f2ff010a7a7b19b884600ea98a0609b18c", [:make, :mix], [{:cc_precompiler, "~> 0.1.4 or ~> 0.2", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.7.3 or ~> 0.8", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:kino, "~> 0.7", [hex: :kino, repo: "hexpm", optional: true]}], "hexpm", "a3e80067a89d0631b6cf2b93594e03c1b303a2c7cddbbdd28040750d521984e5"},
"websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
"websock_adapter": {:hex, :websock_adapter, "0.5.9", "43dc3ba6d89ef5dec5b1d0a39698436a1e856d000d84bf31a3149862b01a287f", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "5534d5c9adad3c18a0f58a9371220d75a803bf0b9a3d87e6fe072faaeed76a08"},
}
diff --git a/test/simpleshop_theme/media/svg_recolorer_test.exs b/test/simpleshop_theme/media/svg_recolorer_test.exs
new file mode 100644
index 0000000..26a334b
--- /dev/null
+++ b/test/simpleshop_theme/media/svg_recolorer_test.exs
@@ -0,0 +1,144 @@
+defmodule SimpleshopTheme.Media.SVGRecolorerTest do
+ use ExUnit.Case, async: true
+
+ alias SimpleshopTheme.Media.SVGRecolorer
+
+ describe "recolor/2" do
+ test "replaces fill attributes" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(fill="#ff6600")
+ refute result =~ "#000000"
+ end
+
+ test "replaces stroke attributes" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(stroke="#ff6600")
+ refute result =~ "#000000"
+ end
+
+ test "preserves fill=none" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(fill="none")
+ end
+
+ test "preserves stroke=none" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(stroke="none")
+ end
+
+ test "replaces currentColor" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "#ff6600"
+ refute result =~ "currentColor"
+ end
+
+ test "handles multiple elements" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(fill="#ff6600")
+ refute result =~ "#000"
+ refute result =~ "#fff"
+ end
+
+ test "handles RGB color names" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ ~s(fill="#ff6600")
+ refute result =~ "black"
+ end
+
+ test "handles inline styles with fill" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "fill:#ff6600"
+ refute result =~ "#000000"
+ end
+
+ test "handles both fill and stroke in same element" do
+ svg = ~s(
)
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert String.contains?(result, ~s(fill="#ff6600"))
+ assert String.contains?(result, ~s(stroke="#ff6600"))
+ end
+
+ test "handles CSS style blocks with fill" do
+ svg = """
+
+ """
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "fill:#ff6600"
+ refute result =~ "#FFFFFF"
+ refute result =~ "#EF1D1D"
+ end
+
+ test "handles CSS style blocks with stroke" do
+ svg = """
+
+ """
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "stroke:#ff6600"
+ refute result =~ "#000000"
+ end
+
+ test "preserves fill:none in CSS" do
+ svg = """
+
+ """
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "fill:none"
+ assert result =~ "stroke:#ff6600"
+ end
+
+ test "handles CSS with color names" do
+ svg = """
+
+ """
+ result = SVGRecolorer.recolor(svg, "#ff6600")
+ assert result =~ "fill:#ff6600"
+ assert result =~ "stroke:#ff6600"
+ refute result =~ "black"
+ refute result =~ "white"
+ end
+ end
+
+ describe "valid_hex_color?/1" do
+ test "accepts 6-digit hex colors" do
+ assert SVGRecolorer.valid_hex_color?("#ff6600")
+ assert SVGRecolorer.valid_hex_color?("#FFFFFF")
+ assert SVGRecolorer.valid_hex_color?("#000000")
+ end
+
+ test "accepts 3-digit hex colors" do
+ assert SVGRecolorer.valid_hex_color?("#f60")
+ assert SVGRecolorer.valid_hex_color?("#FFF")
+ assert SVGRecolorer.valid_hex_color?("#000")
+ end
+
+ test "rejects invalid colors" do
+ refute SVGRecolorer.valid_hex_color?("ff6600")
+ refute SVGRecolorer.valid_hex_color?("#gg0000")
+ refute SVGRecolorer.valid_hex_color?("#ff")
+ refute SVGRecolorer.valid_hex_color?("red")
+ refute SVGRecolorer.valid_hex_color?(nil)
+ refute SVGRecolorer.valid_hex_color?(123)
+ end
+ end
+
+ describe "normalize_hex_color/1" do
+ test "expands 3-digit hex to 6-digit" do
+ assert SVGRecolorer.normalize_hex_color("#f60") == "#ff6600"
+ assert SVGRecolorer.normalize_hex_color("#FFF") == "#FFFFFF"
+ assert SVGRecolorer.normalize_hex_color("#000") == "#000000"
+ end
+
+ test "leaves 6-digit hex unchanged" do
+ assert SVGRecolorer.normalize_hex_color("#ff6600") == "#ff6600"
+ assert SVGRecolorer.normalize_hex_color("#FFFFFF") == "#FFFFFF"
+ end
+ end
+end
diff --git a/test/simpleshop_theme_web/controllers/image_controller_test.exs b/test/simpleshop_theme_web/controllers/image_controller_test.exs
new file mode 100644
index 0000000..67af055
--- /dev/null
+++ b/test/simpleshop_theme_web/controllers/image_controller_test.exs
@@ -0,0 +1,124 @@
+defmodule SimpleshopThemeWeb.ImageControllerTest do
+ use SimpleshopThemeWeb.ConnCase
+
+ alias SimpleshopTheme.Media
+
+ @png_binary <<137, 80, 78, 71, 13, 10, 26, 10>>
+ @svg_content ~s(
)
+
+ describe "show/2" do
+ test "returns 404 for non-existent image", %{conn: conn} do
+ conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}")
+ assert response(conn, 404) =~ "Image not found"
+ end
+
+ test "serves image with proper content type and caching headers", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.png",
+ content_type: "image/png",
+ file_size: byte_size(@png_binary),
+ data: @png_binary
+ })
+
+ conn = get(conn, ~p"/images/#{image.id}")
+
+ assert response(conn, 200) == @png_binary
+ assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
+ assert get_resp_header(conn, "cache-control") == ["public, max-age=31536000, immutable"]
+ assert get_resp_header(conn, "etag") == [~s("#{image.id}")]
+ end
+ end
+
+ describe "thumbnail/2" do
+ test "returns 404 for non-existent image", %{conn: conn} do
+ conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/thumbnail")
+ assert response(conn, 404) =~ "Image not found"
+ end
+
+ test "falls back to full image when no thumbnail available", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.png",
+ content_type: "image/png",
+ file_size: byte_size(@png_binary),
+ data: @png_binary
+ })
+
+ conn = get(conn, ~p"/images/#{image.id}/thumbnail")
+
+ assert response(conn, 200) == @png_binary
+ assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
+ end
+ end
+
+ describe "recolored_svg/2" do
+ test "returns 404 for non-existent image", %{conn: conn} do
+ conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/recolored/ff6600")
+ assert response(conn, 404) =~ "Image not found"
+ end
+
+ test "returns 400 for non-SVG image", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.png",
+ content_type: "image/png",
+ file_size: byte_size(@png_binary),
+ data: @png_binary
+ })
+
+ conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
+ assert response(conn, 400) =~ "not an SVG"
+ end
+
+ test "returns 400 for invalid color", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.svg",
+ content_type: "image/svg+xml",
+ file_size: byte_size(@svg_content),
+ data: @svg_content
+ })
+
+ conn = get(conn, ~p"/images/#{image.id}/recolored/invalid")
+ assert response(conn, 400) =~ "Invalid color"
+ end
+
+ test "recolors SVG with valid hex color", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.svg",
+ content_type: "image/svg+xml",
+ file_size: byte_size(@svg_content),
+ data: @svg_content
+ })
+
+ conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
+
+ assert response(conn, 200) =~ ~s(fill="#ff6600")
+ assert get_resp_header(conn, "content-type") == ["image/svg+xml; charset=utf-8"]
+ assert get_resp_header(conn, "cache-control") == ["public, max-age=3600"]
+ end
+
+ test "handles color with leading hash", %{conn: conn} do
+ {:ok, image} =
+ Media.upload_image(%{
+ image_type: "logo",
+ filename: "test.svg",
+ content_type: "image/svg+xml",
+ file_size: byte_size(@svg_content),
+ data: @svg_content
+ })
+
+ # URL encodes # as %23
+ conn = get(conn, "/images/#{image.id}/recolored/%23ff6600")
+
+ assert response(conn, 200) =~ ~s(fill="#ff6600")
+ end
+ end
+end