@eox/pages-theme-eox 0.5.4 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/Layout.vue

@@ -107,6 +107,7 @@
                   :href="withBase(item.link)"
                   :target="item.target"
                   :rel="item.rel"
+                  @click="trackEvent(['CTA', 'Click', 'Nav', item.text])"
                 >
                   <span>{{ item.text }}</span>
                   <i
@@ -172,6 +173,14 @@
                     : 'border no-elevate white-text'
               "
               :style="i === 0 ? 'margin-left: 0 !important' : ''"
+              @click="
+                trackEvent([
+                  'CTA',
+                  'Click',
+                  `Hero ${action.theme === 'brand' ? 'primary' : action.theme === 'secondary' ? 'secondary' : 'alt'}`,
+                  action.text,
+                ])
+              "
             >
               <span>{{ action.text }}</span>
               <i v-if="action.theme !== 'alt'" class="mdi mdi-arrow-right"></i>
@@ -207,6 +216,7 @@
                 :href="theme.nav.find((i) => i.link.includes('contact')).link"
                 class="button small border no-margin"
                 style="color: var(--on-surface)"
+                @click="trackEvent(['CTA', 'Click', 'Footer', action.text])"
                 >{{ theme.nav.find((i) => i.link.includes("contact")).text }}</a
               >
               <p v-html="theme.footer.copyright"></p>
@@ -229,15 +239,32 @@
                   <p class="bold">Legal</p>
                   <p>
                     <a
-                      href="https://eox.at/impressum"
+                      :href="
+                        theme.theme.brandConfig?.legal?.about ||
+                        'https://eox.at/impressum'
+                      "
+                      target="_blank"
+                      class="link"
+                      >About</a
+                    >
+                  </p>
+                  <p>
+                    <a
+                      :href="
+                        theme.theme.brandConfig?.legal?.termsAndConditions ||
+                        'https://eox.at/impressum'
+                      "
                       target="_blank"
                       class="link"
-                      >About & Terms</a
+                      >Terms & Conditions</a
                     >
                   </p>
                   <p>
                     <a
-                      href="https://eox.at/privacy-notice"
+                      :href="
+                        theme.theme.brandConfig?.legal?.privacyPolicy ||
+                        'https://eox.at/privacy-notice'
+                      "
                       target="_blank"
                       class="link"
                       >Privacy</a
@@ -250,6 +277,7 @@
           <div class="large-space"></div>
         </div>
       </footer>
+      <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
       <slot name="layout-bottom"></slot>
     </template>
   </Layout>
@@ -257,8 +285,9 @@
 
 <script setup>
 import DefaultTheme from "vitepress/theme";
-const { Layout } = DefaultTheme;
 import { useData, withBase } from "vitepress";
+import { trackEvent } from "./helpers";
+const { Layout } = DefaultTheme;
 const { frontmatter, page, site, theme } = useData();
 
 if (!import.meta.env.SSR) {
@@ -368,6 +397,8 @@ header > img.background-image {
   object-fit: cover;
   opacity: 0.4;
   z-index: 0;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
 }
 header > .hero-container {
   max-width: 1200px;

package/src/components/CTASection.vue

@@ -19,12 +19,18 @@
         class="button extra small-margin"
         :class="dark !== undefined ? 'surface' : 'primary'"
         :href="primaryLink"
+        @click="
+          trackEvent(['CTA', 'Click', 'CTA Section Primary', primaryButton])
+        "
         >{{ primaryButton }} <i class="mdi mdi-arrow-right"></i
       ></a>
       <a
         v-if="secondaryButton"
         class="button extra small-margin secondary"
         :href="secondaryLink"
+        @click="
+          trackEvent(['CTA', 'Click', 'CTA Section Secondary', secondaryButton])
+        "
         >{{ secondaryButton }}<i class="mdi mdi-arrow-right"></i
       ></a>
       <a
@@ -32,6 +38,7 @@
         class="button border extra small-margin"
         :class="dark !== undefined ? 'white-text' : ''"
         :href="altLink"
+        @click="trackEvent(['CTA', 'Click', 'CTA Section Alt', altButton])"
         >{{ altButton }}</a
       >
     </div>
@@ -42,6 +49,7 @@
 </template>
 
 <script setup>
+import { trackEvent } from "../helpers";
 const props = defineProps([
   "dark",
   "primaryButton",

package/src/components/CookieBanner.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="cookie-banner card surface medium-margin medium-padding medium-elevate no-round"
+  >
+    <p class="small-text">
+      We use cookies to improve your experience and for marketing. Read our
+      <a
+        :href="theme.theme.brandConfig?.legal?.privacyPolicy"
+        target="_blank"
+        class="link"
+      >
+        Privacy Policy
+      </a>
+      for more information.
+    </p>
+    <nav>
+      <button class="small" @click="acceptCookies">Accept all</button>
+      <button class="small" @click="declineCookies">Reject all</button>
+    </nav>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch } from "vue";
+import { useData, useRouter } from "vitepress";
+import { trackEvent } from "../helpers";
+
+const { theme } = useData();
+const router = useRouter();
+
+/**
+ *  Show/hide banner
+ *
+ * @param show Boolean
+ */
+const showBanner = (show) => {
+  document.querySelector(".cookie-banner").style.display = show
+    ? "block"
+    : "none";
+};
+
+/**
+ * Accept cookies
+ */
+const acceptCookies = () => {
+  _paq.push(["rememberCookieConsentGiven"]);
+  showBanner(false);
+  trackPageScrolling(true);
+  trackRouterNavigation(true);
+};
+
+/**
+ * Decline cookies
+ */
+const declineCookies = () => {
+  _paq.push(["forgetCookieConsentGiven"]);
+  _paq.push(["optUserOut"]);
+  showBanner(false);
+  trackPageScrolling(false);
+  trackRouterNavigation(false);
+};
+
+/**
+ * Track page scrolling depth
+ *
+ * @param enabled Boolean
+ */
+const trackPageScrolling = (enabled) => {
+  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;
+  }
+  const scrollTargets = {
+    25: false,
+    50: false,
+    75: false,
+    100: false,
+  };
+  const scrollListener = () => {
+    Object.keys(scrollTargets).forEach((target) => {
+      if (getScrollPercent() >= parseInt(target) && !scrollTargets[target]) {
+        scrollTargets[target] = true;
+        trackEvent(["Interaction", "Scroll Depth", "Page"`${target}%`]);
+      }
+    });
+  };
+  if (enabled) {
+    document.addEventListener("scroll", scrollListener);
+  } else {
+    document.removeEventListener("scroll", scrollListener);
+  }
+};
+
+/**
+ * Track user navigation from one page to another
+ *
+ * @param enabled Boolean
+ */
+const trackRouterNavigation = (enabled) => {
+  const trackNavigation = () => {
+    _paq.push(["setCustomUrl", router.route.path]);
+    _paq.push(["setDocumentTitle", router.route.data.title]);
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+  };
+  if (enabled) {
+    watch(() => router.route.data.relativePath, trackNavigation, {
+      immediate: true,
+    });
+  } else {
+    watch(
+      () => router.route.data.relativePath,
+      () => {},
+      { immediate: true },
+    );
+  }
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    // Basic tracking setup
+    if (
+      !document.cookie.includes("mtm_cookie_consent") &&
+      !document.cookie.includes("mtm_consent_removed")
+    ) {
+      showBanner(true);
+    }
+  });
+});
+</script>
+
+<style>
+.cookie-banner {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  max-width: 512px;
+  z-index: 9999;
+}
+</style>

package/src/components/PricingTable.vue

@@ -58,10 +58,10 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'head-' + index"
-        class="cell surface-container-low small-top-round bold top-margin"
+        class="cell surface-container-low top-cell bold top-margin"
         :class="`orig-col-${index + 2}`"
       >
-        <h6 class="primary-text bold">{{ plan.name }}</h6>
+        <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
       <div class="cell orig-col-1 m l">Price (per month):</div>
@@ -90,7 +90,7 @@
           v-for="(plan, planIndex) in localPlans"
           :key="`${planIndex}-${row}`"
           class="bold surface-container-low"
-          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
         >
           <div
             v-if="typeof plan.details[row] === 'string'"
@@ -108,7 +108,9 @@
                 <input
                   type="checkbox"
                   :id="`${plan.name}-${row}`"
+                  v-model="plan.details[row].alternative.checked"
                   @input="$forceUpdate()"
+                  @change="updatePrices"
                 />
                 <span :for="`${plan.name}-${row}`"
                   ><h6 class="small bold">
@@ -132,7 +134,7 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
           >See all features
@@ -154,7 +156,7 @@
         v-if="showSales"
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <ClientOnly>
           <a
@@ -183,7 +185,7 @@
         <div
           v-for="(plan, detailPlanIndex) in detail.plans"
           :key="detailPlanIndex"
-          class="surface-container-low primary-text bold small-top-round top-margin"
+          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>
@@ -204,7 +206,7 @@
             v-for="(plan, planIndex) in detail.plans"
             :key="`${planIndex}-${row}`"
             class="bold surface-container-low"
-            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
           >
             <div class="s grey-text" v-html="row + ':'"></div>
             <template
@@ -278,11 +280,25 @@ export default {
   methods: {
     calculatePrice(plan) {
       const basePrice = plan.basePrice;
-      const additionalPrice = this.localOptions
+      const additionalOptionPrice = this.localOptions
         .filter((option) => option.checked)
         .reduce((sum, option) => sum + (option.modifier || 0), 0);
 
-      return basePrice + additionalPrice;
+      let additionalPlanModifier = 0;
+      if (plan.details) {
+        Object.values(plan.details).forEach((value) => {
+          if (value && typeof value === "object") {
+            if (
+              "alternative" in value &&
+              "modifier" in value.alternative &&
+              "checked" in value.alternative &&
+              value.alternative.checked
+            )
+              additionalPlanModifier += value.alternative.modifier;
+          }
+        });
+      }
+      return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
     getRowKeys(plansArray) {
       const keys = new Set();
@@ -410,14 +426,14 @@ export default {
   overflow: hidden;
 }
 
-.small-top-round {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+.top-cell {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
-.small-bottom-round {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
+.bottom-cell {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
 }
 
 @media screen and (min-width: 769px) {

package/src/helpers.js

@@ -0,0 +1,17 @@
+/**
+ * Track Matomo event with array of four primary components
+ *
+ * - 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.
+ *
+ * See https://matomo.org/faq/reports/the-anatomy-of-an-event/
+ *
+ * @param {Array<string>} eventDetails
+ */
+export const trackEvent = (eventDetails) => {
+  if (!import.meta.env.SSR) {
+    _paq.push(["trackEvent", ...eventDetails]);
+  }
+};

package/src/index.js

@@ -3,6 +3,7 @@ import FeatureSection from "./components/FeatureSection.vue";
 import FeaturesGallery from "./components/FeaturesGallery.vue";
 import PricingTable from "./components/PricingTable.vue";
 import CTASection from "./components/CTASection.vue";
+import CookieBanner from "./components/CookieBanner.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -14,6 +15,7 @@ export default {
     app.component("FeaturesGallery", FeaturesGallery);
     app.component("PricingTable", PricingTable);
     app.component("CTASection", CTASection);
+    app.component("CookieBanner", CookieBanner);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {

package/src/vitepressConfig.mjs

@@ -8,7 +8,88 @@ export const generate = (brandConfig) => ({
   appearance: false,
   cleanUrls: true,
   description: brandConfig.meta?.description,
-  head: [["link", { rel: "icon", href: brandConfig.meta?.favicon }]],
+  head: [
+    ["link", { rel: "icon", href: brandConfig.meta?.favicon }],
+    // Open Graph / Facebook
+    ["meta", { property: "og:type", content: "website" }],
+    [
+      "meta",
+      {
+        property: "og:url",
+        content: brandConfig.home,
+      },
+    ],
+    ["meta", { property: "og:title", content: brandConfig.meta?.title }],
+    [
+      "meta",
+      {
+        property: "og:description",
+        content: brandConfig.meta?.description,
+      },
+    ],
+    // TODO
+    // [
+    //   "meta",
+    //   {
+    //     property: "og:image",
+    //     content:
+    //       "https://earthcode.esa.int/img/EarthCODE_Herobanner_1920x1080.jpg",
+    //   },
+    // ],
+    // Twitter
+    ["meta", { property: "twitter:card", content: "summary_large_image" }],
+    [
+      "meta",
+      {
+        property: "twitter:url",
+        content: brandConfig.home,
+      },
+    ],
+    ["meta", { property: "twitter:title", content: brandConfig.meta?.title }],
+    [
+      "meta",
+      {
+        property: "twitter:description",
+        content: brandConfig.meta?.description,
+      },
+    ],
+    // TODO
+    // [
+    //   "meta",
+    //   {
+    //     property: "twitter:image",
+    //     content:
+    //       "https://earthcode.esa.int/img/EarthCODE_Herobanner_1920x1080.jpg",
+    //   },
+    // ],
+    ...(brandConfig.analytics
+      ? [
+          [
+            "script",
+            {},
+            `
+        var _paq = (window._paq = window._paq || []);
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(["requireCookieConsent"]);
+        _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+        _paq.push(["trackPageView"]);
+        _paq.push(["enableLinkTracking"]);
+        (function () {
+          var u = "https://nix.eox.at/piwik/";
+          _paq.push(["setTrackerUrl", u + "matomo.php"]);
+          _paq.push(["setSiteId", "${brandConfig.analytics.siteId}"]);
+          var d = document,
+            g = d.createElement("script"),
+            s = d.getElementsByTagName("script")[0];
+          g.async = true;
+          g.src = u + "matomo.js";
+          s.parentNode.insertBefore(g, s);
+        })();
+      `,
+          ],
+        ]
+      : []),
+  ],
   srcExclude: ["README.md"],
   themeConfig: {
     siteTitle: false,
@@ -16,6 +97,7 @@ export const generate = (brandConfig) => ({
       primaryColor: brandConfig.theme?.primary_color,
       secondaryColor:
         brandConfig.theme?.secondary_color || brandConfig.theme?.primary_color,
+      brandConfig,
     },
     logo: brandConfig.logo,
     footer: {