Gallery page: honeycomb photo grid implementation

const galleryModules = import.meta.glob<{ default: ImageMetadata }>(
  '../assets/images/gallery/*.jpg',
  { eager: true }
);

const images = Object.entries(galleryModules)
  .sort(([a], [b]) => a.localeCompare(b))
  .map(([, module], i) => ({
    src: module.default,
    alt: `${altPrefix} ${i + 1}`,
  }));

interface GalleryImage {
  src: ImageMetadata;
  alt: string;
}

interface Props {
  images: GalleryImage[];
}

<Picture
  src={src}
  widths={[240, 360, 540, 720]}
  sizes="(max-width: 540px) 40vw, (max-width: 1024px) 22vw, 16vw"
  formats={['avif', 'webp']}
  alt={alt}
  class="gallery-img"
  loading="lazy"
/>

(function () {
  var grid = document.querySelector('.gallery-grid');
  var tiles = grid.querySelectorAll('.gallery-tile');

  // Click / tap: toggle .is-active on the clicked tile,
  // clear any previously active tile first.
  tiles.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      var wasActive = btn.classList.contains('is-active');
      grid.querySelectorAll('.gallery-tile.is-active').forEach(function (b) {
        b.classList.remove('is-active');
      });
      if (!wasActive) btn.classList.add('is-active');
    });
  });

  // Click outside grid: deactivate all tiles.
  document.addEventListener('click', function (e) {
    if (!grid.contains(e.target)) {
      grid.querySelectorAll('.gallery-tile.is-active').forEach(function (b) {
        b.classList.remove('is-active');
      });
    }
  });

  // Escape key: deactivate all tiles.
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      grid.querySelectorAll('.gallery-tile.is-active').forEach(function (b) {
        b.classList.remove('is-active');
      });
    }
  });
})();