From ea8d53b77dee4378fd02ab721ecf8701d6d1887c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jurgen=20Beli=C3=ABn?= <info@jurgenbelien.nl>
Date: Thu, 2 Jan 2025 17:14:46 +0100
Subject: [PATCH] style: rename Image web-component (#238)

Having Image.astro be the image-block web component is confusing

# Changes

- Rename ImageBlock webcomponent to ImageComponent

# How to test

1. Verify if images still work

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- [x] I have made updated relevant documentation files (in project
README, docs/, etc)
- [ ] ~I have added a decision log entry if the change affects the
architecture or changes a significant technology~
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->
---
 src/blocks/ImageBlock/Image.astro     | 4 ++--
 src/blocks/ImageBlock/Image.client.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/blocks/ImageBlock/Image.astro b/src/blocks/ImageBlock/Image.astro
index aab9efe..d572975 100644
--- a/src/blocks/ImageBlock/Image.astro
+++ b/src/blocks/ImageBlock/Image.astro
@@ -27,7 +27,7 @@ const { image, loading = 'lazy' } = Astro.props;
 const altText = image.alt ? image.alt : ''; // default to empty string for accessibility
 const imageUnavailableMessage = t('image_unavailable');
 ---
-<image-block>
+<image-component>
   <figure>
     {
       image.responsiveImage
@@ -58,7 +58,7 @@ const imageUnavailableMessage = t('image_unavailable');
       <figcaption>{ image.title }</figcaption>
     )}
   </figure>
-</image-block>
+</image-component>
 
 <script src="./Image.client.ts"></script>
 
diff --git a/src/blocks/ImageBlock/Image.client.ts b/src/blocks/ImageBlock/Image.client.ts
index 4ca73e4..12802bf 100644
--- a/src/blocks/ImageBlock/Image.client.ts
+++ b/src/blocks/ImageBlock/Image.client.ts
@@ -2,7 +2,7 @@
  * A custom HTML element that enhances an `<img>` element with additional behavior.
  * Automatically removes the inline `background-image` style once the image is fully loaded.
  */
-class ImageBlock extends HTMLElement {
+class ImageComponent extends HTMLElement {
   imgElement: HTMLImageElement;
 
   handleImageLoad = (): void => {
@@ -28,4 +28,4 @@ class ImageBlock extends HTMLElement {
   }
 }
 
-customElements.define('image-block', ImageBlock);
+customElements.define('image-component', ImageComponent);