neo.mjs 6.18.3 → 6.19.1

package/apps/portal/view/home/FooterContainer.mjs

@@ -0,0 +1,123 @@
+import Button    from '../../../../src/button/Base.mjs';
+import Component from '../../../../src/component/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
+
+/**
+ * @class Portal.view.home.FooterContainer
+ * @extends Neo.container.Base
+ */
+class FooterContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.FooterContainer'
+         * @protected
+         */
+        className: 'Portal.view.home.FooterContainer',
+        /**
+         * @member {String[]} cls=['portal-home-footer-container']
+         */
+        cls: ['portal-home-footer-container'],
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: Container,
+            cls   : ['portal-home-footer-section'],
+            layout: {ntype: 'vbox', align: 'start'},
+
+            itemDefaults: {
+                module: Button,
+                ui    : 'ghost'
+            }
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            items: [{
+                module: Component,
+                cls   : ['neo-h2'],
+                html  : 'Content',
+                tag   : 'h2'
+            }, {
+                iconCls: 'fas fa-people-group',
+                route  : '/about-us',
+                text   : 'About Us'
+            }, {
+                iconCls: 'fas fa-book',
+                route  : '/docs',
+                text   : 'API Docs'
+            }, {
+                iconCls: 'fas fa-blog',
+                route  : '/blog',
+                text   : 'Blog'
+            }, {
+                iconCls: 'fas fa-graduation-cap',
+                route  : '/learn',
+                text   : 'Learn'
+            }, {
+                iconCls: 'fas fa-handshake-angle',
+                route  : '/services',
+                text   : 'Services'
+            }]
+        }, {
+            items: [{
+                module: Component,
+                cls   : ['neo-h2'],
+                html  : 'Community',
+                tag   : 'h2'
+            }, {
+                iconCls: 'fa-brands fa-github',
+                text   : 'Contribute',
+                url    : 'https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md'
+            }, {
+                iconCls: 'fa-brands fa-github',
+                text   : 'Code of Conduct',
+                url    : 'https://github.com/neomjs/neo/blob/dev/.github/CODE_OF_CONDUCT.md'
+            }, {
+                iconCls: 'fa-brands fa-github',
+                text   : 'Report Issues',
+                url    : 'https://github.com/neomjs/neo/issues'
+            }, {
+                iconCls: 'fa-brands fa-slack',
+                text   : 'Slack',
+                url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA'
+            }, {
+                iconCls: 'fa-brands fa-discord',
+                text   : 'Discord',
+                url    : 'https://discord.gg/6p8paPq'
+            }]
+        }, {
+            items: [{
+                module: Component,
+                cls   : ['neo-h2'],
+                html  : 'Social Media',
+                tag   : 'h2'
+            }, {
+                iconCls: 'fa-brands fa-linkedin',
+                text   : 'LinkedIn',
+                url    : 'https://www.linkedin.com/company/neo-mjs/'
+            }, {
+                iconCls: 'fa-brands fa-facebook',
+                text   : 'Facebook',
+                url    : 'https://www.facebook.com/neo.mjs'
+            }, {
+                iconCls: 'fa-brands fa-x-twitter',
+                text   : 'X',
+                url    : 'https://x.com/neomjs1'
+            }]
+        }],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
+        /**
+         * @member {String} tag='footer'
+         */
+        tag: 'footer'
+    }
+}
+
+Neo.setupClass(FooterContainer);
+
+export default FooterContainer;

package/apps/portal/view/home/MainContainer.mjs

@@ -1,10 +1,10 @@
 import AfterMath from './parts/AfterMath.mjs';
 import Colors    from './parts/Colors.mjs';
 import Container from '../../../../src/container/Base.mjs';
-import Features  from './parts/Features.mjs';
 import Helix     from './parts/Helix.mjs';
 import How       from './parts/How.mjs';
 import MainNeo   from './parts/MainNeo.mjs';
+// import References from './parts/References.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
@@ -38,7 +38,8 @@ class MainContainer extends Container {
         items: [
             {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
-            Features,
+            // References,
+            // Features,
             Helix,
             Colors,
             How,

package/apps/portal/view/home/parts/AfterMath.mjs

@@ -1,4 +1,5 @@
-import BaseContainer from './BaseContainer.mjs';
+import BaseContainer   from './BaseContainer.mjs';
+import FooterContainer from '../FooterContainer.mjs';
 
 /**
  * @class Portal.view.home.parts.AfterMath
@@ -11,6 +12,10 @@ class AfterMath extends BaseContainer {
          * @protected
          */
         className: 'Portal.view.home.parts.AfterMath',
+        /**
+         * @member {String[]} cls=['portal-home-aftermath']
+         */
+        cls: ['portal-home-aftermath'],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
          */
@@ -19,39 +24,27 @@ class AfterMath extends BaseContainer {
          * @member {Object[]} items
          */
         items: [{
-            ntype: 'container',
-            flex : 1
+            flex: 1
         }, {
-            cls : 'neo-h1',
+            cls : ['neo-h1'],
             flex: 'none',
             html: 'Additional Stuff',
-            vdom: {tag: 'h1'}
+            tag : 'h1'
         }, {
-            cls : 'neo-h2',
+            cls : ['neo-h2'],
             flex: 'none',
             html: 'More to come here',
-            vdom: {tag: 'h2'}
+            tag : 'h2'
         }, {
-            cls : 'neo-content',
+            cls : ['neo-content'],
             flex: 'none',
-            html: 'Neo uses several cores to run the application. See the spinner on the page?',
-            vdom: {tag: 'p'}
+            html: 'Lorem Ipsum',
+            tag : 'p'
         }, {
-            ntype: 'container',
-            flex : 1
+            flex: 1
         }, {
-            ntype : 'container',
-            cls   : 'home-footer',
-            height: '40%',
-            html  : 'This is the footer',
-            vdom  : {tag: 'footer'},
-
-            style : { // todo: css
-                background: 'black',
-                color     : 'white',
-                height    : '40%',
-                padding   : '15px'
-            }
+            module: FooterContainer,
+            height: '35%'
         }]
     }
 }

package/apps/portal/view/home/parts/Colors.mjs

@@ -28,12 +28,12 @@ class Colors extends BaseContainer {
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
-                cls : 'neo-h1',
+                cls : ['neo-h1'],
                 flex: 'none',
                 html: 'Amazing Potential',
                 vdom: {tag: 'h1'}
             }, {
-                cls : 'neo-h2',
+                cls : ['neo-h2'],
                 flex: 'none',
                 html: 'Socket Data',
                 vdom: {tag: 'h2'}

package/apps/portal/view/home/parts/How.mjs

@@ -27,17 +27,17 @@ class How extends BaseContainer {
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
-                cls : 'neo-h1',
+                cls : ['neo-h1'],
                 flex: 'none',
                 html: 'How?',
                 vdom: {tag: 'h1'}
             }, {
-                cls : 'neo-h2',
+                cls : ['neo-h2'],
                 flex: 'none',
                 html: 'How Does Neo.mjs Do It?',
                 vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-h3',
+                cls : ['neo-h3'],
                 flex: 'none',
                 vdom: {tag: 'p'},
                 html: [

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -28,19 +28,18 @@ class MainNeo extends BaseContainer {
         }, {
             cls : ['neo-h1'],
             flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces',
+            html: 'Harness the Power of Multi-Threading for Ultra-Fast Frontends',
             vdom: {tag: 'h1'}
         }, {
             ntype: 'container',
             cls  : ['button-group'],
             flex : 'none',
-
             items: [{
-                module : Button,
-                cls    : ['get-started-button'],
-                text   : 'Get started',
-                flex   : 'none',
-                route : '/learn'
+                module: Button,
+                cls   : ['get-started-button'],
+                flex  : 'none',
+                route : '/learn',
+                text  : 'Get started'
             }, {
                 module: Button,
                 cls   : ['neo-github'],

package/apps/portal/view/home/parts/References.mjs

@@ -0,0 +1,88 @@
+import BaseContainer from './BaseContainer.mjs';
+import Carousel      from "../../../../../src/component/Carousel.mjs";
+
+/**
+ * @class Portal.view.home.parts.References
+ * @extends Portal.view.home.parts.BaseContainer
+ */
+class References extends BaseContainer {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.References'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.References',
+        /**
+         * @member {String} cls='portal-references'
+         */
+        cls: 'portal-references',
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype: 'container',
+            flex : '1 1 100%'
+        }, {
+            cls : 'neo-h1',
+            flex: 'none',
+            html: 'References',
+            vdom: {tag: 'h1'}
+        }, {
+            cls : 'neo-h2',
+            flex: 'none',
+            html: 'What people think about Neo',
+            vdom: {tag: 'h2'}
+        }, {
+            module: Carousel,
+            // will automatically change to the next extry every 5500 ms
+            // if not set or 0, this will show arrows to navigate
+            autoRun: 5500,
+            store  : {
+                model: {
+                    fields: [
+                        // @formatter:off
+                        {name: 'quote',      type: 'String'},
+                        {name: 'publisher',  type: 'String'},
+                        {name: 'date',       type: 'String'}
+                        // @formatter:on
+                    ]
+                },
+                data : [{
+                    quote    : 'Neo has inspired me to try out new ways and pursue more modern approaches.',
+                    publisher: 'Torsten Dinkheller',
+                    date     : 'Mai 2024'
+                }, {
+                    quote    : 'With Neo, I no longer lose sight of important customers. I can finally use 2 monitors for my work.',
+                    publisher: 'Pat Wemerson',
+                    date     : 'June 2024'
+                }, {
+                    quote    : 'Up-to-dateness is everything in my job, so Neo\'s data processing speed is just right for me.',
+                    publisher: 'Texas Ranger',
+                    date     : 'Juli 2024'
+                }, {
+                    quote    : 'Starting a project with Neo has brought me back up to speed. Always one step ahead of the browser.',
+                    publisher: 'Future Developer',
+                    date     : 'April 2024'
+                }]
+            },
+            // custom item cls
+            itemCls: 'example-carousel-item',
+            // each item will be created like the itemTpl structure
+            itemTpl: data => [{
+                cls : 'neo-quote',
+                html: data.quote
+            }, {
+                cls : 'neo-details',
+                html: `${data.publisher} - ${data.date}`
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(References);
+
+export default References;

package/apps/portal/view/learn/MainContainer.mjs

@@ -18,9 +18,9 @@ class MainContainer extends Container {
          */
         className: 'Portal.view.learn.MainContainer',
         /**
-         * @member {String[]} cls=['learnneo-maincontainer']
+         * @member {String[]} cls=['portal-learn-maincontainer']
          */
-        cls: ['learnneo-maincontainer'],
+        cls: ['portal-learn-maincontainer'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
@@ -34,6 +34,7 @@ class MainContainer extends Container {
             cls     : ['sidenav-container'],
             layout  : 'fit',
             minWidth: 350,
+            tag     :'aside',
             width   : 350,
 
             items: [{

package/apps/portal/view/learn/MainContainerController.mjs

@@ -16,6 +16,7 @@ class MainContainerController extends Controller {
          * @member {Object} routes
          */
         routes: {
+            '/learn'         : 'onRouteDefault',
             '/learn/{itemId}': 'onRouteLearnItem'
         }
     }
@@ -130,6 +131,16 @@ class MainContainerController extends Controller {
     /**
      * @param {Object} data
      */
+    onRouteDefault(data) {
+        if (!this.getModel().data.currentPageRecord) {
+            this.onRouteLearnItem({itemId: 'WhyNeo-Intro'})
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.itemId
+     */
     onRouteLearnItem(data) {
         let model = this.getModel(),
             store = model.getStore('contentTree');

package/apps/portal/view/learn/PageContainer.mjs

@@ -14,10 +14,10 @@ class PageContainer extends Container {
          */
         className: 'Portal.view.learn.PageContainer',
         /**
-         * @member {String[]} baseCls=['learn-content-container','neo-container']
+         * @member {String[]} baseCls=['portal-learn-page-container','neo-container']
          * @protected
          */
-        baseCls: ['learn-content-container', 'neo-container'],
+        baseCls: ['portal-learn-page-container', 'neo-container'],
         /**
          * @member {Object} bind
          */
@@ -38,7 +38,9 @@ class PageContainer extends Container {
         }, {
             module: Toolbar,
             flex  : 'none',
-            cls   : 'content-bottom-toolbar',
+            cls   : ['content-bottom-toolbar'],
+            layout: 'grid',
+            tag   : 'nav',
             items : [{
                 cls      : ['content-bottom-toolbar-previous'],
                 handler  : 'onPreviousPageButtonClick',

package/apps/portal/view/services/Component.mjs

@@ -0,0 +1,73 @@
+import BaseComponent from '../../../../src/component/Base.mjs';
+
+/**
+ * @class Portal.view.services.Component
+ * @extends Neo.component.Base
+ */
+class Component extends BaseComponent {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.services.Component'
+         * @protected
+         */
+        className: 'Portal.view.services.Component',
+        /**
+         * @member {String[]} cls=['portal-services-component']
+         */
+        cls: ['portal-services-component'],
+        /**
+         * @member {Object} vdom
+         */
+        vdom:
+        {cn: [
+            {tag: 'h1', html: 'Services'},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Weekly Workshops'},
+                {tag: 'p',  html: [
+                    'We are doing weekly workshops on Thursdays 17:30 CEST (11:30am EST) for 60m free of charge.</br>',
+                    'Ping us inside our ',
+                    '<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack Channel</a>, ',
+                    'in case you would like to join us.'
+                ].join('')},
+            ]},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Professional Trainings'},
+                {tag: 'p',  html: [
+                    'While we do have a self-study based Learning Section online, you can also hire us ',
+                    'in case you prefer an Instructor-led Training for bringing your team up to speed.'
+                ].join('')},
+                {tag: 'ul', cn: [
+                    {tag: 'li', html: 'One week packed with 40h of intense training.'},
+                    {tag: 'li', html: 'Including hands-on Labs'},
+                    {tag: 'li', html: '6 - 12 attendees'},
+                    {tag: 'li', html: 'While Remote Trainings are possible, we strongly recommend On-Site Trainings instead.'},
+                ]},
+                {tag: 'p',  html: [
+                    'Feel free to send us an <a href="mailto:trainings@neomjs.com">Email</a> to plan your training timeframe.',
+                ].join('')},
+            ]},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Professional Services'},
+                {tag: 'p',  html: [
+                    'We can help you to ensure your Neo.mjs based projects run successfully.',
+                ].join('')},
+                {tag: 'ul', cn: [
+                    {tag: 'li', html: 'Feasibility Analysis: Is Neo.mjs a good fit for your project needs?'},
+                    {tag: 'li', html: 'Creating a Neo.mjs PoC which matches your specific needs'},
+                    {tag: 'li', html: 'Code Reviews'},
+                    {tag: 'li', html: 'Frontend-Architecture Guidance'},
+                    {tag: 'li', html: 'Application & Framework Debugging'},
+                    {tag: 'li', html: 'Creation of Custom Components, Design Themes & new Features'},
+                    {tag: 'li', html: 'Hands-On Application Development Support'}
+                ]},
+                {tag: 'p',  html: [
+                    'In case you need help, send us an <a href="mailto:services@neomjs.com">Email</a>.',
+                ].join('')}
+            ]}
+        ]}
+    }
+}
+
+Neo.setupClass(Component);
+
+export default Component;

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Jul 12, 2024",
+        "id"          : 59,
+        "image"       : "transform_dom_tree.png",
+        "name"        : "A blazing-fast algorithm to transform one DOM tree into another",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/a-blazing-fast-algorithm-to-transform-one-dom-tree-into-another-4ff9c934bc49?source=friends_link&sk=f1de46dbd464095b8d0b0a271644cb75"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/examples/ServiceWorker.mjs

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

package/examples/component/carousel/MainContainer.mjs

@@ -22,21 +22,21 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'autoRun',
             listeners: {change: me.onConfigChange.bind(me, 'autoRun')}
         }, {
-            module    :  RangeField,
-            labelText : 'height',
-            listeners : {change: me.onConfigChange.bind(me, 'height')},
-            maxValue  : 800,
-            minValue  : 200,
-            stepSize  : 1,
-            value     : me.exampleComponent.height
+            module   : RangeField,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 800,
+            minValue : 200,
+            stepSize : 1,
+            value    : me.exampleComponent.height
         }, {
-            module    :  RangeField,
-            labelText : 'width',
-            listeners : {change: me.onConfigChange.bind(me, 'width')},
-            maxValue  : 800,
-            minValue  : 200,
-            stepSize  : 1,
-            value     : me.exampleComponent.width
+            module   : RangeField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 800,
+            minValue : 200,
+            stepSize : 1,
+            value    : me.exampleComponent.width
         }];
     }
 
@@ -48,33 +48,42 @@ class MainContainer extends ConfigurationViewport {
             // if not set or 0, this will show arrows to navigate
             // cannot be changed after created
             autoRun: 5500,
-            store: {
-                data: [{
-                    "quote": "We love the German inspired dishes on the menu",
-                    "publisher": "Trip Advisor",
-                    "date": "Dezember 2020"
-                },{
-                    "quote": "Everything about this place was excellent, from start to finish",
-                    "publisher": "Trip Advisor",
-                    "date": "Dezember 2021"
-                },{
-                    "quote": "We had three courses and everything was great",
-                    "publisher": "Trip Advisor",
-                    "date": "September 2020"
-                },{
-                    "quote": "Excellent Food, Wine and Service",
-                    "publisher": "Best Food",
-                    "date": "August 2020"
+            store  : {
+                model: {
+                    fields: [
+                        // @formatter:off
+                        {name: 'quote',      type: 'String'},
+                        {name: 'publisher',  type: 'String'},
+                        {name: 'date',       type: 'String'}
+                        // @formatter:on
+                    ]
+                },
+                data : [{
+                    quote    : 'We love the German inspired dishes on the menu',
+                    publisher: 'Trip Advisor',
+                    date     : 'Dezember 2020'
+                }, {
+                    quote    : 'Everything about this place was excellent, from start to finish',
+                    publisher: 'Trip Advisor',
+                    date     : 'Dezember 2021'
+                }, {
+                    quote    : 'We had three courses and everything was great',
+                    publisher: 'Trip Advisor',
+                    date     : 'September 2020'
+                }, {
+                    quote    : 'Excellent Food, Wine and Service',
+                    publisher: 'Best Food',
+                    date     : 'August 2020'
                 }]
             },
             // custom item cls
             itemCls: 'example-carousel-item',
             // each item will be created like the itemTpl structure
             itemTpl: data => [{
-                cls: 'example-quote',
+                cls : 'example-quote',
                 html: data.quote
             }, {
-                cls: 'example-details',
+                cls : 'example-details',
                 html: `${data.publisher} - ${data.date}`
             }]
         });