feat: UI & ReadMe Updates

.vitepress/config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+//@ts-expect-error does not have types
 import baseConfig from "@eox/pages-theme-eox/config";
 
 // https://vitepress.dev/reference/site-config
@@ -22,7 +23,7 @@ export default defineConfig({
       { text: "Data Catalog", link: "https://api.explorer.eopf.copernicus.eu/browser" },
       { text: "Dynamic Browser", link: "/sentinelexplorer/?template=explore&indicator=sentinel-2-l2a" },
       { text: "Documentation", link: "https://eopf-explorer.github.io/data-model/" },
-      { text: "Discussion", link: "https://discourse.eopf.copernicus.eu/" },
+      { text: "Discussion", link: "https://discourse.eopf.copernicus.eu/c/eopf-explorer/17" },
     ],
   },
   transformHead(){
@@ -31,7 +32,7 @@ export default defineConfig({
           'link',
           {
             rel: 'preload',
-            href: "/fonts/Exo2-VariableFont_wght.ttf",
+            href: "/fonts/Exo_2/Exo2-VariableFont_wght.ttf",
             as: 'font',
             type: 'font/ttf',
             crossorigin: ''
@@ -41,7 +42,7 @@ export default defineConfig({
           'link',
           {
             rel: 'preload',
-            href: "/fonts/Exo2-Italic-VariableFont_wght.ttf",
+            href: "/fonts/Exo_2/Exo2-Italic-VariableFont_wght.ttf",
             as: 'font',
             type: 'font/ttf',
             crossorigin: ''
@@ -51,7 +52,7 @@ export default defineConfig({
           'link',
           {
             rel: 'preload',
-            href: "/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf",
+            href: "/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf",
             as: 'font',
             type: 'font/ttf',
             crossorigin: ''
@@ -61,7 +62,7 @@ export default defineConfig({
           'link',
           {
             rel: 'preload',
-            href: "/fonts/OpenSans-VariableFont_wdth,wght.ttf",
+            href: "/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf",
             as: 'font',
             type: 'font/ttf',
             crossorigin: ''

.vitepress/theme/custom.css

@@ -31,3 +31,25 @@ h6 {
     padding-top: 7rem !important;
   }
 }
+
+/* Move navigation buttons to the right */
+
+.top-nav nav.nav-desktop {
+  justify-content: space-between;
+}
+
+.top-nav nav.nav-desktop > .space {
+  display: none;
+}
+
+.top-nav nav.nav-desktop > nav:has(ul) {
+  margin-left: auto;
+}
+
+.top-nav nav.nav-desktop > .max {
+  flex: 0;
+}
+
+.top-nav nav.nav-desktop > nav.actions {
+  margin-left: 1rem;
+}

.vitepress/theme/index.js

@@ -1,3 +1,4 @@
+//@ts-expect-error does not export types
 import EOX from "@eox/pages-theme-eox";
 import "./custom.css";
 
@@ -6,16 +7,16 @@ export default {
   ...EOX,
   async enhanceApp({ app, router, siteData }) {
     EOX.enhanceApp({ app, router, siteData });
-
+    //@ts-expect-error special vitepress property
     if (!import.meta.env.SSR) {
       await import("@eodash/eodash/webcomponent");
       await import("@eox/storytelling");
       await import("@eox/layout");
       await import("@eox/itemfilter");
-      await import ("@eox/map/src/plugins/advancedLayersAndSources");
-      await import ("@eox/chart");
-      await import ("@eox/jsonform");
-      await import ("@eox/layercontrol");
+      await import("@eox/map/src/plugins/advancedLayersAndSources");
+      await import("@eox/chart");
+      await import("@eox/jsonform");
+      await import("@eox/layercontrol");
     }
   },
 };

.vitepress/utils/content.js

@@ -0,0 +1,135 @@
+import { withBase } from 'vitepress';
+
+const discoveryIcon = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7201 17.3332V26.6665H5.05339V7.99984H11.7467C11.8134 7.05317 12.0401 6.15984 12.3867 5.33317H5.05339C3.58672 5.33317 2.38672 6.53317 2.38672 7.99984V26.6665C2.38672 28.1332 3.58672 29.3332 5.05339 29.3332H23.7201C25.1867 29.3332 26.3867 28.1332 26.3867 26.6665V19.9998L23.7201 17.3332ZM21.7201 23.9998H7.05339L10.7201 19.2932L13.3334 22.4398L17.0001 17.7198L21.7201 23.9998ZM25.4534 11.8532C26.0401 10.9198 26.3867 9.83984 26.3867 8.6665C26.3867 5.3465 23.7067 2.6665 20.3867 2.6665C17.0667 2.6665 14.3867 5.3465 14.3867 8.6665C14.3867 11.9865 17.0667 14.6665 20.3734 14.6665C21.5467 14.6665 22.64 14.3198 23.56 13.7332L27.7201 17.8932L29.6134 15.9998L25.4534 11.8532ZM20.3867 11.9998C18.5467 11.9998 17.0534 10.5065 17.0534 8.6665C17.0534 6.8265 18.5467 5.33317 20.3867 5.33317C22.2267 5.33317 23.7201 6.8265 23.7201 8.6665C23.7201 10.5065 22.2267 11.9998 20.3867 11.9998Z" fill="black"/>
+</svg>`;
+const screeningIcon = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9993 29.3332C8.65268 29.3332 2.66602 23.3465 2.66602 15.9998C2.66602 8.65317 8.65268 2.6665 15.9993 2.6665C23.346 2.6665 29.3327 8.05317 29.3327 14.6665C29.3327 19.0798 25.746 22.6665 21.3327 22.6665H18.9727C18.5993 22.6665 18.306 22.9598 18.306 23.3332C18.306 23.4932 18.3727 23.6398 18.4793 23.7732C19.026 24.3998 19.3327 25.1865 19.3327 25.9998C19.3327 27.8398 17.8393 29.3332 15.9993 29.3332ZM15.9993 5.33317C10.1193 5.33317 5.33268 10.1198 5.33268 15.9998C5.33268 21.8798 10.1193 26.6665 15.9993 26.6665C16.3727 26.6665 16.666 26.3732 16.666 25.9998C16.666 25.7865 16.5593 25.6265 16.4793 25.5332C15.9327 24.9198 15.6393 24.1332 15.6393 23.3332C15.6393 21.4932 17.1327 19.9998 18.9727 19.9998H21.3327C24.2794 19.9998 26.666 17.6132 26.666 14.6665C26.666 9.51984 21.8793 5.33317 15.9993 5.33317Z" fill="black"/>
+<path d="M8.66602 17.3332C9.77059 17.3332 10.666 16.4377 10.666 15.3332C10.666 14.2286 9.77059 13.3332 8.66602 13.3332C7.56145 13.3332 6.66602 14.2286 6.66602 15.3332C6.66602 16.4377 7.56145 17.3332 8.66602 17.3332Z" fill="black"/>
+<path d="M12.666 11.9998C13.7706 11.9998 14.666 11.1044 14.666 9.99984C14.666 8.89527 13.7706 7.99984 12.666 7.99984C11.5614 7.99984 10.666 8.89527 10.666 9.99984C10.666 11.1044 11.5614 11.9998 12.666 11.9998Z" fill="black"/>
+<path d="M19.3327 11.9998C20.4373 11.9998 21.3327 11.1044 21.3327 9.99984C21.3327 8.89527 20.4373 7.99984 19.3327 7.99984C18.2281 7.99984 17.3327 8.89527 17.3327 9.99984C17.3327 11.1044 18.2281 11.9998 19.3327 11.9998Z" fill="black"/>
+<path d="M23.3327 17.3332C24.4373 17.3332 25.3327 16.4377 25.3327 15.3332C25.3327 14.2286 24.4373 13.3332 23.3327 13.3332C22.2281 13.3332 21.3327 14.2286 21.3327 15.3332C21.3327 16.4377 22.2281 17.3332 23.3327 17.3332Z" fill="black"/>
+</svg>
+`
+const analysisIcon = `<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3333 0C5.97333 0 0 5.97333 0 13.3333C0 20.6933 5.97333 26.6667 13.3333 26.6667C20.6933 26.6667 26.6667 20.6933 26.6667 13.3333C26.6667 5.97333 20.6933 0 13.3333 0ZM23.9067 12H14.6667V2.76C19.48 3.36 23.3067 7.18667 23.9067 12ZM2.66667 13.3333C2.66667 7.90667 6.74667 3.41333 12 2.76V23.9067C6.74667 23.2533 2.66667 18.76 2.66667 13.3333ZM14.6667 23.9067V14.6667H23.9067C23.3067 19.48 19.48 23.3067 14.6667 23.9067Z" fill="black"/>
+</svg>
+`
+const showcasesIcon = `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6673 14.6665C18.6673 13.1998 17.4673 11.9998 16.0007 11.9998C14.534 11.9998 13.334 13.1998 13.334 14.6665C13.334 16.1332 14.534 17.3332 16.0007 17.3332C17.4673 17.3332 18.6673 16.1332 18.6673 14.6665ZM10.6407 24.3332C10.254 23.1332 9.88065 21.7465 9.62732 20.3332L8.00065 21.4265V25.3998L10.6407 24.3332ZM16.0007 2.6665C16.0007 2.6665 22.6673 5.33317 22.6673 17.3332L25.4806 19.2132C26.2273 19.7065 26.6673 20.5465 26.6673 21.4265V29.3332L20.0007 26.6665H12.0007L5.33398 29.3332V21.4265C5.33398 20.5332 5.77398 19.7065 6.52065 19.2132L9.33398 17.3332C9.33398 5.33317 16.0007 2.6665 16.0007 2.6665ZM16.0007 5.81317C16.0007 5.81317 12.0007 8.5065 12.0007 17.3332C12.0007 20.3332 13.334 23.9998 13.334 23.9998H18.6673C18.6673 23.9998 20.0007 20.3332 20.0007 17.3332C20.0007 8.5065 16.0007 5.81317 16.0007 5.81317ZM24.0007 25.3998V21.4265L22.374 20.3465C22.1207 21.7465 21.7473 23.1465 21.3607 24.3465L24.0007 25.3998Z" fill="black"/>
+</svg>
+`
+
+export const cardsContent = [
+  {
+    content: "Cloud-native and visualisation-enhanced EOPF Sentinel products power many aspects of Earth observation data discovery and analysis. Begin by exploring data clients catalogs through standard clients like Stack Browser that reveal Sentinel scenes at a glance.",
+    id: Symbol(),
+    title: "Discovery",
+    icon:{ html: discoveryIcon},
+    link:{
+        text:"Stac Browser",
+        href:"https://api.explorer.eopf.copernicus.eu/browser"
+    }
+  },
+  {
+    icon:{ html: screeningIcon},
+    content: "To screen products more closely, you can experiment with band combinations, color formulations, and custom arithmetic expressions to unlock spectral, polarization or any variables insights.",
+    id: Symbol(),
+    title: "Screening",
+    link:{
+        text:"Experiment",
+        href:withBase("/sentinelexplorer/?template=explore&indicator=sentinel-2-l2a")
+    }
+  },
+  {
+    icon:{ html: analysisIcon},
+    content: "Sophisticated analysis workflows can be built from Open EO clients for prototyping, dynamic web maps with on-the-fly reprojection, and interactive time-series exploration.",
+    id: Symbol(),
+    title: "Analysis",
+    link:{
+        text:"Open EO",
+        href:"https://openeo.org/"
+    }
+  },
+  {
+    icon:{ html: showcasesIcon},
+    content: "Compelling showcases demonstrate real-world applications – from flood delineation and burnt area mapping to spectral indices and collaborative workspaces – all powered by cloud-native visualization technologies.",
+    id: Symbol(),
+    title: "Showcases",
+    link:{
+        text:"Showcases",
+        href:withBase("/story/?id=ndvi")
+    }
+  },
+];
+
+
+const tick = `<button class="transparent square"><img src="${withBase('/assets/checkmark.svg')}"/></button>`
+const cross = `<button class="transparent square"><img src="${withBase('/assets/crossmark.svg')}"/></button>`
+
+export const tableData = [
+  {
+    summary: {
+      'Features': 'Data Structure',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: `Learn more: Sentinel SAFE format (SentiWiki) Zarr Documentation ,ESA EOPF GitHub – Data Model`,
+  },
+  {
+    summary: {
+      'Features': 'Access',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Detailed information about access methods and their implications...,',
+  },
+  {
+    summary: {
+      'Features': 'Performance',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Performance benchmarks and technical details...',
+  },
+  {
+    summary: {
+      'Features': 'Scalability',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Scalability comparison and use cases...',
+  },
+  {
+    summary: {
+      'Features': 'Metadata Handling',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Metadata structure examples and parsing information...',
+  },
+  {
+    summary: {
+      'Features': 'Cloud Readiness',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Cloud deployment strategies and best practices...',
+  },
+  {
+    summary: {
+      'Features': 'Visualization',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Visualization tools and integration examples...',
+  },
+  {
+    summary: {
+      'Features': 'Interoperability',
+      'SAFE': cross,
+      'Zarr': tick,
+    },
+    content: 'Integration examples and ecosystem compatibility...',
+  }
+]