Show byte size for icons

Author: RoyalIcing

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

@@ -65,7 +65,7 @@ defmodule ComponentsGuide.Research.Source do
           %{query: query, path: path} -> path <> "?" <> query
         end
 
-        IO.puts("fetching URL #{uri} #{uri.host} #{path}")
+      IO.puts("fetching URL #{uri} #{uri.host} #{path}")
       {:ok, conn, request_ref} = Mint.HTTP.request(conn, "GET", path, [], nil)
 
       receive_mint_response(%Fetch{}, conn, request_ref)
@@ -82,37 +82,46 @@ defmodule ComponentsGuide.Research.Source do
     # Fetch.get(url)
 
     with {:ok, response} <- Mojito.request(method: :get, url: url, timeout: 50000) do
-      {:ok, response.body}
+      {:ok, response}
     else
       _ -> :err
     end
   end
 
   defp body({:html_document, url}) do
-    with {:ok, html} <- read({:fetch, url}),
-         {:ok, document} <- Floki.parse_document(html) do
+    with {:ok, response} <- read({:fetch, url}),
+         {:ok, document} <- Floki.parse_document(response.body) do
       {:ok, document}
     else
       _ -> :err
     end
   end
 
   defp body({:fetch_json, url}) do
-    with {:ok, encoded} <- read({:fetch, url}),
-         {:ok, data} <- Jason.decode(encoded) do
+    with {:ok, response} <- read({:fetch, url}),
+         {:ok, data} <- Jason.decode(response.body) do
       {:ok, data}
     else
       _ -> :err
     end
   end
 
+  defp body({:content_length, url}) do
+    with {:ok, response} <- read({:fetch, url}) do
+      {:ok, Mojito.Headers.get(response.headers, "content-length")}
+    else
+      _ -> :err
+    end
+  end
+
   defp run(key) do
     with {:ok, value} <- body(key) do
       write_cache(key, value)
       {:ok, value}
     else
-      _ -> write_cache(key, :err)
-      :err
+      _ ->
+        write_cache(key, :err)
+        :err
     end
   end
 
@@ -131,6 +140,7 @@ defmodule ComponentsGuide.Research.Source do
 
   def html_document_at(url), do: read({:html_document, url})
   def json_at(url), do: read({:fetch_json, url})
+  def content_length(url), do: read({:content_length, url})
 
   def clear_cache() do
     Cachex.clear(@cache_name)

apps/components_guide_web/lib/components_guide_web.ex

@@ -96,8 +96,12 @@ defmodule ComponentsGuideWeb do
 
       def markdown!(markdown) do
         Earmark.as_html!(markdown)
-          |> raw()
+        |> raw()
       end
+
+      def turbo_frame(id, src, do: block), do: content_tag("turbo-frame", block, id: id, src: src)
+      def turbo_frame(id, do: block), do: content_tag("turbo-frame", block, id: id)
+      def turbo_frame(id, src), do: content_tag("turbo-frame", [], id: id, src: src)
     end
   end
 

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

@@ -0,0 +1,30 @@
+defmodule ComponentsGuideWeb.ContentLengthController do
+  use ComponentsGuideWeb, :controller
+  alias ComponentsGuide.Research.Source
+  alias ComponentsGuideWeb.ResearchView, as: View
+
+  def index(conn, _params) do
+    url = "https://unpkg.com/[email protected]/images/svg/twitter.svg"
+
+    case Source.content_length(url) do
+      {:ok, content_length} ->
+        conn
+        |> put_root_layout(false)
+        |> put_layout(false)
+        |> render("index.html", content_length: content_length)
+
+      _ ->
+        html(conn, "")
+    end
+  end
+end
+
+defmodule ComponentsGuideWeb.ContentLengthView do
+  use ComponentsGuideWeb, :view
+
+  def render("index.html", assigns) do
+    turbo_frame("content-length") do
+      content_tag(:data, "#{assigns.content_length}", value: assigns.content_length)
+    end
+  end
+end

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

@@ -334,8 +334,8 @@ defmodule ComponentsGuideWeb.ResearchView do
         |> Stream.filter(fn {_title, value} -> value != nil end)
         |> Enum.map(fn {title, value} ->
           content_tag(:div, [
-            content_tag(:dt, title, class: "font-bold"),
-            content_tag(:dd, value, class: "pl-4")
+            content_tag(:dt, title, class: "text-base font-bold"),
+            content_tag(:dd, value, class: "text-base pl-4")
           ])
         end)
 
@@ -344,6 +344,8 @@ defmodule ComponentsGuideWeb.ResearchView do
   end
 
   defmodule Static do
+    # use ComponentsGuideWeb, :view
+
     def render(:http_status, {name, description}) do
       Section.card([
         content_tag(:h3, "HTTP Status: #{name}", class: "text-2xl font-bold"),
@@ -367,8 +369,18 @@ defmodule ComponentsGuideWeb.ResearchView do
     def render(:super_tiny_icon, %{name: name, url: url}) do
       Section.card([
         content_tag(:h3, "#{name |> String.capitalize()} Icon", class: "text-2xl font-bold"),
-        link(url, to: url, class: "text-base"),
-        tag(:img, src: url, width: 80, height: 80)
+        content_tag(
+          :div,
+          [
+            tag(:img, src: url, width: 80, height: 80),
+            Section.description_list([
+              {"URL", link(url, to: url, class: "text-base")},
+              {"Size",
+               ComponentsGuideWeb.ResearchView.turbo_frame("content-length", "/~/content-length")}
+            ])
+          ],
+          class: "flex flex-row space-x-4"
+        )
       ])
     end
 

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -18,6 +18,7 @@ defmodule ComponentsGuideWeb.Router do
     pipe_through :browser
 
     get "/elements/:element_id", ElementsController, :index
+    get "/~/content-length", ContentLengthController, :index
 
     get "/", LandingController, :index
 

apps/components_guide_web/lib/components_guide_web/templates/research/turbo-initial.html.eex

@@ -11,3 +11,5 @@
 </div>
 
 </turbo-frame>
+
+<%= turbo_frame("content-length", "/~/content-length") %>