@eox/pages-theme-eox 0.6.0 → 0.7.0

package/package.json

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

package/src/Layout.vue

@@ -194,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/')"
@@ -220,6 +226,17 @@
                 >{{ 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">
@@ -285,10 +302,11 @@
 
 <script setup>
 import DefaultTheme from "vitepress/theme";
-import { useData, withBase } from "vitepress";
+import { useData, useRouter, withBase } from "vitepress";
 import { trackEvent } from "./helpers";
 const { Layout } = DefaultTheme;
 const { frontmatter, page, site, theme } = useData();
+const router = useRouter();
 
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
@@ -377,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) {

package/src/components/CookieBanner.vue

@@ -3,121 +3,40 @@
     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
+      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
+        privacy policy
       </a>
-      for more information.
+      or <a class="link" href="/cookie-settings">manage cookies</a>.
     </p>
     <nav>
-      <button class="small" @click="acceptCookies">Accept all</button>
-      <button class="small" @click="declineCookies">Reject all</button>
+      <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, watch } from "vue";
+import { onMounted } from "vue";
 import { useData, useRouter } from "vitepress";
-import { trackEvent } from "../helpers";
+import {
+  acceptCookies,
+  declineCookies,
+  enableTracking,
+  showBanner,
+} 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 },
-    );
-  }
-};
+const accept = () => acceptCookies(router);
+const decline = () => declineCookies(router);
 
 onMounted(() => {
   setTimeout(() => {
@@ -128,6 +47,9 @@ onMounted(() => {
     ) {
       showBanner(true);
     }
+    if (document.cookie.includes("mtm_cookie_consent")) {
+      enableTracking(true, router);
+    }
   });
 });
 </script>

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

@@ -1,3 +1,5 @@
+import { watch } from "vue";
+
 /**
  * Track Matomo event with array of four primary components
  *
@@ -15,3 +17,106 @@ export const trackEvent = (eventDetails) => {
     _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

@@ -4,6 +4,8 @@ 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";
 
@@ -16,6 +18,8 @@ export default {
     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) {