@eox/pages-theme-eox 1.7.0 → 1.9.0

package/.gitlab-ci.yml

@@ -1,6 +1,7 @@
 image: cypress/base:20.14.0
 
 stages:
+  - security
   - test
 
 cache:
@@ -13,6 +14,13 @@ cache:
 variables:
   npm_config_cache: "$CI_PROJECT_DIR/.npm"
 
+security:
+  stage: security
+  image: node:24-alpine
+  script:
+    - npm ci
+    - npm audit --audit-level=critical
+
 format:
   stage: test
   script:

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# [1.9.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.8.0...v1.9.0) (2026-06-11)
+
+### Features
+
+- new components (ImageCarousel, ImageElement, ImageGallery, SingleTweet) and automated loaders (team) ([8ce5f28](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/8ce5f289f06c1d4ebd7ff4871008f0dec31dabcc))
+
+# [1.8.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.7.0...v1.8.0) (2026-06-08)
+
+### Bug Fixes
+
+- **style:** z-index for sidebar/footer ([6326866](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/632686679cd4db43a50e8e97b4557eb072409fd1))
+
+### Features
+
+- price formatting helper ([287a28a](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/287a28abe3c8611d36685bae2efb75973e94d6c1))
+
 # [1.7.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.6.0...v1.7.0) (2026-05-11)
 
 ### Bug Fixes

package/README.md

@@ -379,6 +379,76 @@ An image-overlay card where a background image fills the card and text is render
 />
 ```
 
+#### Image Element
+
+Displays standard images with optional caption and width, and supports interactive side-by-side comparison slider when a `compare` prop is provided.
+
+```html
+<!-- Standard Image -->
+<ImageElement
+  src="/images/someimage.jpg"
+  caption="Standard view"
+  width="450px"
+/>
+
+<!-- Image Comparison Slider -->
+<ImageElement
+  src="/images/eoxcloudless2024.jpg"
+  compare="/images/eoxcloudless2023.jpg"
+  caption="2024 vs. 2023 comparison"
+/>
+```
+
+#### Image Gallery
+
+A unified, responsive image grid and lightbox gallery. Supports both plain link/grid layouts and touch-friendly lightbox galleries.
+
+##### Properties
+
+| Prop       | Type            | Default     | Description                                                                                           |
+| :--------- | :-------------- | :---------- | :---------------------------------------------------------------------------------------------------- |
+| `images`   | `String\|Array` | —           | Comma-separated image paths string, array of paths, or array of image objects with caption and links. |
+| `columns`  | `Number`        | `2`         | Number of columns (1, 2, 3, 4, 5).                                                                    |
+| `layout`   | `String`        | `"gallery"` | Layout mode: `"gallery"` (featured image + thumbnails) or `"grid"` (regular grid of images).          |
+| `lightbox` | `Boolean`       | `true`      | Enable fullscreen lightbox overlay when clicking an image.                                            |
+
+```html
+<!-- Gallery with Lightbox -->
+<ImageGallery images="/img1.jpg, /img2.jpg, /img3.jpg" layout="gallery" />
+
+<!-- Direct Image Grid with Captions & Links -->
+<ImageGallery
+  layout="grid"
+  :columns="3"
+  :images="[
+    { src: '/img1.jpg', caption: 'Link to A', link: '/page-a' },
+    { src: '/img2.jpg', caption: 'Only Caption' },
+    { src: '/img3.jpg', caption: 'Link to B', link: '/page-b' }
+  ]"
+/>
+```
+
+#### Image Carousel
+
+A simple CSS-driven accessible image slideshow.
+
+```html
+<ImageCarousel
+  :images="[
+    { src: '/slide1.jpg', caption: 'Slide 1 Caption' },
+    { src: '/slide2.jpg', caption: 'Slide 2 Caption' }
+  ]"
+/>
+```
+
+#### Single Tweet
+
+A privacy-respecting Twitter/X embed wrapper that checks Matomo cookie consent before rendering.
+
+```html
+<SingleTweet id="1276442045352226817" />
+```
+
 #### Feedback Form
 
 **Feedback Form** for collecting user feedback can be enabled by configuring the theme:
@@ -483,3 +553,57 @@ feedback form can be disabled on individual pages via frontmatter configuration
 feedback: false
 ---
 ```
+
+## Helper Functions
+
+The theme exports a set of shared utility and helper functions from its helpers module. You can import and use these helpers in your custom VitePress components, checkout pages, or inline script setups:
+
+```javascript
+import { formatPrice, trackEvent, t } from "@eox/pages-theme-eox/src/helpers";
+```
+
+### Available Helpers
+
+#### `formatPrice(price, lang)`
+
+Formats a numeric or string-based price following either British/American style or Continental European style based on the active language code.
+
+- **Parameters**:
+  - `price` (`number|string`): The numeric price (or numeric string) to format.
+  - `lang` (`string`): The active language prefix (defaults to `'en'`).
+- **Returns**: `string` - Formatted price string.
+- **Behavior**:
+  - **English (`'en'`)**: Uses commas as thousands separators, dots as decimals, and adds a `.-` suffix for whole numbers (e.g., `1500` formatted to `€ 1,500.-`, `1500.50` formatted to `€ 1,500.50`).
+  - **Other languages (e.g., German/Continental)**: Uses dots as thousands separators, commas as decimals, and adds a `,-` suffix for whole numbers (e.g., `1500` formatted to `€ 1.500,-`, `1500.5` formatted to `€ 1.500,50`).
+
+##### Example Usage:
+
+```javascript
+import { formatPrice } from "@eox/pages-theme-eox/src/helpers";
+
+formatPrice(12000, "en"); // "€ 12,000.-"
+formatPrice(49.99, "de"); // "€ 49,99"
+```
+
+#### `trackEvent(eventDetails)`
+
+Sends a custom tracking event to Matomo Analytics.
+
+- **Parameters**:
+  - `eventDetails` (`Array<string>`): An array representing the event payload: `[Category, Action, Name?, Value?]`.
+
+##### Example Usage:
+
+```javascript
+import { trackEvent } from "@eox/pages-theme-eox/src/helpers";
+
+trackEvent(["CTA", "Click", "Technical Specifications", "Viewing Ready"]);
+```
+
+#### `t(key, i18n)`
+
+Retrieves localized translation strings from an i18n mapping object using dot-notation. Falls back to the key itself if no translation is defined.
+
+- **Parameters**:
+  - `key` (`string`): The lookup key (supports dot notation, e.g., `'legal.privacy'`).
+  - `i18n` (`object`): The translation object/table.

package/cypress/support/mocks/helpers.js

@@ -47,6 +47,50 @@ window.__helpersMock = {
     }
     return result ? result : key;
   },
+  formatPrice: (price, lang = "en") => {
+    if (typeof price === "string") {
+      const trimmed = price.trim();
+      if (/^\d+(\.\d+)?$/.test(trimmed)) {
+        price = Number(trimmed);
+      } else {
+        return price;
+      }
+    }
+    if (typeof price === "number" && !isNaN(price)) {
+      const isEnglish = !lang || lang.startsWith("en");
+      const hasCents = price % 1 !== 0;
+      if (isEnglish) {
+        if (hasCents) {
+          const formatted = new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }).format(price);
+          return `€ ${formatted}`;
+        } else {
+          const formatted = new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(price);
+          return `€ ${formatted}.-`;
+        }
+      } else {
+        if (hasCents) {
+          const formatted = new Intl.NumberFormat("de-DE", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }).format(price);
+          return `€ ${formatted}`;
+        } else {
+          const formatted = new Intl.NumberFormat("de-DE", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(price);
+          return `€ ${formatted},-`;
+        }
+      }
+    }
+    return price;
+  },
 };
 
 export const trackEvent = (...args) => window.__helpersMock.trackEvent(...args);
@@ -61,3 +105,5 @@ export const isActive = (...args) => window.__helpersMock.isActive(...args);
 export const getFlatList = (...args) =>
   window.__helpersMock.getFlatList(...args);
 export const t = (...args) => window.__helpersMock.t(...args);
+export const formatPrice = (...args) =>
+  window.__helpersMock.formatPrice(...args);

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
   "author": "EOX",
   "license": "MIT",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "scripts": {
     "format": "npx prettier --write .",
     "format:check": "npx prettier --check .",

package/src/components/ImageCarousel.cy.js

@@ -0,0 +1,22 @@
+import ImageCarousel from "./ImageCarousel.vue";
+
+describe("<ImageCarousel />", () => {
+  const images = [
+    { src: "/slide1.jpg", alt: "Slide 1", caption: "Caption 1" },
+    { src: "/slide2.jpg", alt: "Slide 2", caption: "Caption 2" },
+  ];
+
+  it("renders slider images, captions, and buttons", () => {
+    cy.mount(ImageCarousel, {
+      props: {
+        images,
+      },
+    });
+
+    cy.get("img").should("have.length", 2);
+    cy.get("img").eq(0).should("have.attr", "src", "/slide1.jpg");
+
+    // Indicators should exist
+    cy.get("button").should("have.length", 4); // 2 nav arrows + 2 indicators
+  });
+});

package/src/components/ImageCarousel.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="image-carousel-container group">
+    <!-- Slider Container -->
+    <div
+      ref="container"
+      class="carousel-slider scrollbar-none"
+      @scroll="handleScroll"
+    >
+      <div
+        v-for="(img, idx) in normalizedImages"
+        :key="idx"
+        class="carousel-slide"
+      >
+        <img
+          :src="img.src"
+          :alt="img.alt || `Carousel image ${idx + 1}`"
+          class="carousel-img"
+        />
+        <div
+          v-if="img.caption"
+          class="carousel-caption"
+          v-html="img.caption"
+        ></div>
+      </div>
+    </div>
+
+    <!-- Navigation Arrows -->
+    <button
+      v-if="normalizedImages.length > 1"
+      @click="prev"
+      class="carousel-nav carousel-prev"
+      aria-label="Previous Slide"
+    >
+      <svg
+        class="carousel-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15 19l-7-7 7-7"
+        />
+      </svg>
+    </button>
+
+    <button
+      v-if="normalizedImages.length > 1"
+      @click="next"
+      class="carousel-nav carousel-next"
+      aria-label="Next Slide"
+    >
+      <svg
+        class="carousel-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+
+    <!-- Indicators -->
+    <div v-if="normalizedImages.length > 1" class="carousel-indicators">
+      <button
+        v-for="(_, idx) in normalizedImages"
+        :key="idx"
+        @click="goTo(idx)"
+        class="carousel-dot"
+        :class="{ active: activeIndex === idx }"
+        :aria-label="`Go to slide ${idx + 1}`"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  images: {
+    type: Array,
+    required: true,
+  },
+});
+
+const container = ref(null);
+const activeIndex = ref(0);
+
+const normalizedImages = computed(() => {
+  if (!props.images) return [];
+  return props.images.map((img) => {
+    if (typeof img === "string") {
+      return { src: img, alt: "", caption: "" };
+    }
+    return {
+      src: img.src || "",
+      alt: img.alt || "",
+      caption: img.caption || "",
+    };
+  });
+});
+
+const handleScroll = () => {
+  if (!container.value) return;
+  const { scrollLeft, clientWidth } = container.value;
+  if (clientWidth === 0) return;
+  activeIndex.value = Math.round(scrollLeft / clientWidth);
+};
+
+const goTo = (index) => {
+  if (!container.value) return;
+  const width = container.value.clientWidth;
+  container.value.scrollTo({
+    left: width * index,
+    behavior: "smooth",
+  });
+};
+
+const prev = () => {
+  const index =
+    (activeIndex.value - 1 + normalizedImages.value.length) %
+    normalizedImages.value.length;
+  goTo(index);
+};
+
+const next = () => {
+  const index = (activeIndex.value + 1) % normalizedImages.value.length;
+  goTo(index);
+};
+</script>
+
+<style scoped>
+.image-carousel-container {
+  position: relative;
+  width: 100%;
+  margin: 1.5rem 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: #f8fafc;
+}
+
+.carousel-slider {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+/* Hide scrollbars */
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.carousel-slide {
+  width: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-img {
+  width: 100%;
+  max-height: 500px;
+  object-fit: cover;
+  display: block;
+}
+
+.carousel-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  font-size: 0.875rem;
+  padding: 0.75rem 1.5rem;
+  text-align: center;
+  backdrop-filter: blur(4px);
+}
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.4);
+  border: none;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer !important;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease-in-out,
+    background-color 0.2s;
+  z-index: 10;
+}
+
+.carousel-nav:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.image-carousel-container:hover .carousel-nav {
+  opacity: 1;
+}
+
+.carousel-prev {
+  left: 1rem;
+}
+
+.carousel-next {
+  right: 1rem;
+}
+
+.carousel-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.5rem;
+  z-index: 10;
+}
+
+.carousel-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer !important;
+  transition: all 0.3s;
+  padding: 0;
+}
+
+.carousel-dot:hover {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+.carousel-dot.active {
+  background-color: #ffffff;
+  width: 20px;
+  border-radius: 5px;
+}
+</style>

package/src/components/ImageElement.cy.js

@@ -0,0 +1,46 @@
+import ImageElement from "./ImageElement.vue";
+
+describe("<ImageElement />", () => {
+  it("renders standard image with caption and custom width", () => {
+    const src = "/images/someimage.png";
+    const caption = "Nice view of the <em>Earth</em>";
+    const width = "300px";
+
+    cy.mount(ImageElement, {
+      props: {
+        src,
+        caption,
+        width,
+      },
+    });
+
+    cy.get("img")
+      .should("have.attr", "src", src)
+      .should("have.css", "max-width", width);
+
+    cy.get("figcaption").should(
+      "contain.html",
+      "Nice view of the <em>Earth</em>",
+    );
+  });
+
+  it("renders compare slider when compare prop is provided", () => {
+    const src = "/images/2024.jpg";
+    const compare = "/images/2023.jpg";
+
+    cy.mount(ImageElement, {
+      props: {
+        src,
+        compare,
+      },
+    });
+
+    // Check that two images are rendered
+    cy.get("img").should("have.length", 2);
+    cy.get("img").eq(0).should("have.attr", "src", compare);
+    cy.get("img").eq(1).should("have.attr", "src", src);
+
+    // Check slider element exists
+    cy.get('input[type="range"]').should("exist").and("have.value", "50");
+  });
+});