Show byte size of icons

Author: RoyalIcing

apps/components_guide/lib/components_guide/research/source.ex

@@ -107,8 +107,10 @@ defmodule ComponentsGuide.Research.Source do
   end
 
   defp body({:content_length, url}) do
-    with {:ok, response} <- read({:fetch, url}) do
-      {:ok, Mojito.Headers.get(response.headers, "content-length")}
+    with {:ok, response} <- Mojito.request(method: :head, url: url, timeout: 50000),
+         s when is_binary(s) <- Mojito.Headers.get(response.headers, "content-length"),
+         {n, _} <- Integer.parse(s) do
+      {:ok, n}
     else
       _ -> :err
     end

apps/components_guide_web/lib/components_guide_web.ex

@@ -93,6 +93,7 @@ defmodule ComponentsGuideWeb do
 
       import Paredown
       alias ComponentsGuideWeb.StylingHelpers, as: Styling
+      alias ComponentsGuideWeb.FormattingHelpers, as: Format
 
       def markdown!(markdown) do
         Earmark.as_html!(markdown)

apps/components_guide_web/lib/components_guide_web/controllers/content_length_controller.ex

@@ -3,9 +3,7 @@ defmodule ComponentsGuideWeb.ContentLengthController do
   alias ComponentsGuide.Research.Source
   alias ComponentsGuideWeb.ResearchView, as: View
 
-  def index(conn, _params) do
-    url = "https://unpkg.com/[email protected]/images/svg/twitter.svg"
-
+  def index(conn, %{"url" => "https://unpkg.com/" <> _ = url}) do
     case Source.content_length(url) do
       {:ok, content_length} ->
         conn
@@ -14,7 +12,7 @@ defmodule ComponentsGuideWeb.ContentLengthController do
         |> render("index.html", content_length: content_length)
 
       _ ->
-        html(conn, "")
+        html(conn, "–")
     end
   end
 end
@@ -24,7 +22,9 @@ defmodule ComponentsGuideWeb.ContentLengthView do
 
   def render("index.html", assigns) do
     turbo_frame("content-length") do
-      content_tag(:data, "#{assigns.content_length}", value: assigns.content_length)
+      content_tag(:data, Format.humanize_bytes(assigns.content_length),
+        value: assigns.content_length
+      )
     end
   end
 end

apps/components_guide_web/lib/components_guide_web/controllers/research_controller.ex

@@ -279,35 +279,8 @@ defmodule ComponentsGuideWeb.ResearchView do
     """
   end
 
-  defdelegate float_to_string(f, options), to: :erlang, as: :float_to_binary
-
-  def humanize_bytes(count) when count >= 1024 * 1024 do
-    megabytes = count / (1024 * 1024)
-    "#{float_to_string(megabytes, decimals: 1)} mB"
-  end
-
-  def humanize_bytes(count) when count >= 1024 do
-    kilobytes = count / 1024
-    "#{float_to_string(kilobytes, decimals: 1)} kB"
-  end
-
-  def humanize_bytes(count) when is_integer(count) do
-    "#{count} B"
-  end
-
-  def humanize_count(count) when count >= 1_000_000 do
-    formatted = count / 1_000_000
-    "#{float_to_string(formatted, decimals: 1)}M"
-  end
-
-  def humanize_count(count) when count >= 1000 do
-    formatted = count / 1000
-    "#{float_to_string(formatted, decimals: 1)}K"
-  end
-
-  def humanize_count(count) when is_integer(count) do
-    "#{count}"
-  end
+  defdelegate humanize_bytes(count), to: Format
+  defdelegate humanize_count(count), to: Format
 
   defmodule Section do
     def card(children) do
@@ -376,7 +349,10 @@ defmodule ComponentsGuideWeb.ResearchView do
             Section.description_list([
               {"URL", link(url, to: url, class: "text-base")},
               {"Size",
-               ComponentsGuideWeb.ResearchView.turbo_frame("content-length", "/~/content-length")}
+               ComponentsGuideWeb.ResearchView.turbo_frame(
+                 "content-length",
+                 "/~/content-length?" <> URI.encode_query(url: url)
+               )}
             ])
           ],
           class: "flex flex-row space-x-4"

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -2,57 +2,63 @@ defmodule ComponentsGuideWeb.Router do
   use ComponentsGuideWeb, :router
 
   pipeline :browser do
-    plug :accepts, ["html"]
-    plug :fetch_session
-    plug :fetch_live_flash
-    plug :put_root_layout, {ComponentsGuideWeb.LayoutView, :root}
-    plug :protect_from_forgery
-    plug :put_secure_browser_headers
+    plug(:accepts, ["html"])
+    plug(:fetch_session)
+    plug(:fetch_live_flash)
+    plug(:put_root_layout, {ComponentsGuideWeb.LayoutView, :root})
+    plug(:protect_from_forgery)
+    plug(:put_secure_browser_headers)
   end
 
   pipeline :api do
-    plug :accepts, ["json"]
+    plug(:accepts, ["json"])
   end
 
   scope "/", ComponentsGuideWeb do
-    pipe_through :browser
-    
-    get "/elements/:element_id", ElementsController, :index
-    get "/~/content-length", ContentLengthController, :index
+    pipe_through(:browser)
 
-    get "/", LandingController, :index
+    get("/elements/:element_id", ElementsController, :index)
+    get("/~/content-length", ContentLengthController, :index)
 
-    get "/research", ResearchController, :index
+    get("/", LandingController, :index)
 
-    get "/concepts", ConceptsController, :index
+    get("/research", ResearchController, :index)
 
-    get "/links", LinksController, :index
+    get("/concepts", ConceptsController, :index)
 
-    resources "/accessibility-first",
-              AccessibilityFirstController,
-              only: [:index, :show]
+    get("/links", LinksController, :index)
 
-    resources "/composable-systems",
-              ComposableSystemsController,
-              only: [:index, :show]
+    resources(
+      "/accessibility-first",
+      AccessibilityFirstController,
+      only: [:index, :show]
+    )
 
-    resources "/web-standards",
-              WebStandardsController,
-              only: [:index, :show]
+    resources(
+      "/composable-systems",
+      ComposableSystemsController,
+      only: [:index, :show]
+    )
 
-    live "/color", ColorLive, :index
-    live "/color/:definition", ColorLive, :show
-    live "/color/lab/:definition", ColorLive, :lab
+    resources(
+      "/web-standards",
+      WebStandardsController,
+      only: [:index, :show]
+    )
 
-    get "/swiftui", SwiftUIController, :index
+    live("/color", ColorLive, :index)
+    live("/color/:definition", ColorLive, :show)
+    live("/color/lab/:definition", ColorLive, :lab)
 
-    get "/react+typescript", ReactTypescriptController, :index
-    get "/react+typescript/:article", ReactTypescriptController, :show
+    get("/swiftui", SwiftUIController, :index)
 
-    resources "/text", TextController
-    get "/text/:id/text/:format", TextController, :show_text_format
+    get("/react+typescript", ReactTypescriptController, :index)
+    get("/react+typescript/:article", ReactTypescriptController, :show)
 
-    get "/fake-search", FakeSearchController, :index
+    resources("/text", TextController)
+    get("/text/:id/text/:format", TextController, :show_text_format)
+
+    get("/fake-search", FakeSearchController, :index)
   end
 
   # Other scopes may use custom stacks.
@@ -71,8 +77,8 @@ defmodule ComponentsGuideWeb.Router do
     import Phoenix.LiveDashboard.Router
 
     scope "/" do
-      pipe_through :browser
-      live_dashboard "/dashboard", metrics: ComponentsGuideWeb.Telemetry
+      pipe_through(:browser)
+      live_dashboard("/dashboard", metrics: ComponentsGuideWeb.Telemetry)
     end
   end
 end

apps/components_guide_web/lib/components_guide_web/views/formatting_helpers.ex

@@ -0,0 +1,31 @@
+defmodule ComponentsGuideWeb.FormattingHelpers do
+  defdelegate float_to_string(f, options), to: :erlang, as: :float_to_binary
+
+  def humanize_bytes(count) when is_integer(count) and count >= 1024 * 1024 do
+    megabytes = count / (1024 * 1024)
+    "#{float_to_string(megabytes, decimals: 1)} mB"
+  end
+
+  def humanize_bytes(count) when is_integer(count) and count >= 1024 do
+    kilobytes = count / 1024
+    "#{float_to_string(kilobytes, decimals: 1)} kB"
+  end
+
+  def humanize_bytes(count) when is_integer(count) do
+    "#{count} B"
+  end
+
+  def humanize_count(count) when is_integer(count) and count >= 1_000_000 do
+    formatted = count / 1_000_000
+    "#{float_to_string(formatted, decimals: 1)}M"
+  end
+
+  def humanize_count(count) when is_integer(count) and count >= 1000 do
+    formatted = count / 1000
+    "#{float_to_string(formatted, decimals: 1)}K"
+  end
+
+  def humanize_count(count) when is_integer(count) do
+    "#{count}"
+  end
+end