feat: 🎸 live view 1.0

extra/lib/plausible_web/live/funnel_settings.ex

@@ -43,15 +43,15 @@ defmodule PlausibleWeb.Live.FunnelSettings do
     <div id="funnel-settings-main">
       <.flash_messages flash={@flash} />
       <%= if @add_funnel? do %>
-        <%= live_render(
+        {live_render(
           @socket,
           PlausibleWeb.Live.FunnelSettings.Form,
           id: "funnels-form",
           session: %{
             "current_user_id" => @current_user_id,
             "domain" => @domain
           }
-        ) %>
+        )}
       <% else %>
         <div :if={@goal_count >= Funnel.min_steps()}>
           <.live_component
@@ -64,11 +64,11 @@ defmodule PlausibleWeb.Live.FunnelSettings do
 
         <div :if={@goal_count < Funnel.min_steps()}>
           <PlausibleWeb.Components.Generic.notice class="mt-4" title="Not enough goals">
-            You need to define at least two goals to create a funnel. Go ahead and <%= link(
+            You need to define at least two goals to create a funnel. Go ahead and {link(
               "add goals",
               to: PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain),
               class: "text-indigo-500 w-full text-center"
-            ) %> to proceed.
+            )} to proceed.
           </PlausibleWeb.Components.Generic.notice>
         </div>
       <% end %>

extra/lib/plausible_web/live/funnel_settings/form.ex

@@ -121,7 +121,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
                     Last month conversion rate: <strong><%= List.last(@evaluation_result.steps).conversion_rate %></strong>%
                   <% else %>
                     <span class="text-red-600 text-sm">
-                      Choose minimum <%= Funnel.min_steps() %> steps to evaluate funnel.
+                      Choose minimum {Funnel.min_steps()} steps to evaluate funnel.
                     </span>
                   <% end %>
                 </p>
@@ -196,11 +196,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
           class="border-dotted border-b border-gray-400 "
           tooltip="Sample calculation for last month"
         >
-          Entering Visitors: <strong><%= @result.entering_visitors %></strong>
+          Entering Visitors: <strong>{@result.entering_visitors}</strong>
         </span>
       </span>
       <span :if={step && @at > 0}>
-        Dropoff: <strong><%= Map.get(step, :dropoff_percentage) %>%</strong>
+        Dropoff: <strong>{Map.get(step, :dropoff_percentage)}%</strong>
       </span>
     </span>
     """

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -49,9 +49,9 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
           <%= for funnel <- @funnels do %>
             <div class="border-b border-gray-300 dark:border-gray-500 py-3 flex justify-between">
               <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                <%= funnel.name %>
+                {funnel.name}
                 <span class="text-sm text-gray-400 font-normal block mt-1">
-                  <%= funnel.steps_count %>-step funnel
+                  {funnel.steps_count}-step funnel
                 </span>
               </span>
               <button

lib/plausible_web/components/billing/billing.ex

@@ -116,12 +116,12 @@ defmodule PlausibleWeb.Components.Billing do
             class="text-sm dark:text-gray-100"
             x-bind:class={"tab === '#{@tab}' ? 'text-indigo-600 dark:text-indigo-500 font-semibold' : 'font-medium'"}
           >
-            <%= @name %>
+            {@name}
           </span>
           <span class="flex text-xs text-gray-500 dark:text-gray-400">
-            <%= if @disabled,
+            {if @disabled,
               do: "Not available",
-              else: PlausibleWeb.TextHelpers.format_date_range(@date_range) %>
+              else: PlausibleWeb.TextHelpers.format_date_range(@date_range)}
           </span>
         </div>
       </button>
@@ -154,7 +154,7 @@ defmodule PlausibleWeb.Components.Billing do
     ~H"""
     <table class="min-w-full text-gray-900 dark:text-gray-100" {@rest}>
       <tbody class="divide-y divide-gray-200 dark:divide-gray-600">
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </tbody>
     </table>
     """
@@ -170,11 +170,11 @@ defmodule PlausibleWeb.Components.Billing do
     ~H"""
     <tr {@rest}>
       <td class={["py-4 pr-1 text-sm sm:whitespace-nowrap text-left", @pad && "pl-6"]}>
-        <%= @title %>
+        {@title}
       </td>
       <td class="py-4 text-sm sm:whitespace-nowrap text-right">
-        <%= Cldr.Number.to_string!(@usage) %>
-        <%= if is_number(@limit), do: "/ #{Cldr.Number.to_string!(@limit)}" %>
+        {Cldr.Number.to_string!(@usage)}
+        {if is_number(@limit), do: "/ #{Cldr.Number.to_string!(@limit)}"}
       </td>
     </tr>
     """
@@ -189,7 +189,7 @@ defmodule PlausibleWeb.Components.Billing do
     >
       <h4 class="font-black dark:text-gray-100">Monthly quota</h4>
       <div class="py-2 text-xl font-medium dark:text-gray-100">
-        <%= PlausibleWeb.AuthView.subscription_quota(@subscription, format: :long) %>
+        {PlausibleWeb.AuthView.subscription_quota(@subscription, format: :long)}
       </div>
       <.styled_link
         :if={
@@ -198,7 +198,7 @@ defmodule PlausibleWeb.Components.Billing do
         id="#upgrade-or-change-plan-link"
         href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
       >
-        <%= change_plan_or_upgrade_text(@subscription) %>
+        {change_plan_or_upgrade_text(@subscription)}
       </.styled_link>
     </div>
     """
@@ -208,13 +208,13 @@ defmodule PlausibleWeb.Components.Billing do
     ~H"""
     <ul class="w-full py-4">
       <li>
-        Up to <b><%= present_limit(@plan, :monthly_pageview_limit) %></b> monthly pageviews
+        Up to <b>{present_limit(@plan, :monthly_pageview_limit)}</b> monthly pageviews
       </li>
       <li>
-        Up to <b><%= present_limit(@plan, :site_limit) %></b> sites
+        Up to <b>{present_limit(@plan, :site_limit)}</b> sites
       </li>
       <li>
-        Up to <b><%= present_limit(@plan, :hourly_api_request_limit) %></b> hourly api requests
+        Up to <b>{present_limit(@plan, :hourly_api_request_limit)}</b> hourly api requests
       </li>
     </ul>
     """
@@ -249,7 +249,7 @@ defmodule PlausibleWeb.Components.Billing do
         @checkout_disabled && "pointer-events-none bg-gray-400 dark:bg-gray-600"
       ]}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end

lib/plausible_web/components/billing/notice.ex

@@ -30,7 +30,7 @@ defmodule PlausibleWeb.Components.Billing.Notice do
       ~H"""
       <aside class="container">
         <.notice title="Please upgrade your account" class="shadow-md dark:shadow-none">
-          In order to keep your stats running, we require you to upgrade your account. If you do not upgrade your account <%= @grace_period_end %>, we will lock your dashboard and it won't be accessible.
+          In order to keep your stats running, we require you to upgrade your account. If you do not upgrade your account {@grace_period_end}, we will lock your dashboard and it won't be accessible.
           <.link
             href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)}
             class="whitespace-nowrap font-semibold"
@@ -75,7 +75,7 @@ defmodule PlausibleWeb.Components.Billing.Notice do
       title="Notice"
       {@rest}
     >
-      <%= account_label(@current_user, @billable_user) %> does not have access to <%= @feature_mod.display_name() %>. To get access to this feature,
+      {account_label(@current_user, @billable_user)} does not have access to {@feature_mod.display_name()}. To get access to this feature,
       <.upgrade_call_to_action current_user={@current_user} billable_user={@billable_user} />.
     </.notice>
     """
@@ -90,7 +90,7 @@ defmodule PlausibleWeb.Components.Billing.Notice do
   def limit_exceeded(assigns) do
     ~H"""
     <.notice {@rest} title="Notice">
-      <%= account_label(@current_user, @billable_user) %> is limited to <%= @limit %> <%= @resource %>. To increase this limit,
+      {account_label(@current_user, @billable_user)} is limited to {@limit} {@resource}. To increase this limit,
       <.upgrade_call_to_action current_user={@current_user} billable_user={@billable_user} />.
     </.notice>
     """
@@ -229,7 +229,7 @@ defmodule PlausibleWeb.Components.Billing.Notice do
       ~H"""
       <aside class={@class}>
         <.notice title="Pending ownership transfers" class="shadow-md dark:shadow-none mt-4">
-          <%= @message %> To exclude pending sites from your usage, please go to
+          {@message} To exclude pending sites from your usage, please go to
           <.link href="https://plausible.io/sites" class="whitespace-nowrap font-semibold">
             plausible.io/sites
           </.link>

lib/plausible_web/components/billing/pageview_slider.ex

@@ -20,7 +20,7 @@ defmodule PlausibleWeb.Components.Billing.PageviewSlider do
     <output class="lg:w-1/4 lg:order-1 font-medium text-lg text-gray-600 dark:text-gray-200">
       <span :if={@volume != :enterprise}>Up to</span>
       <strong id="slider-value" class="text-gray-900 dark:text-gray-100">
-        <%= format_volume(@volume, @available_volumes) %>
+        {format_volume(@volume, @available_volumes)}
       </strong>
       monthly pageviews
     </output>
@@ -40,7 +40,7 @@ defmodule PlausibleWeb.Components.Billing.PageviewSlider do
     <form class="max-w-md lg:max-w-none w-full lg:w-1/2 lg:order-2">
       <div class="flex items-baseline space-x-2">
         <span class="text-xs font-medium text-gray-600 dark:text-gray-200">
-          <%= List.first(@slider_labels) %>
+          {List.first(@slider_labels)}
         </span>
         <div class="flex-1 relative">
           <input
@@ -65,7 +65,7 @@ defmodule PlausibleWeb.Components.Billing.PageviewSlider do
           />
         </div>
         <span class="text-xs font-medium text-gray-600 dark:text-gray-200">
-          <%= List.last(@slider_labels) %>
+          {List.last(@slider_labels)}
         </span>
       </div>
     </form>

lib/plausible_web/components/billing/plan_benefits.ex

@@ -28,7 +28,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBenefits do
     <ul role="list" class={["mt-8 space-y-3 text-sm leading-6 xl:mt-10", @class]}>
       <li :for={benefit <- @benefits} class="flex gap-x-3">
         <Heroicons.check class="h-6 w-5 text-indigo-600 dark:text-green-600" />
-        <%= if is_binary(benefit), do: benefit, else: benefit.(assigns) %>
+        {if is_binary(benefit), do: benefit, else: benefit.(assigns)}
       </li>
     </ul>
     """

lib/plausible_web/components/billing/plan_box.ex

@@ -32,7 +32,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
           !@highlight && "text-gray-900 dark:text-gray-100",
           @highlight && "text-indigo-600 dark:text-indigo-300"
         ]}>
-          <%= String.capitalize(to_string(@kind)) %>
+          {String.capitalize(to_string(@kind))}
         </h3>
         <.pill :if={@highlight} text={@highlight} />
       </div>
@@ -79,7 +79,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
         id="highlight-pill"
         class="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600 dark:text-indigo-300 dark:ring-1 dark:ring-indigo-300/50"
       >
-        <%= @text %>
+        {@text}
       </p>
     </div>
     """
@@ -123,7 +123,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
       id={"#{@kind}-price-tag-amount"}
       class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
     >
-      <%= @plan_to_render.monthly_cost |> Plausible.Billing.format_price() %>
+      {@plan_to_render.monthly_cost |> Plausible.Billing.format_price()}
     </span>
     <span
       id={"#{@kind}-price-tag-interval"}
@@ -137,13 +137,13 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
   defp price_tag(%{selected_interval: :yearly} = assigns) do
     ~H"""
     <span class="text-2xl font-bold w-max tracking-tight line-through text-gray-500 dark:text-gray-600 mr-1">
-      <%= @plan_to_render.monthly_cost |> Money.mult!(12) |> Plausible.Billing.format_price() %>
+      {@plan_to_render.monthly_cost |> Money.mult!(12) |> Plausible.Billing.format_price()}
     </span>
     <span
       id={"#{@kind}-price-tag-amount"}
       class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
     >
-      <%= @plan_to_render.yearly_cost |> Plausible.Billing.format_price() %>
+      {@plan_to_render.yearly_cost |> Plausible.Billing.format_price()}
     </span>
     <span id={"#{@kind}-price-tag-interval"} class="text-sm font-semibold leading-6 text-gray-600">
       /year
@@ -218,16 +218,16 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
     >
       <%= if @exceeded_plan_limits != [] do %>
         <PlausibleWeb.Components.Generic.tooltip class="text-sm text-red-700 dark:text-red-500 mt-1 justify-center">
-          <%= @disabled_message %>
+          {@disabled_message}
           <:tooltip_content>
             Your usage exceeds the following limit(s):<br /><br />
             <p :for={limit <- @exceeded_plan_limits}>
-              <%= Phoenix.Naming.humanize(limit) %><br />
+              {Phoenix.Naming.humanize(limit)}<br />
             </p>
           </:tooltip_content>
         </PlausibleWeb.Components.Generic.tooltip>
       <% else %>
-        <%= @disabled_message %>
+        {@disabled_message}
       <% end %>
     </p>
     """
@@ -320,7 +320,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
         @checkout_disabled && "pointer-events-none bg-gray-400 dark:bg-gray-600"
       ]}
     >
-      <%= @change_plan_link_text %>
+      {@change_plan_link_text}
     </button>
     """
   end

lib/plausible_web/components/first_dashboard_launch_banner.ex

@@ -28,10 +28,10 @@ defmodule PlausibleWeb.Components.FirstDashboardLaunchBanner do
       x-bind:class="! show ? 'hidden' : ''"
       x-init={x_init(@site)}
     >
-      <%= link("Team members, email reports and GA import. Explore more →",
+      {link("Team members, email reports and GA import. Explore more →",
         to: "/#{URI.encode_www_form(@site.domain)}/settings/email-reports",
         class: "py-2 block"
-      ) %>
+      )}
     </div>
     """
   end