neo.mjs 6.17.0 → 6.17.2

package/apps/website/data/docs.json

@@ -1,6 +1,6 @@
 [
     {
-        "browsers"    : ["Chrome (including more examples)"],
+        "browsers"    : ["Chrome", "Edge", "Firefox", "Safari</br>(including more examples)"],
         "environments": ["Desktop"],
         "id"          : 1,
         "image"       : "devmode/docs.png",
@@ -26,4 +26,4 @@
         "sourceUrl"   : "https://github.com/neomjs/neo/tree/dev/docs",
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/docs/index.html"
     }
-]
+]

package/apps/website/view/blog/List.mjs

@@ -52,7 +52,7 @@ class List extends BaseList {
         value.on({
             load : 'onBlogPostStoreLoad',
             scope: this.getController()
-        });
+        })
     }
 
     /**
@@ -65,30 +65,28 @@ class List extends BaseList {
             basePath = '../../../../resources/website';
 
             if (Neo.config.environment !== 'development') {
-                basePath = '../../' + basePath;
+                basePath = '../../' + basePath
             }
         } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website';
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website'
         }
 
         const vdomCn = [
-            {cls: ['content'], cn: [
-                {cls: ['neo-relative'], cn: [
-                    {cls: ['neo-full-size', 'preview-image'], style: {
-                        backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`}
-                    },
-                    {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
-                        {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
-                            {flag: 'name', html: record.name.replace(List.nameRegEx, "$1")}
-                        ]},
-                        {cls: ['neo-top-20'], cn: [
-                            {tag: 'img', cls: ['neo-user-image'], src: `${basePath}/blogAuthor/${record.authorImage}`},
-                            {cls: ['neo-inner-content'], cn: [
-                                {cls: ['neo-inner-details'], flag: 'author', cn: [
-                                    {tag: 'span', cls: ['neo-bold'], html: record.author}
-                                ]},
-                                {cls: ['neo-inner-details'], html: record.date}
-                            ]}
+            {cls: ['content', 'neo-relative'], cn: [
+                {cls: ['neo-full-size', 'preview-image'], style: {
+                    backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`}
+                },
+                {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
+                    {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
+                        {flag: 'name', html: record.name.replace(List.nameRegEx, "$1")}
+                    ]},
+                    {cls: ['neo-top-20'], cn: [
+                        {tag: 'img', cls: ['neo-user-image'], src: `${basePath}/blogAuthor/${record.authorImage}`},
+                        {cls: ['neo-inner-content'], cn: [
+                            {cls: ['neo-inner-details'], flag: 'author', cn: [
+                                {tag: 'span', cls: ['neo-bold'], html: record.author}
+                            ]},
+                            {cls: ['neo-inner-details'], html: record.date}
                         ]}
                     ]}
                 ]}
@@ -99,19 +97,19 @@ class List extends BaseList {
             VDomUtil.getByFlag(vdomCn[0], 'author').cn.push(
                 {vtype: 'text', html : ' in '},
                 {tag: 'span', cls: ['neo-bold'], html: record.publisher}
-            );
+            )
         }
 
         if (record.selectedInto.length > 0) {
-            vdomCn[0].cn[0].cn.splice(1, 0,
+            vdomCn[0].cn.splice(1, 0,
                 {cls: ['neo-absolute', 'neo-item-top-position'], cn: [
                     {html: `Officially selected by ${record.provider} into`},
                     {cls: ['neo-bold'], html: record.selectedInto.join('</br>')}
                 ]}
-            );
+            )
         }
 
-        return vdomCn;
+        return vdomCn
     }
 
     /**
@@ -135,7 +133,7 @@ class List extends BaseList {
 
             if (emptyValue) {
                 itemName.html = name;
-                delete item.style.display;
+                delete item.style.display
             } else {
                 itemName.html = name.replace(valueRegEx, match => {
                     hasMatch = true;
@@ -143,28 +141,28 @@ class List extends BaseList {
                 });
 
                 if (hasMatch) {
-                    delete item.style.display;
+                    delete item.style.display
                 } else {
-                    item.style.display = 'none';
+                    item.style.display = 'none'
                 }
             }
         });
 
-        me.update();
+        me.update()
     }
 
     /**
      * @returns {Object}
      */
     getVdomRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
      * @returns {Object}
      */
     getVnodeRoot() {
-        return this.vnode.childNodes[0];
+        return this.vnode.childNodes[0]
     }
 }
 

package/apps/website/view/examples/List.mjs

@@ -77,47 +77,45 @@ class List extends BaseList {
             basePath = '../../../../resources/website/examples';
 
             if (Neo.config.environment !== 'development') {
-                basePath = '../../' + basePath;
+                basePath = '../../' + basePath
             }
         } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website/examples';
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website/examples'
         }
 
         return [
-            {cls: ['content'], cn: [
+            {cls: ['content', 'neo-relative'], cn: [
                 {cls: ['neo-full-size', 'preview-image'], style: {
                     backgroundImage: `url('${basePath}/${record.image}'), linear-gradient(#777, #333)`}
                 },
-                {cls: ['neo-relative'], cn: [
-                    {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
-                        {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
-                            {html: record.name.replace(List.nameRegEx, "$1")}
-                        ]},
-                        {cls: ['neo-top-20'], cn: [
-                            {tag: 'a', cls: ['fab fa-github', 'neo-github-image'], href: record.sourceUrl, target: '_blank'},
-                            {cls: ['neo-inner-content'], cn: [
-                                {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
-                                {cls: ['neo-inner-details'], html: record.environments.join(', ')}
-                            ]}
+                {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
+                    {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
+                        {html: record.name.replace(List.nameRegEx, "$1")}
+                    ]},
+                    {cls: ['neo-top-20'], cn: [
+                        {tag: 'a', cls: ['fab fa-github', 'neo-github-image'], href: record.sourceUrl, target: '_blank'},
+                        {cls: ['neo-inner-content'], cn: [
+                            {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
+                            {cls: ['neo-inner-details'], html: record.environments.join(', ')}
                         ]}
                     ]}
                 ]}
             ]}
-        ];
+        ]
     }
 
     /**
      * @returns {Object}
      */
     getVdomRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
      * @returns {Object}
      */
     getVnodeRoot() {
-        return this.vnode.childNodes[0];
+        return this.vnode.childNodes[0]
     }
 }
 

package/buildScripts/webpack/webpack.server.config.mjs

@@ -2,6 +2,9 @@ export default {
     mode: 'production',
 
     devServer: {
-        static: process.cwd()
+        static: {
+            directory: process.cwd(),
+            watch    : false
+        }
     }
 };

package/docs/app/view/classdetails/MembersList.mjs

@@ -246,6 +246,10 @@ class MembersList extends Base {
 
             // methods
             if (item.params && item.kind !== 'event') {
+                if (item.$kind === 'property') {console.log(item);
+                    headerText = 'get ' + headerText
+                }
+
                 headerText += ('(' + item.params.reduce((result, param) => {
                     if (param.name.indexOf('.') < 0) {
                         if (param.optional) {

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.15.11'
+         * @member {String} version='6.17.2'
          */
-        version: '6.15.11'
+        version: '6.17.2'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.17.0",
+    "version": "6.17.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -41,14 +41,14 @@
     "bugs": {
         "url": "https://github.com/neomjs/neo/issues"
     },
-    "homepage": "https://neomjs.github.io/pages/",
+    "homepage": "https://neomjs.com/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.1.0",
-        "cssnano": "^7.0.2",
+        "cssnano": "^7.0.3",
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -61,7 +61,7 @@
         "sass": "^1.77.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
-        "webpack": "^5.92.0",
+        "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/images/Neo_Logo_Blue.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 157 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <path d="M8.841,127.508L33.676,144.928L33.675,105.744L33.675,94.343L43.023,100.871L112.335,149.272L135.026,135.569L8.841,46.576L8.841,127.508Z" style="fill:white;fill-rule:nonzero;stroke:rgb(139,166,255);stroke-width:11.89px;"/>
+    <path d="M144.867,30.661L120.032,13.241L120.033,52.425L120.034,63.826L110.686,57.298L41.374,8.897L18.682,22.6L144.867,111.593L144.867,30.661Z" style="fill:white;fill-rule:nonzero;stroke:rgb(139,166,255);stroke-width:11.89px;"/>
+</svg>

package/resources/images/Neo_Logo_Text.svg

@@ -0,0 +1,5 @@
+<svg width="696" height="157" viewBox="0 0 696 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M210.202 131.678V34.1934H230.813L271.199 104.661V34.1934H288.329V131.678H267.718L227.331 61.3498V131.678H210.202ZM335.196 133.767C314.585 133.767 301.077 119.283 301.077 97.2797C301.077 75.5546 314.725 61.6283 334.361 61.6283C354.972 61.6283 367.505 74.9976 367.505 96.3048C367.505 98.3938 367.505 100.622 367.227 103.407H317.371C318.206 113.713 324.752 119.84 335.336 119.84C342.438 119.84 347.173 116.777 349.401 111.902H366.391C362.213 125.132 351.769 133.767 335.196 133.767ZM317.371 90.595H350.794V90.1773C350.794 81.2644 344.945 74.9976 334.361 74.9976C324.334 74.9976 317.928 81.2644 317.371 90.595ZM409.655 133.767C388.766 133.767 374.283 119.283 374.283 97.6975C374.283 76.1117 388.766 61.6283 409.655 61.6283C430.684 61.6283 445.168 76.1117 445.168 97.6975C445.168 119.283 430.684 133.767 409.655 133.767ZM391.412 97.6975C391.412 110.231 398.654 118.726 409.655 118.726C420.657 118.726 428.038 110.231 428.038 97.6975C428.038 85.1638 420.657 76.6687 409.655 76.6687C398.654 76.6687 391.412 85.1638 391.412 97.6975ZM456.426 131.678V110.51H476.062V131.678H456.426ZM491.419 131.678V63.7172H506.042V71.2374C509.941 64.5528 515.93 61.6283 523.868 61.6283C532.781 61.6283 539.326 65.8062 542.668 72.9086C547.403 65.2491 554.227 61.6283 562.444 61.6283C578.18 61.6283 587.233 71.516 587.233 88.6454V131.678H570.521V89.7595C570.521 81.2644 566.761 76.6687 559.38 76.6687C552.277 76.6687 547.542 82.1 547.542 90.1773V131.678H530.97V89.7595C530.97 81.2644 527.21 76.6687 519.829 76.6687C512.866 76.6687 507.992 82.2392 507.992 90.1773V131.678H491.419ZM588.801 156.745V141.844H598.271C601.753 141.844 602.867 140.312 602.867 135.856V63.7172H619.439V137.945C619.439 151.035 611.919 156.745 600.082 156.745H588.801ZM602.171 51.8798V34.8897H619.996V51.8798H602.171ZM660.026 133.767C641.504 133.767 630.363 126.246 629.666 111.902H646.796C647.353 117.612 652.227 120.397 660.583 120.397C668.103 120.397 672.699 117.194 672.699 112.181C672.699 107.864 669.357 105.635 663.368 105.078L652.506 103.964C639.833 102.572 631.895 95.0515 631.895 83.4926C631.895 69.9841 642.757 61.6283 660.026 61.6283C677.155 61.6283 688.018 68.87 688.853 83.0748H672.281C672.003 77.6436 667.268 75.1368 659.747 75.1368C652.645 75.1368 648.189 77.9221 648.189 82.657C648.189 86.6957 651.392 88.9239 658.215 89.7595L669.217 91.0128C682.03 92.5447 689.41 100.065 689.41 111.345C689.41 124.993 678.13 133.767 660.026 133.767Z" fill="black"/>
+<path d="M8.8412 127.508L33.6763 144.928L33.6753 105.744L33.675 94.3431L43.0227 100.871L112.335 149.272L135.026 135.569L8.8412 46.5755L8.8412 127.508Z" stroke="#8BA6FF" stroke-width="11.8883"/>
+<path d="M144.867 30.6613L120.032 13.2409L120.033 52.4246L120.034 63.8259L110.686 57.2982L41.3738 8.89651L18.6823 22.6004L144.867 111.593L144.867 30.6613Z" stroke="#8BA6FF" stroke-width="11.8883"/>
+</svg>

package/resources/images/Neo_Logo_White.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 157 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <path d="M8.841,127.508L33.676,144.928L33.675,105.744L33.675,94.343L43.023,100.871L112.335,149.272L135.026,135.569L8.841,46.576L8.841,127.508Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke:white;stroke-width:11.89px;"/>
+    <path d="M144.867,30.661L120.032,13.241L120.033,52.425L120.034,63.826L110.686,57.298L41.374,8.897L18.682,22.6L144.867,111.593L144.867,30.661Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke:white;stroke-width:11.89px;"/>
+</svg>

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -1,25 +1,197 @@
 .learnneo-header-toolbar {
-    
-    border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid #f2f2f2;
 
-    .logo {
-        margin-left: 1em;
-    }
+  .logo {
+    margin-left: 1em;
+  }
+
+  .neo-button {
+    margin-left: 10px;
 
-    .neo-button {
-        margin-left: 10px;
+    &.no-text {
+      margin-left: 0;
+      width: 1.2em;
 
-        &.no-text {
-            margin-left: 0;
-            width      : 1.2em;
+      &.github-button {
+        margin-left: 5em;
+      }
 
-            &.github-button {
-                margin-left: 5em;
-            }
+      .neo-button-glyph {
+        font-size: 24px;
+      }
+    }
 
-            .neo-button-glyph {
-                font-size: 24px;
-            }
-        }
+    .neo-button-glyph {
+      &.neo-logo-blue {
+        background-image: url("../../../../../../../resources/images/Neo_Logo_Blue.svg");
+        height: 24px;
+        width: 24px;
+      }
     }
+  }
+
+  .separate-bar {
+    position: absolute;
+    right: 20px;
+    top: 60px;
+    width: 40px;
+
+    z-index: 9;
+    transform: rotate(0);
+    animation: fade-in-animation 200ms linear;
+  }
+
+  // find parallel class hide-sidebar
+  &:has(+div .hide-sidebar) .separate-bar {
+    animation: fade-animation 200ms linear forwards;
+  }
+}
+
+.vector {
+  animation: fade-and-scale-animation auto linear;
+  animation-timeline: --page-scroll;
+}
+
+//@scroll-timeline --page-scroll {
+//    source: auto;
+//    orientation: vertical;
+//    scroll-offsets: 0%, 100%;
+//}
+
+
+/* Style and position the progress bar */
+#progress {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  height: 2px;
+  width: 100%;
+  background: var(--button-background-color);
+  background: var(--sem-color-surface-primary-background);
+
+  scale: 0 1;
+  transform-origin: left;
+
+  /* Attach the animation using an anonymous Scroll Progress Timeline */
+  animation: grow-progress linear;
+  animation-timeline: --page-scroll;
+}
+
+@keyframes grow-progress {
+  to { scale: 1 1; }
+}
+
+.hello-world {
+  animation-timeline: view(block 100% -500%);
+
+  animation-name: appear-animation;
+  animation-fill-mode: both;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-timing-function: linear;
+}
+
+@keyframes appear-animation {
+  0% {
+    transform: translateX(-400%);
+    opacity: 0;
+  }
+  90% {
+    opacity: .3;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.cool-stuff {
+  animation-timeline: view(block 100% -500%);
+
+  animation-name: appear-cool-stuff;
+  animation-fill-mode: both;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-timing-function: linear;
+}
+
+@keyframes appear-cool-stuff {
+  0% {
+    transform: translateX(400%);
+    opacity: 0;
+  }
+  90% {
+    opacity: .3;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+
+//.page {
+//  scroll-timeline: --page block;
+//}
+
+.portal-home-maincontainer {
+  scroll-timeline: --page-scroll block;
+}
+
+@keyframes rotateAnimation {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes fade-and-scale-animation {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  12%, 100% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+@keyframes fade-in-animation {
+  from { opacity: 0; right: -10px}
+  to   { opacity: 1; right: 20px;}
+}
+@keyframes fade-animation {
+  from { opacity: 1; right: 20px;}
+  to   { opacity: 0; right: -10px}
+}
+
+.button-group {
+  overflow: visible;
+}
+
+.get-started-button {
+  opacity: 0;
+  animation: show-get-started-button 400ms 1300ms linear forwards;
+}
+
+.neo-github {
+  opacity: 0;
+  animation: show-github-button 600ms 1150ms linear forwards;
+}
+
+@keyframes show-get-started-button {
+  from {
+    opacity: 0;
+    transform: translate(70px, 30px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes show-github-button {
+  from {
+    opacity: 0;
+    transform: translate(-70px, 50px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
 }

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -1,24 +1,50 @@
-.newwebsite-viewport {
-    gap       : 48px;
-    overflow-y: scroll;
-    padding   : 5%;
-}
+.portal-home-maincontainer {
+    overflow-x      : hidden!important;
+    scroll-behavior : smooth;
+    scroll-snap-type: y mandatory;
 
-.button-group {
-    gap: 8px !important;
-}
+    .page {
+        min-height       : 100%;
+        scroll-snap-align: center;
 
-.neo-h1 {
-    font-size  : 48px;
-    font-weight: 600;
-    text-align : center;
-}
+        .neo-h1 {
+            font-size: min(max(5.5vw, 30px), 64px);
+        }
+
+        .neo-h2 {
+            font-size: min(max(3.5vw, 24px), 44px);
+        }
+
+        .neo-content {
+            font-size: min(max(2.3vw, 16px), 30px);
+        }
+
+        .page-live-preview {
+            margin: 0;
+        }
+    }
+
+    .button-group {
+        display       : flex !important;
+        flex-direction: row-reverse !important;
+        gap           : 8px !important;
+    }
+
+    .neo-h1 {
+        font-size    : 32px;
+        font-weight  : 600;
+        text-align   : center;
+        margin-bottom: 1.25em;
+    }
 
-.vector {
-    background-image   : url("../../../../../../../resources/images/Neo_Vector.svg");
-    background-position: center center;
-    background-repeat  : no-repeat;
-    background-size    : contain;
-    height             : 150px;
-    width              : 100%;
+    .vector {
+        background-image   : url("../../../../../../../resources/images/Neo_Logo_Text.svg");
+        background-position: center center;
+        background-repeat  : no-repeat;
+        background-size    : contain;
+        height             : 10vW;
+        margin             : 0 0 3rem 0;
+        max-height         : 130px;
+        width              : 100%;
+    }
 }

package/resources/scss/src/apps/portal/home/parts/Features.scss

@@ -0,0 +1,3 @@
+.portal-home-features {
+    padding: 3em;
+}