neo.mjs 6.9.7 → 6.9.8

package/apps/ServiceWorker.mjs

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

package/apps/learnneo/neo-config.json

@@ -1,7 +1,7 @@
 {
-    "appPath": "apps/learnneo/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainThreadAddons": ["DragDrop", "Stylesheet", "Markdown"],
-    "mainPath": "./Main.mjs"
-}
+    "appPath"         : "apps/learnneo/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet", "Markdown"]
+}

package/apps/learnneo/view/home/ContentTreeList.mjs

@@ -47,21 +47,19 @@ class ContentTreeList extends TreeList {
             me.update();
         })
     }
-    onLeafItemClick(record) {
-        super.onLeafItemClick(record);
-        this.doFetchContent(record);
-    }
+
     async doFetchContent(record) {
-        let path = `${this.contentPath}`;
+        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();
-            Neo.main.addon.Markdown.markdownToHtml(content)
+            await Neo.main.addon.Markdown.markdownToHtml(content)
                 .then(
-                    html => this.fire('contentChange', {component: this, html}),
-                    () => this.fire('contentChange', {component: this}));
+                    html => me.fire('contentChange', {component: me, html}),
+                    ()   => me.fire('contentChange', {component: me}));
         }
     }
 }

package/apps/learnneo/view/home/MainContainerController.mjs

@@ -15,12 +15,31 @@ class MainContainerController extends Component {
     }
 
     /**
-     * @param {Object} record
+     * @param {Object} data
      */
-    onContentListLeafClick(data) {
-        const content = this.getReference('content');
+    async onContentListLeafClick(data) {
+        const
+            me      = this,
+            content = me.getReference('content');
+
         content.html = data.html;
 
+        await this.timeout(200);
+
+        // todo: we need to add the links as neo configs
+        await Neo.main.addon.HighlightJS.loadLibrary({
+            appName        : me.appName,
+            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
+            themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'
+        });
+
+        await this.timeout(200);
+
+        Neo.main.addon.HighlightJS.syntaxHighlightInit({
+            appName: me.appName,
+            vnodeId: content.id
+        })
+
         // contentContainer.removeAll();
         // contentContainer.add({
         //     ntype: 'component',

package/docs/app/view/MainContainerController.mjs

@@ -19,6 +19,18 @@ class MainContainerController extends Component {
         ntype: 'docs-maincontainer-controller'
     }
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        // todo: remove once paths are neo configs
+        Neo.main.addon.HighlightJS.loadLibrary({
+            appName: this.appName
+        })
+    }
+
     /**
      * @param {Object} record
      */

package/examples/ServiceWorker.mjs

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

package/examples/button/base/neo-config.json

@@ -2,5 +2,6 @@
     "appPath"    : "examples/button/base/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs"
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-neo-light"]   
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.7",
+    "version": "6.9.8",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/learnneo/content.json

@@ -0,0 +1,27 @@
+{
+    "data": [{
+        "id"      : 1,
+        "isLeaf"  : true,
+        "name"    : "Why neo.mjs",
+        "parentId": null,
+        "path"    : "whyneo.md"
+    }, {
+        "id"      : 2,
+        "isLeaf"  : false,
+        "name"    : "Class Definitions and Config",
+        "parentId": null,
+        "path"    : null
+    }, {
+        "id"      : 3,
+        "isLeaf"  : false,
+        "name"    : "Class Basics",
+        "parentId": 2,
+        "path"    : null
+    }, {
+        "id"      : 4,
+        "isLeaf"  : true,
+        "name"    : "Classes, Properties, and Methods",
+        "parentId": 3,
+        "path"    : null
+    }]
+}

package/resources/data/learnneo/p/2023-10-01T18-29-19-158Z.md

@@ -1,4 +1,10 @@
-Neo.mjs is a framework used to create browser-based applications.
+# This is a h1
+## This is a h2
+### This is a h3
+#### This is a h4
+
+
+Neo.mjs is a framework used to create <mark>browser-based</mark> applications.
 
 Some key features and benefits of Neo.mjs are:
 

package/resources/data/learnneo/p/2023-10-07T19-18-28-517Z.md

@@ -1,8 +1,9 @@
-Neo.mjs classes are standard JavaSript classes. Every source file
+Neo.mjs classes are standard JavaScript classes. Every source file
 you write will be a class definition, extending some Neo.mjs
 class.
 
-<pre class="neo">
+<pre>
+<code class="javascript">
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -15,6 +16,7 @@ const myMammal = Neo.create(Mammal);
 
 Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config. 
 export default Mammal;        // Makes the class available elsewhere.
+</code>
 </pre>
 
 In the example above, we're extending the Neo.mjs base class. The static
@@ -29,25 +31,26 @@ and create instances as needed.
 
 Let's add a `name` propery to the class.
 
-<pre class="neo" style="color:gray">
+<pre>
+<code class="javascript">
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
-
-        <span style="color:#b91010">name: 'Anonymous'</span>
+        name     : 'Anonymous'
     }
 }
 
 const myMammal = Neo.create(Mammal);
-console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Anonymous"
-<span style="color:#b91010">myMammal.name</span> = 'Herbert';
-console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Herbert"
+console.log(myMammal.name);           // Logs "Anonymous"
+myMammal.name = 'Herbert';
+console.log(myMammal.name);           // Logs "Herbert"
 
 Neo.applyClassConfig(Mammal);
 
 export default Mammal;
+</code>
 </pre>
 
 In Neo.mjs, instance properties are usually added in the `static config` block.
@@ -62,11 +65,13 @@ anywhere in the class hierarchy.
 Since our class defines a `name` property, we can specify that when creating
 the instance, using the second argument to the `create` method. 
 
-<pre class="neo" style="color:gray">
-const myMammal = Neo.create(Mammal, <span style="color:#b91010">{
+<pre>
+<code class="javascript">
+const myMammal = Neo.create(Mammal, {
     name: 'Creature'
-}</span>);
+});
 console.log(myMammal.name);           // Logs "Creature"
+</code>
 </pre>
 
 
@@ -74,7 +79,8 @@ Since _you_ define those properties, you can
 look for them in class methods and use them as needed.
 Let's add a `speak()` method that uses the `name` property.
 
-<pre class="neo" style="color:gray">
+<pre>
+<code class="javascript">
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -83,19 +89,21 @@ class Mammal extends Base {
 
         name: 'Anonymous'
     }
-    <span style="color:#b91010">speak(){
+    speak(){
         console.log(`${this.name} is grunting`);
-    }</span>
+    }
 }
 
 const myMammal = Neo.create(Mammal, {
     name: 'Creature'
 });
-<span style="color:#b91010">myMammal.speak();</span>        // Logs "Creature is grunting."
+
+myMammal.speak(); // Logs "Creature is grunting."
 
 Neo.applyClassConfig(Mammal);
 
 export default Mammal;
+</code>
 </pre>
 
 

package/resources/data/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -3,13 +3,13 @@ and the strucure of an application.
 
 If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/NeoWorkspace.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
 
 As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
 serve whose doc root is the workspace. 
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/ServerRoot.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
 
 If you drill down into the `src` directory you'll see your applications.
 If you drill down into the `docs` directory you'll see the Neo.mjs API docs.
@@ -22,7 +22,7 @@ app. To do that, run this command from the workspace.
 At the first prompt, name the app `Foo`, and accept the default for everything else.
 The script creates an application structured as follows.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/FooFolder.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/FooFolder.png" style="height: 400px;">
 
 These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
 You will, however, edit the main container, and its associated "controller" and "model",
@@ -30,10 +30,11 @@ as well as create new views, new controllers, etc.
 
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
-<pre class="neo">
-import Base from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+<pre>
+<code class="javascript">
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
-import ViewModel from './MainViewModel.mjs';
+import ViewModel  from './MainViewModel.mjs';
 
 class MainView extends Base {
     static config = {
@@ -50,6 +51,7 @@ class MainView extends Base {
 Neo.applyClassConfig(MainView);
 
 export default MainView;
+</code>
 </pre>
 
 Neo.mjs views are composed of components. A component can be a "container", which means it
@@ -68,12 +70,12 @@ you see how a component is configured let's put a button in the container.
 First, we need to import the class that defines buttons. Then we'll describe the new button in the
 `items:[].`
 
-<pre class="neo">
-
-import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Controller  from './MainViewController.mjs';
-import ViewModel   from './MainViewModel.mjs';
-import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+<pre>
+<code class="javascript">
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
 
 class MainView extends Base {
     static config = {
@@ -93,6 +95,7 @@ class MainView extends Base {
 Neo.applyClassConfig(MainView);
 
 export default MainView;
+</code>
 </pre>
 
 Note the entry in +items:[]+. That's a description of the button that'll be created as the single

package/resources/images/Neo_Vector.svg

@@ -0,0 +1,3 @@
+<svg width="274" height="178" viewBox="0 0 274 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M231.866 178L136.597 82.5858L41.3368 178L0.101562 136.702L136.597 0L273.102 136.702L231.866 178Z" fill="#11F4A1"/>
+</svg>

package/resources/scss/src/apps/learnneo/Viewport.scss

@@ -10,10 +10,16 @@
     }
 
     p {
-        margin: 0em 0.5em .7em 0.5em;
+        margin: 0.5em 0em 0.7em 0em ;
     }
 
-    padding: 0.5em;
+    mark {
+        background-color: #B8FCE3;
+        color: black;
+        padding: 0.1em 0.2em;
+    }
+
+    padding: 1em;
 
     overflow: scroll;
 
@@ -47,7 +53,7 @@
         font-family: var(--fa-style-family, "Font Awesome 6 Free");
         font-weight: var(--fa-style, 900);
         font-size: 1.3em;
-        margin: .4em;
+        margin: 0.4em 0.4em 0.4em 0;
         color: #c4c4c4;
     }
 

package/resources/scss/src/apps/newwebsite/MainContainer.css

@@ -0,0 +1,33 @@
+
+.newwebsite-main-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 48px;
+    padding: 10% 15% 15% 15%;
+}
+
+.button-group {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    gap: 8px !important;
+}
+
+.neo-h1 {
+    font-size: 48px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.vector {
+    background-image: url("../../../../images/Neo_Vector.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    width: 100%;
+    height: 150px;
+}
+
+.get-started-button {
+    cursor: not-allowed !important;
+}

package/resources/scss/theme-neo-light/Global.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light {
+    --neo-background-color: #fafafa;
+    --neo-color           : #000;
+    --neo-disabled-opacity: 0.5;
+    --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+    --neo-font-smoothing  : antialiased;
+}

package/resources/scss/theme-neo-light/apps/covid/HeaderContainer.scss

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .covid-header-container
+    --covid-header-active-background-color   : rgba(100, 181, 246, .65);
+    --covid-header-active-color              : #{darken(#64b5f6, 20%)};
+    --covid-header-cases-background-color    : rgba(187, 187, 187, .65);
+    --covid-header-cases-color               : #{darken(#bbb, 30%)};
+    --covid-header-deaths-background-color   : rgba(251, 103, 103, .65);
+    --covid-header-deaths-color              : #{darken(#fb6767, 20%)};
+    --covid-header-recovered-background-color: rgba( 40, 218, 111, .65);
+    --covid-header-recovered-color           : #{darken(#28ca68, 20%)};
+}

package/resources/scss/theme-neo-light/apps/covid/country/Gallery.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light { // .neo-gallery.covid-country-gallery
+    --covid-gallery-background-color             : #fff;
+    --covid-gallery-border-color                 : #ddd;
+    --covid-gallery-item-border-color            : rgba(73,120,184,.5);
+    --covid-gallery-item-border-sides-width      : 1px;
+    --covid-gallery-item-wrapper-background-color: rgba(73,120,184,.5);
+}

package/resources/scss/theme-neo-light/apps/covid/country/Helix.scss

@@ -0,0 +1,8 @@
+:root .neo-theme-neo-light { // .neo-helix.covid-country-helix
+    --covid-helix-background-color             : #fff;
+    --covid-helix-border-color                 : #ddd;
+    --covid-helix-item-border-color            : rgba(73,120,184,.5);
+    --covid-helix-item-border-sides-width      : 1px;
+    --covid-helix-item-box-shadow-selected     : 0 0 35px #008dff;
+    --covid-helix-item-wrapper-background-color: rgba(73,120,184,.5);
+}

package/resources/scss/theme-neo-light/apps/covid/country/LineChartComponent.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .covid-line-chart
+    --covid-line-chart-background-color: #fff;
+}

package/resources/scss/theme-neo-light/apps/docs/ContentTabContainer.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .docs-content-tabcontainer
+    --docs-content-tabcontainer-tab-header-toolbar-background-color : #fff;
+    --docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover: red;
+}

package/resources/scss/theme-neo-light/apps/docs/HeaderContainer.scss

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-docs-header-container
+    --docs-header-container-background-color         : #fff;
+    --docs-header-container-background-image         : none;
+    --docs-header-container-logo-text-background-clip: text;
+    --docs-header-container-logo-text-color          : rgba(0,0,0,0.6);
+    --docs-header-container-logo-text-font-size      : 28px;
+    --docs-header-container-logo-text-font-weight    : 800;
+    --docs-header-container-logo-padding             : 10px;
+    --docs-header-container-logo-text-shadow         : 2px 2px 3px rgba(200,200,200,0.1);
+}

package/resources/scss/theme-neo-light/apps/docs/MainContainer.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .neo-docs-navigation-tab-container
+    --docs-navigation-tab-container-background-color: #fff;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/HeaderComponent.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .neo-docs-classdetails-headercontainer
+    --docs-classdetails-headercomponent-background-color: #fff;
+    --docs-classdetails-headerpanel-border-right        : 1px solid #ddd;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/MembersList.scss

@@ -0,0 +1,17 @@
+:root .neo-theme-neo-light { // .docs-classhierarchy-memberslist
+    --docs-classhierarchy-memberslist-background-color : #bbb;
+    --docs-memberlist-group-header-background-color    : steelblue;
+    --docs-memberlist-group-header-color               : #fff;
+    --docs-param-table-list-item-background-color      : #fff;
+    --docs-param-table-list-item-background-image      : none;
+    --docs-param-table-list-item-header-background-clip: none;
+    --docs-param-table-list-item-header-text-shadow    : none;
+    --docs-param-table-list-item-highlight-search-color: red;
+    --docs-param-table-source-link-color               : #bbb;
+    --docs-param-table-source-link-color-hover         : #{darken(#1c60a0, 10%)};
+    --docs-param-table-thead-background-color          : slategray;
+    --docs-param-table-thead-background-image          : none;
+    --docs-param-table-tr-background-clip              : none;
+    --docs-param-table-tr-color                        : #fff;
+    --docs-param-table-tr-text-shadow                  : none;
+}

package/resources/scss/theme-neo-light/apps/docs/classdetails/TutorialComponent.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light {
+    --docs-classdetails-tutorialcomponent-background-color: #fff;
+    --docs-classdetails-tutorialcomponent-color           : #000;
+}

package/resources/scss/theme-neo-light/apps/website/HeaderContainer.scss

@@ -0,0 +1,5 @@
+:root .neo-theme-neo-light { // .website-header-container
+    --website-header-button-background-image: linear-gradient(#fff,#ccc);
+    --website-header-button-glyph-color     : #1c60a0;
+    --website-header-button-border          : 1px solid #ddd;
+}

package/resources/scss/theme-neo-light/apps/website/MainContainer.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .website-main-container
+    --website-background-image   : linear-gradient(#eee, #ddd);
+    --website-transition-duration: 300ms;
+}

package/resources/scss/theme-neo-light/apps/website/blog/Container.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .website-blog-container
+    --website-blog-toolbar-background-color: #f2f2f2;
+}

package/resources/scss/theme-neo-light/apps/website/home/TabContainer.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .website-home-tab-container
+    --website-home-color   : #292929;
+    --website-home-h1-color: #292929;
+}