@eox/pages-theme-eox 2.0.0-alpha.1 → 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
@@ -334,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,
@@ -572,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
@@ -598,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:
 
@@ -611,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.config.js

@@ -34,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": "2.0.0-alpha.1",
+  "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,22 +1,32 @@
 <template>
   <div
     v-if="frontmatter.layout === 'blog'"
-    class="layout-blog min-h-screen flex flex-col"
+    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-tags min-h-screen flex flex-col"
+    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>
@@ -25,10 +35,11 @@
   </div>
   <div
     v-else-if="frontmatter.layout === 'team'"
-    class="layout-team min-h-screen flex flex-col"
+    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>

package/src/components/BlogList.vue

@@ -1,45 +1,40 @@
 <template>
-  <div class="blog-landing max-w-[1200px] mx-auto px-6 md:px-8">
-    <!-- Page Header -->
-    <div class="blog-landing-header" role="banner">
+  <div
+    class="blog-landing max-w-[1200px] mx-auto px-6 md:px-8"
+    :class="{ 'has-hero': Boolean(frontmatter.hero) }"
+  >
+    <!-- Page Header (shown only when hero is not present) -->
+    <div v-if="!frontmatter.hero" class="blog-landing-header" role="banner">
       <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
         <div>
-          <h1 class="blog-landing-title">
-            EOX Blog
-          </h1>
+          <h1 class="blog-landing-title">EOX Blog</h1>
           <p class="blog-landing-subtitle">
             Insights, updates, and deep dives from our geospatial experts.
           </p>
         </div>
       </div>
+    </div>
 
-      <!-- Active Filter Banner -->
-      <div
-        v-if="activeTag || activeAuthor"
-        class="active-filter-banner"
+    <!-- Active Filter Banner -->
+    <div v-if="activeTag || activeAuthor" class="active-filter-banner mb-6">
+      <span class="filter-label">Active filter:</span>
+      <span
+        v-if="activeTag"
+        :style="getTagStyle(activeTag)"
+        class="active-filter-tag shadow-sm inline-flex items-center gap-1.5"
       >
-        <span class="filter-label">Active filter:</span>
-        <span
-          v-if="activeTag"
-          :style="getTagStyle(activeTag)"
-          class="active-filter-tag shadow-sm inline-flex items-center gap-1.5"
-        >
-          {{ activeTag }}
-        </span>
-        <span
-          v-if="activeAuthor"
-          class="active-filter-author shadow-sm inline-flex items-center gap-1.5"
-        >
-          Author: {{ getAuthorName(activeAuthor) }}
-        </span>
-        <button
-          @click="clearFilters"
-          class="clear-filter-btn"
-        >
-          <i class="mdi mdi-close-circle"></i>
-          <span>Clear Filter</span>
-        </button>
-      </div>
+        {{ activeTag }}
+      </span>
+      <span
+        v-if="activeAuthor"
+        class="active-filter-author shadow-sm inline-flex items-center gap-1.5"
+      >
+        Author: {{ getAuthorName(activeAuthor) }}
+      </span>
+      <button @click="clearFilters" class="clear-filter-btn">
+        <i class="mdi mdi-close-circle"></i>
+        <span>Clear Filter</span>
+      </button>
     </div>
 
     <!-- Grid of Blog Posts -->
@@ -52,14 +47,23 @@
             :key="post.url"
             :title="post.title"
             :content="post.excerpt"
-            :image="post.coverImage ? getCoverImageUrl(post.coverImage) : undefined"
+            :image="
+              post.coverImage ? getCoverImageUrl(post.coverImage) : undefined
+            "
             :date="post.date"
             :authors="post.authors"
-            :chips="post.tags ? post.tags.map(t => ({ text: t })) : []"
+            :chips="
+              post.tags
+                ? post.tags.map((t) => ({
+                    text: t,
+                    link: withBase(`/tag/${t}/`),
+                  }))
+                : []
+            "
             :link="{
               text: 'Read more',
-              href: post.url,
-              target: '_self'
+              href: withBase(post.url),
+              target: '_self',
             }"
             variant="cover"
             class="h-full bg-surface-container-low"
@@ -87,18 +91,18 @@
         <!-- Pagination -->
         <nav
           v-if="totalPages > 1"
-          class="mt-16 flex justify-center items-center gap-2"
+          class="mt-16 flex justify-center items-center gap-1 sm:gap-2"
         >
           <button
             @click="changePage(currentPage - 1)"
             :disabled="currentPage === 1"
-            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
           >
             <span class="sr-only">Previous</span>
             <i class="mdi mdi-chevron-left text-lg"></i>
           </button>
 
-          <div class="flex items-center gap-1.5">
+          <div class="flex items-center gap-1 sm:gap-1.5">
             <button
               v-for="page in visiblePages"
               :key="page"
@@ -108,7 +112,7 @@
                   ? 'bg-primary text-white border-primary shadow-sm'
                   : 'border-slate-200 text-slate-600 hover:bg-slate-50',
               ]"
-              class="min-w-[40px] h-[40px] px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
+              class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] px-2 sm:px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
             >
               {{ page }}
             </button>
@@ -117,7 +121,7 @@
           <button
             @click="changePage(currentPage + 1)"
             :disabled="currentPage === totalPages"
-            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
           >
             <span class="sr-only">Next</span>
             <i class="mdi mdi-chevron-right text-lg"></i>
@@ -129,9 +133,7 @@
       <aside class="blog-sidebar-col">
         <!-- Search widget -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Search
-          </h3>
+          <h3 class="sidebar-title">Search</h3>
           <div class="search-container">
             <VPNavBarSearch class="search" />
           </div>
@@ -140,10 +142,8 @@
         <!-- Hot Tags -->
         <div class="sidebar-widget">
           <div class="sidebar-title-container">
-            <h3 class="sidebar-title-inline">
-              Hot tags
-            </h3>
-            <a href="/tag" class="see-all-link">
+            <h3 class="sidebar-title-inline">Hot tags</h3>
+            <a :href="withBase('/tag')" class="see-all-link">
               <span>see all</span>
               <i class="mdi mdi-arrow-right"></i>
             </a>
@@ -152,7 +152,7 @@
             <a
               v-for="tag in calculatedHotTags"
               :key="tag.name"
-              :href="`/tag/${tag.name}/`"
+              :href="withBase(`/tag/${tag.name}/`)"
               :style="getTagStyle(tag.name)"
               class="sidebar-tag"
             >
@@ -167,7 +167,7 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
-import { useRouter, useData } from "vitepress";
+import { useRouter, useData, withBase } from "vitepress";
 import { data as posts } from "../posts.data.js";
 import { data as authorsList } from "../authors.data.js";
 import { getTagColor, getTagStyle } from "../tagUtils.js";
@@ -198,7 +198,7 @@ const calculatedHotTags = computed(() => {
 });
 
 const router = useRouter();
-const { params } = useData();
+const { params, frontmatter } = useData();
 
 const activeTag = ref("");
 const activeAuthor = ref("");
@@ -208,10 +208,17 @@ const postsPerPage = 9;
 // Form cover image URL correctly (prefixing filename with /images/)
 function getCoverImageUrl(coverImage) {
   if (!coverImage) return "";
-  if (coverImage.startsWith("/") || coverImage.startsWith("http")) {
+  if (coverImage.startsWith("http") || coverImage.startsWith("//")) {
     return coverImage;
   }
-  return `/images/${coverImage}`;
+  const base = withBase("/");
+  if (base && base !== "/" && coverImage.startsWith(base)) {
+    return coverImage;
+  }
+  const path = coverImage.startsWith("/")
+    ? coverImage
+    : `/images/${coverImage}`;
+  return withBase(path);
 }
 
 const tagFromParam = computed(() => {
@@ -341,6 +348,10 @@ function clearFilters() {
   padding-bottom: 48px !important;
 }
 
+.blog-landing.has-hero {
+  padding-top: 2rem !important;
+}
+
 @media (min-width: 640px) {
   .blog-landing {
     padding-left: 1.5rem !important;
@@ -348,6 +359,9 @@ function clearFilters() {
     padding-top: calc(var(--vp-nav-height) + 40px) !important;
     padding-bottom: 64px !important;
   }
+  .blog-landing.has-hero {
+    padding-top: 4.5rem !important;
+  }
 }
 
 @media (min-width: 960px) {
@@ -357,6 +371,9 @@ function clearFilters() {
     padding-top: calc(var(--vp-nav-height) + 58px) !important;
     padding-bottom: 96px !important;
   }
+  .blog-landing.has-hero {
+    padding-top: 8rem !important;
+  }
 }
 
 .blog-landing-header {
@@ -522,7 +539,9 @@ function clearFilters() {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -584,7 +603,7 @@ function clearFilters() {
   padding: 0 !important;
   margin: 0 !important;
   margin-left: 0.5rem !important;
-  
+
   display: inline-flex !important;
   align-items: center !important;
   gap: 0.375rem !important;