c0ckp1t 1.0.11 → 1.0.13

package/core/GlobalStore.mjs

@@ -8,8 +8,8 @@ import {markRaw, reactive, watch, defineAsyncComponent, createApp} from 'vue'
 import * as VueRouter from 'vue-router'
 import {getLogger} from 'Logging';
 import {transformRoutes, loadModule, options} from "VueUtils";
-import {validateIslandConfig, findHostnamePortProtocol, defaultVueComponents} from 'CoreUtils'
-import {substrAfterFirstSlash} from "JsUtils";
+import {validateIslandConfig, findHostnamePortProtocol, validateAppConfig} from 'CoreUtils'
+import {substrAfterFirstSlash, extractLastPath} from "JsUtils";
 
 import IslandDefault from 'IslandDefault'
 import Island from 'Island'
@@ -46,6 +46,7 @@ export const store = reactive({
     name: "C0ckp1t",
     id: LOG_HEADER,
     config: null,
+    appEndpoint: "",
     serverInfo: findHostnamePortProtocol(),
 
     // ________________________________________________________________________________
@@ -217,8 +218,15 @@ export const api = {
     },
 
     routeByEndpoint: async (endpoint) => {
-        logger.info(`[routeByEndpoint] - endpoint=${endpoint}`)
+        const path = endpoint.split("/")
+        logger.info(`[routeByEndpoint] - endpoint=${endpoint}, path=${path}`)
         try {
+            if(path.length > 3) {
+                extractLastPath(endpoint)
+                document.title = `${path[2]}-${path[3]}`
+            } else if (path.length === 3) {
+                document.title = `${path[2]}`
+            }
             await store.router.push(endpoint)
         } catch (err) {
             console.error("Failed to navigate:", err)
@@ -283,7 +291,7 @@ export const api = {
             return null
         }
 
-        validateIslandConfig(config)
+        validateAppConfig(config)
         //________________________________________________________________________________
         // Create Vue Application
         //________________________________________________________________________________
@@ -301,21 +309,21 @@ export const api = {
         //________________________________________________________________________________
         // Create Default Island
         //________________________________________________________________________________
+        config.routes ??= []
         if(config.routes.length === 0) {
             logger.warn(`config.routes is empty`)
         }
-        config.appEndpoint = config.appEndpoint ?? ""
+        store.appEndpoint = config.appEndpoint ?? ""
         store.defaultInstanceId = config.instanceId ?? "default"
         store.name = config.appName ?? "C0ckp1t"
         store.config = config
         const vueRouterModeIsHash = config.vueRouterModeIsHash ?? true
 
+        // Load default island
         const decoratedIslandConfig = {
             ...config,
             SERVER_API_URL: store.serverInfo.serverUrl,
         }
-
-        // Load default island first
         const islandDefault = new IslandDefault(api, decoratedIslandConfig)
         store.r[islandDefault.instanceId] = islandDefault
         await islandDefault.init()
@@ -328,12 +336,12 @@ export const api = {
         store.router = markRaw(router)
 
         // Main entry point for the app, this will load the main application
-        app.component('app-main', createAsyncComponent(() => api.loadModule(`${config.appEndpoint}/core/PageMain.vue`)))
+        app.component('app-main', createAsyncComponent(() => api.loadModule(config.appMainComponent)))
 
         // Configure C0ckp1t Vue Components
-        const vueComponents = defaultVueComponents()
+        const vueComponents = config.components ?? {}
         for (const [key, value] of Object.entries(vueComponents)) {
-            app.component(key, defineAsyncComponent(() => api.loadModule(`${config.appEndpoint}${value}`)))
+            app.component(key, defineAsyncComponent(() => api.loadModule(`${value.path}`)))
         }
 
         app.use(router)

package/core/Island.mjs

@@ -310,7 +310,7 @@ export default class Island {
     // HTTP
     // ________________________________________________________________________________
     resolver = async (endpoint, type) => {
-        this.logger.info(`[resolver] -  endpoint=${endpoint}`)
+        this.logger.debug(`[resolver] -  endpoint=${endpoint}`)
 
         if (endpoint.startsWith('/c0ckp1t/')) {
             const endpointAdjusted = endpoint.replace("/c0ckp1t/", `/`)
@@ -419,7 +419,7 @@ export default class Island {
 // HELPER METHODS
 // ________________________________________________________________________________
 function adjustNode(node) {
-    node._expanded = true;
+    node._expanded ??= true;
     node.children.forEach((child) => {
         adjustNode(child);
     });

package/core/IslandDefault.mjs

@@ -210,7 +210,7 @@ export default class IslandDefault {
 // HELPER METHODS
 // ________________________________________________________________________________
 function adjustNode(node) {
-    node._expanded = true;
+    node._expanded ??= true;
     node.children.forEach((child) => {
         adjustNode(child);
     });

package/core/PageMain.vue

@@ -13,7 +13,7 @@ import {getLogger} from "Logging";
 import {api as apiTheme, store as storeTheme} from "./Theme.mjs"
 import PageFallback from "./PageFallback.vue"
 import MainOffcanvas from "./main-offcanvas.vue";
-
+import NotifyToast from "./notify/toast.vue";
 
 // ________________________________________________________________________________
 // LOGGING
@@ -29,8 +29,12 @@ logger.debug("[INIT]")
 const local = reactive({
   id: LOG_HEADER,
   toggle: false,
-  items: [
-  ]
+  items: [ ],
+
+  navCloseLogo: storeMain.config?.navCloseLogo ?? "./img/logo_v1.svg",
+  navOpenLogo: storeMain.config?.navOpenLogo ?? "./img/logo_v2.svg",
+  navHasSearch: storeMain.config?.navHasSearch ?? true,
+  navHasThemeSel: storeMain.config?.navHasThemeSel ?? true,
 })
 
 
@@ -95,8 +99,8 @@ const mainContentStyle = computed(() => ({
 
         <a class="navbar-brand" @click.prevent="apiMain.selectLogo()" >
           <span  class="me-2 text-warning" v-if="storeMain.showSidebar"><<</span>
-          <img src="./img/logo_v1.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="!storeMain.showSidebar">
-          <img src="./img/logo_v2.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-else>
+          <img :src="local.navCloseLogo" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="!storeMain.showSidebar && local.navCloseLogo">
+          <img :src="local.navOpenLogo" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="storeMain.showSidebar && local.navOpenLogo">
           <span class="text-warning fw-bold ms-2 brand-text">{{ storeMain.name }}</span>
         </a>
 
@@ -116,13 +120,13 @@ const mainContentStyle = computed(() => ({
           </ul>
 
           <form class="d-flex">
-            <input class="form-control me-2" type="search" placeholder="Search" v-model="local.searchQuery">
-            <button class="btn btn-outline-secondary me-2" type="button" @click="storeTheme.theme = storeTheme.theme === 'dark' ? 'light' : 'dark'" title="Toggle theme">
-              <i class="fa-solid" :class="storeTheme.theme === 'dark' ? 'fa-sun' : 'fa-moon'"></i>
-            </button>
-            <button class="btn btn-outline-secondary" type="submit">
+            <input v-if="local.navHasSearch" class="form-control me-2" type="search" placeholder="Search" v-model="local.searchQuery">
+            <button v-if="local.navHasSearch" class="btn btn-outline-secondary" type="submit">
               <i class="fa-solid fa-search"></i>
             </button>
+            <button v-if="local.navHasThemeSel" class="btn btn-outline-secondary me-2" type="button" @click="storeTheme.theme = storeTheme.theme === 'dark' ? 'light' : 'dark'" title="Toggle theme">
+              <i class="fa-solid" :class="storeTheme.theme === 'dark' ? 'fa-sun' : 'fa-moon'"></i>
+            </button>
           </form>
 
         </div>
@@ -135,6 +139,7 @@ const mainContentStyle = computed(() => ({
             <RouterView/>
     </main>
 
+    <NotifyToast/>
     <!-- ==========  FOOTER ========== -->
     <footer class="container-fluid p-4 bg-body-tertiary border-top">
       <div class="row mt-4 align-items-center justify-content-center">

package/core/VueUtils.mjs

@@ -38,11 +38,18 @@ logger.debug("INIT")
 logger.info(`vue3-sfc-loader vue version ${vueVersion}`)
 logger.info(`vue.js version ${Vue.version}`)
 
-
+function validateVueSFC(text) {
+    if(text.startsWith("<!DOCTYPE html")) {
+       throw Error(`[validateVueSFC] - Invalid SFC content: starts with !DOCTYPE html - likely an error page or non-SFC content`)
+    }
+   // if(!text.includes("<template>") || !text.includes("<script>")) { }
+}
 //________________________________________________________________________________
 // LOCAL APP SFC LOADER OPTIONS
 //________________________________________________________________________________
+// Configuration passed to vue3-sfc-loader's loadModule
 const options =  {
+    devMode: false,
     // separate, custom cache of raw source text
     sourceCode: {},
     // ADD THIS:
@@ -68,37 +75,37 @@ const options =  {
         GlobalStore: GlobalStore,
     },
 
-    async getFile(path, type) {
-        if(!type) {
-            type = path.substring(path.lastIndexOf('.'));
-        }
+    // Step 1. Fetch the file content
+    async getFile(path) {
 
         const instanceId = JsUtils.substrAfterFirstSlash(path)
 
         let res = null
         if(sourceCode[path]) {
-            logger.debug(`[getFile] - cached - ${path} - type=${type}`)
+            logger.debug(`[getFile] - cached - ${path}`)
             const cached = sourceCode[path];
             res = new Response(cached.code, {status: 200, statusText: 'OK'});
         } else if (path.startsWith("http") || path.startsWith("HTTP")) {
-            logger.debug(`[getFile] - default - ${path} - ${type}`)
-            res = await GlobalStore.store.r["default"].resolver(path, type)
+            logger.debug(`[getFile] - http - ${path}`)
+            res = await GlobalStore.store.r["default"].resolver(path)
         } else if (GlobalStore.store.r[instanceId]) {
-            logger.debug(`[getFile] - instance - ${path} - ${type}`)
+            logger.debug(`[getFile] - instance - ${path}`)
             const pathAfterInstanceId = path.replace("/" + instanceId, "")
-            res = await GlobalStore.store.r[instanceId].resolver(pathAfterInstanceId, type)
+            res = await GlobalStore.store.r[instanceId].resolver(pathAfterInstanceId)
         } else {
-            logger.debug(`[getFile] - default - ${path} - ${type}`)
-            res = await GlobalStore.store.r["default"].resolver(path, type)
+            logger.debug(`[getFile] - default - ${path}`)
+            res = await GlobalStore.store.r["default"].resolver(path)
         }
 
         return {
-            // type: type,
             getContentData: asBinary => {
                 if (asBinary) {
                     return res.arrayBuffer();
                 } else {
                     return res.text().then(text => {
+                        if(path.endsWith(".vue")) {
+                            validateVueSFC(text)
+                        }
                         cacheSourceCode(path, text);
                         return text;
                     });
@@ -114,7 +121,10 @@ const options =  {
         document.head.insertBefore(style, ref);
     },
 
+    // Step 2. Handle the module request
+    //  built-in handling for .vue, .js, .mjs, .css (return undefined)
     handleModule: async function (type, getContentData, path, options) {
+        // type=.vue  - path=/core/PageMain.vue
         logger.debug(`[handleModule] - type=${type}  - path=${path}`)
 
         // Handle esm.sh external modules (used by code-mirror.vue)

package/core/img/logo_v2.svg

@@ -58,7 +58,7 @@
        cy="129.01283"
        cx="97.967125"
        id="head"
-       style="fill:#ffdf11;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583;stroke-opacity:1" />
+       style="fill:#c4a900;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583;stroke-opacity:1" />
     <path
        id="lefEye2"
        d="M 62.802996,126.14677 C 83.82199,101.23898 83.964978,101.06953 83.964978,101.06953"
@@ -86,9 +86,9 @@
        height="8.6218405"
        width="19.292933"
        id="neck1"
-       style="fill:#ffdf11;fill-opacity:1;stroke:#000000;stroke-width:0.264951;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+       style="fill:#c4a900;fill-opacity:1;stroke:#000000;stroke-width:0.264951;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <rect
-       style="fill:#ffdf11;fill-opacity:1;stroke:#000000;stroke-width:0.222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#c4a900;fill-opacity:1;stroke:#000000;stroke-width:0.222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="neck2"
        width="12.705888"
        height="6.1260414"

package/core/notify/toast.vue

@@ -136,7 +136,7 @@ onMounted(async () => { await init() })
 
 <style scoped>
 .toast {
-    background-color: rgba(255,255,255,.95);
+
 }
 
 /** NOTIFY */

package/core/pages/frontend/ComponentsAdv.vue

@@ -13,8 +13,6 @@ import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, w
 import {getLogger} from "Logging";
 // !# C0CKP1T_START imports
 import ComponentView from "./component-view.vue";
-import XTerminal from "/components/xterminal.vue";
-import CodeMirror from "/components/code-mirror.vue";
 // !# C0CKP1T_END imports
 
 // ________________________________________________________________________________

package/core/pages/frontend/ComponentsBasic.vue

@@ -215,6 +215,10 @@ onMounted(async () => {
       <x-dropdown k="Route Type: " :items="local.myDropDownItems" v-model="local.myDropDown"></x-dropdown>
     </ComponentView>
 
+    <ComponentView name="x-dropdown2" url="/components/xdropdown2.vue">
+      <x-dropdown2 k="Route Type: " :items="local.myDropDownItems" v-model="local.myDropDown"></x-dropdown2>
+    </ComponentView>
+
     <ComponentView name="x-json" url="/components/xjson.vue">
       <x-json :obj="local.myTableData"></x-json>
       <div class="mt-2">

package/index-cdn.html

@@ -47,9 +47,9 @@
 </head>
 
 <body class="main-body">
-  <div id="app-default">
-    <app-main></app-main>
-  </div>
+<div id="app-default">
+  <app-main></app-main>
+</div>
 </body>
 
 <!-- =================== SCRIPTS ===================  -->
@@ -57,12 +57,22 @@
 <script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/loglevel-plugin-prefix.min.js"></script>
 
 <script type="module">
-import {init as initLogger} from 'Logging';
-import {api as apiMain} from 'GlobalStore'
-import DefaultConfig from 'https://cdn.jsdelivr.net/npm/c0ckp1t@latest/CdnConfig.mjs'
+  import {init as initLogger} from 'Logging';
+  import {api as apiMain} from 'GlobalStore'
+  import { createConfig } from 'https://cdn.jsdelivr.net/npm/c0ckp1t@latest/Config.mjs'
 
-initLogger(DefaultConfig)
-await apiMain.init("app-default", DefaultConfig)
+  const config = createConfig({
+    appEndpoint: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    routePrefix: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    componentPrefix: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    appMainComponent: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/PageMain.vue",
+    defaultLoggerLevels: {
+      "VueUtils.mjs": "INFO"
+    }
+  })
+  initLogger(config)
+  console.log(config)
+  await apiMain.init("app-default", config)
 
 </script>
 

package/index.html

@@ -57,15 +57,18 @@
 
 <script type="module">
 import {init as initLogger} from 'Logging';
-import {api as apiMain} from 'GlobalStore'
-import DefaultConfig from './DefaultConfig.mjs'
+import {api as apiMain} from 'GlobalStore';
+// Application Configuration
+import { createConfig } from './Config.mjs';
+// Islands
 import ConfigAdmin from './ConfigAdmin.mjs'
 import ConfigAnonymous from './ConfigAnonymous.mjs'
-import ConfigDemo from './c0ckp1t-demo/C0ckp1tConfig.mjs'
-
-initLogger(DefaultConfig)
-await apiMain.init("app-default", DefaultConfig)
-
+import ConfigDemo from './c0ckp1t-demo/Config.mjs'
+// Create Application
+const config = createConfig();
+initLogger(config)
+await apiMain.init("app-default", config)
+// Create Islands
 await apiMain.registerIsland( ConfigAdmin)
 await apiMain.registerIsland(ConfigAnonymous)
 await apiMain.registerIsland(ConfigDemo)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c0ckp1t",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A Vue 3 zero-build web dashboard framework with Islands architecture, WebSocket backends, and reusable UI components",
   "type": "module",
   "license": "Apache-2.0",
@@ -26,8 +26,7 @@
     "index-cdn.html",
     "index.html",
     "style.css",
-    "DefaultConfig.mjs",
-    "CdnConfig.mjs",
+    "Config.mjs",
     "favicon.ico",
     "favicon-32x32.png",
     "favicon-64x64.png",
@@ -36,8 +35,7 @@
     "components/",
     "js_ext/",
     "css/",
-    "c0ckp1t-demo/",
-    "docs/"
+    "c0ckp1t-demo/"
   ],
   "scripts": {
     "lint": "eslint .",

package/CdnConfig.mjs

@@ -1,177 +0,0 @@
-/**
- * Default Configuration for a C0ckp1t Application
- */
-// ________________________________________________________________________________
-// Properties
-// ________________________________________________________________________________
-// XMLHttpRequest from a different domain cannot set cookie values for their own
-// domain unless withCredentials is set to true before making the request.
-// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
-const WITH_CREDENTIALS = false
-// Note: VueUtils requires this to be 'default'
-const instanceId =  "default";
-// Used for requestion app components and files
-const appEndpoint = "https://cdn.jsdelivr.net/npm/c0ckp1t@latest";
-
-// ________________________________________________________________________________
-// GLOBAL CONSTANTS
-// ________________________________________________________________________________
-export default {
-    isDev: true,
-    WITH_CREDENTIALS: WITH_CREDENTIALS,
-
-    // logger config
-    defaultLogLevel: "INFO",
-    defaultLoggerLevels: {
-        "GlobalStore.mjs": "INFO",
-        "VueUtils.mjs": "INFO",
-        "Connection.mjs": "INFO",
-        "default": "INFO",
-        "anonymous": "INFO",
-        "demo": "INFO"
-    },
-
-    instanceId: instanceId,
-    type: "LOCAL",
-    appName:  "C0ckp1t App",
-    appEndpoint: appEndpoint,
-
-    // This creates the navigation tree
-    root: {
-        icon: "fa-house",
-        depth: 0,
-        endpoint: "/",
-        isLeaf: false,
-        isRoot: true,
-        name: "",
-        path: [],
-        children: [
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/connections`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["connections"],
-                name: "Connections",
-                children: []
-            },
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/cache`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["cache"],
-                name: "Cache",
-                children: []
-            },
-            {
-                icon: "fa-network-wired",
-                depth: 1,
-                endpoint: `/${instanceId}/traffic`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["traffic"],
-                name: "Traffic",
-                children: []
-            },
-            {
-                icon: "fa-bell",
-                depth: 1,
-                endpoint: `/${instanceId}/notifies`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["notifies"],
-                name: "Notifies",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/docs`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["docs"],
-                name: "Documentation",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/components`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["components"],
-                name: "Components",
-                children: [
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/bootstrap`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["bootstrap"],
-                        name: "Bootstrap",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/basic`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["basic"],
-                        name: "Basic",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/advanced`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["advanced"],
-                        name: "Advanced",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/theme`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["theme"],
-                        name: "Theme",
-                        children: []
-                    },
-                ]
-            }
-        ]
-    },
-
-    // This is used to create routes for the vue router
-    routes: [
-        { path: '/', name: 'root', children: [
-                {path: '', redirect: '/default/docs/Introduction.md'},
-                {path: `${instanceId}`, children :[
-                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                        {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
-                        {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
-                        {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
-                        {path: 'cache', location: `${appEndpoint}/core/pages/Cache.vue`},
-                        {path: 'traffic', location: `${appEndpoint}/core/pages/Traffic.vue`},
-                        {path: 'notifies', location: `${appEndpoint}/core/pages/Notifies.vue`},
-                        {path: 'components', location: `${appEndpoint}/core/pages/frontend/Components.vue`, children: [
-                                {path: 'basic', location: `${appEndpoint}/core/pages/frontend/ComponentsBasic.vue`},
-                                {path: 'advanced', location: `${appEndpoint}/core/pages/frontend/ComponentsAdv.vue`},
-                                {path: 'theme', location: `${appEndpoint}/core/pages/frontend/Theme.vue`},
-                                {path: 'bootstrap', location: `${appEndpoint}/core/pages/frontend/Bootstrap.vue`},
-                            ]},
-                    ]}
-            ] },
-        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
-
-    ]
-
-
-} // end of Constants
-