fix: create new component to load images from supabase bucket

peapescarte · Jan 18, 2025 · 1c21775 · 1c21775
1 parent 2a689d9
commit 1c21775
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 28 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/lib/pescarte_web/design_system.ex b/lib/pescarte_web/design_system.ex
@@ -634,6 +634,28 @@ defmodule PescarteWeb.DesignSystem do
     """
   end
 
+  @doc """
+  Renders image from Supabase
+  """
+  attr :src, :string, required: true, doc: "the image source"
+  attr :alt, :string, required: false, default: "", doc: "the image alt"
+  attr :class, :string, default: "", doc: "the image class"
+
+  def supabase_image(assigns) do
+    assigns =
+      with {:ok, client} <- Pescarte.Supabase.get_client(),
+           {:ok, bucket} <- Supabase.Storage.BucketHandler.retrieve_info(client, "static"),
+           {:ok, url} <- Supabase.Storage.create_signed_url(client, bucket, assigns.src, 3600) do
+        modified_url = String.replace(url, "/object/", "/storage/v1/object/")
+
+        Map.put(assigns, :src, modified_url)
+      end
+
+    ~H"""
+    <img src={@src} alt={@alt} class={@class} />
+    """
+  end
+
   @doc """
   Renders flash notices.
   ## Examples

diff --git a/lib/pescarte_web/templates/aboutus_html/show.html.heex b/lib/pescarte_web/templates/aboutus_html/show.html.heex
@@ -7,7 +7,7 @@
   </div>
 
   <div class="get-to-know">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_1.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzEucG5nIiwiaWF0IjoxNzI0MzQ2OTE1LCJleHAiOjIwMzk3MDY5MTV9.J7I7kUsYTdVVseCs6QcGXHAAXIdrSPo-vEEurvrF2Kw&t=2024-08-22T17%3A15%3A15.147Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_1.webp" />
     <div class="know-content">
       <.text size="h2" color="text-blue-100">
         Conheça o PEA Pescarte: Empoderando Pescadores Artesanais na Bacia de Campos
@@ -37,7 +37,7 @@
         As principais diretrizes para a execução do licenciamento ambiental estão expressas na Lei 6.938/81 e nas Resoluções CONAMA nº 001/86 e nº 237/97 e na Lei Complementar nº 140/2011, que discorre sobre a competência estadual e federal para o licenciamento, tendo como fundamento a localização do empreendimento.
       </.text>
     </div>
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/licenciamento_ambiental.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL2xpY2VuY2lhbWVudG9fYW1iaWVudGFsLkpQRyIsImlhdCI6MTcyNTM4Mzc4MSwiZXhwIjoyMDQwNzQzNzgxfQ.StLvPFpV1H_nVc6CIUq3qHORBLIuJbewMhOND1w9iyE&t=2024-09-03T17%3A16%3A21.334Z" />
+    <.supabase_image src="reduced_images/sobre/licenciamento_ambiental.webp" />
   </div>
 
   <div class="get-to-know">
@@ -91,7 +91,7 @@
   </div>
 
   <div class="phases-img">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/Linha%20do%20tempo%20-%20Fases%20do%20Pescarte_atual_versaosite.jpeg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL0xpbmhhIGRvIHRlbXBvIC0gRmFzZXMgZG8gUGVzY2FydGVfYXR1YWxfdmVyc2Fvc2l0ZS5qcGVnIiwiaWF0IjoxNzI1NjI1MzU4LCJleHAiOjIwNDA5ODUzNTh9.-GeuXA3RR4LD15MmHeJHFR0Q1D7n15Ly0ll6lLfaZig&t=2024-09-06T12%3A22%3A39.490Z" />
+    <.supabase_image src="reduced_images/sobre/Linha%20do%20tempo%20-%20Fases%20do%20Pescarte_atual_versaosite.webp" />
   </div>
 
   <div class="phases">
@@ -161,11 +161,11 @@
         </div>
       </div>
     </div>
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_2.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzIuSlBHIiwiaWF0IjoxNzI0MzQ3MDgxLCJleHAiOjIwMzk3MDcwODF9.19GdW-Pb-A5J4vF79dE9OQkI5rKLGCa4cAVkSySj4jo&t=2024-08-22T17%3A18%3A01.216Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_2.webp" />
   </div>
 
   <div class="phases">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_3.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzMucG5nIiwiaWF0IjoxNzI0MzQ3MjMxLCJleHAiOjIwMzk3MDcyMzF9.nYcnc1kVVHJc0yXtFfjXOfhkXBgK5MdnotAr9MDcqK0&t=2024-08-22T17%3A20%3A31.146Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_3.webp" />
 
     <div class="phase-content">
       <.text size="h2" color="text-blue-100">
@@ -310,11 +310,11 @@
       </div>
     </div>
 
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_4.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzQucG5nIiwiaWF0IjoxNzI0MzQ3Mzc1LCJleHAiOjIwMzk3MDczNzV9.RY38Q0fN6zxqvTkmrr_4PBROf_AHSfNHOGFWtj_o0sc&t=2024-08-22T17%3A22%3A55.770Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_4.webp" />
   </div>
 
   <div class="phases">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_5.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzUucG5nIiwiaWF0IjoxNzI0MzQ3NDg5LCJleHAiOjIwMzk3MDc0ODl9.6ML7AHK1LCuTT4mlk-FBryGYPyRxc2eUGrqpvPbK-Ns&t=2024-08-22T17%3A24%3A49.348Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_5.webp" />
 
     <div class="phase-content">
       <div class="current-phase">
@@ -463,11 +463,12 @@
       </div>
     </div>
 
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_6.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzYucG5nIiwiaWF0IjoxNzI0MzQ3NjQwLCJleHAiOjIwMzk3MDc2NDB9.7ip_mUIuHYygKXsRHj1bhaER9Mba3TOPTvGbQKCZU4M&t=2024-08-22T17%3A27%3A20.608Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_6.webp" />
   </div>
 
   <div class="phases">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_7.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzcucG5nIiwiaWF0IjoxNzI0MzQ3NjY3LCJleHAiOjIwMzk3MDc2Njd9.cllrH0Qlirwol3t8lAipBcGxxA2xi5w6eOU6HhJz3VY&t=2024-08-22T17%3A27%3A47.217Z" />
+    <.supabase_image src="reduced_images/sobre/sobre_7.webp" />
+
     <div class="phase-content">
       <.text size="h2" color="text-blue-100">
         6ª Fase

diff --git a/lib/pescarte_web/templates/sedes_html/show.html.heex b/lib/pescarte_web/templates/sedes_html/show.html.heex
@@ -1,7 +1,7 @@
 <main class="sedes-wrapper">
   <!-- MAPA -->
   <div class="mapa">
-    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/equipes/mapa.jpeg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2VxdWlwZXMvbWFwYS5qcGVnIiwiaWF0IjoxNzI0MTU2NjYwLCJleHAiOjE3NTU2OTI2NjB9.cpDBGFmH-HhwRjZ27FUpBLZ_tsulytz7MlcngJLlyyI&t=2024-08-20T12%3A24%3A20.597Z" />
+    <.supabase_image src="reduced_images/equipes/mapa.webp" alt="Mapa das sedes" />
   </div>
   <!-- NOSSAS SEDES MUNICIPAIS -->
   <div class="nossas-sedes">