underpost 2.8.847 → 2.8.848

package/src/client/components/core/Router.js

@@ -6,28 +6,29 @@ import { Worker } from './Worker.js';
 
 // Router
 
+const RouterEvents = {};
+const closeModalRouteChangeEvents = {};
+
 const logger = loggerFactory(import.meta);
 
-const renderTitle = (title, nameApp) => htmls('title', html`${title} | ${nameApp ?? Worker.RouterInstance.NameApp}`);
-
-const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
-  const { Routes, route, NameApp } = options;
-  let title = titleFormatted(Routes()[`/${route}`].title);
-  if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
-  renderTitle(title, NameApp);
-  {
-    const routeId = route === '' ? 'home' : route;
-    if (s(`.main-btn-${routeId}`)) {
-      if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
-      if (s(`.main-btn-${routeId}`)) s(`.main-btn-${routeId}`).classList.add(`main-btn-menu-active`);
-    }
+const sanitizeRoute = (route) =>
+  !route || route === '/' || route === `\\`
+    ? 'home'
+    : route.toLowerCase().replaceAll('/', '').replaceAll(`\\`, '').replaceAll(' ', '-');
+
+const setDocTitle = (route) => {
+  const _route = sanitizeRoute(route);
+  // logger.warn('setDocTitle', _route);
+  const title = titleFormatted(_route);
+  htmls('title', html`${title}${title.match(Worker.title.toLowerCase()) ? '' : ` | ${Worker.title}`}`);
+  if (s(`.main-btn-${_route}`)) {
+    if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
+    if (s(`.main-btn-${_route}`)) s(`.main-btn-${_route}`).classList.add(`main-btn-menu-active`);
   }
 };
 
-const RouterEvents = {};
-
-const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), NameApp: '' }) {
-  const { e, Routes, NameApp } = options;
+const Router = function (options = { Routes: () => {}, e: new PopStateEvent() }) {
+  const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
   logger.info(options);
@@ -43,7 +44,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), N
 
     if (path === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
-      setDocTitle({ Routes, route, NameApp });
+      setDocTitle(route);
       return Routes()[`/${route}`].render();
     }
   }
@@ -79,7 +80,6 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-const closeModalRouteChangeEvents = {};
 const triggerCloseModalRouteChangeEvents = (newPath) => {
   console.warn('[closeModalRouteChangeEvent]', newPath);
   for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
@@ -99,14 +99,14 @@ const closeModalRouteChangeEvent = (options = {}) => {
         newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
         triggerCloseModalRouteChangeEvents(newPath);
         setPath(newPath);
+        setDocTitle(newPath);
         Modal.setTopModalCallback(subIdModal);
-        return setDocTitle({ ...RouterInstance, route: Modal.Data[subIdModal].options.route });
       }
     }
     newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
     triggerCloseModalRouteChangeEvents(newPath);
     setPath(newPath);
-    return setDocTitle({ ...RouterInstance, route: '' });
+    setDocTitle(newPath);
   }
 };
 
@@ -121,7 +121,7 @@ const handleModalViewRoute = (options = {}) => {
 
   if (path !== newPath) {
     setPath(newPath);
-    setDocTitle({ ...RouterInstance, route });
+    setDocTitle(newPath);
   }
 };
 
@@ -135,5 +135,4 @@ export {
   closeModalRouteChangeEvent,
   handleModalViewRoute,
   closeModalRouteChangeEvents,
-  renderTitle,
 };

package/src/client/components/core/SocketIo.js

@@ -21,11 +21,11 @@ const SocketIo = {
   },
   Init: async function (options) {
     if (this.socket) this.socket.disconnect();
-    this.host = getWsBaseUrl({ wsBasePath: '' });
+    this.host = options.host ?? getWsBaseUrl({ wsBasePath: '' });
     logger.info(`ws host:`, this.host);
-    const path = getWsBasePath();
+    const path = typeof options.path === 'string' ? options.path : getWsBasePath();
     const connectOptions = {
-      path,
+      path: path === '/' ? undefined : path,
       // auth: {
       //   token: '',
       // },

package/src/client/components/core/VanillaJs.js

@@ -31,8 +31,6 @@ VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner
 
 */
 
-// Docs by https://mintlify.com
-
 /**
  * Query selector.
  *
@@ -355,7 +353,6 @@ const getBlobFromUint8ArrayFile = (data = [[]], mimetype = 'application/octet-st
  * @memberof VanillaJS
  */
 const getProxyPath = () => {
-  // warning: evaluates headers html source
   let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
   if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
   return path;

package/src/client/components/core/Worker.js

@@ -12,7 +12,8 @@ const logger = loggerFactory(import.meta);
 const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
-    logger.warn('Init');
+    Worker.title = `${s('title').textContent}`;
+    // logger.warn('Init worker', Worker.title);
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -81,6 +82,7 @@ const Worker = {
     }
     window.serviceWorkerReady = true;
   },
+
   // Get the current service worker registration.
   getRegistration: async function () {
     return await navigator.serviceWorker.getRegistration();

package/src/client/components/default/CssDefault.js

@@ -1,13 +1,27 @@
+import { subThemeManager } from '../core/Css.js';
+
+const CssCommonDefault = async () => {
+  // use  #4f46e5, #7c3aed);
+  subThemeManager.setDarkTheme('#7c3aed');
+  subThemeManager.setLightTheme('#7c3aed');
+
+  return html``;
+};
+
 const CssDefaultDark = {
   theme: 'default-dark',
   dark: true,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
 const CssDefaultLight = {
   theme: 'default-light',
   dark: false,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
-export { CssDefaultDark, CssDefaultLight };
+export { CssDefaultDark, CssCommonDefault, CssDefaultLight };

package/src/client/components/default/MenuDefault.js

@@ -1,7 +1,16 @@
 import { Account } from '../core/Account.js';
 import { BtnIcon } from '../core/BtnIcon.js';
 import { getId, newInstance } from '../core/CommonJs.js';
-import { Css, darkTheme, extractBackgroundImageUrl, ThemeEvents, Themes } from '../core/Css.js';
+import {
+  borderChar,
+  boxShadow,
+  Css,
+  darkTheme,
+  extractBackgroundImageUrl,
+  renderCssAttr,
+  ThemeEvents,
+  Themes,
+} from '../core/Css.js';
 import { EventsUI } from '../core/EventsUI.js';
 import { LogIn } from '../core/LogIn.js';
 import { LogOut } from '../core/LogOut.js';
@@ -35,6 +44,7 @@ const MenuDefault = {
     await Modal.Render({
       id: 'modal-menu',
       html: html`
+        <div class="style-lading-render"></div>
         <div class="fl menu-btn-container">
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
@@ -105,17 +115,6 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
           })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-docs hide',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-book"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('docs')}</span>`,
-            }),
-            attrs: `data-id="docs"`,
-            tabHref: `${getProxyPath()}docs`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
-          })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-recover hide',
             label: renderMenuLabel({
@@ -166,21 +165,67 @@ const MenuDefault = {
       title: NameApp,
       // titleClass: 'hide',
       titleRender: () => {
-        setTimeout(() => {
-          htmls(`.action-btn-app-icon-render`, html`APP`);
-        });
+        ThemeEvents['titleRender'] = () => {
+          const srcLogo = `${getProxyPath()}apple-touch-icon-114x114-precomposed.png`;
+
+          htmls(
+            '.action-btn-app-icon-render',
+            html`<img class="inl top-bar-app-icon ${darkTheme ? 'negative-color' : ''}" src="${srcLogo}" />`,
+          );
+        };
+        setTimeout(ThemeEvents['titleRender']);
         return '';
       },
       mode: 'slide-menu',
       RouterInstance,
       heightTopBar,
       heightBottomBar,
-      htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
+      htmlMainBody: async () => {
+        setTimeout(() => {
+          EventsUI.onClick('.get-started-button', (e) => {
+            e.preventDefault();
+            location.href = `https://www.nexodev.org/docs/?cid=src`;
+          });
+        });
+        return html`
+          <div class="landing-container">
+            <div class="content-wrapper">
+              <h1 class="animated-text">
+                <span class="greeting">Hello, World!</span>
+                <span class="subtitle">Welcome to Our Platform</span>
+              </h1>
+
+              <div class="features">
+                <div class="feature-card">
+                  <i class="icon">🚀</i>
+                  <h3>Fast & Reliable</h3>
+                  <p>Lightning-fast performance with 99.9% uptime</p>
+                </div>
+                <div class="feature-card">
+                  <i class="icon">🎨</i>
+                  <h3>Beautiful UI</h3>
+                  <p>Modern and intuitive user interface</p>
+                </div>
+                <div class="feature-card">
+                  <i class="icon">⚡</i>
+                  <h3>Powerful Features</h3>
+                  <p>Everything you need in one place</p>
+                </div>
+              </div>
+
+              <button class="cta-button get-started-button">
+                Get Started
+                <span class="button-icon">→</span>
+              </button>
+            </div>
+          </div>
+        `;
+      },
     });
 
-    ThemeEvents['ssr-background-image'] = () => {
+    ThemeEvents['main-theme-handler'] = () => {
       if (darkTheme) {
-        const backgroundImage = `${getProxyPath()}assets/background/dark.jpg`;
+        const backgroundImage = `${getProxyPath()}assets/background/dark.svg`;
         htmls(
           `.style-ssr-background-image`,
           css`
@@ -200,9 +245,186 @@ const MenuDefault = {
           `,
         );
       }
+      htmls(
+        `.style-lading-render`,
+        html` <style>
+          .landing-container {
+            min-height: calc(100vh - ${heightTopBar + heightBottomBar}px);
+            display: flex;
+            /*    align-items: center; */
+            justify-content: center;
+
+            padding: 2rem;
+            color: ${darkTheme ? '#fff' : '#333'};
+            transition: all 0.3s ease;
+          }
+
+          .content-wrapper {
+            text-align: center;
+            max-width: 1200px;
+            width: 100%;
+            padding: 2rem;
+            animation: fadeIn 1s ease-out;
+          }
+
+          .animated-text {
+            margin-bottom: 3rem;
+          }
+
+          .greeting {
+            display: block;
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, #4f46e5, #7c3aed);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: slideIn 1s ease-out;
+          }
+
+          .subtitle {
+            display: block;
+            font-size: 1.5rem;
+            color: ${darkTheme ? '#a0aec0' : '#4a5568'};
+            margin-top: 1rem;
+            opacity: 0;
+            animation: fadeInUp 0.8s ease-out 0.3s forwards;
+          }
+
+          .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin: 4rem 0;
+          }
+
+          .feature-card {
+            background: ${darkTheme ? 'rgba(255, 255, 255, 0.05)' : 'white'};
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            opacity: 0;
+            animation: fadeInUp 0.6s ease-out forwards;
+          }
+
+          .feature-card:nth-child(1) {
+            animation-delay: 0.5s;
+          }
+          .feature-card:nth-child(2) {
+            animation-delay: 0.7s;
+          }
+          .feature-card:nth-child(3) {
+            animation-delay: 0.9s;
+          }
+
+          .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+          }
+
+          .feature-card .icon {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            display: inline-block;
+          }
+
+          .feature-card h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.75rem;
+            color: ${darkTheme ? '#e2e8f0' : '#2d3748'};
+          }
+
+          .feature-card p {
+            color: ${darkTheme ? '#a0aec0' : '#4a5568'};
+            line-height: 1.6;
+          }
+
+          .cta-button {
+            background: linear-gradient(90deg, #4f46e5, #7c3aed);
+            color: white;
+            border: none;
+            padding: 1rem 2.5rem;
+            font-size: 1.1rem;
+            border-radius: 50px;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
+            opacity: 0;
+            animation: fadeIn 0.8s ease-out 1.2s forwards;
+          }
+
+          .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
+            background: linear-gradient(90deg, #3e38b4, #602bbc);
+            color: white;
+          }
+
+          .cta-button:active {
+            transform: translateY(0);
+          }
+
+          .button-icon {
+            transition: transform 0.3s ease;
+          }
+
+          .cta-button:hover .button-icon {
+            transform: translateX(4px);
+          }
+
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
+          }
+
+          @keyframes fadeInUp {
+            from {
+              opacity: 0;
+              transform: translateY(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+
+          @keyframes slideIn {
+            from {
+              opacity: 0;
+              transform: translateX(-30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+
+          @media (max-width: 768px) {
+            .greeting {
+              font-size: 2.5rem;
+            }
+
+            .subtitle {
+              font-size: 1.25rem;
+            }
+
+            .features {
+              grid-template-columns: 1fr;
+            }
+          }
+        </style>`,
+      );
     };
 
-    setTimeout(ThemeEvents['ssr-background-image']);
+    setTimeout(ThemeEvents['main-theme-handler']);
 
     this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
       animation: 150,
@@ -363,35 +585,6 @@ const MenuDefault = {
       });
     });
 
-    EventsUI.onClick(`.main-btn-docs`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-docs',
-        route: 'docs',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-book"></i>`,
-          text: Translate.Render('docs'),
-        }),
-        html: async () =>
-          await Docs.Init({
-            idModal: 'modal-docs',
-            modalOptions: {
-              barMode: undefined,
-            },
-          }),
-        handleType: 'bar',
-        observer: true,
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-        barMode,
-      });
-    });
-
     EventsUI.onClick(`.main-btn-recover`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
       await Modal.Render({

package/src/client/components/default/RoutesDefault.js

@@ -4,7 +4,7 @@ import { getProxyPath, s } from '../core/VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
-const NameApp = html`Default`;
+const NameApp = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
 
 // Router
 const RoutesDefault = () => {
@@ -15,27 +15,22 @@ const RoutesDefault = () => {
       upperCase: false,
     },
     '/home': { title: 'home', render: () => Modal.onHomeRouterEvent() },
-    '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click(), translateTitle: true },
-    '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click(), translateTitle: true },
-    '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click(), translateTitle: true },
+    '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
+    '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click() },
+    '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click() },
     '/log-out': {
       title: 'log-out',
       render: () => s(`.main-btn-log-out`).click(),
-      hideDisplay: true,
-      translateTitle: true,
     },
     '/account': {
       title: 'account',
       render: () => s(`.main-btn-account`).click(),
-      hideDisplay: true,
-      translateTitle: true,
     },
-    '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click(), translateTitle: true },
-    '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click(), translateTitle: true },
+    '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+    '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
     '/default-management': {
       title: 'default-management',
       render: () => s(`.main-btn-default-management`).click(),
-      translateTitle: true,
     },
     '/404': { title: '404 Not Found', render: () => s(`.main-btn-404`).click() },
     '/500': { title: '500 Server Error', render: () => s(`.main-btn-500`).click() },