feat: moving to hub page style

.vitepress/config.mjs

@@ -1,19 +1,32 @@
-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: 'Welcome', link: '/welcome' },
+      { text: 'Features', link: '/features', items: [
+          { text: 'Client-side Rendering', link: '/features/client-side-rendering' },
+          { text: 'Process Definition', link: '/features/process-definition' },
+          { text: 'Endpoint Integration', link: '/features/endpoint-integration' },
+          { text: 'Customizable Themes', link: '/features/customizable-themes' },
+          { text: 'Widget Extension', link: '/features/widget-extension' },
+          { text: 'Web Component', link: '/features/web-component' },
+        ]
+      },
+      { text: 'Components', link: '/components' },
+      { text: 'Roadmap', link: '/roadmap' },
+      { text: 'Technology', link: '/technology' },
     ],
-
+    /*
     sidebar: [
       {
         text: 'Introduction',
@@ -25,6 +38,17 @@ export default defineConfig({
           { text: 'Technology', link: '/technology' },
         ]
       },
+      {
+        text: 'Features',
+        items: [
+          { text: 'Client-side Rendering', link: '/features/client-side-rendering' },
+          { text: 'Process Definition', link: '/features/process-definition' },
+          { text: 'Endpoint Integration', link: '/features/endpoint-integration' },
+          { text: 'Customizable Themes', link: '/features/customizable-themes' },
+          { text: 'Widget Extension', link: '/features/widget-extension' },
+          { text: 'Web Component', link: '/features/web-component' },
+        ]
+      },
       {
         text: 'Ecosystem setup',
         items: [
@@ -43,9 +67,16 @@ 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,23 @@
-// 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,
+  setup() {
+    const route = useRoute()
+
+    const manipulateTargetAttributes = () => {
+      document.querySelectorAll('a[target="_self"]').forEach((link) => {
+        link.removeAttribute('target')
+      });
+    }
+
+    watch(route, () => {
+      setTimeout(manipulateTargetAttributes, 50)
     })
-  },
-  enhanceApp({ app, router, siteData }) {
-    // ...
+
+    return {}
   }
 }

features/client-side-rendering.md

@@ -0,0 +1,7 @@
+# Client-side Rendering
+
+eodash provides powerful support for direct rendering of raster and vector data on the client-side. This allows for highly interactive visualizations of cloud-optimized data formats.
+
+Key capabilities include:
+- **Dynamic Styling**: Specify styles for your data and update them dynamically based on user input, for example through a form.
+- **High Performance**: Optimized for performance, ensuring smooth rendering and a great user experience even with large datasets.

features/customizable-themes.md

@@ -0,0 +1,8 @@
+# Customizable Themes
+
+eodash offers a high degree of customization for its look and feel through theme definitions. This allows you to tailor the appearance of your dashboard to match your branding and design preferences.
+
+Key features:
+- **Theme Definitions**: Easily define and switch between themes.
+- **Predefined Themes**: A set of predefined themes is available to get you started quickly.
+- **Deep Customization**: Control colors, fonts, layout, and more to create a unique user experience.

features/endpoint-integration.md

@@ -0,0 +1,11 @@
+# Endpoint Integration
+
+eodash is designed to be highly interoperable, allowing you to integrate a multitude of endpoint types.
+
+Supported endpoint types include:
+- **WMS (Web Map Service)**
+- **XYZ tiles**
+- **Vector tiles**
+- And many more...
+
+This flexibility allows you to bring in data from various sources and create rich, composite applications.

features/process-definition.md

@@ -0,0 +1,7 @@
+# Process Definition
+
+With eodash, you can define processes that allow calling a large set of API endpoints. This enables complex workflows and interactions with backend services.
+
+Key capabilities include:
+- **JSON Forms**: Utilize JSON Form definitions for handling user input, making it easy to create intuitive user interfaces for complex processes.
+- **Flexible Output**: Define how to visualize the results of a process. You can use an OpenLayers flat style to display results on a map, or a Vega chart definition to create custom charts and graphs.

features/web-component.md

@@ -0,0 +1,8 @@
+# Web Component
+
+eodash is available as a web component, which allows for easy integration into virtually any web framework.
+
+Key advantages:
+- **Framework Agnostic**: Use eodash with React, Angular, Vue, or any other modern web framework.
+- **Encapsulation**: The web component encapsulates all of its HTML, CSS, and JavaScript, preventing conflicts with the surrounding application.
+- **Easy to Use**: Simply add the eodash web component to your page to embed a full-featured dashboard.

features/widget-extension.md

@@ -0,0 +1,8 @@
+# Widget-based Extensibility
+
+eodash is built on a modular, widget-based architecture, making it easy to extend its functionality.
+
+Key benefits:
+- **Custom Widgets**: Develop your own widgets to add new features and capabilities.
+- **Easy Integration**: Seamlessly integrate your custom widgets into the eodash dashboard.
+- **Reusable Components**: Create reusable components that can be shared and used across different eodash instances.