neo.mjs 6.12.1 → 6.13.0

package/apps/portal/model/ContentSection.mjs

@@ -0,0 +1,32 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Portal.model.ContentSection
+ * @extends Neo.data.Model
+ */
+class ContentSection extends Model {
+    static config = {
+        /**
+         * @member {String} className='Portal.model.ContentSection'
+         * @protected
+         */
+        className: 'Portal.model.ContentSection',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'name',
+            type: 'String'
+        }, {
+            name: 'sourceId',
+            type: 'String'
+        }]
+    }
+}
+
+Neo.setupClass(ContentSection);
+
+export default ContentSection;

package/apps/portal/neo-config.json

@@ -3,6 +3,7 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Navigator", "Stylesheet", "Markdown"],
-    "themes"          : ["neo-theme-neo-light"]
+    "mainThreadAddons": ["DragDrop", "HighlightJS", "IntersectionObserver", "MonacoEditor", "Navigator", "ResizeObserver", "Stylesheet"],
+    "themes"          : ["neo-theme-neo-light", "neo-theme-light", "neo-theme-dark"],
+    "useSharedWorkers": true
 }

package/apps/portal/store/BlogPosts.mjs

@@ -38,6 +38,6 @@ class BlogPosts extends Store {
     }
 }
 
-Neo.applyClassConfig(BlogPosts);
+Neo.setupClass(BlogPosts);
 
 export default BlogPosts;

package/apps/portal/store/Content.mjs

@@ -2,70 +2,23 @@ import ContentModel from '../model/Content.mjs';
 import Store        from '../../../src/data/Store.mjs';
 
 /**
- * @class LearnNeo.store.Content
+ * @class Portal.store.Content
  * @extends Neo.data.Store
  */
 class Content extends Store {
     static config = {
         /**
-         * @member {String} className='LearnNeo.store.Content'
+         * @member {String} className='Portal.store.Content'
          * @protected
          */
-        className: 'LearnNeo.store.Content',
+        className: 'Portal.store.Content',
         /**
          * @member {Neo.data.Model} model=ContentModel
          */
         model: ContentModel
     }
-
-    xonConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        // Neo.Main.getByPath({path: 'location.search'})
-        //     .then(data => {
-        //         const searchString = data?.substr(1) || '';
-        //         const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-        //         this.deck = search.deck || 'learnneo';
-        //         this.url = `${this.contentPath}/tree.json`;
-        //         this.load();
-        //         // this.doLoadStore();
-        //         console.log(search);
-        //     });
-
-    }
-    xload() {
-        this.model = ContentModel;
-        Neo.Main.getByPath({path: 'location.search'})
-            .then(data => {
-                const searchString = data?.substr(1) || '';
-                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-                this.deck = search.deck || 'learnneo';
-                this.url = `${this.contentPath}/tree.json`;
-                // this.load();
-                super.load();
-                console.log(search);
-            });
-    }
-
-    get contentPath() {
-        return `../../../resources/data/deck/${this.deck}`;
-    }
-    doLoadStore() {
-        debugger;
-        const me = this;
-        Neo.Xhr.promiseJson({
-            url: `${this.contentPath}/tree.json`
-        }).then(data => {
-            // TODO: Tree lists should do this themselves when their store is loaded.
-            me.data = data.json.data;
-            // me.createItems(null, me.getListItemsRoot(), 0);
-            // me.update();
-        })
-    }
 }
 
-Neo.applyClassConfig(Content);
+Neo.setupClass(Content);
 
 export default Content;

package/apps/portal/store/ContentSections.mjs

@@ -0,0 +1,24 @@
+import ContentSectionModel from '../model/ContentSection.mjs';
+import Store               from '../../../src/data/Store.mjs';
+
+/**
+ * @class Portal.store.ContentSections
+ * @extends Neo.data.Store
+ */
+class ContentSections extends Store {
+    static config = {
+        /**
+         * @member {String} className='Portal.store.ContentSections'
+         * @protected
+         */
+        className: 'Portal.store.ContentSections',
+        /**
+         * @member {Neo.data.Model} model=ContentSectionModel
+         */
+        model: ContentSectionModel
+    }
+}
+
+Neo.setupClass(ContentSections);
+
+export default ContentSections;

package/apps/portal/view/HeaderToolbar.mjs

@@ -1,5 +1,4 @@
-import Base  from '../../../src/toolbar/Base.mjs';
-import Label from '../../../src/component/Label.mjs';
+import Base from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class Portal.view.HeaderToolbar
@@ -38,13 +37,14 @@ class HeaderToolbar extends Base {
             reference: 'blog-header-button',
             route    : '/blog'
         }, {
-            text: 'Docs'
+            text : 'Docs',
+            route: '/docs'
         }, {
             cls    : ['github-button'],
             iconCls: 'fa-brands fa-github',
             url    : 'https://github.com/neomjs/neo',
             tooltip: {
-                html: 'GitHub',
+                html     : 'GitHub',
                 showDelay: '0',
                 hideDelay: '0'
             }
@@ -52,7 +52,15 @@ class HeaderToolbar extends Base {
             iconCls: 'fa-brands fa-slack',
             url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
             tooltip: {
-                html: 'Join Slack',
+                html     : 'Join Slack',
+                showDelay: '0',
+                hideDelay: '0'
+            }
+        }, {
+            iconCls: 'fa-brands fa-discord',
+            url    : 'https://discord.gg/6p8paPq',
+            tooltip: {
+                html     : 'Join Discord',
                 showDelay: '0',
                 hideDelay: '0'
             }
@@ -60,6 +68,6 @@ class HeaderToolbar extends Base {
     }
 }
 
-Neo.applyClassConfig(HeaderToolbar);
+Neo.setupClass(HeaderToolbar);
 
 export default HeaderToolbar;

package/apps/portal/view/Viewport.mjs

@@ -32,7 +32,8 @@ class Viewport extends BaseViewport {
             items: [
                 {module: () => import('./home/MainContainer.mjs')},
                 {module: () => import('./learn/MainContainer.mjs')},
-                {module: () => import('./blog/Container.mjs')}
+                {module: () => import('./blog/Container.mjs')},
+                {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
         }]
     }
@@ -54,6 +55,6 @@ class Viewport extends BaseViewport {
     }
 }
 
-Neo.applyClassConfig(Viewport);
+Neo.setupClass(Viewport);
 
 export default Viewport;

package/apps/portal/view/ViewportController.mjs

@@ -20,6 +20,7 @@ class ViewportController extends Controller {
          */
         routes: {
             '/blog' : 'onBlogRoute',
+            '/docs' : 'onDocsRoute',
             '/home' : 'onHomeRoute',
             '/learn': 'onLearnRoute'
         }
@@ -48,6 +49,15 @@ class ViewportController extends Controller {
         this.getReference('blog-list').filterItems(data)
     }
 
+    /**
+     * @param {Object} params
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onDocsRoute(params, value, oldValue) {
+        this.setMainContentIndex(3)
+    }
+
     /**
      * @param {Object} params
      * @param {Object} value
@@ -74,6 +84,6 @@ class ViewportController extends Controller {
     }
 }
 
-Neo.applyClassConfig(ViewportController);
+Neo.setupClass(ViewportController);
 
 export default ViewportController;

package/apps/portal/view/blog/Container.mjs

@@ -45,6 +45,6 @@ class Container extends BaseContainer {
     }
 }
 
-Neo.applyClassConfig(Container);
+Neo.setupClass(Container);
 
 export default Container;

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

@@ -168,6 +168,6 @@ class List extends BaseList {
     }
 }
 
-Neo.applyClassConfig(List);
+Neo.setupClass(List);
 
 export default List;

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

@@ -53,6 +53,6 @@ class Viewport extends Container {
     }
 }
 
-Neo.applyClassConfig(Viewport);
+Neo.setupClass(Viewport);
 
 export default Viewport;

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

@@ -1,5 +1,3 @@
-import ContentStore from '../../store/Content.mjs'
-import LivePreview from './LivePreview.mjs';
 import TreeList from '../../../../src/tree/List.mjs';
 
 /**
@@ -13,187 +11,76 @@ class ContentTreeList extends TreeList {
          * @protected
          */
         className: 'Portal.view.learn.ContentTreeList',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            contentPath      : data => data.contentPath,
+            currentPageRecord: data => data.currentPageRecord,
+            store            : 'stores.contentTree'
+        },
         /**
          * @member {String[]} cls=['topics-tree']
          */
         cls: ['topics-tree'],
         /**
-         * @member {Boolean} showCollapseExpandAllIcons=false
+         * @member {String|null} contentPath_=null
          */
-        showCollapseExpandAllIcons: false,
+        contentPath_: null,
         /**
-         * @member {Neo.data.Store} store=ContentStore
+         * @member {Object} currentPageRecord=null
          */
-        store: ContentStore
-    }
-
-    get contentPath() {
-        return `../../resources/data/deck/${this.deck}`
+        currentPageRecord_: null,
+        /**
+         * @member {Boolean} showCollapseExpandAllIcons=false
+         */
+        showCollapseExpandAllIcons: false
     }
 
     /**
-     * @param {Object} record
-     * @returns {Promise<void>}
+     * Triggered after the contentPath config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
      */
-    async doFetchContent(record) {
-        let me = this,
-            path = `${me.contentPath}`;
-
-        path += record.path ? `/pages/${record.path}` : `/p/${record.id}.md`;
-
-        if (record.isLeaf && path) {
-            const data = await fetch(path);
-            const content = await data.text();
-            let modifiedHtml = await this.highlightPreContent(content);
-
-            // Replace <pre data-neo></neo> with <div id='neo-preview-1'/>
-            // and creaet a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            let neoDivs = {};
-
-            modifiedHtml = this.extractNeoContent(modifiedHtml, neoDivs);
-
-
-
-            await Neo.main.addon.Markdown.markdownToHtml(modifiedHtml)
-                .then(
-                    html => {
-                        html = me.insertLabDivs(html);
-                        me.fire('contentChange', {
-                            component: me,
-                            html,
-                            record,
-                            isLab: record.name?.startsWith('Lab:')
-                        });
-                    },
-                    () => me.fire('contentChange', {component: me}));
-            await this.timeout(50); // Do we need this?
-            Object.keys(neoDivs).forEach(key => {
-                // Create LivePreview for each iteration, set value to neoDivs[key]
-                let foo = Neo.create(LivePreview, {
-                    value: neoDivs[key],
-                    parentId: key,
-                    appName: this.appName
-                })
-            });
-        }
-    }
-
-    extractNeoContent(htmlString, map) {
-        // 1. Replace <pre data-neo> with <div id='neo-preview-2'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-
-        // Define a regular expression to match <pre data-javascript> tags
-        const preRegex = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
-
-        let count = 0;
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
-            const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
-            map[key] = preContent;
-            return `<div id="${key}"></div>`;
-        });
-        return updatedHtml;
-
+    afterSetContentPath(value, oldValue) {
+        value && this.doLoadStore()
     }
 
-    insertLabDivs(inputString) {
-        // Replace <!-- lab --> with <div class="lab">
-        let modifiedString = inputString.replace(/<!--\s*lab\s*-->/g, '<div class="lab">');
-
-        // Replace <!-- /lab --> with </div>
-        modifiedString = modifiedString.replace(/<!--\s*\/lab\s*-->/g, '</div>');
-
-        return modifiedString;
-
-    }
-
-    async highlightPreContent(htmlString) {
-        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
-        // 2. When all promises are resolved, use their values to replace the tokens.
-
-        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
-
-        // Define a regular expression to match <pre data-javascript> tags
-        const preRegex = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g;
-
-        // Create an array to store promises for each replacement
-        const replacementPromises = [];
-        let count = 0;
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
-            const token = `__NEO-PRE-TOKEN-${++count}__`;
-            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
-            return token;
-        });
-
-        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
-
-        // Wait for all replacement promises to resolve
-        return Promise.all(replacementPromises)
-            .then(replacements => {
-                // Replace each token with the resolved content
-                replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
-
-                // Return the final updated HTML string
-                return updatedHtml;
-            });
-    }
-
-    getHighlightPromise(preContent, token, id) {
-        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
-        return Neo.main.addon.HighlightJS.highlightAuto(preContent)
-            .then(highlight => ({after: `<pre data-javascript id="${id}">${highlight.value}</pre>`, token}));
+    /**
+     * Triggered after the currentPageRecord config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    afterSetCurrentPageRecord(value, oldValue) {
+        value && this.selectionModel.select(value)
     }
 
     /**
      *
      */
     doLoadStore() {
-        const me = this;
+        let me = this;
+
         Neo.Xhr.promiseJson({
-            url: `${this.contentPath}/t.json`
+            url: `${me.contentPath}/tree.json`
         }).then(data => {
             // TODO: Tree lists should do this themselves when their store is loaded.
             me.store.data = data.json.data;
+            me.getModel().data.countPages = me.store.getCount();
             me.createItems(null, me.getListItemsRoot(), 0);
             me.update()
         })
     }
 
-    /**
-     * todo: createItems() should get triggered onStoreLoad()
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.main.addon.HighlightJS.loadLibrary({
-            appName: me.appName,
-            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
-            themePath: '../../docs/resources/highlightjs-custom-github-theme.css'
-        });
-
-        Neo.Main.getByPath({path: 'location.search'})
-            .then(data => {
-                const searchString = data?.substr(1) || '';
-                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-                me.deck = search.deck || 'learnneo';
-
-                me.doLoadStore();
-            })
-    }
-
     /**
      * @param {Object} record
      */
     onLeafItemClick(record) {
         super.onLeafItemClick(record);
-        this.doFetchContent(record)
+        this.getModel().data.currentPageRecord = record
     }
 }
 
-Neo.applyClassConfig(ContentTreeList);
+Neo.setupClass(ContentTreeList);
 
 export default ContentTreeList;