diff --git a/.vitepress/components/Table.vue b/.vitepress/components/Table.vue deleted file mode 100644 index 5e0f2f2..0000000 --- a/.vitepress/components/Table.vue +++ /dev/null @@ -1,127 +0,0 @@ - - - - - diff --git a/.vitepress/config.js b/.vitepress/config.js index bc63ab7..fae36a1 100644 --- a/.vitepress/config.js +++ b/.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: '' diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index 5ee78f8..613b1cd 100644 --- a/.vitepress/theme/custom.css +++ b/.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; +} diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js index 294069c..8ad3491 100644 --- a/.vitepress/theme/index.js +++ b/.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"); } }, }; diff --git a/.vitepress/utils/content.js b/.vitepress/utils/content.js new file mode 100644 index 0000000..b3c1dd8 --- /dev/null +++ b/.vitepress/utils/content.js @@ -0,0 +1,143 @@ +import { withBase } from 'vitepress'; + +const discoveryIcon = ` + +`; +const screeningIcon = ` + + + + + + +` +const analysisIcon = ` + + +` +const showcasesIcon = ` + + +` + +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 = `` +const cross = `` + +export const tableData = [ + { + summary: { + 'Features': 'Harmonised container format across all Sentinels', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'EOPF introduces Zarr as the common container format for all Sentinel missions, reducing the need for product-specific client software for loading the data. SAFE products have different internal structures between Sentinel products and data file formats.', + }, + { + summary: { + 'Features': 'Efficient network access', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'Zarr is a Cloud-Native container format with self-describing chunked arrays that allows for reading metadata and dimensionality without loading the whole product. Read more: EOPF Toolkit 101 – What is Zarr?.

The Sentinel SAFE format (SentiWiki) uses traditional file-based hierarchy with multiple XML metadata files and binary data in separate directories.', + }, + { + summary: { + 'Features': 'Data chunking for efficient random access', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'Zarr provides superior data access performance through optimised chunking strategies, parallel I/O operations, and built-in compression algorithms (Blosc, LZ4, Zstd) that reduce data transfer times and memory usage. Read more: An Introduction to Zarr Chunking.

SAFE loading performance is constrained by sequential file access and decompression of entire product archives.', + }, + { + summary: { + 'Features': 'Scalable data loading', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'Zarr data loading scales horizontally with distributed chunk storage, enabling seamless integration with cloud storage systems, distributed computing frameworks (Dask, Xarray), and analysis-ready data architectures.

SAFE archives often need to be loaded as complete zipped products from a single access point.', + }, + { + summary: { + 'Features': 'Discoverable metadata', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'Zarr stores metadata as JSON attributes directly within the array structure, providing programmatic access, version control compatibility, and flexible schema evolution.

SAFE metadata is distributed across multiple XML files which are harder to discover and parse.', + }, + { + summary: { + 'Features': 'Interoperability', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': tick, + 'SAFE': cross, + }, + content: 'Zarr offers a broad ecosystem integration with Python (NumPy, Pandas, Xarray), R, Julia, JavaScript, and cloud-native technologies, providing standardised APIs across multiple programming languages and data science workflows.

SAFE product reading depends on specialised ESA tooling and product-specific libraries.', + }, + { + summary: { + 'Features': 'Progressive visualisation', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': cross, + 'SAFE': cross, + }, + content: 'Zarr enables progressive visualisation with random access and direct integration with web-based visualization libraries (Observable, Jupyter widgets, TileDB).

EOPF Explorer Zarr is using a chunking strategy particularly suitable for area visualisation such as web maps and includes multi-resolution pyramids (multiscales) for interactive exploration at multiple zoom levels. Check out the EOPF Sentinel Explorer to visualise EOPF Sentinel data right off distribution-grade products.

SAFE visualization requires preprocessing and full data extraction before rendering.', + }, + { + summary: { + 'Features': 'Following Zarr Community Conventions', + 'Zarr (EOPF Explorer)': tick, + 'Zarr (EOPF Sample Service)': cross, + 'SAFE': cross, + }, + content: 'EOPF Explorer Zarr is relying on Zarr Conventions for defining geospatial-data-specific features in GeoZarr, in particular georeference and . This means that the data format is recognised and discoverable by the community, which will hopefully lead to wider adoption by other data producers and software client libaries.

EOPF Sample Service Zarr currently uses a bespoke format for encoding geospatial and multiscales information.', + }, +] diff --git a/README.md b/README.md index 0223c21..34b4725 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,47 @@ -# EOPF Explorer Landing Page +# EOPF-Explorer Client +This repository contains the source code for the EOPF-Explorer client, which includes the landing page and the Sentinel data browser. + +## Setup + +To set up and run the project locally, follow these steps: + +1. **Clone the repository**: +```bash +git clone https://github.com/EOPF-Explorer/landing-page +cd eopf-explorer ``` + +2. **Install dependencies**: +```bash npm install +``` + +3. **Run the development server**: +```bash npm run dev ``` + +4. **Check Lint and Type Errors** +```bash +npm run check +``` +5. **Build for production** +```bash +npm run build +``` +## High-level Overview + +The EOPF-Explorer is the product of the integration of the following: + +- **Static Site Generation**: The landing page is a static site generated by [Vitepress](https://vitepress.dev/). This allows for content to be written in Markdown, with the ability to use Vue components within the pages for enhanced interactivity. +- **Dashboarding**: The Sentinel Browser is powered by [eodash](https://eodash.org/), a flexible tool for creating web-based dashboards for Earth Observation data. +- **UI Components**: The user interface is enhanced with [EOxElements](https://eox-a.github.io/EOxElements/), a library of web components for Earth Observation applications. + +## Replicating the Dashboard + +You can create your own instance of a similar dashboard by following these steps: + +- Start by creating a new repository from the [eodash pages template](https://github.com/eodash/eodash-pages-template). The template sets up a Vitepress site where you can create pages using Markdown. You can also embed custom Vue components to add more complex features. +- The template includes a page with an `eodash` instance already set up. You can customize this instance to build your own browser for Zarr-powered data or other sources. +- To further customize your dashboard, you can refer to [eodash client documentation](https://eodash.github.io/eodash) and https://eodash.org to learn more. diff --git a/eslint.config.js b/eslint.config.js index 1e8ad20..fc1b96c 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -5,7 +5,7 @@ export default [ ...eox, ...pluginVue.configs["flat/essential"], { - ignores: ["public/", "dist/", "**/cache/**"], + ignores: ["public/", "**/dist/**", "**/cache/**"], }, { files: ["**/*.vue", "**/*.js"], diff --git a/index.md b/index.md index 455deab..4b97b4c 100644 --- a/index.md +++ b/index.md @@ -19,21 +19,12 @@ hero: footer: false --- - +

Building Visualisation Capacity

+ -Cloud-native and visualisation-enhanced EOPF Sentinel products power many aspects of Earth observation data discovery and analysis. Begin by exploring data catalogs through standard clients like [STAC Browser](https://api.explorer.eopf.copernicus.eu/browser) that reveal Sentinel scenes at a glance. -To screen products more closely, you can [experiment](/sentinelexplorer/?template=explore&indicator=sentinel-2-l2a) with band combinations, color formulations, and custom arithmetic expressions to unlock spectral, polarization or any variables insights. - -Sophisticated analysis workflows can be built from [openEO](https://openeo.org/) clients for prototyping, dynamic web maps with on-the-fly reprojection, and interactive time-series exploration. - -Compelling [showcases](story/?id=ndvi) demonstrate real-world applications – from flood delineation and burnt area mapping to spectral indices and collaborative workspaces – all powered by cloud-native visualization technologies. - +
+
@@ -82,10 +73,10 @@ Use the interactive viewer to explore Sentinel-1 radar or Sentinel-2 optical ima - +

Why Zarr

+
@@ -155,7 +146,7 @@ Built on the shoulders of giants: xarray, zarr, OpenLayers, GDAL, and the entire title="Join the discussion!" tagline="We welcome your feedback and contributions." primaryButton="Visit the EOPF Forum" - primaryLink="https://discourse.eopf.copernicus.eu/" + primaryLink="https://discourse.eopf.copernicus.eu/c/eopf-explorer/17" dark /> @@ -175,8 +166,6 @@ Built on the shoulders of giants: xarray, zarr, OpenLayers, GDAL, and the entire
Credits

European Space Agency (ESA)

-

Image and Video Credits

-

Privacy Policy

Useful links
@@ -214,13 +203,12 @@ Built on the shoulders of giants: xarray, zarr, OpenLayers, GDAL, and the entire