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

package/src/components/TextSection.vue

@@ -0,0 +1,396 @@
+<template>
+  <section
+    class="text-section full-width"
+    :class="{
+      'is-reverse': reverse,
+      'no-image': !image && !$slots.media,
+      'is-compact': compact,
+    }"
+  >
+    <div class="holder">
+      <div
+        class="text-section-grid"
+        :class="{
+          'grid-reverse': reverse,
+          'grid-single': !image && !$slots.media,
+        }"
+      >
+        <!-- Text Column -->
+        <div class="text-column">
+          <span v-if="tagline" class="tagline">{{ tagline }}</span>
+          <h2 v-if="title" class="section-title">{{ title }}</h2>
+          <div class="section-content">
+            <slot></slot>
+          </div>
+          <!-- Prop-based button -->
+          <div v-if="buttonText && buttonLink" class="section-actions">
+            <a
+              :href="resolvedButtonLink"
+              :target="resolvedButtonTarget"
+              class="button"
+              @click="
+                trackEvent([
+                  'TextSection',
+                  'Click',
+                  title || buttonText,
+                  buttonText,
+                ])
+              "
+            >
+              <span>{{ buttonText }}</span>
+              <i v-if="buttonIcon" :class="buttonIcon" class="btn-icon"></i>
+            </a>
+          </div>
+          <slot name="actions"></slot>
+        </div>
+
+        <!-- Media Column -->
+        <div v-if="image || $slots.media" class="media-column">
+          <slot name="media">
+            <img
+              v-if="image"
+              :src="resolvedImage"
+              :alt="imageAlt || title || ''"
+              class="section-image"
+              loading="lazy"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { trackEvent } from "../helpers.js";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tagline: {
+    type: String,
+    default: "",
+  },
+  image: {
+    type: String,
+    default: "",
+  },
+  imageAlt: {
+    type: String,
+    default: "",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  buttonText: {
+    type: String,
+    default: "",
+  },
+  buttonLink: {
+    type: String,
+    default: "",
+  },
+  buttonTarget: {
+    type: String,
+    default: "",
+  },
+  buttonIcon: {
+    type: String,
+    default: "",
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function resolveUrl(url) {
+  if (!url) return "";
+  if (
+    url.startsWith("http://") ||
+    url.startsWith("https://") ||
+    url.startsWith("//") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+  return withBase(url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedButtonLink = computed(() => resolveUrl(props.buttonLink));
+const resolvedButtonTarget = computed(() => {
+  if (props.buttonTarget) return props.buttonTarget;
+  if (
+    props.buttonLink &&
+    (props.buttonLink.startsWith("http://") ||
+      props.buttonLink.startsWith("https://") ||
+      props.buttonLink.startsWith("//"))
+  ) {
+    return "_blank";
+  }
+  return "_self";
+});
+</script>
+
+<style scoped>
+.full-width {
+  width: 100svw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50svw;
+  margin-right: -50svw;
+  max-inline-size: unset !important;
+}
+
+.text-section {
+  padding-block-start: 56px;
+  padding-block-end: 80px;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  color: var(--on-surface, #020617);
+}
+
+.text-section.is-compact {
+  padding-block-start: 28px;
+  padding-block-end: 40px;
+}
+
+/* When text-sections are placed consecutively, tighten spacing and only apply extra end padding to the last one */
+:deep(.text-section:has(+ .text-section)),
+.text-section:has(+ .text-section) {
+  padding-block-end: 56px;
+}
+
+:deep(.text-section.is-compact:has(+ .text-section)),
+.text-section.is-compact:has(+ .text-section) {
+  padding-block-end: 28px;
+}
+
+:deep(.text-section + .text-section),
+.text-section + .text-section {
+  padding-block-start: 16px;
+}
+
+.text-section .holder {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-inline: 24px;
+}
+
+.text-section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+/* On mobile (< 1024px), the media/image column is always at the start before the text */
+.text-section-grid .media-column {
+  order: 1;
+}
+
+.text-section-grid .text-column {
+  order: 2;
+}
+
+@media (min-width: 1024px) {
+  .text-section-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+  }
+
+  /* Default on desktop: Text on left (1), Media on right (2) */
+  .text-section-grid .text-column {
+    order: 1;
+  }
+
+  .text-section-grid .media-column {
+    order: 2;
+  }
+
+  /* Reverse on desktop: Media on left (1), Text on right (2) */
+  .text-section-grid.grid-reverse .text-column {
+    order: 2;
+  }
+
+  .text-section-grid.grid-reverse .media-column {
+    order: 1;
+  }
+
+  .text-section-grid.grid-single {
+    grid-template-columns: 1fr;
+    max-width: 680px;
+  }
+}
+
+.text-column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tagline {
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--primary, #004170);
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+/* Markdown Content Styling */
+.section-content :deep(h2) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+.section-content :deep(h3) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.35;
+  color: #020617;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  border-top: none;
+}
+
+.section-content :deep(h4),
+.section-content :deep(h5) {
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.4;
+  color: #020617;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(p) {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: #334155;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.section-content :deep(ul) {
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.25rem;
+  list-style-type: disc;
+}
+
+.section-content :deep(li) {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #334155;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(li strong) {
+  color: #020617;
+  font-weight: 700;
+}
+
+.section-content :deep(a:not(.button)) {
+  color: #0284c7;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease-in-out;
+}
+
+.section-content :deep(a:not(.button):hover) {
+  text-decoration: underline;
+  color: #0369a1;
+}
+
+/* Pill Button Styling - for both prop and markdown links with .button */
+.section-actions {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.button,
+.section-content :deep(a.button),
+.section-content :deep(.button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid #020617;
+  background-color: #ffffff;
+  color: #020617 !important;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-decoration: none !important;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.button:hover,
+.section-content :deep(a.button:hover),
+.section-content :deep(.button:hover) {
+  background-color: #f1f5f9;
+  border-color: #020617;
+  color: #020617 !important;
+}
+
+.btn-icon {
+  font-size: 1.1em;
+  display: inline-flex;
+}
+
+/* Media Column & Image Styling */
+.media-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.section-image {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 4px 16px -2px rgba(15, 23, 42, 0.06),
+    0 2px 6px -2px rgba(15, 23, 42, 0.04);
+  background-color: #ffffff;
+  display: block;
+}
+</style>

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;