From 8287222b544cc41d4fe8d14b199f33ec4fe7e1f5 Mon Sep 17 00:00:00 2001 From: jamey Date: Wed, 11 Feb 2026 14:46:12 +0000 Subject: [PATCH] use LiveView navigation and add SVG fallback dimensions to fix FOUC All internal links used plain , causing full page reloads between pages in the same live_session. Changed to <.link navigate> for client-side navigation across layout, product, cart, base, and content components. Added explicit width/height attributes to all SVG icons so they render at sensible sizes before CSS loads on initial page visit. Co-Authored-By: Claude Opus 4.6 --- .../page_templates/checkout_success.html.heex | 6 +- .../components/shop_components/base.ex | 12 +-- .../components/shop_components/cart.ex | 31 +++++-- .../components/shop_components/content.ex | 73 +++++++++------ .../components/shop_components/layout.ex | 82 +++++++++++------ .../components/shop_components/product.ex | 89 ++++++++++++++----- 6 files changed, 195 insertions(+), 98 deletions(-) diff --git a/lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex b/lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex index 125f108..8225ea5 100644 --- a/lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex +++ b/lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex @@ -153,11 +153,11 @@

- If this page doesn't update, please contact us. + >contact us.

<% end %> diff --git a/lib/simpleshop_theme_web/components/shop_components/base.ex b/lib/simpleshop_theme_web/components/shop_components/base.ex index 575a0f5..d22b74e 100644 --- a/lib/simpleshop_theme_web/components/shop_components/base.ex +++ b/lib/simpleshop_theme_web/components/shop_components/base.ex @@ -170,13 +170,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Base do def shop_link_button(assigns) do ~H""" - {render_slot(@inner_block)} - + """ end @@ -203,13 +203,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Base do def shop_link_outline(assigns) do ~H""" - {render_slot(@inner_block)} - + """ end diff --git a/lib/simpleshop_theme_web/components/shop_components/cart.ex b/lib/simpleshop_theme_web/components/shop_components/cart.ex index 936521b..90cd998 100644 --- a/lib/simpleshop_theme_web/components/shop_components/cart.ex +++ b/lib/simpleshop_theme_web/components/shop_components/cart.ex @@ -91,7 +91,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do phx-click={close_cart_drawer_js()} aria-label="Close cart" > - + @@ -174,13 +182,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"} > <%= if @mode != :preview do %> - - + <% else %>

<%= if @mode != :preview do %> - {@item.name} - + <% else %> {@item.name} <% end %> @@ -271,6 +279,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<% else %> - + <.link + navigate="/collections/all" + style="color: var(--t-text-accent); text-decoration: underline;" + > Continue shopping - + <% end %>
""" diff --git a/lib/simpleshop_theme_web/components/shop_components/content.ex b/lib/simpleshop_theme_web/components/shop_components/content.ex index d9d53f6..e8bc6c8 100644 --- a/lib/simpleshop_theme_web/components/shop_components/content.ex +++ b/lib/simpleshop_theme_web/components/shop_components/content.ex @@ -240,7 +240,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do class="flex items-center gap-2 mb-2" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none;" > - + + """ @@ -439,7 +446,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :pinterest} = assigns) do ~H""" - + """ @@ -447,7 +454,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :tiktok} = assigns) do ~H""" - + """ @@ -455,7 +462,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :facebook} = assigns) do ~H""" - + """ @@ -463,7 +470,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :twitter} = assigns) do ~H""" - + """ @@ -471,7 +478,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :youtube} = assigns) do ~H""" - + """ @@ -479,7 +486,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :patreon} = assigns) do ~H""" - + """ @@ -487,7 +494,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :kofi} = assigns) do ~H""" - + """ @@ -495,7 +502,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :etsy} = assigns) do ~H""" - + """ @@ -503,7 +510,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :gumroad} = assigns) do ~H""" - + """ @@ -511,7 +518,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :bandcamp} = assigns) do ~H""" - + """ @@ -520,7 +527,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do # Open Web/Federated platforms defp social_icon(%{platform: :mastodon} = assigns) do ~H""" - + """ @@ -528,7 +535,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :pixelfed} = assigns) do ~H""" - + """ @@ -536,7 +543,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :bluesky} = assigns) do ~H""" - + """ @@ -544,7 +551,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :peertube} = assigns) do ~H""" - + """ @@ -552,7 +559,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :lemmy} = assigns) do ~H""" - + """ @@ -560,7 +567,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :matrix} = assigns) do ~H""" - + """ @@ -569,7 +576,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do # Developer/Hacker platforms defp social_icon(%{platform: :github} = assigns) do ~H""" - + """ @@ -577,7 +584,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :gitlab} = assigns) do ~H""" - + """ @@ -585,7 +592,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :codeberg} = assigns) do ~H""" - + """ @@ -593,7 +600,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :sourcehut} = assigns) do ~H""" - + """ @@ -602,7 +609,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do # Communication platforms defp social_icon(%{platform: :discord} = assigns) do ~H""" - + """ @@ -610,7 +617,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :telegram} = assigns) do ~H""" - + """ @@ -618,7 +625,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :signal} = assigns) do ~H""" - + """ @@ -627,7 +634,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do # Other platforms defp social_icon(%{platform: :substack} = assigns) do ~H""" - + """ @@ -635,7 +642,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :rss} = assigns) do ~H""" - + """ @@ -643,7 +650,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do defp social_icon(%{platform: :website} = assigns) do ~H""" - + """ @@ -652,7 +659,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do # Fallback for unknown platforms defp social_icon(assigns) do ~H""" - + """ @@ -687,6 +694,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do <%= for i <- 1..@max do %> @@ -800,6 +809,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Content do

{@label} <% else %> - <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} /> {@label} - + <% end %> """ @@ -233,6 +233,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do ~H""" <% else %>
  • - All products - +
    • <%= for category <- @categories do %>
  • - {category.name} - +
    • <% end %> <% end %> @@ -532,40 +544,40 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do <% else %>
  • - Delivery & returns - +
  • - Privacy policy - +
  • - Terms of service - +
  • - Contact - +
    • <% end %> @@ -671,7 +683,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do } aria-label="Search" > - + @@ -683,7 +703,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do phx-click={open_cart_drawer_js()} aria-label="Cart" > - + @@ -735,9 +763,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} /> <% else %> - + <.link navigate="/" style="display: flex; align-items: center; text-decoration: none;"> <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} /> - + <% end %> <% end %> """ @@ -835,9 +863,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do {@label} <% else %> - + <.link navigate={@href} style="color: var(--t-text-secondary); text-decoration: none;"> {@label} - + <% end %> <% end %> """ diff --git a/lib/simpleshop_theme_web/components/shop_components/product.ex b/lib/simpleshop_theme_web/components/shop_components/product.ex index 0f334cb..2e58db1 100644 --- a/lib/simpleshop_theme_web/components/shop_components/product.ex +++ b/lib/simpleshop_theme_web/components/shop_components/product.ex @@ -145,13 +145,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {@product.category}

    <% else %> - {@product.category} - + <% end %> <% end %>

    @@ -167,13 +167,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {@product.name} <% else %> - {@product.name} - + <% end %> <% else %> {@product.name} @@ -242,6 +242,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" + width="48" + height="48" class="size-12 opacity-40" > <% else %> - " text-decoration: none;"} > {@text} - + <% end %> """ end @@ -705,8 +707,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do <% else %> - @@ -721,7 +723,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do > {category.name} - + <% end %> <% end %> @@ -794,13 +796,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {@cta_text} <% else %> - {@cta_text} - + <% end %> @@ -915,13 +917,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {@link_text} <% else %> - {@link_text} - + <% end %> <% end %> @@ -1058,7 +1060,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {item.label} <% else %> - {item.label} + <.link navigate={item.href || "/"} class="hover:underline">{item.label} <% end %> <% end %> @@ -1173,7 +1175,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do aria-label="Previous image" phx-click={Phoenix.LiveView.JS.dispatch("pdp:scroll-prev", to: "##{@id_prefix}-carousel")} > - + @@ -1183,7 +1192,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do aria-label="Next image" phx-click={Phoenix.LiveView.JS.dispatch("pdp:scroll-next", to: "##{@id_prefix}-carousel")} > - + @@ -1202,6 +1218,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" + width="48" + height="48" class="size-12 opacity-40" > - + @@ -1324,7 +1349,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do aria-label="Previous image" phx-click={Phoenix.LiveView.JS.dispatch("pdp:prev-image", to: "##{@id_prefix}-lightbox")} > - + @@ -1347,7 +1379,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do aria-label="Next image" phx-click={Phoenix.LiveView.JS.dispatch("pdp:next-image", to: "##{@id_prefix}-lightbox")} > - + @@ -1674,6 +1713,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do {@title}