@easy-web/content-blocks 1.0.0

package/src/components/GalleryLightboxGrid.astro

@@ -0,0 +1,353 @@
+---
+import type { GalleryLightboxGridData } from '../schemas/galleries';
+
+type Props = Omit<GalleryLightboxGridData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  columns = 3,
+  gap = 'md',
+  aspectRatio = 'square',
+  items,
+} = Astro.props;
+
+const gridClass = [
+  'ew-lightbox-grid',
+  `ew-lightbox-grid--cols-${columns}`,
+  `ew-lightbox-grid--gap-${gap}`,
+].join(' ');
+
+const ratioClass = `ew-lightbox-grid__img--ratio-${aspectRatio.replace('/', '-')}`;
+---
+
+{items.length > 0 && (
+  <section class="ew-lightbox-wrap" data-lightbox-root>
+    <div class="ew-lightbox-wrap__inner">
+      {title && <h2 class="ew-lightbox-wrap__title">{title}</h2>}
+      <div class={gridClass}>
+        {items.map((item, i) => (
+          <button
+            type="button"
+            class="ew-lightbox-grid__item"
+            data-index={i}
+            aria-label={`Open ${item.alt}`}
+          >
+            <img
+              src={item.src}
+              alt={item.alt}
+              class={`ew-lightbox-grid__img ${ratioClass}`}
+              loading="lazy"
+            />
+          </button>
+        ))}
+      </div>
+      <div
+        class="ew-lightbox"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title ?? 'Image lightbox'}
+        data-open="false"
+        hidden
+      >
+        <button
+          type="button"
+          class="ew-lightbox__close"
+          aria-label="Close lightbox"
+        >
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="ew-lightbox__arrow ew-lightbox__arrow--prev"
+          aria-label="Previous image"
+        >
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="ew-lightbox__arrow ew-lightbox__arrow--next"
+          aria-label="Next image"
+        >
+          <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
+        <figure class="ew-lightbox__figure">
+          <img class="ew-lightbox__img" src="" alt="" />
+          <figcaption class="ew-lightbox__caption">
+            <h3 class="ew-lightbox__caption-title"></h3>
+            <p class="ew-lightbox__caption-description"></p>
+          </figcaption>
+        </figure>
+      </div>
+      <script type="application/json" data-lightbox-items set:html={JSON.stringify(items)} />
+    </div>
+  </section>
+)}
+
+<script>
+  type LightboxItem = {
+    src: string;
+    alt: string;
+    title?: string;
+    description?: string;
+  };
+
+  const initLightbox = (root: HTMLElement) => {
+    const dataNode = root.querySelector<HTMLScriptElement>('[data-lightbox-items]');
+    const modal = root.querySelector<HTMLElement>('.ew-lightbox');
+    const img = modal?.querySelector<HTMLImageElement>('.ew-lightbox__img');
+    const captionTitle = modal?.querySelector<HTMLElement>('.ew-lightbox__caption-title');
+    const captionDesc = modal?.querySelector<HTMLElement>('.ew-lightbox__caption-description');
+    const closeBtn = modal?.querySelector<HTMLButtonElement>('.ew-lightbox__close');
+    const prevBtn = modal?.querySelector<HTMLButtonElement>('.ew-lightbox__arrow--prev');
+    const nextBtn = modal?.querySelector<HTMLButtonElement>('.ew-lightbox__arrow--next');
+    const triggers = Array.from(root.querySelectorAll<HTMLButtonElement>('.ew-lightbox-grid__item'));
+
+    if (!dataNode || !modal || !img || !captionTitle || !captionDesc || !closeBtn || triggers.length === 0) return;
+
+    let items: LightboxItem[] = [];
+    try {
+      items = JSON.parse(dataNode.textContent || '[]');
+    } catch {
+      return;
+    }
+
+    let current = 0;
+    let lastTrigger: HTMLElement | null = null;
+
+    const render = (idx: number) => {
+      const next = ((idx % items.length) + items.length) % items.length;
+      current = next;
+      const item = items[current];
+      img.src = item.src;
+      img.alt = item.alt;
+      captionTitle.textContent = item.title ?? '';
+      captionTitle.hidden = !item.title;
+      captionDesc.textContent = item.description ?? '';
+      captionDesc.hidden = !item.description;
+    };
+
+    const open = (idx: number) => {
+      lastTrigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      render(idx);
+      modal.hidden = false;
+      modal.dataset.open = 'true';
+      document.body.style.overflow = 'hidden';
+      closeBtn.focus();
+    };
+
+    const close = () => {
+      modal.dataset.open = 'false';
+      modal.hidden = true;
+      document.body.style.overflow = '';
+      lastTrigger?.focus();
+    };
+
+    triggers.forEach((trigger, i) => {
+      trigger.addEventListener('click', () => open(i));
+    });
+
+    closeBtn.addEventListener('click', close);
+    prevBtn?.addEventListener('click', () => render(current - 1));
+    nextBtn?.addEventListener('click', () => render(current + 1));
+
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) close();
+    });
+
+    document.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (modal.dataset.open !== 'true') return;
+      if (e.key === 'Escape') { e.preventDefault(); close(); }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); render(current - 1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); render(current + 1); }
+    });
+  };
+
+  document.querySelectorAll<HTMLElement>('[data-lightbox-root]').forEach(initLightbox);
+</script>
+
+<style>
+  .ew-lightbox-wrap {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-lightbox-wrap__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-lightbox-wrap__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-5);
+    line-height: var(--ew-leading-tight);
+  }
+
+  .ew-lightbox-grid {
+    display: grid;
+    gap: var(--ew-space-4);
+  }
+  .ew-lightbox-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ew-lightbox-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ew-lightbox-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+  .ew-lightbox-grid--gap-sm { gap: var(--ew-space-2); }
+  .ew-lightbox-grid--gap-md { gap: var(--ew-space-4); }
+  .ew-lightbox-grid--gap-lg { gap: var(--ew-space-6); }
+
+  @media (max-width: 768px) {
+    .ew-lightbox-grid--cols-3,
+    .ew-lightbox-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 480px) {
+    .ew-lightbox-grid--cols-2,
+    .ew-lightbox-grid--cols-3,
+    .ew-lightbox-grid--cols-4 { grid-template-columns: 1fr; }
+  }
+
+  .ew-lightbox-grid__item {
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    display: block;
+    border-radius: var(--ew-radius-md);
+    overflow: hidden;
+    transition: transform 0.15s ease;
+  }
+  .ew-lightbox-grid__item:hover,
+  .ew-lightbox-grid__item:focus-visible {
+    transform: scale(1.02);
+  }
+  .ew-lightbox-grid__item:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+
+  .ew-lightbox-grid__img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    display: block;
+  }
+  .ew-lightbox-grid__img--ratio-square { aspect-ratio: 1 / 1; }
+  .ew-lightbox-grid__img--ratio-4-3 { aspect-ratio: 4 / 3; }
+  .ew-lightbox-grid__img--ratio-auto { aspect-ratio: auto; }
+
+  .ew-lightbox {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.92);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: var(--ew-space-5);
+  }
+  .ew-lightbox[data-open='false'] {
+    display: none;
+  }
+
+  .ew-lightbox__figure {
+    margin: 0;
+    max-width: min(90vw, 60rem);
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ew-space-3);
+  }
+
+  .ew-lightbox__img {
+    max-width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+    border-radius: var(--ew-radius-md);
+  }
+
+  .ew-lightbox__caption {
+    color: #fff;
+    text-align: center;
+    font-family: var(--ew-font-sans);
+    max-width: 40rem;
+  }
+  .ew-lightbox__caption-title {
+    font-size: var(--ew-text-lg);
+    font-weight: 600;
+    margin: 0 0 var(--ew-space-2);
+  }
+  .ew-lightbox__caption-description {
+    font-size: var(--ew-text-sm);
+    margin: 0;
+    opacity: 0.85;
+    line-height: var(--ew-leading-normal);
+  }
+
+  .ew-lightbox__close {
+    position: absolute;
+    top: var(--ew-space-4);
+    right: var(--ew-space-4);
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: var(--ew-radius-full);
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+  }
+  .ew-lightbox__close:hover,
+  .ew-lightbox__close:focus-visible {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .ew-lightbox__close:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+
+  .ew-lightbox__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--ew-radius-full);
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+  }
+  .ew-lightbox__arrow:hover,
+  .ew-lightbox__arrow:focus-visible {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .ew-lightbox__arrow:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+  .ew-lightbox__arrow--prev { left: var(--ew-space-4); }
+  .ew-lightbox__arrow--next { right: var(--ew-space-4); }
+
+  @media (max-width: 480px) {
+    .ew-lightbox__arrow {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+    .ew-lightbox__arrow--prev { left: var(--ew-space-2); }
+    .ew-lightbox__arrow--next { right: var(--ew-space-2); }
+  }
+</style>

package/src/components/GalleryMasonryGrid.astro

@@ -0,0 +1,127 @@
+---
+import type { GalleryMasonryGridData } from '../schemas/galleries';
+
+type Props = Omit<GalleryMasonryGridData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  columns = 3,
+  gap = 'md',
+  items,
+} = Astro.props;
+
+const sectionClass = [
+  'ew-masonry',
+  `ew-masonry--cols-${columns}`,
+  `ew-masonry--gap-${gap}`,
+].join(' ');
+---
+
+{items.length > 0 && (
+  <section class="ew-masonry-wrap">
+    <div class="ew-masonry-wrap__inner">
+      {title && <h2 class="ew-masonry-wrap__title">{title}</h2>}
+      <div class={sectionClass}>
+        {items.map((item) => {
+          const figure = (
+            <figure class="ew-masonry__item">
+              <img
+                src={item.src}
+                alt={item.alt}
+                class="ew-masonry__img"
+                loading="lazy"
+              />
+              {item.caption && (
+                <figcaption class="ew-masonry__caption">{item.caption}</figcaption>
+              )}
+            </figure>
+          );
+          return item.href ? (
+            <a href={item.href} class="ew-masonry__link" aria-label={item.alt}>
+              {figure}
+            </a>
+          ) : figure;
+        })}
+      </div>
+    </div>
+  </section>
+)}
+
+<style>
+  .ew-masonry-wrap {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-masonry-wrap__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-masonry-wrap__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-5);
+    line-height: var(--ew-leading-tight);
+  }
+
+  .ew-masonry {
+    column-fill: balance;
+  }
+  .ew-masonry--cols-2 { column-count: 2; }
+  .ew-masonry--cols-3 { column-count: 3; }
+  .ew-masonry--cols-4 { column-count: 4; }
+
+  .ew-masonry--gap-sm { column-gap: var(--ew-space-2); }
+  .ew-masonry--gap-md { column-gap: var(--ew-space-4); }
+  .ew-masonry--gap-lg { column-gap: var(--ew-space-6); }
+
+  @media (max-width: 768px) {
+    .ew-masonry--cols-3,
+    .ew-masonry--cols-4 { column-count: 2; }
+  }
+  @media (max-width: 480px) {
+    .ew-masonry--cols-2,
+    .ew-masonry--cols-3,
+    .ew-masonry--cols-4 { column-count: 1; }
+  }
+
+  .ew-masonry__item {
+    margin: 0 0 var(--ew-space-4);
+    break-inside: avoid;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ew-space-2);
+  }
+  .ew-masonry--gap-sm .ew-masonry__item { margin-bottom: var(--ew-space-2); }
+  .ew-masonry--gap-lg .ew-masonry__item { margin-bottom: var(--ew-space-6); }
+
+  .ew-masonry__img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--ew-radius-md);
+    transition: transform 0.2s ease;
+  }
+
+  .ew-masonry__caption {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    color: var(--ew-muted);
+    line-height: var(--ew-leading-normal);
+  }
+
+  .ew-masonry__link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+  }
+  .ew-masonry__link:hover .ew-masonry__img,
+  .ew-masonry__link:focus-visible .ew-masonry__img {
+    transform: scale(1.02);
+  }
+  .ew-masonry__link:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+    border-radius: var(--ew-radius-md);
+  }
+</style>

package/src/components/GallerySection.astro

@@ -0,0 +1,69 @@
+---
+import type { GalleryEntry } from '../schemas/galleries';
+import GalleryImageGrid from './GalleryImageGrid.astro';
+import GalleryHeroSlider from './GalleryHeroSlider.astro';
+import GalleryCarousel from './GalleryCarousel.astro';
+import GalleryMasonryGrid from './GalleryMasonryGrid.astro';
+import GalleryFeatureHighlight from './GalleryFeatureHighlight.astro';
+import GalleryLightboxGrid from './GalleryLightboxGrid.astro';
+
+interface Props {
+  entry: { data: GalleryEntry } | undefined | null;
+}
+
+const { entry } = Astro.props;
+const data = entry?.data;
+---
+
+{data?.kind === 'image-grid' && (
+  <GalleryImageGrid
+    title={data.title}
+    columns={data.columns}
+    gap={data.gap}
+    aspectRatio={data.aspectRatio}
+    items={data.items}
+  />
+)}
+{data?.kind === 'hero-slider' && (
+  <GalleryHeroSlider
+    title={data.title}
+    autoplay={data.autoplay}
+    interval={data.interval}
+    height={data.height}
+    slides={data.slides}
+  />
+)}
+{data?.kind === 'carousel' && (
+  <GalleryCarousel
+    title={data.title}
+    autoplay={data.autoplay}
+    interval={data.interval}
+    showDots={data.showDots}
+    showArrows={data.showArrows}
+    slides={data.slides}
+  />
+)}
+{data?.kind === 'masonry-grid' && (
+  <GalleryMasonryGrid
+    title={data.title}
+    columns={data.columns}
+    gap={data.gap}
+    items={data.items}
+  />
+)}
+{data?.kind === 'feature-highlight' && (
+  <GalleryFeatureHighlight
+    title={data.title}
+    gap={data.gap}
+    items={data.items}
+  />
+)}
+{data?.kind === 'lightbox-grid' && (
+  <GalleryLightboxGrid
+    title={data.title}
+    columns={data.columns}
+    gap={data.gap}
+    aspectRatio={data.aspectRatio}
+    items={data.items}
+  />
+)}