@eodash/eodash 5.0.0-alpha.1.12 → 5.0.0-alpha.1.14

package/bin/serverConfig.js

@@ -9,7 +9,8 @@ import {
   cachePath, publicPath, userConfig,
   buildTargetPath,
   logger,
-  rootPath
+  rootPath,
+  internalWidgetsPath
 } from "./utils.js";
 import { readFile } from "fs/promises";
 import { defineConfig, searchForWorkspaceRoot } from "vite"
@@ -61,7 +62,8 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       alias: {
         '@': fileURLToPath(new URL('../core', import.meta.url)),
         '^': fileURLToPath(new URL('../widgets', import.meta.url)),
-        "user:config": entryPath
+        "user:config": entryPath,
+        "user:widgets": internalWidgetsPath
       },
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
@@ -78,7 +80,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
     },
     root: fileURLToPath(new URL('..', import.meta.url)),
     optimizeDeps: mode === "development" ? {
-      include: ["webfontloader", "vuetify", "vue", "pinia"],
+      include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
       noDiscovery: true,
     } : {},
     /** @type {string|false} */
@@ -100,7 +102,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
  * @type {import("vite").ServerHook}
  */
 async function configureServer(server) {
-  server.watcher.add([entryPath, runtimeConfigPath])
+  server.watcher.add([entryPath, runtimeConfigPath, path.join(internalWidgetsPath, "**/*.vue")])
 
   let updatedPath = ''
   const loggerInfo = logger.info
@@ -127,13 +129,15 @@ async function configureServer(server) {
 
   return () => {
     server.middlewares.use(async (req, res, next) => {
-      if (req.originalUrl === '/@fs/config.js' && existsSync(runtimeConfigPath)) {
-        await readFile(runtimeConfigPath).then(runtimeConfig => {
-          res.statusCode = 200
-          res.setHeader('Content-Type', 'text/javascript')
-          res.write(runtimeConfig)
-          res.end()
-        })
+      if (req.originalUrl === '/@fs/config.js') {
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'text/javascript')
+        if (existsSync(runtimeConfigPath)) {
+          await readFile(runtimeConfigPath).then(runtimeConfig => {
+            res.write(runtimeConfig)
+          })
+        }
+        res.end()
         return
       }
 

package/bin/utils.js

@@ -21,6 +21,7 @@ const pkg = JSON.parse(
  * @property {string | false} publicDir
  * @property {string} outDir
  * @property {string} entryPoint
+ * @property {string} widgets
  * @property {string} cacheDir
  * @property {string} runtime
  * @property {string} base
@@ -33,7 +34,8 @@ cli.version(pkg.version, '-v, --version', 'output the current version')
   .option('--publicDir <path>', 'path to statically served assets folder')
   .option('--no-publicDir', 'stop serving static assets')
   .option('--outDir <path>', 'minified output folder')
-  .option('-e, --entryPoint <path>', 'file exporting `defineConfig`')
+  .option('-e, --entryPoint <path>', 'file exporting `createEodash`')
+  .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
   .option('--cacheDir <path>', 'cache folder')
   .option('-r, --runtime <path>', 'file exporting eodash client runtime config')
   .option('-b, --base <path>', 'base public path')
@@ -52,6 +54,7 @@ export const appPath = fileURLToPath(new URL("..", import.meta.url)),
   srcPath = path.join(rootPath, "/src"),
   runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./runtime.js"),
   entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.js"),
+  internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
   dotEodashPath = path.join(rootPath, "/.eodash"),
   buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
   cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
@@ -84,6 +87,7 @@ async function getUserConfig(options, command) {
     entryPoint: options.entryPoint ?? config?.entryPoint,
     outDir: options.outDir ?? config?.outDir,
     publicDir: options.publicDir ?? config?.publicDir,
-    runtime: options.runtime ?? config?.runtime
+    runtime: options.runtime ?? config?.runtime,
+    widgets: options.widgets ?? config?.widgets
   }
 }

package/core/composables/DefineWidgets.js

@@ -2,8 +2,6 @@ import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
 
-
-
 /**
  * @typedef {{
  *   component:import('vue').Component | null;
@@ -17,14 +15,24 @@ import { storeToRefs } from 'pinia'
  * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
 */
 
+const internalWidgets = (() => {
+  /**
+   * @type {Record<string,() => Promise<import('vue').Component>>}
+   */
+  const importMap = {
+    ...import.meta.glob('^/**/*.vue'),
+    ...import.meta.glob("user:widgets/**/*.vue")
+  }
+  for (const key in importMap) {
+    const newKey = /** @type {string} */(key.split('/').at(-1)).slice(0, -4)
+    Object.defineProperty(importMap, newKey,
+      /** @type {PropertyDescriptor} */(Object.getOwnPropertyDescriptor(importMap, key)));
+    delete importMap[key];
+  }
+  return importMap
+})();
 
 
-/**
- * import map to all vue components inside `widgets` directory.
- * @type {Record<string,() => Promise<import('vue').Component>>}
- */
-const internalWidgets = import.meta.glob('^/**/*.vue')
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
  * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
@@ -46,7 +54,6 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
-      no: '4'
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -84,7 +91,7 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name}.vue`],
+        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
         suspensible: true
       })
       importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.props ?? {})

package/core/composables/index.js

@@ -2,10 +2,11 @@
 // setup functions or vue composition api components
 
 import { reactive } from "vue"
-import { currentUrl } from "@/store/States"
+import { currentUrl, datetime, mapInstance, indicator } from "@/store/States"
 import eodashConfig from "@/eodash"
 import { useTheme } from "vuetify/lib/framework.mjs"
-
+import { useRouter } from "vue-router"
+import { onMounted, onUnmounted, watch } from "vue"
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -145,3 +146,50 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   })
   return theme
 }
+
+
+/**
+ * Composable that initiates route query params to store
+ * STAC related values
+ */
+export const useRouteParams = () => {
+  const router = useRouter()
+  /**
+   * @type {import("openlayers").EventsListenerFunctionType}
+   */
+  const handleMoveEnd = (evt) => {
+    const map = /** @type {import("openlayers").Map | undefined} */ (/** @type {*} */ (evt).map)
+    const [x, y] = map?.getView().getCenter() ?? [0, 0]
+    const z = map?.getView().getZoom()
+    const currentQuery = router.currentRoute.value.query
+    router.push({
+      query: {
+        ...currentQuery,
+        x, y, z
+      }
+    })
+
+  }
+  onMounted(() => {
+    watch([datetime, mapInstance, currentUrl, indicator], ([updatedDate, updatedMap, updatedUrl, updatedIndicator]) => {
+      const [x, y] = updatedMap?.getView().getCenter() ?? [0, 0]
+      const currentQuery = router.currentRoute.value.query
+      router.push({
+        query: {
+          ...currentQuery,
+          indicator: updatedIndicator,
+          x,
+          y,
+          z: updatedMap?.getView().getZoom(),
+          datetime: updatedDate,
+          url: updatedUrl,
+        }
+      })
+      updatedMap?.on("moveend", handleMoveEnd)
+    })
+  })
+
+  onUnmounted(() => {
+    mapInstance.value?.un("moveend", handleMoveEnd)
+  })
+}

package/core/eodash.js

@@ -1,9 +1,5 @@
 import { reactive } from "vue";
-import { currentUrl, mapInstance } from './store/States';
-/**
- * @type {Function | null}
- */
-let handleMoveEnd = null;
+import { currentUrl } from './store/States';
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app,
@@ -25,39 +21,16 @@ const eodash = reactive({
         secondary: '#00417044',
         surface: "#f0f0f0f0",
       }
-    }
+    },
+    meta: {}
   },
   template: {
     background: {
       id: Symbol(),
+      type: "internal",
       widget: {
-        link: 'https://cdn.skypack.dev/@eox/map',
-        properties: {
-          class: "fill-height fill-width overflow-none",
-          center: [15, 48],
-          layers: [{ type: "Tile", source: { type: "OSM" } }],
-        },
-        tagName: 'eox-map',
-        onMounted(el, _, router) {
-           /** @type {any} */(el).zoom = router.currentRoute.value.query['z'];
-
-          mapInstance.value =  /** @type {any} */(el).map;
-
-          mapInstance.value?.on('moveend', handleMoveEnd =
-          /** @param {any} evt  */(evt) => {
-              router.push({
-                query: {
-                  z: `${evt.map.getView().getZoom()}`
-                }
-              });
-            });
-        },
-        onUnmounted(_el, _store, _router) {
-          //@ts-expect-error
-          mapInstance.value?.un('moveend', handleMoveEnd);
-        }
-      },
-      type: 'web-component'
+        name: 'EodashMap'
+      }
     },
     widgets: [
       {

package/core/main.js

@@ -1,4 +1,2 @@
-// Plugins
 export { createEodash } from '@/composables/DefineEodash';
-
-
+export { default as store } from "@/store"

package/core/plugins/index.js

@@ -11,8 +11,10 @@ import { createPinia } from 'pinia';
 import eodash from '@/eodash';
 import { eodashKey } from '@/store/Keys';
 import store from '../store';
+import { createHead } from '@unhead/vue'
 
 export const pinia = createPinia();
+const head = createHead()
 
 /**
  * @param {import('vue').App} app
@@ -21,6 +23,7 @@ export function registerPlugins(app) {
   window.eodashStore = store;
 
   app.use(vuetify)
+    .use(head)
     .use(router)
     .use(pinia)
     .provide(eodashKey, eodash);

package/core/store/Actions.js

@@ -1,28 +0,0 @@
-/**
- * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
- * @param {string} [link]
- * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
- */
-export const loadFont = async (family = "Roboto", link) => {
-  const WebFontLoader = (await import('webfontloader')).default;
-  if (link) {
-    WebFontLoader.load({
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-    });
-  }
-  else {
-    WebFontLoader.load({
-      google: {
-        families: [family]
-      }
-    });
-  }
-  return family;
-};

package/core/store/States.js

@@ -10,3 +10,13 @@ export const currentUrl = ref('');
  * @type {import("vue").Ref<import('openlayers').Map | null>}
  */
 export const mapInstance = ref(null);
+
+/**
+ * currently selected datetime
+ */
+export const datetime = ref(new Date().toISOString());
+
+/**
+ * Currently selected indicator
+ */
+export const indicator = ref("")

package/core/store/stac.js

@@ -3,6 +3,7 @@ import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
 import { eodashKey } from '@/store/Keys';
+import { assignIndicator } from '@/utils';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -14,7 +15,7 @@ export const useSTAcStore = defineStore('stac', () => {
   /**
    * selected STAC object.
    * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   * import('stac-ts').StacCollection |import('stac-ts').StacItem
+   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
    * | null>}
    */
   const selectedStac = ref(null);
@@ -54,6 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
+      assignIndicator(selectedStac.value)
     }).catch(err => console.error(err));
   }
 

package/core/types.d.ts

@@ -4,26 +4,41 @@ import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
 import type { Ref } from "vue"
 import type { ThemeDefinition } from "vuetify/lib/index.mjs";
 import type { Map } from "openlayers";
+
 /**
- * Web Component configuration
+ * @group Eodash
  */
 export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
-  /** Web component definition file URL*/
+  /**
+   * Imports web component file, either using a URL or an import funtion.
+   * @example
+   * importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
+   * referenced:
+   * ```js
+   * link: async() => import("@eox/itemfilter")
+   * ```
+   *
+   * ::: warning
+   * import maps are not available in runtime config
+   * :::
+   **/
   link: T extends 'runtime' ? string : (string | (() => Promise<unknown>));
-  /** Exported Constructor, needs to be provided if the web component is not registered by the `link` provided */
+  /**
+   *  Exported Constructor, needs to be provided if the web component is not registered in by the
+   * [link](#link) provided
+   **/
   constructorProp?: string
-  /** Custom tag name */
   tagName: `${string}-${string}`
   /** Object defining all the properties and attributes of the web component */
   properties?: Record<string, any>
   /**
-   * Function that is triggered when the web component is mounted in the DOM.
+   * Triggered when the web component is mounted in the DOM.
    * @param el - web component
    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
   onMounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
   /**
-   * Function that is triggered when the web component is unmounted from the DOM.
+   * Triggered when the web component is unmounted from the DOM.
    * @param el - web component
    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
@@ -38,85 +53,70 @@ export interface WidgetsContainerProps {
 
 // eodash types:
 /**
- * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
- * an external endpoint, or an installed node_module.
- * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
- * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+ * Widget type: `web-component` API
+ * @group Eodash
  */
 export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
-  /**
- * Unique Identifier, triggers rerender when using `defineWidget`
- **/
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
    * Widget position and size.
    */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
   widget: WebComponentProps<T>
-  /**
-   * Widget type
-   */
   type: 'web-component'
 }
 
 /**
- * Widget type: `internal` specification.
- * Internal widgets are Vue components inside the `/widgets` directory.
+ * Widget type: `internal` API.
+ * Internal widgets are Vue components provided by eodash.
+ * @group Eodash
  */
 export interface InternalComponentWidget {
-  /**
-  * Unique Identifier, triggers rerender when using `defineWidget`
-  **/
   id: number | string | symbol
-  /**
-   * Widget title
-   */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
   widget: {
     /**
-     * Internal Vue Component file name without the extention .vue
+     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder can be referenced
+     * using their name without the extention .vue
      */
     name: string;
     /**
@@ -124,43 +124,37 @@ export interface InternalComponentWidget {
      */
     props?: Record<string, unknown>
   }
-  /**
-  * Widget type.
-  */
   type: 'internal'
 }
 
 /**
- * Widget type: `iframe` specification.
+ * Widget type: `iframe` API
  * Renders an external HTML file as a widget.
  */
+/**
+ * @group Eodash
+ */
 export interface IFrameWidget {
-  /**
-   * Unique Identifier, triggers rerender when using `defineWidget`
-   **/
   id: number | string | symbol
-  /**
-  * Widget title
-  */
   title: string
   /**
   * Widget position and size.
   */
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
@@ -170,11 +164,11 @@ export interface IFrameWidget {
      */
     src: string
   }
-  /**
-  * Widget type
-  */
   type: 'iframe'
 }
+/**
+ * @group Eodash
+ */
 export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   /**
    * Provides a functional definition of the widget,
@@ -184,32 +178,42 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
   layout: {
     /**
-     *  Horizontal start position. Integer (1 - 12)
+     *  Horizontal start position. Integer between 1 and 12
      */
     x: number
     /**
-     *  Vertical start position. Integer (1 - 12)
+     *  Vertical start position. Integer between 1 and 12
      */
     y: number
     /**
-     *  Width. Integer (1 - 12)
+     *  Width. Integer between 1 and 12
      */
     w: number
     /**
-     *  Height. Integer (1 - 12)
+     *  Height. Integer between 1 and 12
      */
     h: number
   }
 }
+/**
+ * @group Eodash
+ */
 export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentWidget<T> | InternalComponentWidget | IFrameWidget
+/**
+ * @group Eodash
+ */
 export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
 
 
+/**
+ * @group Eodash
+ */
 export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title'> | Omit<InternalComponentWidget, 'layout' | 'title'> | Omit<IFrameWidget, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
 /**
  * Dashboard rendered widgets  specification.
  * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
  * A specific object should be provided based on the type of the widget.
+ * @group Eodash
  */
 export interface Template<T extends ExecutionTime = "compiletime"> {
   /**
@@ -226,15 +230,21 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
    */
   widgets: Widget<T>[]
 }
-
+/** @ignore */
 export type ExternalURL = `${'https://' | 'http://'}${string}`;
+/** @ignore */
 export type InternalRoute = `/${string}`
+/** @ignore */
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
+/**
+ * @group Eodash
+ */
 export type ExecutionTime = "runtime" | "compiletime";
 
 /**
- * Eodash instance specification.
+ * Eodash instance API
+ * @group Eodash
  */
 export interface Eodash<T extends ExecutionTime = "compiletime"> {
   /**
@@ -249,13 +259,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
   * Renderes to navigation buttons on the app header.
   **/
   routes?: Array<{
-    /**
-     * button title
-     **/
     title: string,
-    /**
-     * external URL or inner path to navigate to.
-     **/
     to: ExternalURL | InternalRoute
   }>
   /**
@@ -263,7 +267,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
    */
   brand: {
     /**
-     * Automatically fetches the specified font family from google fonts. if the `link` property is specified
+     * Automatically fetches the specified font family from google fonts. if the [link](#font-link) property is specified
      * the font family will be fetched from the provided source instead.
      */
     font?: {
@@ -272,7 +276,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
        */
       link?: string;
       /**
-       * Font family. Use FVD notation to include families https://github.com/typekit/fvd
+       * Font family. Use FVD notation to include families. see https://github.com/typekit/fvd
        */
       family: string
     }
@@ -292,6 +296,8 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
      * Dashboard theme as a custom vuetifyJs theme.
      */
     theme?: ThemeDefinition
+
+    meta?: import("@unhead/vue").UseSeoMetaInput
   }
   /**
    * Template configuration
@@ -301,6 +307,9 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
 /////////
 
 /// eodash store types
+/**
+ * @group EodashStore
+ */
 export interface EodashStore {
   /**
    * Stateful Reactive variables
@@ -314,11 +323,16 @@ export interface EodashStore {
     * OpenLayers map instance
     */
     mapInstance: Ref<Map | null>
+    /**
+    * currently selected datetime
+    */
+    datetime: Ref<string>
+    /**
+     * Currently selected indicator
+     */
+    indicator: Ref<string>
   }
-  // consider removing the actions ?
-  actions: {
-    loadFont: (family?: string, link?: string) => Promise<string>;
-  };
+  actions: {};
   /**
    *  Pinia store definition used to navigate the root STAC catalog.
    */
@@ -327,23 +341,54 @@ export interface EodashStore {
   }
 }
 ///////
+/**
+ * Eodash server, build and setup configuration
+ * @group EodashConfig
+ */
 export interface EodashConfig {
   dev?: {
+    /** serving  port */
     port?: string | number
     host?: string | boolean
+    /** open default browser when the server starts */
     open?: boolean
   }
   preview?: {
+    /** serving  port */
     port?: string | number
     host?: string | boolean
+    /** open default browser when the server starts */
     open?: boolean
   }
+  /**
+   * base public path
+   */
   base?: string;
+  /**
+   * build target folder path
+   */
   outDir?: string;
+  /** path to statically served assets folder, can be set to `false`
+   *  to disable serving assets statically
+   **/
   publicDir?: string | false;
+  /**
+   * cache folder
+   */
   cacheDir?: string
+  /** specifies main entry file, exporting `createEodash`*/
   entryPoint?: string
+  /**
+   * file exporting eodash client runtime config
+   */
   runtime?: string
+  widgets?: string
 }
-
-export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Eodash
+/**
+ * project entry point should export this function as a default
+ * to instantiate eodash
+ *
+ * @param  configCallback
+ */
+export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Promise<Eodash>
+export declare const store: EodashStore

package/core/utils/eodashSTAC.js

@@ -0,0 +1,129 @@
+import { Collection, Item } from 'stac-js';
+import { toAbsolute } from 'stac-js/src/http.js';
+
+export class EodashCollection {
+  /** @type {string | undefined} */
+  #collectionUrl = undefined;
+  #collectionStac = undefined;
+  /** @type {*} */
+  selectedItem = null;
+
+  /**
+   * @param {string} collectionUrl
+   */
+  constructor(collectionUrl) {
+    this.#collectionUrl = collectionUrl;
+  }
+  /**
+   * @param {*} item
+   * @returns
+   * @async
+   */
+  createLayersJson = async (item = null) => {
+    let stacItem;
+    if (item instanceof Date) {
+      // if collectionStac not yet initialized we do it here
+      if (!this.#collectionStac) {
+        const response = await fetch(this.#collectionUrl);
+        const stac = await response.json();
+        this.#collectionStac = new Collection(stac);
+      }
+      stacItem = this.getItems().sort((a, b) => {
+        //@ts-expect-error
+        const distanceA = Math.abs(new Date(a.datetime) - item);
+        //@ts-expect-error
+        const distanceB = Math.abs(new Date(b.datetime) - item);
+        return distanceA - distanceB;
+      })[0];
+      this.selectedItem = stacItem;
+    } else {
+      stacItem = item;
+    }
+    const response = await fetch(
+      stacItem
+        ? toAbsolute(stacItem.href, this.#collectionUrl)
+        : this.#collectionUrl
+    );
+    const stac = await response.json();
+
+    // TODO get auxiliary layers from collection
+    let layersJson = [
+      {
+        type: 'Tile',
+        properties: {
+          id: 'OSM',
+        },
+        source: {
+          type: 'OSM',
+        },
+      },
+    ];
+
+    if (!stacItem) {
+      // no specific item was requested; render last item
+      this.#collectionStac = new Collection(stac);
+      const items = this.getItems();
+      this.selectedItem = items[items.length - 1];
+      layersJson = await this.createLayersJson(this.selectedItem);
+      return layersJson;
+    } else {
+      // specific item was requested
+      const item = new Item(stac);
+      this.selectedItem = item;
+      //@ts-expect-error
+      layersJson.unshift(this.buildJson(item));
+      return layersJson;
+    }
+  }
+
+  /**
+   * @param {*} item
+   */
+  buildJson(item) {
+    let json;
+    // TODO implement other types, such as COG
+    if (/** @type {import('stac-ts').StacLink[]} */(item.links).find((l) => l.rel === 'wms' || l.rel === 'wmts')) {
+      json = {
+        type: 'STAC',
+        displayWebMapLink: true,
+        displayFootprint: false,
+        data: item,
+      };
+    } else {
+      // fall back to rendering the feature
+      json = {
+        type: 'Vector',
+        source: {
+          type: 'Vector',
+          url: 'data:,' + encodeURIComponent(JSON.stringify(item.geometry)),
+          format: 'GeoJSON',
+        },
+      };
+    }
+
+    return json;
+  }
+
+  getItems() {
+    return (
+      //@ts-expect-error
+       // eslint-disable-next-line
+     /** @type {import('stac-ts').StacLink[]}*/(this.#collectionStac?.links)
+        .filter((i) => i.rel === 'item')
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) => ( /** @type {number} */(a.datetime) <  /** @type {number} */(b.datetime) ? -1 : 1))
+    );
+  }
+
+  getDates() {
+    return (
+     //@ts-expect-error
+      // eslint-disable-next-line
+      /** @type {import('stac-ts').StacLink[]}*/ (this.#collectionStac?.links)
+        .filter((i) => i.rel === 'item')
+        // sort by `datetime`, where oldest is first in array
+        .sort((a, b) => ( /** @type {number} */(a.datetime) < /** @type {number} */(b.datetime) ? -1 : 1))
+        .map((i) => new Date( /** @type {number} */(i.datetime)))
+    );
+  }
+}

package/core/utils/index.js

@@ -0,0 +1,48 @@
+import { indicator } from '@/store/States';
+
+/**
+ * loads font in the app using `webfontloader`
+ * @param {string} [family="Roboto"]
+ * @param {string} [link]
+ * @returns {Promise<string>} - font family name
+ * @see {@link "https://github.com/typekit/webfontloader "}
+ */
+export const loadFont = async (family = "Roboto", link) => {
+  const WebFontLoader = (await import('webfontloader')).default;
+  if (link) {
+    WebFontLoader.load({
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+    });
+  }
+  else {
+    WebFontLoader.load({
+      google: {
+        families: [family]
+      }
+    });
+  }
+  return family;
+};
+
+
+/**
+ * @param {import('stac-ts').StacCatalog | import('stac-ts').StacCollection | import('stac-ts').StacItem | null} selectedSTAC
+ * @see {@link indicator}
+ */
+export const assignIndicator = (selectedSTAC) => {
+  const code = /** @type {string | undefined} */ (selectedSTAC?.code);
+  const subcode = /** @type {string | string[] | undefined} */ (selectedSTAC?.subcode);
+
+  if (selectedSTAC?.code || selectedSTAC?.subcode) {
+    indicator.value = code ? code :
+      Array.isArray(subcode) ? subcode[0] : subcode ?? ""
+  } else {
+    indicator.value = ""
+  }
+  console.log(indicator.value,/** @type {string} */(selectedSTAC?.code)),/** @type {string[]} */(selectedSTAC?.subcode)
+}

package/core/views/Dashboard.vue

@@ -6,19 +6,22 @@
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
-import { useUpdateTheme } from "@/composables";
+import { useRouteParams, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
-import { loadFont } from '@/store/Actions'
+import { loadFont } from '@/utils'
+import { useSeoMeta } from "@unhead/vue"
 
 
-const eodashConfig = await useEodashRuntime()
+const eodash = await useEodashRuntime()
 
-const theme = useUpdateTheme('dashboardTheme', eodashConfig.brand?.theme)
+useRouteParams()
+
+const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
 
-const fontFamily = await loadFont(eodashConfig.brand?.font?.family, eodashConfig.brand?.font?.link)
+const fontFamily = await loadFont(eodash.brand?.font?.family, eodash.brand?.font?.link)
 
 const { loadSTAC } = useSTAcStore()
 await loadSTAC()
@@ -30,9 +33,15 @@ const TemplateComponent = smAndDown.value ?
 const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.vue`))
 const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
 const { mainRect } = useLayout()
+
+useSeoMeta(eodash.brand.meta ?? {})
 </script>
 
 <style scoped lang="scss">
+html {
+  overflow: hidden;
+}
+
 * {
   font-family: v-bind('fontFamily');
 }

package/core/vite-env.d.ts

@@ -11,7 +11,18 @@ declare interface Window {
 declare module '@eox/stacinfo' {
   export const EOxStacInfo: CustomElementConstructor
 }
+declare module '@eox/map' {
+  export const EOxMap: CustomElementConstructor
+}
 declare module 'user:config' {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
   export default eodash
 }
+declare module "stac-js" {
+  const STAC: any, Collection: any, Item: any
+  export { STAC, Collection, Item }
+}
+declare module "stac-js/src/http.js" {
+  const toAbsolute: any
+  export { toAbsolute }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.12",
+  "version": "5.0.0-alpha.1.14",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -17,25 +17,33 @@
   "browser": "./core/main.js",
   "scripts": {
     "dev": "npx eodash dev --entryPoint core/eodash.js",
-    "build": "npx eodash build",
+    "build": "npx eodash build --entryPoint core/eodash.js",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
     "check:lint": "eslint .",
     "check:types": "vue-tsc --noEmit --skipLibCheck",
     "preview": "vite preview",
     "lint": "eslint . --fix",
-    "docs:generate": "typedoc --plugin typedoc-plugin-markdown core/store/Types.ts --tsconfig tsconfig.json --out docs --readme none"
+    "docs:generate": "typedoc --options typedoc.config.json",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "npm run docs:generate && vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@eox/layout": "^0.1.0",
+    "@eox/map": "^1.4.0",
     "@eox/stacinfo": "^0.3.0",
     "@mdi/font": "7.0.96",
+    "@unhead/vue": "^1.8.20",
     "@vitejs/plugin-vue": "^5.0.0",
+    "@web-comp/core": "^1.0.2",
+    "@web-comp/date-picker": "^1.0.8",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
     "commander": "^12.0.0",
     "core-js": "^3.29.0",
     "pinia": "^2.0.0",
     "sass": "^1.60.0",
+    "stac-js": "^0.0.9",
     "stac-ts": "^1.0.3",
     "vite": "^5.1.5",
     "vite-plugin-vuetify": "^2.0.0",
@@ -52,10 +60,12 @@
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "typedoc": "^0.25.7",
-    "typedoc-plugin-markdown": "^3.17.1",
+    "typedoc-plugin-markdown": "^4.0.0-next.54",
+    "typedoc-plugin-vue": "^1.1.0",
+    "typedoc-vitepress-theme": "^1.0.0-next.0",
     "typescript": "^5.0.0",
     "unplugin-fonts": "^1.0.3",
-    "vite-plugin-dts": "^3.7.3",
+    "vitepress": "^1.0.0",
     "vue-eslint-parser": "^9.3.2",
     "vue-tsc": "^1.2.0"
   },

package/widgets/EodashDatePicker.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="fill-height fill-width align-center justify-center">
+    <div v-if="inline" class="fill-height fill-width">
+      <!-- <p class="text-subtitle-1 ma-1 pa-2">currently selected date is {{ currentDate }}</p> -->
+      <v-text-field base-color="primary" density="comfortable" type="date" bg-color="surface" color="primary"
+        validate-on="input" min="1980-01-01" :max="new Date().toISOString().split(`T`)[0]" label="Select Date"
+        :value="currentDate" v-model="currentDate" />
+    </div>
+
+    <v-date-picker v-else v-model="currentDate" color="primary" elevation="0" bg-color="surface" location="center"
+      class="overflow-auto fill-height fill-width" :max="new Date()" position="relative"
+      show-adjacent-months></v-date-picker>
+  </span>
+</template>
+<script setup>
+import { computed } from "vue";
+import { datetime } from "@/store/States"
+
+const props = defineProps(["inline"])
+const currentDate = computed({
+  get() {
+    return props.inline ? datetime.value.split("T")[0] : new Date(datetime.value) ?? new Date()
+  },
+  /** @param {Date | string} updatedDate */
+  set(updatedDate) {
+    if (props.inline) {
+      updatedDate = new Date(updatedDate) ?? new Date()
+    }
+    datetime.value = /** @type {Date} */ (updatedDate).toISOString()
+  }
+})
+</script>

package/widgets/EodashMap.vue

@@ -0,0 +1,54 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
+    :on-unmounted="onUnmounted" />
+</template>
+<script setup>
+import { inject, watch } from "vue";
+import { toAbsolute } from 'stac-js/src/http.js';
+import { EodashCollection } from "@/utils/eodashSTAC";
+import { eodashKey } from "@/store/Keys";
+import { mapInstance, datetime } from "@/store/States";
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+import { storeToRefs } from "pinia";
+import '@eox/map/dist/eox-map-advanced-layers-and-sources.js';
+
+const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey)
+
+const properties = {
+  class: "fill-height fill-width overflow-none",
+  center: [15, 48],
+  layers: [{ type: "Tile", source: { type: "OSM" } }],
+}
+const link = () => import("@eox/map")
+
+/** @type {import("openlayers").EventsListenerFunctionType}*/
+let handleMoveEnd;
+
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
+const onMounted = (el, store, router) => {
+  datetime.value = /** @type {string} */ (router.currentRoute.value.query["datetime"] ?? "");
+  mapInstance.value =  /** @type {any} */(el).map;
+
+  const { selectedStac } = storeToRefs(store)
+
+  watch([selectedStac, datetime], async ([updatedStac, updatedTime]) => {
+    if (updatedStac) {
+      const parentCollUrl = toAbsolute(updatedStac.links[1].href, eodashConfig.stacEndpoint);
+      const childCollUrl = toAbsolute(updatedStac.links[1].href, parentCollUrl);
+      const eodash = new EodashCollection(childCollUrl);
+      if (updatedTime) {
+        /** @type {any} */(el).layers = await eodash.createLayersJson(new Date(updatedTime));
+      } else {
+        /** @type {any} */(el).layers = await eodash.createLayersJson();
+      }
+    }
+  }, { immediate: true })
+}
+/** @type {import("@/types").WebComponentProps["onUnmounted"]} */
+const onUnmounted = (_el, _store, _router) => {
+  mapInstance.value?.un('moveend', handleMoveEnd);
+}
+
+
+
+</script>