@eox/pages-theme-eox 1.9.0 → 2.0.0-alpha.10

package/.gitlab-ci.yml

@@ -10,9 +10,11 @@ cache:
       - package-lock.json
   paths:
     - .npm/
+    - .cache/Cypress
 
 variables:
   npm_config_cache: "$CI_PROJECT_DIR/.npm"
+  CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/.cache/Cypress"
 
 security:
   stage: security
@@ -33,6 +35,7 @@ test:
   stage: test
   script:
     - npm ci
-    - npm run test:component
+    - npx cypress install
+    - npm run test
   rules:
     - if: $CI_PIPELINE_SOURCE == 'merge_request_event' && $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == 'main'

package/README.md

@@ -145,26 +145,40 @@ The theme provides several built-in components and layout features. Some are dri
 
 ### Hero Section
 
-To add a Hero section to the top of a page, use the `hero` frontmatter object.
+To add a Hero section to the top of a page, use the `hero` frontmatter object. Heros feature a dark gradient transitioning from **DARK (top) to LIGHT (bottom)** (`.hero-gradient-bg`), allowing the top navigation bar to seamlessly sit transparently over the hero. On the landing page, the hero is larger and incorporates an isometric line pattern.
 
 ```yaml
 ---
 hero:
-  title: "Welcome to My Site"
-  tagline: "Building the future of things"
+  text: "Welcome to My Site" # or title: "Welcome to My Site"
+  tagline: "Building the future of geospatial engineering"
   image:
     src: "/hero-image.png"
     alt: "Hero Image"
   actions:
     - text: "Get Started"
       link: "/start"
-      type: "primary"
+      theme: "brand" # "brand" (primary surface), "secondary", or "alt" (bordered)
     - text: "Learn More"
       link: "/about"
-      type: "secondary"
+      theme: "secondary"
 ---
 ```
 
+#### Hero on Aggregator Pages (`blog`, `team`, `tags`)
+
+Pages using aggregator layouts (`layout: team`, `layout: blog`, or `layout: tags`) support optional heroes:
+
+- **Without Hero (when `hero` is omitted or `hero: false`)**: The page renders a standard in-page header title beneath the solid top navigation bar.
+- **With Hero (`hero: true` or custom `hero: { text, tagline, ... }`)**: The page renders the full dark hero with the `#000C14` → `#004170` gradient spanning seamlessly behind the transparent navigation bar. Setting `hero: true` automatically supplies appropriate layout titles (including dynamic `Tag: <tag>` and `Author: <author>` for filtered blog listings). Custom text, taglines, images, and actions can also be provided via the `hero` frontmatter object.
+
+#### Gradient Design Standards
+
+The theme standardizes two distinct gradient directions for dark visual elements using `#000C14` and `#004170`:
+
+- **Hero Gradient (`.hero-gradient-bg`)**: Always transitions from **DARK (top) to LIGHT (bottom)**, running from `#000C14` (top) to `#004170` (bottom). Used for the landing page hero and all sub-page heroes. This anchors the fixed header area with dark contrast under navigation links while flowing naturally into lighter content below.
+- **Dark Sections Gradient (`.primary-gradient-bg` / `.dark-section-gradient-bg`)**: Used in intermediate dark page sections further down the page (such as `<CTASection dark>`, feature highlights, or dark showcase galleries). Always transitions from **LIGHT (top) to DARK (bottom)**, running from `#004170` (top) to `#000C14` (bottom).
+
 ### Feature Section
 
 Use the `<FeatureSection>` component to highlight specific features.
@@ -223,7 +237,7 @@ A flexible pricing table component.
 
 #### CTA Section
 
-A Call-to-Action section typically placed at the bottom of a page to encourage user engagement.
+A Call-to-Action section typically placed at the bottom of a page to encourage user engagement. By default, it renders with a clean white (`surface-container-lowest`) background, or a dark gradient when the `dark` prop is passed.
 
 ```html
 <CTASection
@@ -239,6 +253,19 @@ A Call-to-Action section typically placed at the bottom of a page to encourage u
 />
 ```
 
+#### Section Header
+
+A standardized three-tier header block for page sections, matching EOX design tokens with a tag badge, a large display title, and an optional subtitle description. Supports light/dark context modes automatically.
+
+```html
+<SectionHeader
+  tag="Viewing Ready & Basic"
+  icon="mdi-star-check-outline"
+  title="What our users say about Viewing Products"
+  subtitle="Optional paragraph providing context and detail for this section."
+/>
+```
+
 #### Logo Section
 
 Displays a grid of client or partner logos. It automatically handles logo sizing.
@@ -321,7 +348,7 @@ A standard content card with an icon or image, title, optional chips, metadata,
   section-title="All Features"
   variant="default"
   columns="3/2/1"
-  background="surface-container-low"
+  background="surface-container-lowest"
   :cards="[
     {
       id: 1,
@@ -559,7 +586,14 @@ feedback: false
 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";
+import {
+  formatPrice,
+  trackEvent,
+  trackPageView,
+  trackSiteSearch,
+  normalizeTrackingUrl,
+  t,
+} from "@eox/pages-theme-eox/src/helpers";
 ```
 
 ### Available Helpers
@@ -585,12 +619,12 @@ formatPrice(12000, "en"); // "€ 12,000.-"
 formatPrice(49.99, "de"); // "€ 49,99"
 ```
 
-#### `trackEvent(eventDetails)`
+#### `trackEvent(eventDetails, ...rest)`
 
-Sends a custom tracking event to Matomo Analytics.
+Sends a custom tracking event to Matomo Analytics. Automatically normalizes any path strings passed in category, action, or name.
 
 - **Parameters**:
-  - `eventDetails` (`Array<string>`): An array representing the event payload: `[Category, Action, Name?, Value?]`.
+  - `eventDetails` (`Array<string|number>|string`): An array `[Category, Action, Name?, Value?]` or positional arguments `(category, action, name, value)`.
 
 ##### Example Usage:
 
@@ -598,8 +632,51 @@ Sends a custom tracking event to Matomo Analytics.
 import { trackEvent } from "@eox/pages-theme-eox/src/helpers";
 
 trackEvent(["CTA", "Click", "Technical Specifications", "Viewing Ready"]);
+trackEvent("indicators", "select_indicator", "N1_NO2");
+```
+
+#### `trackPageView(options)`
+
+Tracks a pageview with normalized path (trailing slash stripped, transient parameters removed) and custom document title.
+
+- **Parameters**:
+  - `options` (`Object|string`): Vitepress router object, `{ path, title }` options object, or custom path string.
+
+##### Example Usage:
+
+```javascript
+import { trackPageView } from "@eox/pages-theme-eox/src/helpers";
+
+trackPageView({ path: "/explore/", title: "Explore" });
+// Sends normalized URL "/explore" to Matomo
+```
+
+#### `trackSiteSearch(keyword, category, resultsCount)`
+
+Sends search keyword telemetry to Matomo Site Search reports.
+
+- **Parameters**:
+  - `keyword` (`string`): Searched term.
+  - `category` (`string|boolean`): Category (optional, e.g. `'indicators'`, `'stories'`).
+  - `resultsCount` (`number`): Number of search results returned.
+
+##### Example Usage:
+
+```javascript
+import { trackSiteSearch } from "@eox/pages-theme-eox/src/helpers";
+
+trackSiteSearch("methane", "indicators", 4);
 ```
 
+#### `normalizeTrackingUrl(inputUrl, options)`
+
+Pure helper that strips trailing slashes (e.g., `/explore/` -> `/explore`), strips volatile coordinate query params (`x`, `y`, `z`), and sorts remaining query parameters.
+
+- **Parameters**:
+  - `inputUrl` (`string`): URL or path to normalize.
+  - `options` (`Object`): Optional configuration (`ignoredParams`, `stripTrailingSlash`).
+- **Returns**: `string` - Normalized URL string.
+
 #### `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.

package/cypress/support/mocks/authors.data.js

@@ -0,0 +1,14 @@
+export const data = [
+  {
+    id: "mock-author-1",
+    name: "Mock Author 1",
+    url: "/team/mock-author-1",
+    guest: false,
+  },
+  {
+    id: "mock-author-2",
+    name: "Mock Author 2",
+    url: "/team/mock-author-2",
+    guest: false,
+  },
+];

package/cypress/support/mocks/helpers.js

@@ -1,7 +1,40 @@
 // Mock generic helpers
 // We delegate to a global object to allow spying in tests
 window.__helpersMock = {
-  trackEvent: (details) => {},
+  trackEvent: (details, ...rest) => {},
+  trackPageView: (options) => {},
+  trackSiteSearch: (keyword, category, count) => {},
+  normalizeTrackingUrl: (url, options) => {
+    if (!url || typeof url !== "string") return url;
+    const { ignoredParams = ["x", "y", "z"], stripTrailingSlash = true } =
+      options || {};
+    try {
+      const base =
+        typeof window !== "undefined" && window.location?.href
+          ? window.location.href
+          : "https://eox.at";
+      const u = new URL(url, base);
+      let pathname = u.pathname;
+      if (stripTrailingSlash && pathname.length > 1 && pathname.endsWith("/")) {
+        pathname = pathname.replace(/\/+$/, "");
+      }
+      const searchParams = new URLSearchParams(u.search);
+      for (const key of ignoredParams) {
+        searchParams.delete(key);
+      }
+      searchParams.sort();
+      const search = searchParams.toString();
+      const isRelative = !/^https?:\/\//i.test(url);
+      if (isRelative) {
+        return pathname + (search ? `?${search}` : "");
+      }
+      u.pathname = pathname;
+      u.search = search ? `?${search}` : "";
+      return u.toString();
+    } catch {
+      return url;
+    }
+  },
   acceptCookies: (router) => {},
   declineCookies: (router) => {},
   enableTracking: (enable, router) => {},
@@ -15,9 +48,31 @@ window.__helpersMock = {
     }
   },
   isActive: (item, path) => {
-    if (item.link === path) return true;
-    if (item.items) {
-      return item.items.some((sub) => window.__helpersMock.isActive(sub, path));
+    if (!item || !path) return false;
+    if (item.activeMatch) {
+      try {
+        return new RegExp(item.activeMatch).test(path);
+      } catch (e) {
+        return false;
+      }
+    }
+    if (
+      item.items &&
+      item.items.some((sub) => window.__helpersMock.isActive(sub, path))
+    ) {
+      return true;
+    }
+    if (item.link) {
+      const normalize = (p) =>
+        decodeURI(p)
+          .replace(/[?#].*$/, "")
+          .replace(/\.html$/, "")
+          .replace(/\/$/, "");
+      const linkPath = normalize(item.link);
+      const currentPath = normalize(path);
+      if (linkPath === currentPath) return true;
+      if (linkPath === "") return currentPath === "";
+      return currentPath === linkPath || currentPath.startsWith(linkPath + "/");
     }
     return false;
   },
@@ -94,6 +149,12 @@ window.__helpersMock = {
 };
 
 export const trackEvent = (...args) => window.__helpersMock.trackEvent(...args);
+export const trackPageView = (...args) =>
+  window.__helpersMock.trackPageView(...args);
+export const trackSiteSearch = (...args) =>
+  window.__helpersMock.trackSiteSearch(...args);
+export const normalizeTrackingUrl = (...args) =>
+  window.__helpersMock.normalizeTrackingUrl(...args);
 export const acceptCookies = (...args) =>
   window.__helpersMock.acceptCookies(...args);
 export const declineCookies = (...args) =>

package/cypress/support/mocks/vitepress.js

@@ -1,4 +1,11 @@
-import { reactive, ref } from "vue";
+import { reactive, ref, defineComponent, h } from "vue";
+
+export const VPNavBarSearch = defineComponent({
+  name: "VPNavBarSearch",
+  render() {
+    return h("div", { class: "VPNavBarSearch" }, "Search");
+  },
+});
 
 const site = ref({
   title: "Test Site",

package/cypress.config.js

@@ -10,6 +10,11 @@ export default defineConfig({
       viteConfig: {
         resolve: {
           alias: {
+            // Alias vitepress/theme to our mock
+            "vitepress/theme": path.resolve(
+              __dirname,
+              "cypress/support/mocks/vitepress.js",
+            ),
             // Alias vitepress to our mock
             vitepress: path.resolve(
               __dirname,
@@ -29,6 +34,15 @@ export default defineConfig({
               __dirname,
               "cypress/support/mocks/features.data.js",
             ),
+            // Alias authors.data.js to our mock
+            "../authors.data.js": path.resolve(
+              __dirname,
+              "cypress/support/mocks/authors.data.js",
+            ),
+            "../../authors.data.js": path.resolve(
+              __dirname,
+              "cypress/support/mocks/authors.data.js",
+            ),
           },
         },
         plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.9.0",
+  "version": "2.0.0-alpha.10",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
@@ -12,6 +12,8 @@
   "scripts": {
     "format": "npx prettier --write .",
     "format:check": "npx prettier --check .",
+    "test": "npm run test:unit && npm run test:component",
+    "test:unit": "node --test src/helpers.test.js",
     "test:component": "cypress run --component",
     "release": "release-it"
   },

package/src/Layout.vue

@@ -1,5 +1,64 @@
 <template>
-  <Layout :class="`layout-${frontmatter.layout}`">
+  <div
+    v-if="frontmatter.layout === 'blog'"
+    class="Layout layout-blog min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
+    <main class="flex-grow">
+      <BlogList />
+      <CTASection
+        v-if="frontmatter.cta !== false"
+        title="Interested in applying EO data to your use case?"
+        tagline="Let's build cloud-native systems, interactive maps, or customized Sentinel data layers together. Reach out to discuss your project requirements."
+        primaryButton="Contact us"
+        primaryLink="/contact"
+        dark
+      />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'tags'"
+    class="Layout layout-tags min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
+    <main class="flex-grow">
+      <TagList />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'team'"
+    class="Layout layout-team min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
+    <main class="flex-grow">
+      <TeamPage />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'post' || isBlogPost"
+    class="layout-post min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <main class="flex-grow">
+      <BlogPost />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <Layout v-else :class="`layout-${frontmatter.layout}`">
     <template #layout-top>
       <slot name="layout-top"></slot>
       <NavBar />
@@ -33,11 +92,20 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import DefaultTheme from "vitepress/theme";
 import { useData, useRouter } from "vitepress";
 const { Layout } = DefaultTheme;
 const { frontmatter, page, theme } = useData();
 const router = useRouter();
+
+const isBlogPost = computed(() => {
+  return (
+    frontmatter.value.layout === "post" ||
+    page.value.relativePath.startsWith("_posts/") ||
+    /^\d{4}\/\d{2}\//.test(page.value.relativePath)
+  );
+});
 </script>
 
 <style>

package/src/authors.data.js

@@ -0,0 +1,14 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("_team/*.md", {
+  transform(rawData) {
+    return rawData.map((page) => {
+      return {
+        id: page.frontmatter.id || "",
+        name: page.frontmatter.title || "",
+        url: page.url,
+        guest: page.frontmatter.guest || false,
+      };
+    });
+  },
+});