underpost 2.8.84 → 2.8.86

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.
  *
@@ -149,8 +147,40 @@ const pasteData = () => new Promise((resolve) => navigator.clipboard.readText().
  * @memberof VanillaJS
  */
 const setPath = (path = '/', stateStorage = {}, title = '') => {
-  if (window.location.pathname === path || window.location.pathname === `${path}/`) return;
-  return history.pushState(stateStorage, title, path);
+  if (!path) path = '/';
+
+  const [inputPath, inputSearch] = `${path}`.split('?');
+
+  let sanitizedPath = (inputPath[0] !== '/' ? `/${inputPath}` : inputPath)
+    .trim()
+    .replaceAll('//', '/')
+    .replaceAll(`\\`, '/');
+
+  if (sanitizedPath.length > 1 && sanitizedPath[sanitizedPath.length - 1] === '/')
+    sanitizedPath = sanitizedPath.slice(0, -1);
+
+  if (window.location.pathname === sanitizedPath && (!inputSearch || inputSearch === location.search)) {
+    console.warn('Prevent overwriting same path', {
+      inputPath: inputPath,
+      inputSearch: inputSearch,
+      sanitizedPath: sanitizedPath,
+      currentLocationSearch: location.search,
+      currentLocationHash: location.hash,
+    });
+    return;
+  }
+  console.warn('Set path', {
+    inputPath: inputPath,
+    inputSearch: inputSearch,
+    sanitizedPath: sanitizedPath,
+    currentLocationSearch: location.search,
+    currentLocationHash: location.hash,
+  });
+  return history.pushState(
+    stateStorage,
+    title,
+    `${sanitizedPath}${inputSearch ? `?${inputSearch}` : ''}${location.hash ?? ''}`,
+  );
 };
 
 /**
@@ -355,7 +385,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;
@@ -428,6 +457,19 @@ const getLang = () =>
     .slice(0, 2)
     .toLowerCase();
 
+function hexToRgbA(hex) {
+  let c;
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('');
+    if (c.length == 3) {
+      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+    }
+    c = '0x' + c.join('');
+    return [(c >> 16) & 255, (c >> 8) & 255, c & 255];
+  }
+  throw new Error('Invalid Hex');
+}
+
 export {
   s,
   htmls,
@@ -457,4 +499,5 @@ export {
   isDevInstance,
   getDataFromInputFile,
   getLang,
+  hexToRgbA,
 };

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, 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';
@@ -26,7 +35,7 @@ const MenuDefault = {
     const id = getId(this.Data, 'menu-');
     this.Data[id] = {};
     const RouterInstance = RouterDefault();
-    const { NameApp } = RouterInstance;
+    const { BannerAppTemplate } = RouterInstance;
     const { barConfig } = await Themes[Css.currentTheme]();
     const heightTopBar = 50;
     const heightBottomBar = 50;
@@ -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({
@@ -163,21 +162,270 @@ const MenuDefault = {
         </div>
       `,
       barConfig: newInstance(barConfig),
-      title: NameApp,
+      title: BannerAppTemplate,
       // 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['main-theme-handler'] = () => {
+      if (darkTheme) {
+        const backgroundImage = `${getProxyPath()}assets/background/dark.svg`;
+        htmls(
+          `.style-ssr-background-image`,
+          css`
+            .ssr-background-image {
+              background-image: url('${backgroundImage}');
+            }
+          `,
+        );
+      } else {
+        const backgroundImage = `${getProxyPath()}assets/background/white0-min.jpg`;
+        htmls(
+          `.style-ssr-background-image`,
+          css`
+            .ssr-background-image {
+              background-image: url('${backgroundImage}');
+            }
+          `,
+        );
+      }
+      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['main-theme-handler']);
+
     this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
       animation: 150,
       group: `menu-sortable`,
@@ -337,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 BannerAppTemplate = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
 
 // Router
 const RoutesDefault = () => {
@@ -12,30 +12,24 @@ const RoutesDefault = () => {
     '/': {
       title: 'Home',
       render: () => Modal.onHomeRouterEvent(),
-      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() },
@@ -45,7 +39,7 @@ const RoutesDefault = () => {
 window.Routes = RoutesDefault;
 
 const RouterDefault = () => {
-  return { Routes: RoutesDefault, NameApp };
+  return { Routes: RoutesDefault, BannerAppTemplate };
 };
 
-export { RoutesDefault, RouterDefault, NameApp };
+export { RoutesDefault, RouterDefault, BannerAppTemplate };