@eox/pages-theme-eox 0.5.5 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.5.5",
+  "version": "0.7.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>
@@ -185,6 +194,12 @@
         />
       </header>
     </template>
+    <template #not-found>
+      <ClientOnly v-if="router.route.path === '/cookie-settings'">
+        <CookieSettings></CookieSettings>
+      </ClientOnly>
+      <NotFound v-else></NotFound>
+    </template>
     <template #page-bottom>
       <FeaturesGallery
         v-if="page.relativePath.startsWith('features/')"
@@ -207,9 +222,21 @@
                 :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>
+              <p class="middle-align">
+                Powered by
+                <a
+                  href="https://hub.eox.at"
+                  target="_blank"
+                  class="left-margin small-margin"
+                  ><img
+                    src="https://hub.eox.at/hub/custom/logos/eoxhub.svg"
+                    style="height: 25px"
+                /></a>
+              </p>
             </div>
             <div class="s12 l6">
               <div class="grid large-line">
@@ -229,15 +256,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 +294,7 @@
           <div class="large-space"></div>
         </div>
       </footer>
+      <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
       <slot name="layout-bottom"></slot>
     </template>
   </Layout>
@@ -257,9 +302,11 @@
 
 <script setup>
 import DefaultTheme from "vitepress/theme";
+import { useData, useRouter, withBase } from "vitepress";
+import { trackEvent } from "./helpers";
 const { Layout } = DefaultTheme;
-import { useData, withBase } from "vitepress";
 const { frontmatter, page, site, theme } = useData();
+const router = useRouter();
 
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
@@ -348,7 +395,7 @@ header {
   margin-top: calc(var(--vp-nav-height) * -1);
   padding-top: 10rem !important;
   padding-bottom: 10rem !important;
-  height: 100svh;
+  height: calc(100svh + 2px);
   max-height: 1000px;
 }
 @media (max-width: 1024px) {
@@ -368,6 +415,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,66 @@
+<template>
+  <div
+    class="cookie-banner card surface medium-margin medium-padding medium-elevate no-round"
+  >
+    <p class="small-text">
+      We use optional cookies to improve your experience and for marketing. Read
+      our
+      <a
+        :href="theme.theme.brandConfig?.legal?.privacyPolicy"
+        target="_blank"
+        class="link"
+      >
+        privacy policy
+      </a>
+      or <a class="link" href="/cookie-settings">manage cookies</a>.
+    </p>
+    <nav>
+      <div class="max"></div>
+      <button class="small" @click="accept">Accept all</button>
+      <button class="small" @click="decline">Reject all</button>
+    </nav>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import { useData, useRouter } from "vitepress";
+import {
+  acceptCookies,
+  declineCookies,
+  enableTracking,
+  showBanner,
+} from "../helpers";
+
+const { theme } = useData();
+const router = useRouter();
+
+const accept = () => acceptCookies(router);
+const decline = () => declineCookies(router);
+
+onMounted(() => {
+  setTimeout(() => {
+    // Basic tracking setup
+    if (
+      !document.cookie.includes("mtm_cookie_consent") &&
+      !document.cookie.includes("mtm_consent_removed")
+    ) {
+      showBanner(true);
+    }
+    if (document.cookie.includes("mtm_cookie_consent")) {
+      enableTracking(true, router);
+    }
+  });
+});
+</script>
+
+<style>
+.cookie-banner {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  max-width: 512px;
+  z-index: 9999;
+}
+</style>

package/src/components/CookieSettings.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="VPPage">
+    <h1>Cookie Settings</h1>
+    <p>
+      We use cookies and similar technologies to improve your experience and for
+      marketing purposes. Review and manage your cookie settings below to
+      control your privacy. For more information on how we use cookies, please
+      see our
+      <a
+        class="link"
+        :href="
+          theme.theme.brandConfig?.legal?.privacyPolicy ||
+          'https://eox.at/privacy-notice/'
+        "
+        target="_blank"
+        >Privacy Policy</a
+      >.
+    </p>
+    <div
+      v-for="category in Object.keys(cookies)"
+      class="vertical-margin large-margin vertical-padding large-padding"
+      :id="category"
+    >
+      <nav>
+        <div class="max">
+          <h6 class="bold">{{ category }}</h6>
+          <p>
+            {{ cookies[category].description }}
+          </p>
+        </div>
+        <label class="switch">
+          <input
+            type="checkbox"
+            :checked="cookies[category].required"
+            :disabled="cookies[category].required"
+          />
+          <span></span>
+        </label>
+      </nav>
+      <details>
+        <summary class="middle-align">
+          <p class="primary-text bold">
+            <span class="view">View</span><span class="hide">Hide</span> cookies
+          </p>
+          <i class="small mdi mdi-chevron-down"></i>
+        </summary>
+        <table>
+          <thead>
+            <tr>
+              <th class="min">Name</th>
+              <th>Domain</th>
+              <th>Type</th>
+              <th>Duration</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="cookie in cookies[category].cookies">
+              <td class="min">
+                <code>{{ cookie.Name }}</code>
+              </td>
+              <td>{{ cookie.Domain }}</td>
+              <td>{{ cookie.Type }}</td>
+              <td>{{ cookie.Duration }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </details>
+    </div>
+  </div>
+  <div class="large-space"></div>
+</template>
+
+<style>
+.page {
+  margin: auto;
+  width: 100%;
+  max-width: 1200px;
+  padding: 48px 24px 0;
+}
+details summary i {
+  transition: transform 0.3s ease-in-out;
+}
+details[open] summary i {
+  transform: rotate(180deg);
+}
+details summary p {
+  display: flex;
+  gap: 0.25rem;
+}
+details summary p span {
+  display: none;
+}
+details:not([open]) summary .view {
+  display: block;
+}
+details[open] summary .hide {
+  display: block;
+}
+</style>
+
+<script setup>
+import { onMounted } from "vue";
+import { useData, useRouter } from "vitepress";
+import { enableTracking, showBanner } from "../helpers.js";
+const { theme } = useData();
+const router = useRouter();
+
+router.route.data.title = "Cookie Settings";
+router.onBeforeRouteChange = (to) => {
+  if (to === "/cookie-settings") {
+    showBanner(false);
+  } else {
+    showBanner(
+      !document.cookie.includes("mtm_cookie_consent") &&
+        !document.cookie.includes("mtm_consent_removed"),
+    );
+  }
+};
+
+const cookies = {
+  Essential: {
+    description:
+      "Cookies that are strictly necessary for basic website or app functionality.",
+    required: true,
+    cookies: [
+      {
+        Name: "mtm_consent_removed",
+        Domain: `.${window.location.host}`,
+        Type: "Opt-out management",
+        Duration: "13 months",
+      },
+      {
+        Name: "mtm_consent",
+        Domain: `.${window.location.host}`,
+        Type: "Consent management",
+        Duration: "13 months",
+      },
+    ],
+  },
+  Analytics: {
+    description:
+      "Cookies that are required for analyzing website or app usage.",
+    cookies: [
+      {
+        Name: "_pk_id",
+        Domain: `.${window.location.host}`,
+        Type: "First-party website analytics",
+        Duration: "13 months",
+      },
+      {
+        Name: "_pk_ses",
+        Domain: `.${window.location.host}`,
+        Type: "First-party website analytics",
+        Duration: "30 minutes",
+      },
+    ],
+  },
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    showBanner(false);
+
+    const analyticsOpt = document.querySelector("#Analytics input");
+    analyticsOpt.checked = document.cookie.includes("mtm_cookie_consent");
+
+    analyticsOpt.addEventListener("input", () => {
+      if (analyticsOpt.checked) {
+        _paq.push(["forgetUserOptOut"]);
+        _paq.push(["setCookieConsentGiven"]);
+        _paq.push(["rememberCookieConsentGiven"]);
+        enableTracking(true, router);
+      } else {
+        _paq.push(["optUserOut"]);
+        enableTracking(false, router);
+      }
+    });
+  });
+});
+</script>

package/src/components/NotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="VPPage">
+    <h1>404</h1>
+    <p>The page you requested was not found.</p>
+    <div class="small-space"></div>
+    <nav>
+      <a class="button" href="/">
+        <i class="mdi mdi-arrow-left"></i>
+        <span>Back to home</span>
+      </a>
+    </nav>
+    <div class="large-space"></div>
+  </div>
+</template>

package/src/helpers.js

@@ -0,0 +1,122 @@
+import { watch } from "vue";
+
+/**
+ * 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]);
+  }
+};
+
+/**
+ * Accept cookies
+ */
+export const acceptCookies = (router) => {
+  _paq.push(["rememberCookieConsentGiven"]);
+  showBanner(false);
+  enableTracking(true, router);
+};
+
+/**
+ * Decline cookies
+ */
+export const declineCookies = (router) => {
+  _paq.push(["forgetCookieConsentGiven"]);
+  _paq.push(["optUserOut"]);
+  showBanner(false);
+  enableTracking(false, router);
+};
+
+/**
+ * Show/hide banner
+ *
+ * @param show Boolean
+ */
+export const showBanner = (show) => {
+  document.querySelector(".cookie-banner").style.display = show
+    ? "block"
+    : "none";
+};
+
+/**
+ * Enables tracking listeners
+ *
+ * @param {Boolean} enabled
+ * @param {router} router
+ */
+export const enableTracking = (enabled, router) => {
+  trackPageScrolling(enabled, router);
+  trackRouterNavigation(router);
+};
+
+/**
+ * Track page scrolling depth
+ *
+ * @param enabled Boolean
+ */
+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;
+  }
+  const scrollTargets = {
+    25: [],
+    50: [],
+    75: [],
+    100: [],
+  };
+  const scrollListener = () => {
+    Object.keys(scrollTargets).forEach((target) => {
+      if (
+        getScrollPercent() >= parseInt(target) &&
+        !scrollTargets[target].includes(router.route.path)
+      ) {
+        scrollTargets[target].push(router.route.path);
+        trackEvent([
+          "Interaction",
+          "Scroll Depth",
+          router.route.path,
+          `${target}%`,
+        ]);
+      }
+    });
+  };
+  if (enabled) {
+    document.addEventListener("scroll", scrollListener);
+  } else {
+    document.removeEventListener("scroll", scrollListener);
+  }
+};
+
+/**
+ * Track user navigation from one page to another
+ *
+ * @param enabled Boolean
+ */
+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"]);
+  };
+  watch(() => router.route.data.relativePath, trackNavigation, {
+    immediate: true,
+  });
+};

package/src/index.js

@@ -3,6 +3,9 @@ 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 CookieSettings from "./components/CookieSettings.vue";
+import NotFound from "./components/NotFound.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -14,6 +17,9 @@ export default {
     app.component("FeaturesGallery", FeaturesGallery);
     app.component("PricingTable", PricingTable);
     app.component("CTASection", CTASection);
+    app.component("CookieBanner", CookieBanner);
+    app.component("CookieSettings", CookieSettings);
+    app.component("NotFound", NotFound);
 
     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: {