chore: layout updates

.vitepress/config.mjs

@@ -5,11 +5,91 @@ export default defineConfig(
   withSidebar(
     {
       // https://vitepress.dev/reference/site-config
-      srcDir: "pages",
+      srcDir: "./pages",
+      cleanUrls: true,
       title: "EarthCODE Documentation",
+      titleTemplate: " EarthCODE",
       description: "Documentation for the EarthCODE website",
-      appearance: "dark",
       base: "/documentation/",
+      head: [
+        ["link", { rel: "icon", href: "/img/EarthCODE_Favicon_32x32px.png" }],
+        // Open Graph / Facebook
+        ["meta", { property: "og:type", content: "website" }],
+        [
+          "meta",
+          {
+            property: "og:url",
+            content: "https://earthcode.esa.int",
+          },
+        ],
+        ["meta", { property: "og:title", content: "EarthCODE" }],
+        [
+          "meta",
+          {
+            property: "og:description",
+            content: "Earth Science Collaborative Open Development Environment",
+          },
+        ],
+        [
+          "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: "https://earthcode.esa.int",
+          },
+        ],
+        ["meta", { property: "twitter:title", content: "EarthCODE" }],
+        [
+          "meta",
+          {
+            property: "twitter:description",
+            content: "Earth Science Collaborative Open Development Environment",
+          },
+        ],
+        [
+          "meta",
+          {
+            property: "twitter:image",
+            content: "https://earthcode.esa.int/img/EarthCODE_Herobanner_1920x1080.jpg",
+          },
+        ],
+        [
+          "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", "13"]);
+            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);
+          })();
+        `,
+        ],
+      ],
+      themeConfig: {
+        footer: {
+          message: 'ESA – European Space Agency © 2020-2024',
+        }
+      }
     },
     {
       // https://vitepress-sidebar.cdget.com/guide/options

.vitepress/theme/Layout.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { onMounted } from "vue";
+import { useData, useRouter } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+
+const { Layout } = DefaultTheme;
+const { site, theme, frontmatter } = useData();
+
+onMounted(async () => {
+  setTimeout(() => {
+    document.querySelector("esa-cookies").addEventListener("accept", () => {
+      _paq.push(["rememberCookieConsentGiven"]);
+    });
+    document.querySelector("esa-cookies").addEventListener("decline", () => {
+      _paq.push(["forgetCookieConsentGiven"]);
+      _paq.push(["optUserOut"]);
+    });
+
+    if (
+      !document.cookie.includes("mtm_cookie_consent") &&
+      !document.cookie.includes("mtm_consent_removed")
+    ) {
+      document.querySelector("esa-cookies").style.display = "block";
+    }
+
+    // TRACK PAGE SCROLL
+    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,
+    };
+    document.addEventListener("scroll", (e) => {
+      Object.keys(scrollTargets).forEach((target) => {
+        if (getScrollPercent() >= parseInt(target) && !scrollTargets[target]) {
+          scrollTargets[target] = true;
+          _paq.push(["trackEvent", "Scroll_depth", `${target}%`]);
+        }
+      });
+    });
+
+    document.body.classList.add("loaded");
+  });
+});
+</script>
+
+<template>
+  <Layout :class="frontmatter.layout">
+    <template #layout-top>
+      <ClientOnly>
+        <esa-header></esa-header>
+      </ClientOnly>
+    </template>
+    <template #layout-bottom>
+      <ClientOnly>
+        <esa-cookies
+          link="https://www.esa.int/Services/Cookies_notice"
+          style="display: none"
+        ></esa-cookies>
+      </ClientOnly>
+    </template>
+  </Layout>
+</template>
+
+<style scoped>
+esa-header {
+  position: fixed;
+  width: 100%;
+  z-index: 11;
+}
+</style>

.vitepress/theme/index.js

@@ -1,7 +1,13 @@
-import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
 import "./style.css";
 
 /** @type {import('vitepress').Theme} */
 export default {
-  extends: DefaultTheme,
+  Layout,
+  async enhanceApp({ app, router, siteData }) {
+    if (!import.meta.env.SSR) {
+      app.use(await import("@eox/esa-ui/components/header.js"));
+      app.use(await import("@eox/esa-ui/components/cookies.js"));
+    }
+  }
 };

.vitepress/theme/style.css

@@ -1,71 +1,61 @@
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
+@font-face {
+  font-family: "NotesESAbold";
+  src: url("./fonts/notesesabol.ttf") format("truetype");
+}
+@font-face {
+  font-family: "NotesESAregular";
+  src:
+    url("./fonts/notesesareg.woff2") format("woff2"),
+    url("./fonts/notesesareg.ttf") format("truetype");
+}
+@font-face {
+  font-family: "NotesStyle";
+  src: url("./fonts/notesstyle.woff") format("woff");
+}
 
 :root {
-  --vp-c-default-1: var(--vp-c-gray-1);
-  --vp-c-default-2: var(--vp-c-gray-2);
-  --vp-c-default-3: var(--vp-c-gray-3);
-  --vp-c-default-soft: var(--vp-c-gray-soft);
-
+  --vp-c-white: #ffffff;
+  --vp-c-black: #101213;
+  --vp-font-family-base: Arial, sans-serif;
   --vp-c-brand-1: #00b19d;
-  --vp-c-brand-2: #08bea9;
-  --vp-c-brand-3: #0adac1;
-  --vp-c-brand-soft: #00b19d28;
-
-  --vp-c-tip-1: var(--vp-c-brand-1);
-  --vp-c-tip-2: var(--vp-c-brand-2);
-  --vp-c-tip-3: var(--vp-c-brand-3);
-  --vp-c-tip-soft: var(--vp-c-brand-soft);
-
-  --vp-c-warning-1: var(--vp-c-yellow-1);
-  --vp-c-warning-2: var(--vp-c-yellow-2);
-  --vp-c-warning-3: var(--vp-c-yellow-3);
-  --vp-c-warning-soft: var(--vp-c-yellow-soft);
-
-  --vp-c-danger-1: var(--vp-c-red-1);
-  --vp-c-danger-2: var(--vp-c-red-2);
-  --vp-c-danger-3: var(--vp-c-red-3);
-  --vp-c-danger-soft: var(--vp-c-red-soft);
+  --vp-c-brand-2: #00b19d;
+  --vp-c-brand-3: #00b19d;
+  --vp-layout-top-height: 56px;
+}
 
-  --vp-font-family-base: Arial, sans-serif;
+@media (min-width: 720px) {
+  :root {
+    --vp-layout-top-height: 64px;
+  }
 }
 
 .dark {
-  --vp-c-bg: #001923;
-  --vp-sidebar-bg-color: #003247;
-  --vp-c-text-2: rgba(235, 235, 245, 0.5);
+  --vp-c-bg: #0b1d26;
+  --vp-c-bg-alt: #003247;
+  --vp-c-bg-elv: #0b1d26;
+  --vp-c-bg-soft: #003247;
 }
 
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
+html {
+  font-family: Arial, Helvetica;
+}
 
-:root {
-  --vp-button-brand-border: transparent;
-  --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-1);
-  --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
-  --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+body {
+  transition: opacity 0.3s ease-in-out;
 }
 
-@font-face {
-  font-family: NotesESAbold;
-  src: url("https://earthcode.esa.int/assets/notesesabol.D0gW3H5e.ttf")
-    format("truetype");
+body:not(.loaded) {
+  opacity: 0;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
-  font-family: NotesESAbold, sans-serif;
-  font-weight: 400;
+h6,
+.VPNavBarTitle,
+.VPHero .text,
+.VPButton {
+  font-family: "NotesESAbold", sans-serif;
 }

package.json

@@ -8,5 +8,8 @@
   "devDependencies": {
     "vitepress": "^1.5.0",
     "vitepress-sidebar": "^1.29.0"
+  },
+  "dependencies": {
+    "@eox/esa-ui": "^1.11.1"
   }
 }

pages/index.md

@@ -1,21 +1,25 @@
 ---
-layout: page
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Welcome to EarthCODE"
+  text: "User Documentation"
+  tagline: Earth Science Collaborative Open Development Environment
+  image: /img/EarthCODE_kv_transparent.png
+  actions:
+    - theme: brand
+      text: Getting started
+      link: /getting-started
+    - theme: alt
+      text: Community and Best Practices
+      link: /group-4/
+
+features:
+  - title: Integrated Open Science Environment
+    details: A central hub for Earth System Science, seamlessly integrating data, tools, and workflows with the Open Science Catalogue to enable discovery, iterative research development, and the publishing of results.
+  - title: FAIR Tools and Workflow Support
+    details: End-to-end support for applying FAIR principles, managing data, code, workflows, and documentation with advanced version control, automated pipelines, and publication tools to ensure reproducibility, reuse, and Open Science compliance.
+  - title:  Scalable Computing & Community Engagement
+    details: Access to scalable cloud computing, data visualization, and advanced processing tools, including machine learning model execution, while fostering collaboration through community forums, guides, and interactive dashboards, and ensuring long-term storage and persistent access to research outputs with DOIs..
 ---
-
-<section class="blue hero">
-
-# User Documentation
-<br />
-
-<a class="VPButton cta no-icon" href="./getting-started">Getting Started</a>
-
-<a class="VPButton cta no-icon" href="./group-4/">Community and Best Practices</a>
-
-
-**Integrated Open Science Environment**: A central hub for Earth System Science, seamlessly integrating data, tools, and workflows with the Open Science Catalogue to enable discovery, iterative research development, and the publishing of results.
-
-**FAIR Tools and Workflow Support**: End-to-end support for applying FAIR principles, managing data, code, workflows, and documentation with advanced version control, automated pipelines, and publication tools to ensure reproducibility, reuse, and Open Science compliance.
-
-**Scalable Computing & Community Engagement**: Access to scalable cloud computing, data visualization, and advanced processing tools, including machine learning model execution, while fostering collaboration through community forums, guides, and interactive dashboards, and ensuring long-term storage and persistent access to research outputs with DOIs.
-
-</section>