Support user inputted url

Author: RoyalIcing

lib/components_guide_web/live/latency_comparison.ex

@@ -5,7 +5,7 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
   alias ComponentsGuide.Fetch
 
   defmodule State do
-    defstruct responses: nil
+    defstruct responses: nil, form_values: %{}
 
     def default() do
       %__MODULE__{}
@@ -20,24 +20,31 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
         | responses: responses
       }
     end
+
+    def set_form_values(%__MODULE__{} = state, form_values = %{}) do
+      %__MODULE__{
+        state
+        | form_values: form_values
+      }
+    end
   end
 
   @impl true
   def render(assigns) do
     ~H"""
     <.form
-      let={f}
       for={:editor}
-      id="view_source_form"
+      id="latency_comparison_form"
       phx-submit="submitted"
       class="max-w-2xl mt-12 mx-auto space-y-2"
     >
-      <div class="flex justify-center">
+      <div class="flex flex-col items-center gap-4">
         <button type="submit" class="px-3 py-1 text-xl text-blue-900 bg-blue-200 rounded" autofocus>Load</button>
+        <input type="url" id="user_url" name="user_url" value={@state.form_values["user_url"]} class="w-80 text-sm text-white bg-black border border-gray-700 rounded" placeholder="Compare your URL (optional)" aria-label="">
       </div>
     </.form>
 
-    <output form="view_source_form" class="flex flex-col gap-4 pt-4 max-w-none text-center">
+    <output form="latency_comparison_form" class="flex flex-col gap-4 pt-4 max-w-none text-center">
       <%= for response <- @state.responses || [], response != nil do %>
         <div class="p-4 text-white bg-black font-mono">
           <pre class="bg-transparent"><%= response.url %></pre>
@@ -46,10 +53,11 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
             <div class="h-1 bg-green-500" style={"width: #{System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond)}px"}></div>
             <div class="h-1 bg-purple-200" style={"width: #{System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond)}px"}></div>
           </div>
-          <p class="text-lg">
-            🤝 <data class="text-yellow-200"><%= System.convert_time_unit(response.timings.connected, :native, :millisecond) %>ms</data>
-            | <span class="py-1 px-1 text-green-100 bg-green-900/50 rounded"><%= response.status %></span> <data class="text-green-200">+<%= System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond) %>ms</data>
-            | <span class="py-1 px-1 text-purple-100 bg-purple-900/50 rounded"><%= Format.humanize_bytes(byte_size(response.body)) %></span> body <data class="text-purple-200">+<%= System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond) %>ms</data>
+          <p class="flex justify-center items-center gap-3 text-lg">
+            <data class="text-yellow-200"><%= System.convert_time_unit(response.timings.connected, :native, :millisecond) %>ms</data> <span>🤝</span>
+            <data class="text-green-200"><%= System.convert_time_unit(response.timings.received_status - response.timings.connected, :native, :millisecond) %>ms</data> <span class="px-1 text-sm text-green-900 bg-green-100 border border-green-200 rounded-full"><%= response.status %></span>
+            <data class="text-purple-200"><%= System.convert_time_unit(response.timings.duration - response.timings.received_status, :native, :millisecond) %>ms</data> <span class="px-1 text-sm text-purple-900 bg-purple-100 border border-purple-200 rounded-full"><%= Format.humanize_bytes(byte_size(response.body)) %></span>
+            <span class="text-blue-200/50">|</span> <data class="text-blue-200"><%= System.convert_time_unit(response.timings.duration, :native, :millisecond) %>ms</data>
           </p>
         </div>
       <% end %>
@@ -72,22 +80,33 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
   end
 
   @impl true
-  def handle_event("submitted", _form_values, socket) do
+  def handle_event("submitted", form_values = %{"user_url" => user_url}, socket) do
     urls = [
       "https://workers.cloudflare.com/cf.json",
+      "https://components-guide-deno.deno.dev/cf.json",
       "https://api.github.com/rate_limit",
       "https://unpkg.com/robots.txt",
       "https://api.npmjs.org/downloads/point/last-month/react",
       "https://cdn.jsdelivr.net/npm/[email protected]/underscore-esm-min.js",
+      "https://unpkg.com/[email protected]/underscore-esm-min.js",
       # "https://aws.amazon.com/blogs/aws/",
       # "https://aws.amazon.com/blogs/aws/feed/",
       # "https://cloud.google.com/blog/",
+      "https://github.blog/",
+      "https://github.blog/feed/",
       "https://blog.cloudflare.com/",
       "https://blog.cloudflare.com/rss/",
       "https://vercel.com/blog",
-      "https://vercel.com/atom",
+      "https://vercel.com/atom"
     ]
 
+    urls =
+      case URI.new(user_url) do
+        {:ok, %URI{host: ""}} -> urls
+        {:ok, uri = %URI{host: host, port: 443}} when is_binary(host) -> [to_string(uri) | urls]
+        _ -> urls
+      end
+
     responses =
       for url <- urls do
         req = Fetch.Request.new!(url)
@@ -106,7 +125,11 @@ defmodule ComponentsGuideWeb.LatencyComparisonLive do
     # redis_res = Fetch.Response.new("redis:") |> Fetch.Response.add_timings(redis_timings)
     # responses = [redis_res | responses]
 
-    state = socket.assigns.state |> State.add_responses(responses)
+    state =
+      socket.assigns.state
+      |> State.add_responses(responses)
+      |> State.set_form_values(form_values)
+
     socket = socket |> assign_state(state)
     {:noreply, socket}
   end