@eox/pages-theme-eox 1.6.0 → 1.8.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,23 @@
 # Changelog
 
+# [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
+
+- **style:** card link/border/elevation ([004611f](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/004611f20e46dd47030a6c835bd6380fd045369b))
+- **style:** nav menu rounding harmonization ([a5ff2e7](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/a5ff2e7a3b63e98b44f7b763ad79c2111c748286))
+- **style:** sizing adjustments for prices and plan names ([d61ef7a](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/d61ef7a37ae0a3cede844875b582965eb820e704))
+
 # [1.6.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.5.1...v1.6.0) (2026-04-30)
 
 ### Bug Fixes

package/README.md

@@ -483,3 +483,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.6.0",
+  "version": "1.8.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/FeatureCard/Index.vue

@@ -40,7 +40,10 @@ const iconStyle = {
 };
 </script>
 <template>
-  <article class="vertical large-padding">
+  <article
+    class="vertical large-padding no-margin"
+    :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
+  >
     <div>
       <i
         v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
@@ -92,10 +95,10 @@ const iconStyle = {
     <nav
       v-if="link || secondaryLink"
       class="row wrap align-center"
-      style="gap: 1.5rem; margin-right: auto"
+      style="gap: 1.5rem; margin-right: auto; position: relative; z-index: 11"
     >
       <a
-        v-if="link"
+        v-if="link && !!link.text"
         :href="link.href"
         :target="link.target ?? '_blank'"
         class="button transparent bold primary-text no-padding"

package/src/components/FeatureCard/Poster.vue

@@ -48,7 +48,8 @@ const cardStyle = computed(() => ({
 
 <template>
   <article
-    class="no-padding fill small-elevate image-overlay-card"
+    class="no-padding no-margin fill image-overlay-card"
+    :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
     :style="cardStyle"
   >
     <img v-if="image" :src="image" alt="" class="image-overlay-card-image" />
@@ -97,10 +98,10 @@ const cardStyle = computed(() => ({
       <nav
         v-if="link || secondaryLink"
         class="row wrap align-center"
-        style="gap: 0.5rem"
+        style="gap: 0.5rem; position: relative; z-index: 11"
       >
         <a
-          v-if="link"
+          v-if="link && link.text"
           class="button small white black-text"
           :href="link.href"
           :target="link.target ?? '_blank'"

package/src/components/FeaturesGallery.vue

@@ -179,19 +179,19 @@ section {
 }
 
 .link-card {
-  display: block;
+  display: flex;
+  flex: 1;
   text-decoration: none;
-  border: 0.0625rem solid transparent;
   position: relative;
 }
 .link-overlay {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 10;
 }
 .link-card:hover article {
-  box-shadow: none;
-  border: 0.0625rem solid var(--outline-variant);
+  box-shadow: var(--elevate2);
+  transform: translateY(-2px);
 }
 
 .card-wrapper {

package/src/components/NavBar.vue

@@ -138,19 +138,19 @@
           <li v-for="item in theme.nav.filter((i) => !i.action)">
             <div v-if="item.items">
               <button
-                class="button text"
+                class="button text no-round"
                 :class="{ active: isActive(item, route.path) }"
               >
                 <span>{{ t(item.text, theme.i18n) }}</span>
                 <i class="mdi mdi-chevron-down"></i>
               </button>
-              <menu class="no-wrap surface-container-lowest">
+              <menu class="no-wrap surface-container-lowest no-round">
                 <NavDropdown :items="item.items" />
               </menu>
             </div>
             <a
               v-else
-              class="button text"
+              class="button text no-round"
               :class="{ active: isActive(item, route.path) }"
               :href="withBase(item.link)"
               :target="item.target"
@@ -199,7 +199,7 @@
         <ul class="left-align no-margin" v-if="langs && langs.length > 1">
           <li>
             <div>
-              <button class="button text">
+              <button class="button text no-round">
                 <i class="mdi mdi-translate small"></i>
                 <i class="mdi mdi-chevron-down small"></i>
               </button>

package/src/components/PricingTable.vue

@@ -42,7 +42,9 @@
         :key="`header-${index}`"
         class="s12 m3 center-align"
       >
-        <h6 class="primary-text bold">{{ plan.name }}</h6>
+        <h6 class="primary-text bold" style="word-break: break-word">
+          {{ plan.name }}
+        </h6>
         <ClientOnly>
           <a
             :href="addPlanConfig(contactLink, plan)"
@@ -72,7 +74,9 @@
         class="cell surface-container-low top-cell bold top-margin"
         :class="`orig-col-${index + 2}`"
       >
-        <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
+        <h6 class="primary-text bold top-margin" style="word-break: break-word">
+          {{ plan.name }}
+        </h6>
       </div>
 
       <div v-if="showDescriptionColumn" class="cell orig-col-1 l">
@@ -88,11 +92,12 @@
           <h6
             v-if="typeof plan.basePrice === 'string'"
             class="primary-text bold"
+            :style="dynamicPriceStyleH6"
           >
             {{ t(plan.basePrice, theme.i18n) }}
           </h6>
-          <h4 v-else class="primary-text bold">
-            € {{ calculatePrice(plan) }},-
+          <h4 v-else class="primary-text bold" :style="dynamicPriceStyleH4">
+            {{ formatPrice(calculatePrice(plan)) }}
           </h4>
           <span
             v-if="
@@ -223,9 +228,15 @@
           class="surface-container-low primary-text bold top-margin top-cell"
           :class="`cell orig-col-${detailPlanIndex + 2}`"
         >
-          <h6 class="primary-text bold s">{{ plan.name }}</h6>
-          <h6 v-if="plan.additionalPrice" class="primary-text bold">
-            + € {{ plan.additionalPrice }},-
+          <h6 class="primary-text bold s" style="word-break: break-word">
+            {{ plan.name }}
+          </h6>
+          <h6
+            v-if="plan.additionalPrice"
+            class="primary-text bold"
+            :style="dynamicPriceStyleH6"
+          >
+            + {{ formatPrice(plan.additionalPrice) }}
           </h6>
         </div>
         <template
@@ -274,14 +285,14 @@
 </template>
 
 <script>
-import { t } from "../helpers.js";
+import { t, formatPrice } from "../helpers.js";
 import { useData } from "vitepress";
 
 export default {
   name: "PricingTable",
   setup() {
-    const { theme } = useData();
-    return { theme, t };
+    const { theme, lang } = useData();
+    return { theme, lang, t };
   },
   props: {
     config: {
@@ -328,6 +339,73 @@ export default {
         };
       }
     },
+    maxPriceLength() {
+      let maxLen = 0;
+      this.localPlans.forEach((plan) => {
+        let text = "";
+        if (typeof plan.basePrice === "string") {
+          text = this.t(plan.basePrice, this.theme.i18n) || "";
+        } else {
+          text = this.formatPrice(this.calculatePrice(plan));
+        }
+        if (text.length > maxLen) maxLen = text.length;
+      });
+      this.localDetails.forEach((detail) => {
+        if (detail.plans) {
+          detail.plans.forEach((plan) => {
+            if (plan.additionalPrice) {
+              const text = `+ ${this.formatPrice(plan.additionalPrice)}`;
+              if (text.length > maxLen) maxLen = text.length;
+            }
+          });
+        }
+      });
+      return maxLen || 1;
+    },
+    dynamicPriceStyleH4() {
+      let fontSize = "";
+      if (!this.isMobile) {
+        // "€ 18000,-" is 11 chars. We want container to define this perfectly without pure JS guessing.
+        // Wait, pure CSS container queries / fluid typography is better here.
+        // Instead of calculating ratios manually, we can utilize container width scaling or vw based scaling
+        // if it exceeds length. Let's do a more robust JS calc.
+
+        const cols =
+          this.localPlans.length + (this.showDescriptionColumn ? 1 : 0);
+
+        // Base max chars before scaling based on how many cols are squished together
+        // 2 cols: allows ~16 chars
+        // 3 cols: allows ~12 chars
+        // 4 cols: allows ~9 chars
+        // 5 cols: allows ~7 chars
+        const maxCharsAtDefault = 19 - cols * 2.5;
+
+        if (this.maxPriceLength > maxCharsAtDefault) {
+          const ratio = maxCharsAtDefault / this.maxPriceLength;
+          fontSize = `${Math.max(ratio * 2.125, 0.8)}rem`; // Scale down, min ~12px equivalent
+        }
+      }
+      return {
+        whiteSpace: "nowrap",
+        ...(fontSize ? { fontSize } : {}),
+      };
+    },
+    dynamicPriceStyleH6() {
+      let fontSize = "";
+      if (!this.isMobile) {
+        const cols =
+          this.localPlans.length + (this.showDescriptionColumn ? 1 : 0);
+        const maxCharsAtDefault = 24 - cols * 3;
+        if (this.maxPriceLength > maxCharsAtDefault) {
+          const ratio = maxCharsAtDefault / this.maxPriceLength;
+          fontSize = `${Math.max(ratio * 1.25, 0.6)}rem`;
+        }
+      }
+      return {
+        whiteSpace: "nowrap",
+        ...(fontSize ? { fontSize } : {}),
+      };
+    },
   },
   methods: {
     calculatePrice(plan) {
@@ -355,6 +433,9 @@ export default {
       }
       return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
+    formatPrice(price) {
+      return formatPrice(price, this.lang);
+    },
     getRowKeys(plansArray) {
       const keys = new Set();
       plansArray.forEach((plan) => {

package/src/helpers.js

@@ -198,3 +198,55 @@ export const t = (key, i18n) => {
   }
   return typeof obj === "string" ? obj : key;
 };
+
+/**
+ * Format price according to localized English (American/British) or European (German) styles.
+ *
+ * @param {number|string} price - Price to format
+ * @param {string} lang - Language code
+ * @returns {string} Formatted price with correct separators and suffixes
+ */
+export const 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;
+};

package/src/style.css

@@ -336,3 +336,12 @@ details[open] > summary > i.mdi-chevron-down {
 eox-feedback-button {
   z-index: calc(var(--vp-z-index-footer) + 1);
 }
+
+@media (min-width: 960px) {
+  footer {
+    z-index: calc(var(--vp-z-index-sidebar) + 1);
+  }
+  eox-feedback-button {
+    z-index: calc(var(--vp-z-index-sidebar) + 2);
+  }
+}