fix: create new component to load images from supabase bucket #251
Conversation
WalkthroughO pull request introduz uma nova função Changes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
⏰ Context from checks skipped due to timeout of 90000ms (2)
🔇 Additional comments (5)
Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
lib/pescarte_web/templates/aboutus_html/show.html.heex (1)
Line range hint
44-47: Mantenha consistência no uso do componente de imagemHá uma imagem SVG que ainda utiliza a tag
<img>direta ao invés do componente<.supabase_image>. Para manter a consistência, considere migrar todas as imagens para usar o mesmo componente.-<img - style="object-fit: contain" - src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/Logo_IBAMA.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL0xvZ29fSUJBTUEuc3ZnIiwiaWF0IjoxNzI1MzgzMzg5LCJleHAiOjIwNDA3NDMzODl9.Dt7KGoEC9eu7p4JEV-I9BzvZgBQgC2K0OuSbK6_8pNk&t=2024-09-03T17%3A09%3A49.837Z" -/> +<.supabase_image + src="images/sobre/Logo_IBAMA.svg" + alt="Logo do IBAMA" + class="contain-image" +/>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
flake.lockis excluded by!**/*.lock
📒 Files selected for processing (3)
lib/pescarte_web/design_system.ex(1 hunks)lib/pescarte_web/templates/aboutus_html/show.html.heex(6 hunks)lib/pescarte_web/templates/sedes_html/show.html.heex(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: lint (27.1.2, 1.18.0)
lib/pescarte_web/design_system.ex
Outdated
| @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 | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Melhore o tratamento de erros e a configuração do componente de imagem
O componente atual pode ser aprimorado em alguns aspectos:
- Adicione tratamento de erros para falhas na inicialização do cliente ou assinatura de URL
- Evite valores hardcoded como nome do bucket e tempo de expiração
- Considere implementar cache para URLs assinadas para melhor performance
Sugestão de implementação:
def supabase_image(assigns) do
+ bucket_name = Application.get_env(:pescarte, :supabase_bucket, "static")
+ expiration_time = Application.get_env(:pescarte, :url_expiration, 3600)
+
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
+ {:ok, bucket} <- Supabase.Storage.BucketHandler.retrieve_info(client, bucket_name),
+ {:ok, url} <- Supabase.Storage.create_signed_url(client, bucket, assigns.src, expiration_time) do
modified_url = String.replace(url, "/object/", "/storage/v1/object/")
Map.put(assigns, :src, modified_url)
+ else
+ error ->
+ Logger.error("Failed to generate Supabase image URL: #{inspect(error)}")
+ Map.put(assigns, :src, "/images/fallback.png")
end
~H"""
- <img src={@src} alt={@alt} class={@class} />
+ <img
+ src={@src}
+ alt={@alt}
+ class={@class}
+ loading="lazy"
+ onerror="this.onerror=null; this.src='/images/fallback.png';"
+ />
"""
endCommittable suggestion skipped: line range outside the PR's diff.
| @@ -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" /> | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Adicione atributos de acessibilidade e otimização
A implementação atual pode ser melhorada com atributos adicionais para acessibilidade e otimização de carregamento.
-<.supabase_image src="reduced_images/equipes/mapa.webp" alt="Mapa das sedes" />
+<.supabase_image
+ src="reduced_images/equipes/mapa.webp"
+ alt="Mapa das sedes"
+ class="map-image"
+ aria-label="Mapa interativo mostrando a localização das sedes do Pescarte"
+/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <.supabase_image src="reduced_images/equipes/mapa.webp" alt="Mapa das sedes" /> | |
| <.supabase_image | |
| src="reduced_images/equipes/mapa.webp" | |
| alt="Mapa das sedes" | |
| class="map-image" | |
| aria-label="Mapa interativo mostrando a localização das sedes do Pescarte" | |
| /> |
| @@ -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" /> | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Evite caracteres codificados em URLs de imagens
A URL da imagem contém caracteres codificados (%20) que podem ser substituídos por hifens ou underscores para melhor legibilidade e manutenção.
-<.supabase_image src="reduced_images/sobre/Linha%20do%20tempo%20-%20Fases%20do%20Pescarte_atual_versaosite.webp" />
+<.supabase_image src="reduced_images/sobre/linha-do-tempo-fases-do-pescarte.webp" />Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
lib/pescarte_web/design_system.ex (1)
644-654:⚠️ Potential issueImplemente tratamento de erros adequado
A função atual não trata adequadamente possíveis erros que podem ocorrer durante a geração da URL assinada. Isso pode resultar em falhas silenciosas.
Veja o comentário anterior sobre tratamento de erros e configuração do componente de imagem para uma implementação mais robusta.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
lib/pescarte_web/design_system.ex(1 hunks)lib/pescarte_web/templates/cooperativas_html/show.html.heex(1 hunks)lib/pescarte_web/templates/landing_html/show.html.heex(17 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test (27.1.2, 1.18.0)
🔇 Additional comments (2)
lib/pescarte_web/design_system.ex (2)
656-656: 🛠️ Refactor suggestionAdicione estados de carregamento e fallback
A imagem atual não possui estados de carregamento ou fallback para casos de erro. Isso pode impactar negativamente a experiência do usuário.
- <img src={@src} alt={@alt} class={@class} /> + <img + src={@src} + alt={@alt} + class={@class} + loading="lazy" + onerror="this.onerror=null; this.src='/images/fallback.webp';" + />Likely invalid or redundant comment.
648-649: 🛠️ Refactor suggestionEvite valores hardcoded
O nome do bucket ("static") e o tempo de expiração (3600) estão hardcoded no código. Isso dificulta a manutenção e configuração em diferentes ambientes.
- {:ok, bucket} <- Supabase.Storage.BucketHandler.retrieve_info(client, "static"), - {:ok, url} <- Supabase.Storage.create_signed_url(client, bucket, assigns.src, 3600) do + bucket_name = Application.get_env(:pescarte, :supabase_bucket, "static"), + expiration = Application.get_env(:pescarte, :url_expiration, 3600), + {:ok, bucket} <- Supabase.Storage.BucketHandler.retrieve_info(client, bucket_name), + {:ok, url} <- Supabase.Storage.create_signed_url(client, bucket, assigns.src, expiration) doLikely invalid or redundant comment.
| @@ -31,11 +31,11 @@ | |||
| </a> | |||
| </.text> | |||
| </div> | |||
| <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/cooperativas/cooperativas_1.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2Nvb3BlcmF0aXZhcy9jb29wZXJhdGl2YXNfMS5wbmciLCJpYXQiOjE3MjQzNDc5NTAsImV4cCI6MjAzOTcwNzk1MH0.aypgmecYR3yFQVDFbP6E9AEqbjZOiVtvpJWfc1z7aDM&t=2024-08-22T17%3A32%3A30.186Z" /> | |||
| <.supabase_image src="reduced_images/cooperativas/cooperativas_1.webp" /> | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Adicione texto alternativo para melhorar a acessibilidade
As alterações para usar o componente <.supabase_image> estão corretas e seguem o padrão estabelecido. No entanto, para melhorar a acessibilidade, sugiro adicionar o atributo alt com uma descrição apropriada das imagens.
- <.supabase_image src="reduced_images/cooperativas/cooperativas_1.webp" />
+ <.supabase_image
+ src="reduced_images/cooperativas/cooperativas_1.webp"
+ alt="Imagem ilustrativa sobre cooperativas"
+ />
- <.supabase_image src="reduced_images/cooperativas/cooperativas_2.webp" />
+ <.supabase_image
+ src="reduced_images/cooperativas/cooperativas_2.webp"
+ alt="Imagem sobre estudo de viabilidade técnica"
+ />Also applies to: 38-38
| <.supabase_image src="reduced_images/landing/carrossel/landing_carrossel1.webp" /> | ||
| </li> | ||
| <li class="glide__slide"> | ||
| <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/landing/carrossel/landing_carrossel2.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2xhbmRpbmcvY2Fycm9zc2VsL2xhbmRpbmdfY2Fycm9zc2VsMi5zdmciLCJpYXQiOjE3MjQ0MzU3MzAsImV4cCI6MjAzOTc5NTczMH0.31C7vtc4Tht7IAXzzllUt50IDo0niKEUzEw82CejFYs&t=2024-08-23T17%3A55%3A30.678Z" /> | ||
| <.supabase_image src="reduced_images/landing/carrossel/landing_carrossel2.webp" /> | ||
| </li> | ||
| <li class="glide__slide"> | ||
| <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/landing/carrossel/landing_carrossel3.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2xhbmRpbmcvY2Fycm9zc2VsL2xhbmRpbmdfY2Fycm9zc2VsMy5zdmciLCJpYXQiOjE3MjQ0MzU3NTEsImV4cCI6MjAzOTc5NTc1MX0.8cK8reFXk6ie0mf_eDYGT86zRzFygEiuuOAsofjNfKI&t=2024-08-23T17%3A55%3A51.737Z" /> | ||
| <.supabase_image src="reduced_images/landing/carrossel/landing_carrossel3.webp" /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Adicione texto alternativo para todas as imagens
Para melhorar a acessibilidade do site, é importante adicionar descrições adequadas para todas as imagens usando o atributo alt. Isso ajuda usuários que utilizam leitores de tela e melhora o SEO.
Exemplo para o carrossel:
- <.supabase_image src="reduced_images/landing/carrossel/landing_carrossel1.webp" />
+ <.supabase_image
+ src="reduced_images/landing/carrossel/landing_carrossel1.webp"
+ alt="Primeira imagem do carrossel da página inicial"
+ />Aplique o mesmo padrão para todas as outras imagens, fornecendo descrições específicas e significativas para cada contexto.
Referência: Guia de Acessibilidade Web do W3C
Also applies to: 20-23, 39-39, 48-48, 57-57, 66-66, 75-75, 84-84, 93-93, 122-122, 155-155, 180-180, 206-206, 231-231, 258-258, 283-283, 308-308, 339-345
| @@ -81,7 +81,7 @@ | |||
| </DesignSystem.link> | |||
| </div> | |||
| <div class="links-item"> | |||
| <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/landing/landing_card_pgtr.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2xhbmRpbmcvbGFuZGluZ19jYXJkX3BndHIuSlBHIiwiaWF0IjoxNzI0Mzc0OTk5LCJleHAiOjIwMzk3MzQ5OTl9.c5oxVdvtd2slsO5qguXEscJizkJkw9c09fwuZ0TcGVY&t=2024-08-23T01%3A03%3A19.718Z" /> | |||
| <.supabase_image src="reduced_images/landing/landing_card_pgtr.webp" /> | |||
There was a problem hiding this comment.
Corrigir caminho duplicado da imagem
O caminho da imagem reduced_images/landing/landing_card_pgtr.webp está sendo usado tanto para o card de PGTR quanto para o card de NAIPA, o que parece ser um erro.
- <.supabase_image src="reduced_images/landing/landing_card_pgtr.webp" />
+ <.supabase_image src="reduced_images/landing/landing_card_naipa.webp" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <.supabase_image src="reduced_images/landing/landing_card_pgtr.webp" /> | |
| <.supabase_image src="reduced_images/landing/landing_card_naipa.webp" /> |
| attr :class, :string, default: "", doc: "the image class" | ||
|
|
||
| def supabase_image(assigns) do | ||
| IO.inspect(assigns.src) |
There was a problem hiding this comment.
Remova a declaração de debug
A função IO.inspect/1 deve ser removida pois não é adequada para código em produção.
- IO.inspect(assigns.src)
Descrição
Criado novo componente para carregar imagens da Supabase
Stories relacionadas (Shortcut)
Pontos para atenção
Possui novas configurações?
Possui migrations?
Summary by CodeRabbit
Novos Recursos
supabase_imagepara renderização dinâmica de imagens do Supabase.Melhorias
<img>tradicionais por componente<.supabase_image>em múltiplas páginas, incluindo seções de carrossel e galeria.