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

package/src/helpers.js

@@ -1,28 +1,157 @@
 import { watch } from "vue";
 
 /**
- * Track Matomo event with array of four primary components
+ * Normalizes a URL / path for tracking by:
+ * - Removing trailing slash (e.g. `/explore/` -> `/explore`, except for root `/`)
+ * - Stripping transient / high-cardinality UI params (e.g., coordinates `x`, `y`, `z`)
+ * - Sorting remaining query parameters alphabetically
  *
- * - Category (Required) – This describes the type of events you want to track. For example, Link Clicks, Videos, Outbound Links, and Form Events.
- * - Action (Required) – This is the specific action that is taken. For example, with the Video category, you might have a Play, Pause and Complete action.
- * - Name (Optional – Recommended) – This is usually the title of the element that is being interacted with, to aid with analysis. For example, it could be the name of a Video that was played or the specific form that is being submitted.
- * - Value (Optional) – This is a numeric value and is often added dynamically. It could be the cost of a product that is added to a cart, or the completion percentage of a video.
+ * @param {string} inputUrl - The URL or relative path to normalize
+ * @param {Object} [options] - Normalization options
+ * @param {Array<string>} [options.ignoredParams] - Query parameter keys to strip
+ * @param {boolean} [options.stripTrailingSlash=true] - Whether to strip trailing slashes
+ * @returns {string} Normalized URL / path
+ */
+export const normalizeTrackingUrl = (inputUrl, options = {}) => {
+  if (!inputUrl || typeof inputUrl !== "string") return inputUrl;
+  const { ignoredParams = ["x", "y", "z"], stripTrailingSlash = true } =
+    options;
+
+  try {
+    const base =
+      typeof window !== "undefined" && window.location?.href
+        ? window.location.href
+        : "https://eox.at";
+    const url = new URL(inputUrl, base);
+    let pathname = url.pathname;
+
+    if (stripTrailingSlash && pathname.length > 1 && pathname.endsWith("/")) {
+      pathname = pathname.replace(/\/+$/, "");
+    }
+
+    const searchParams = new URLSearchParams(url.search);
+    for (const key of ignoredParams) {
+      searchParams.delete(key);
+    }
+    searchParams.sort();
+
+    const search = searchParams.toString();
+    const isRelativeInput = !/^https?:\/\//i.test(inputUrl);
+
+    if (isRelativeInput) {
+      return pathname + (search ? `?${search}` : "");
+    }
+    url.pathname = pathname;
+    url.search = search ? `?${search}` : "";
+    return url.toString();
+  } catch {
+    if (stripTrailingSlash && inputUrl.length > 1 && inputUrl.endsWith("/")) {
+      return inputUrl.replace(/\/+$/, "");
+    }
+    return inputUrl;
+  }
+};
+
+/**
+ * Track Matomo event with array or positional arguments of four primary components:
+ * Category, Action, Name (optional), Value (optional)
+ *
+ * Automatically normalizes any path parameters (e.g., Action or Name).
  *
  * See https://matomo.org/faq/reports/the-anatomy-of-an-event/
  *
- * @param {Array<string>} eventDetails
+ * @param {Array<string|number>|string} eventDetails - Array of event details or Category string
+ * @param {...*} rest - Remaining event details if passed positionally
+ */
+export const trackEvent = (eventDetails, ...rest) => {
+  if (typeof window === "undefined") return;
+  const _paq = (window._paq = window._paq || []);
+
+  const details = Array.isArray(eventDetails)
+    ? [...eventDetails]
+    : [eventDetails, ...rest];
+
+  if (typeof details[1] === "string" && details[1].startsWith("/")) {
+    details[1] = normalizeTrackingUrl(details[1]);
+  }
+  if (typeof details[2] === "string" && details[2].startsWith("/")) {
+    details[2] = normalizeTrackingUrl(details[2]);
+  }
+
+  _paq.push(["trackEvent", ...details]);
+};
+
+/**
+ * Track page view with normalized URL and standardized document title.
+ *
+ * @param {Object|string} [options] - Router instance, options object, or path string
+ * @param {string} [options.path] - Custom path to track
+ * @param {string} [options.title] - Custom document title to track
+ * @param {Object} [options.route] - VitePress router route object
  */
-export const trackEvent = (eventDetails) => {
-  if (!import.meta.env.SSR) {
-    _paq.push(["trackEvent", ...eventDetails]);
+export const trackPageView = (options = {}) => {
+  if (typeof window === "undefined") return;
+  const _paq = (window._paq = window._paq || []);
+
+  let rawPath = "";
+  let rawTitle = "";
+
+  if (typeof options === "string") {
+    rawPath = options;
+  } else if (options && typeof options === "object") {
+    if (options.route) {
+      rawPath = options.route.path;
+      rawTitle = options.route.data?.title;
+    } else {
+      rawPath =
+        options.path ||
+        options.customUrl ||
+        (typeof window !== "undefined"
+          ? window.location.pathname + window.location.search
+          : "");
+      rawTitle =
+        options.title ||
+        options.customTitle ||
+        (typeof document !== "undefined" ? document.title : "");
+    }
   }
+
+  const normalizedUrl = normalizeTrackingUrl(rawPath);
+  if (normalizedUrl) {
+    _paq.push(["setCustomUrl", normalizedUrl]);
+  }
+  if (rawTitle) {
+    _paq.push(["setDocumentTitle", rawTitle.trim()]);
+  }
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+};
+
+/**
+ * Track site search keyword query in Matomo.
+ *
+ * @param {string} keyword - Searched term
+ * @param {string|boolean} [category=false] - Search category (e.g. 'stories', 'indicators')
+ * @param {number} [resultsCount=0] - Number of search results found
+ */
+export const trackSiteSearch = (
+  keyword,
+  category = false,
+  resultsCount = 0,
+) => {
+  if (typeof window === "undefined") return;
+  const _paq = (window._paq = window._paq || []);
+  _paq.push(["trackSiteSearch", keyword, category, resultsCount]);
 };
 
 /**
  * Accept cookies
  */
 export const acceptCookies = (router) => {
-  _paq.push(["rememberCookieConsentGiven"]);
+  if (typeof window !== "undefined") {
+    const _paq = (window._paq = window._paq || []);
+    _paq.push(["rememberCookieConsentGiven"]);
+  }
   showBanner(false);
   enableTracking(true, router);
 };
@@ -31,8 +160,11 @@ export const acceptCookies = (router) => {
  * Decline cookies
  */
 export const declineCookies = (router) => {
-  _paq.push(["forgetCookieConsentGiven"]);
-  _paq.push(["optUserOut"]);
+  if (typeof window !== "undefined") {
+    const _paq = (window._paq = window._paq || []);
+    _paq.push(["forgetCookieConsentGiven"]);
+    _paq.push(["optUserOut"]);
+  }
   showBanner(false);
   enableTracking(false, router);
 };
@@ -60,17 +192,24 @@ export const enableTracking = (enabled, router) => {
 };
 
 /**
- * Track page scrolling depth
+ * Track page scrolling depth with normalized path and numeric depth values.
  *
  * @param enabled Boolean
+ * @param router VitePress router
  */
 export const trackPageScrolling = (enabled, router) => {
   function getScrollPercent() {
-    const h = document.documentElement,
-      b = document.body,
-      st = "scrollTop",
-      sh = "scrollHeight";
-    return ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100;
+    try {
+      const h = document.documentElement,
+        b = document.body,
+        st = "scrollTop",
+        sh = "scrollHeight";
+      const scrollable = (h[sh] || b[sh]) - h.clientHeight;
+      if (scrollable <= 0) return 0;
+      return ((h[st] || b[st]) / scrollable) * 100;
+    } catch {
+      return 0;
+    }
   }
   const scrollTargets = {
     25: [],
@@ -79,17 +218,18 @@ export const trackPageScrolling = (enabled, router) => {
     100: [],
   };
   const scrollListener = () => {
+    const currentPath = normalizeTrackingUrl(router.route.path);
     Object.keys(scrollTargets).forEach((target) => {
       if (
-        getScrollPercent() >= parseInt(target) &&
-        !scrollTargets[target].includes(router.route.path)
+        getScrollPercent() >= parseInt(target, 10) &&
+        !scrollTargets[target].includes(currentPath)
       ) {
-        scrollTargets[target].push(router.route.path);
+        scrollTargets[target].push(currentPath);
         trackEvent([
           "Interaction",
           "Scroll Depth",
-          router.route.path,
-          `${target}%`,
+          currentPath,
+          parseInt(target, 10),
         ]);
       }
     });
@@ -102,19 +242,16 @@ export const trackPageScrolling = (enabled, router) => {
 };
 
 /**
- * Track user navigation from one page to another
+ * Track user navigation from one page to another with normalized URLs.
  *
- * @param enabled Boolean
+ * @param router VitePress router
  */
 export const trackRouterNavigation = (router) => {
   const trackNavigation = () => {
-    if (!document.cookie.includes("mtm_cookie_consent")) {
-      return;
-    }
-    _paq.push(["setCustomUrl", router.route.path]);
-    _paq.push(["setDocumentTitle", router.route.data.title]);
-    _paq.push(["trackPageView"]);
-    _paq.push(["enableLinkTracking"]);
+    trackPageView({
+      path: router.route.path,
+      title: router.route.data?.title,
+    });
   };
   watch(() => router.route.data.relativePath, trackNavigation, {
     immediate: true,
@@ -146,6 +283,8 @@ export const getFlatList = (items) => {
  * @returns {boolean}
  */
 export const isActive = (item, path) => {
+  if (!item || !path) return false;
+
   if (item.activeMatch) {
     try {
       return new RegExp(item.activeMatch).test(path);
@@ -155,20 +294,26 @@ export const isActive = (item, path) => {
     }
   }
 
-  if (item.items) {
-    return item.items.some((sub) => isActive(sub, path));
+  if (item.items && item.items.some((sub) => isActive(sub, path))) {
+    return true;
   }
 
   if (item.link) {
-    const linkPath = item.link.replace(/\.html$/, "").replace(/\/$/, "");
-    const currentPath = path.replace(/\.html$/, "").replace(/\/$/, "");
+    const normalize = (p) =>
+      decodeURI(p)
+        .replace(/[?#].*$/, "")
+        .replace(/\.html$/, "")
+        .replace(/\/$/, "");
+
+    const linkPath = normalize(item.link);
+    const currentPath = normalize(path);
 
     if (linkPath === currentPath) return true;
 
     // Special case for home page to avoid matching everything
     if (linkPath === "") return currentPath === "";
 
-    return currentPath.startsWith(linkPath);
+    return currentPath === linkPath || currentPath.startsWith(linkPath + "/");
   }
 
   return false;

package/src/helpers.test.js

@@ -0,0 +1,181 @@
+import { describe, it, beforeEach } from "node:test";
+import assert from "node:assert/strict";
+import {
+  normalizeTrackingUrl,
+  trackPageView,
+  trackEvent,
+  trackSiteSearch,
+  formatPrice,
+  t,
+  isActive,
+} from "./helpers.js";
+
+describe("normalizeTrackingUrl", () => {
+  it("strips trailing slashes from path", () => {
+    assert.equal(normalizeTrackingUrl("/explore/"), "/explore");
+    assert.equal(normalizeTrackingUrl("/explore"), "/explore");
+    assert.equal(normalizeTrackingUrl("/story/"), "/story");
+    assert.equal(normalizeTrackingUrl("/news_updates/"), "/news_updates");
+  });
+
+  it("keeps single root slash as /", () => {
+    assert.equal(normalizeTrackingUrl("/"), "/");
+    assert.equal(normalizeTrackingUrl(""), "");
+  });
+
+  it("removes volatile map coordinate parameters (x, y, z) and keeps template/zoom/datetime", () => {
+    assert.equal(
+      normalizeTrackingUrl("/explore/?x=15.0000&y=48.0000&z=4.0000"),
+      "/explore",
+    );
+    assert.equal(
+      normalizeTrackingUrl(
+        "/explore/?x=15.0000&y=48.0000&z=4.0000&template=expert&indicator=N11&datetime=2024-08-16&zoom=5",
+      ),
+      "/explore?datetime=2024-08-16&indicator=N11&template=expert&zoom=5",
+    );
+  });
+
+  it("preserves semantic content query params and sorts them", () => {
+    assert.equal(
+      normalizeTrackingUrl("/story/?page=2&id=sea-ice-extent"),
+      "/story?id=sea-ice-extent&page=2",
+    );
+    assert.equal(
+      normalizeTrackingUrl("/story/?id=sea-ice-extent&page=2"),
+      "/story?id=sea-ice-extent&page=2",
+    );
+  });
+
+  it("normalizes full URLs", () => {
+    assert.equal(
+      normalizeTrackingUrl("https://eodash.eox.at/explore/"),
+      "https://eodash.eox.at/explore",
+    );
+    assert.equal(
+      normalizeTrackingUrl(
+        "https://eodash.eox.at/explore/?x=12&y=34&indicator=TEST",
+      ),
+      "https://eodash.eox.at/explore?indicator=TEST",
+    );
+  });
+});
+
+describe("trackEvent", () => {
+  beforeEach(() => {
+    globalThis._paq = [];
+    globalThis.window = globalThis;
+  });
+
+  it("pushes array payload to _paq and normalizes path arguments", () => {
+    trackEvent(["Interaction", "Scroll Depth", "/explore/", 50]);
+    assert.deepEqual(globalThis._paq, [
+      ["trackEvent", "Interaction", "Scroll Depth", "/explore", 50],
+    ]);
+  });
+
+  it("supports positional arguments", () => {
+    trackEvent("CTA", "/click-link/", "Button Text");
+    assert.deepEqual(globalThis._paq, [
+      ["trackEvent", "CTA", "/click-link", "Button Text"],
+    ]);
+  });
+});
+
+describe("trackPageView", () => {
+  beforeEach(() => {
+    globalThis._paq = [];
+    globalThis.window = globalThis;
+    globalThis.document = { title: "Default Title" };
+  });
+
+  it("normalizes URL and sets document title before tracking page view", () => {
+    trackPageView({
+      path: "/explore/?x=10&indicator=AIR",
+      title: "Explore Indicators",
+    });
+    assert.deepEqual(globalThis._paq, [
+      ["setCustomUrl", "/explore?indicator=AIR"],
+      ["setDocumentTitle", "Explore Indicators"],
+      ["trackPageView"],
+      ["enableLinkTracking"],
+    ]);
+  });
+
+  it("accepts router route object", () => {
+    trackPageView({
+      route: {
+        path: "/story/",
+        data: { title: "Climate Story" },
+      },
+    });
+    assert.deepEqual(globalThis._paq, [
+      ["setCustomUrl", "/story"],
+      ["setDocumentTitle", "Climate Story"],
+      ["trackPageView"],
+      ["enableLinkTracking"],
+    ]);
+  });
+});
+
+describe("trackSiteSearch", () => {
+  beforeEach(() => {
+    globalThis._paq = [];
+    globalThis.window = globalThis;
+  });
+
+  it("pushes trackSiteSearch event with keyword, category, and result count", () => {
+    trackSiteSearch("methane", "indicators", 5);
+    assert.deepEqual(globalThis._paq, [
+      ["trackSiteSearch", "methane", "indicators", 5],
+    ]);
+  });
+});
+
+describe("existing helpers", () => {
+  it("formats prices correctly", () => {
+    assert.equal(formatPrice(12000, "en"), "€ 12,000.-");
+    assert.equal(formatPrice(49.99, "de"), "€ 49,99");
+  });
+
+  it("translates i18n keys with fallback", () => {
+    assert.equal(t("nav.home", { nav: { home: "Home Page" } }), "Home Page");
+    assert.equal(
+      t("nav.unknown", { nav: { home: "Home Page" } }),
+      "nav.unknown",
+    );
+    assert.equal(t("Imprint", { Imprint: "Impressum" }), "Impressum");
+    assert.equal(t("Imprint", {}), "Imprint");
+  });
+
+  it("checks isActive links correctly", () => {
+    assert.equal(isActive({ link: "/explore/" }, "/explore"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore/"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore/subpage"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore-other"), false);
+    assert.equal(isActive({ link: "/explore" }, "/explore?tab=1#sec"), true);
+    assert.equal(isActive({ link: "/" }, "/"), true);
+    assert.equal(isActive({ link: "/" }, "/explore"), false);
+
+    // Parent dropdown with items
+    const parentDropdown = {
+      text: "Expertise",
+      items: [
+        { text: "Data Management", link: "/expertise/data-management" },
+        { text: "Data Visualization", link: "/expertise/data-visualization" },
+      ],
+    };
+    assert.equal(isActive(parentDropdown, "/expertise/data-management"), true);
+    assert.equal(isActive(parentDropdown, "/expertise/data-management/"), true);
+    assert.equal(isActive(parentDropdown, "/solutions"), false);
+
+    // Parent with both link and items
+    const parentWithLinkAndItems = {
+      text: "Products",
+      link: "/products",
+      items: [{ text: "Product A", link: "/products/a" }],
+    };
+    assert.equal(isActive(parentWithLinkAndItems, "/products/a"), true);
+    assert.equal(isActive(parentWithLinkAndItems, "/products"), true);
+  });
+});

package/src/index.js

@@ -23,6 +23,8 @@ import BlogList from "./components/BlogList.vue";
 import TeamPage from "./components/TeamPage.vue";
 import SectionHeader from "./components/SectionHeader.vue";
 import TestimonialsSection from "./components/TestimonialsSection.vue";
+import TextSection from "./components/TextSection.vue";
+import OpenPositions from "./components/OpenPositions.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -55,6 +57,8 @@ export default {
     app.component("TeamPage", TeamPage);
     app.component("SectionHeader", SectionHeader);
     app.component("TestimonialsSection", TestimonialsSection);
+    app.component("TextSection", TextSection);
+    app.component("OpenPositions", OpenPositions);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {

package/src/pages/author/[author].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Author posts
+hero: true
 ---

package/src/pages/author/[author].paths.js

@@ -19,7 +19,7 @@ export default {
         const yaml = frontmatterMatch[1];
 
         // 1. Match inline array or string style author
-        const authorMatch = yaml.match(/author:\s*(.*?)\r?\n/);
+        const authorMatch = yaml.match(/author:[ \t]+(.*?)\r?\n/);
         if (authorMatch) {
           const val = authorMatch[1].trim();
           if (val.startsWith("[") && val.endsWith("]")) {
@@ -30,7 +30,7 @@ export default {
                 const clean = a.trim().replace(/['"]/g, "").toLowerCase();
                 if (clean) allAuthors.add(clean);
               });
-          } else if (val) {
+          } else if (val && !val.startsWith("-")) {
             const clean = val.replace(/['"]/g, "").toLowerCase();
             if (clean) allAuthors.add(clean);
           }

package/src/pages/blog.md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Blog
+hero: true
 ---

package/src/pages/tag/[tag].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Tag list
+hero: true
 ---

package/src/pages/tag.md

@@ -1,4 +1,5 @@
 ---
 layout: tags
 title: Tags
+hero: true
 ---

package/src/pages/team.md

@@ -1,4 +1,5 @@
 ---
 layout: team
-title: Team
+title: Our Team
+hero: true
 ---

package/src/posts.data.js

@@ -62,6 +62,44 @@ function getExcerpt(src, maxLength = 200) {
   return text;
 }
 
+function resolvePostUrl(page) {
+  if (!page.url) return "";
+  const cleanUrls = global.VITEPRESS_CONFIG?.cleanUrls ?? true;
+
+  const relFile = page.url.replace(/^\//, "").replace(/\.html$/, "") + ".md";
+
+  // 1. Check VitePress rewrites map first if available
+  const rewritten = global.VITEPRESS_CONFIG?.rewrites?.map?.[relFile];
+  if (rewritten) {
+    return (
+      "/" +
+      rewritten
+        .replace(/(^|\/)index\.md$/, "$1")
+        .replace(/\.md$/, cleanUrls ? "" : ".html")
+    );
+  }
+
+  // 2. If it is in _posts/, compute fallback rewrite based on frontmatter date and slug
+  if (page.url.startsWith("/_posts/")) {
+    const baseName = page.url.replace(/^\/_posts\//, "").replace(/\.html$/, "");
+    const slug = baseName
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+
+    const dateStr = String(page.frontmatter?.date || "");
+    const dateMatch = dateStr.match(/^(\d{4})-(\d{2})/);
+    if (dateMatch) {
+      const [, year, month] = dateMatch;
+      return `/${year}/${month}/${slug}${cleanUrls ? "" : ".html"}`;
+    } else {
+      return `/blog/${slug}${cleanUrls ? "" : ".html"}`;
+    }
+  }
+
+  return page.url;
+}
+
 export default createContentLoader("_posts/*.md", {
   includeSrc: true,
   transform(rawData) {
@@ -78,7 +116,7 @@ export default createContentLoader("_posts/*.md", {
 
         return {
           title: page.frontmatter.title || "",
-          url: page.url,
+          url: resolvePostUrl(page),
           date: page.frontmatter.date || "",
           authors,
           tags: page.frontmatter.tags || [],