feat: moving to hub page style

.vitepress/config.mjs

@@ -1,27 +1,36 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
+import baseConfig from "@eox/pages-theme-eox/config";
+
+const brandId = "eodash";
 
-// https://vitepress.dev/reference/site-config
 export default defineConfig({
+  extends: baseConfig(brandId),
   title: "eodash ecosystem",
-  description: "Publish and integrate earth observation data in a dashboard application through this flexible and customizable ecosystem",
+  description: "Publishing and integrating earth observation data in a dashboard application through this flexible and customizable ecosystem",
   themeConfig: {
     search: {
       provider: "local"
     },
-    // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Welcome', link: '/welcome' }
+      { text: 'Features', link: '/features', items: [
+          { text: 'Client-side Rendering', link: '/features/client-side-rendering?indicator=client_side_rendering&x=12.0837&y=44.8289&z=9.5' },
+          { text: 'Process Definition', link: '/features/process-definition?indicator=N2_CO2_mean' },
+          { text: 'Endpoint Integration', link: '/features/endpoint-integration?indicator=endpoint_integration' },
+          { text: 'Customizable Themes', link: '/features/customizable-themes' },
+          { text: 'Widget Extension', link: '/features/widget-extension' },
+          { text: 'Web Component', link: '/features/web-component' },
+        ]
+      },
+      { text: 'Documentation', link: '/welcome' },
+      { text: 'Technology', link: '/technology' },
     ],
-
     sidebar: [
       {
         text: 'Introduction',
         items: [
           { text: 'Welcome', link: '/welcome' },
-          { text: 'Components', link: '/components' },
-          { text: 'Roadmap', link: '/roadmap' },
-          { text: 'Technology', link: '/technology' },
+          { text: 'eodash client documentation', link: 'https://eodash.github.io/eodash/' },
         ]
       },
       {
@@ -33,7 +42,7 @@ export default defineConfig({
         ]
       },
       {
-        text: 'Content',
+        text: 'Content creation',
         items: [
           { text: 'Content integration', link: '/content' },
           { text: 'Data configuration', link: '/data' },
@@ -49,9 +58,15 @@ export default defineConfig({
         ]
       }
     ],
-
     socialLinks: [
       { icon: 'github', link: 'https://github.com/eodash' }
-    ]
-  }
-})
+    ],
+    theme: {
+      brandConfig: {
+        legal: {
+            termsAndConditions: "https://eox.at/service-terms-and-conditions/",
+        },
+      },
+    },
+  },
+});

.vitepress/theme/custom.css

@@ -0,0 +1,65 @@
+/* fix for wrong height position when navigating back to specific section */
+:target {
+    scroll-margin-top: 130px;
+}
+
+/* fix for links in text not differentiable from normal text */
+.VPPage a:not(.button) { color: #2870a8; }
+
+/* fix for logo images being cropped in borders */
+.tiles img{
+    border-radius: 0!important;
+}
+
+.screenshots-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    max-width: 1100px;
+    padding: 20px;
+}
+.screenshot {
+    flex: 1 1 30%;
+    max-width: 30%;
+    min-width: 280px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+    text-align: center;
+    background: white;
+    padding: 10px;
+}
+.screenshot:hover {
+    transform: scale(1.05);
+}
+.screenshot img {
+    width: 100%;
+    height: auto;
+    display: block;
+    filter: grayscale(100%);
+    transition: filter 0.3s ease-in-out;
+}
+.screenshot p {
+    margin-top: 10px;
+    font-size: 0.9em;
+    color: #3a3e41;
+    font-weight: normal;
+}
+.screenshot:hover img {
+    filter: grayscale(0%);
+}
+.screenshot a {
+    text-decoration: none;
+    color: #007bff;
+    font-weight: bold;
+    display: block;
+    margin-top: 10px;
+}
+@media (max-width: 900px) {
+    .screenshot {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}

.vitepress/theme/index.js

@@ -1,17 +1,40 @@
-// https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import EOX from "@eox/pages-theme-eox";
+import './custom.css';
+import { onMounted, watch, ref } from 'vue';
+import { useRoute } from 'vitepress';
 
-/** @type {import('vitepress').Theme} */
 export default {
-  extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+  ...EOX,
+  async enhanceApp({ app, router, siteData }) {
+    EOX.enhanceApp({ app, router, siteData });
+    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");
+      await import ("@eox/chart");
+      await import ("@eox/map/src/plugins/advancedLayersAndSources");
+      await import ("@eox/drawtools");
+      await import ("@eox/jsonform");
+      await import ("@eox/stacinfo");
+      await import ("@eox/layercontrol");
+      await import ("color-legend-element");
+      await import ("@eox/timecontrol");
+      await import ("@eox/ui");
+    }
   },
-  enhanceApp({ app, router, siteData }) {
-    // ...
+  async setup() {
+    const route = useRoute()
+
+    const manipulateTargetAttributes = () => {
+      document.querySelectorAll('a[target="_self"]').forEach((link) => {
+        link.removeAttribute('target')
+      });
+    }
+    watch(route, () => {
+      setTimeout(manipulateTargetAttributes, 50)
+    })
+    return {}
   }
 }

catalog.md

@@ -1,3 +1,6 @@
+---
+layout: docs
+---
 # Catalog backend
 
 Start with the [catalog-template](https://github.com/eodash/catalog-template) - navigate there and click "Use this template" button in the top right to create your own copy. Once your instance is created, follow the [How-to](https://github.com/eodash/catalog-template?tab=readme-ov-file#how-to) to enable GitHub Pages to automatically generate and host your catalog.

content.md

@@ -1,3 +1,6 @@
+---
+layout: docs
+---
 # Content integration
 
 There are four ways to contribute content to an eodash ecosystem:

data.md

@@ -1,3 +1,6 @@
+---
+layout: docs
+---
 # Data configuration
 
 An eodash instance loads its content from a STAC catalog. This catalog can be generated using the [eodash_catalog](https://github.com/eodash/eodash_catalog). As described in the [catalog wiki](https://github.com/eodash/eodash_catalog/wiki/Resource), multiple services are supported.

eodash.md

@@ -1,3 +1,6 @@
+---
+layout: docs
+---
 # eodash instance
 
 If your catalog endpoint is already set up (see [Catalog backend](./catalog) if not), you can create an eodash instance to point to it.