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

package/bin/serverConfig.js

@@ -127,13 +127,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/core/eodash.js

@@ -25,7 +25,8 @@ const eodash = reactive({
         secondary: '#00417044',
         surface: "#f0f0f0f0",
       }
-    }
+    },
+    meta: {}
   },
   template: {
     background: {

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/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
@@ -315,7 +324,6 @@ export interface EodashStore {
     */
     mapInstance: Ref<Map | null>
   }
-  // consider removing the actions ?
   actions: {
     loadFont: (family?: string, link?: string) => Promise<string>;
   };
@@ -327,23 +335,52 @@ 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
 }
-
+/**
+ * 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>) => Eodash

package/core/views/Dashboard.vue

@@ -11,14 +11,15 @@ import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
 import { loadFont } from '@/store/Actions'
+import { useSeoMeta } from "@unhead/vue"
 
 
-const eodashConfig = await useEodashRuntime()
+const eodash = await useEodashRuntime()
 
-const theme = useUpdateTheme('dashboardTheme', eodashConfig.brand?.theme)
+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,6 +31,8 @@ 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">

package/core/vite-env.d.ts

@@ -15,3 +15,15 @@ declare module 'user:config' {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
   export default eodash
 }
+declare module '@eox/chart' {
+  export const EOxChart: CustomElementConstructor
+}
+declare module '@eox/layercontrol' {
+  export const EOxLayerControl: CustomElementConstructor
+}
+declare module '@eox/timecontrol' {
+  export const EOxTimeControl: CustomElementConstructor
+}
+declare module '@eox/jsonform' {
+  export const EOxJSONForm: CustomElementConstructor
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.12",
+  "version": "5.0.0-alpha.1.13",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -17,18 +17,22 @@
   "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/stacinfo": "^0.3.0",
     "@mdi/font": "7.0.96",
+    "@unhead/vue": "^1.8.20",
     "@vitejs/plugin-vue": "^5.0.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
     "axios": "^1.6.2",
@@ -52,10 +56,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"
   },