noxt-cli 0.1.10 → 0.1.12

package/README.md

@@ -2,41 +2,25 @@
 
 A command-line interface for [Noxt](https://npmjs.com/package/noxt-server).
 
-## Usage
+## Installation
 
 ```sh
-npx noxt-cli 
-npx noxt-cli <recipe>
+npx noxt-cli create my-app
 ```
 
-## Defaults
-If you just run `npx noxt-cli`, it will try to find a `noxt.config.yaml` file in your current directory. If it finds one, it will use it. Otherwise, it will use the default config and try to guess some defaults based on common project structure. 
-
-It will assume the following:
-* `views = "./views"` directory for JSX files, if it exists
-* `static = "./public"` directory for static files, if it exists
-* `port = 3000` port number
-* `hostname = "localhost"` hostname
-* `recipe = "app/main"` if `./units/main.js` exists, it will be used as the recipe
-* `recipe = "noxt-dev"` fallback recipe
-
-## Configuration
-
-You can override these defaults by creating a `noxt.config.yaml` file in your current directory. It should look like this:
+## Usage
 
-```yaml
-views: "./views"
-static: "./public"
-port: 3000
-hostname: "localhost"
-recipe: "app/main"
+```sh
+cd my-app
+npm run start 
 ```
 
-## Recipes and other units
-
-Noxt uses [MLM](https://npmjs.com/package/mlm-core) to define recipes and other units that make up the noxt stack. You can extend the [noxt](https://npmjs.com/package/noxt-server) stack by creating your own units in your `./units/` directory. 
+or, if you want to run the app with live reload:
 
-Any package names beginning with `app/` will be loaded from your `./units/` directory. 
+```sh
+npm run dev
+```
 
 ## License
-LGPL-3.0-or-later
+
+[GPL-3.0-or-later](https://choosealicense.com/licenses/gpl-3.0/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noxt-cli",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "CLI starter for noxt-server",
   "type": "module",
   "bin": {

package/starter/package.json

@@ -5,7 +5,7 @@
   "description": "",
   "scripts": {
     "start": "noxt-cli start app/main",
-    "dev": "nodemon -e js,jsx,css,yaml,json,html  --exec  noxt-cli start app/main",
+    "dev": "nodemon -e js,jsx,css,yaml,json,html --exec  noxt-cli start app/main",
     "prod": "NODE_ENV=production noxt-cli start app/main"
   },
   "devDependencies": {

package/starter/public/css/style.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#logo {
+  width:100%;
+
+}
+
+article {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 20px;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: max(25%, 200px) 1fr;
+  grid-template-rows: max-content 1fr;
+  grid-template-areas: "aside header " "aside main ";
+
+  main {
+    grid-area: main;
+    padding: 20px;
+  }
+
+  header {
+    grid-area: header;
+    padding: 10px 20px;
+    border-bottom:  solid 1px #ddd;
+    color: #004;
+    position: sticky;
+    top: 0;
+    background:#fff;
+
+    h1 {
+      margin: 0;
+      padding: 0;
+      font-size: 3rem;
+    }
+  }
+
+  aside {
+    grid-area: aside;
+    background: #eee;
+
+    nav {
+      position: sticky;
+      top: 0;
+
+    }
+
+    nav ul {
+      padding: 0 10px;
+      margin: 0;
+      list-style: none;
+
+      li a {
+        border: none;
+        border-bottom: solid 1px #ddd;
+        text-align: left;
+        display: block;
+        padding: 12px 10px;
+        width: 100%;
+        text-decoration: none;
+        color: #004;
+
+        &:hover {
+          background-color: #eee;
+        }
+      }
+
+      li button {
+        padding: 12px 10px;
+        width: 100%;
+        border: none;
+        background: #004;
+        color: #fff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  th,
+  td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+  }
+}

package/starter/views/layouts/Layout.jsx

@@ -4,7 +4,7 @@ export default function Layout({ body }, { slot, Header }) {
   const styles = slot('style').map(makeStyleTag).join('\n');
   const inlineJS = slot('js').map(c => `<script>${c}</script>`).join('\n');
   const inlineCSS = slot('css').map(c => `<style>${c}</style>`).join('\n');
-  const title=slot('title').join (' | ');
+  const title = slot('title').join(' | ');
 
   return (<>
     {{ html: `<!DOCTYPE html>` }}
@@ -23,10 +23,10 @@ export default function Layout({ body }, { slot, Header }) {
         {{ html: inlineCSS }}
       </head>
       <body>
-        <Header title={title}/>
-        <div class="skin layout">
+        <article>
+          <Header title={title} />
           {{ html: body }}
-        </div>
+        </article>
         {{ html: inlineJS }}
       </body>
     </html>

package/starter/views/pages/PageIndex.jsx

@@ -2,7 +2,7 @@ export const route = '/';
 
 export default function PageIndex({ }, { 
   // all components are available here
-  Json, Sidebar,
+  PageTasks, Sidebar,
   // so are request and response objects
   req, res, params,
   // utils are extendable by your units in ../../units
@@ -10,10 +10,10 @@ export default function PageIndex({ }, {
   // use slot(name,value) and slot(name,key,value) to pass values to the layout
   slot,
 }) {
-  slot('title', 'Welcome to Noxt');
+  slot('title', 'main', 'Welcome to Noxt');
   
   return (
-    <article>
+    <>
       <main>
         <h2>{utils.greet('user')}</h2>
           Here are some tasks: <PageTasks.Link text="Tasks" />
@@ -21,6 +21,6 @@ export default function PageIndex({ }, {
       <aside>
         <Sidebar />
       </aside>
-    </article>
+    </>
   );
 }

package/starter/views/pages/PageTask.jsx

@@ -1,10 +1,11 @@
 export const route = '/tasks/:taskid';
 
 export const fetch = {
-  task: ({ taskid }) => 'https://jsonplaceholder.typicode.com/todos/' + taskid
+  task: ({ taskid }) => 'https://jsonplaceholder.typicode.com/todos/' + taskid,
+  user: ({ task }) => 'https://jsonplaceholder.typicode.com/users/' + task.userId
 }
 
-export default function PageIndex({ task, taskid }, {
+export default function PageIndex({ task, user, taskid }, {
   // all components are available here
   Json, Sidebar,
   // so are request and response objects
@@ -14,9 +15,9 @@ export default function PageIndex({ task, taskid }, {
   // use slot(name,value) and slot(name,key,value) to pass values to the layout
   slot,
 }) {
-  slot('title', 'Task ' + taskid);
+  slot('title', 'main', 'Task ' + taskid);
   return (
-    <article>
+    <>
       <main>
         <h2>Here is task {taskid}</h2>
         <table>
@@ -25,22 +26,31 @@ export default function PageIndex({ task, taskid }, {
               <th>Id</th>
               <td>{taskid}</td>
             </tr>
+            <tr>
+              <th>User</th>
+              <td>{user.name}</td>
+            </tr>
+            <tr>
+              <th>Email</th>
+              <td>{user.email}</td>
+            </tr>
             <tr>
               <th>Title</th>
               <td>{task.title}</td>
             </tr>
             <tr>
               <th>Completed</th>
-              <td>{task.completed}</td>
+              <td>{task.completed ? 'Yes' : 'No'}</td>
             </tr>
           </tbody>
         </table>
         <h2>Here's the data</h2>
         <Json data={task} />
+        <Json data={user} />
       </main>
       <aside>
         <Sidebar />
       </aside>
-    </article>
+    </>
   );
 }

package/starter/views/pages/PageTasks.jsx

@@ -11,12 +11,12 @@ export default function PageTasks({ tasks }, {
   req, res, params,
   // utils are extendable by your units in ../../units
   utils,
-  // use slot(name,value) and slot(name,key,value) to pass values to the layout
+  // use slot(name,key,value) to pass values to the layout
   slot,
 }) {
-  slot('title', 'Welcome to Noxt');
+  slot('title', 'main', 'Tasks');
   return (
-    <article>
+    <>
       <main>
         <h2>Here are some tasks</h2>
         <table>
@@ -31,7 +31,7 @@ export default function PageTasks({ tasks }, {
             {tasks.map(({ id, title, completed }) => (
               <tr key={id}>
                 <td>{id}</td>
-                <td><PageTasks.Link taskid={id} text={title} /></td>
+                <td><PageTask.Link taskid={id} text={title} /></td>
                 <td>{completed ? 'Yes' : 'No'}</td>
               </tr>
             ))}
@@ -43,6 +43,6 @@ export default function PageTasks({ tasks }, {
       <aside>
         <Sidebar />
       </aside>
-    </article>
+    </>
   );
 }

package/starter/views/templates/AlertButton.jsx

@@ -4,10 +4,13 @@ const jsAlert = `
   }
 `;
 
-export default function AlertButton({ label, message }) {
+export default function AlertButton({ label, message },{ slot }) {
+
+  slot('js', 'alert-button', jsAlert);
+
   return (
-    <Button onclick="doAlert(this)" data-message={message}>
+    <button onclick="doAlert(this)" data-message={message}>
       {label}
-    </Button>
+    </button>
   );
 }

package/starter/views/templates/Json.jsx

@@ -0,0 +1,18 @@
+export default function Json({ data, title= "JSON"}, { DEV }) {
+  
+  //hide in production
+  //if (!DEV) return null;
+
+  let json;
+  try {
+    json = JSON.stringify(data, null, 2);
+  } catch (e) {
+    json = String(data);
+  }
+  return (
+    <details>
+      <summary>{title}</summary>
+      <pre>{json}</pre>
+    </details>
+  );
+}

package/starter/views/templates/Sidebar.jsx

@@ -1,10 +1,14 @@
-export default function SideBar({},{ PageIndex, AlertButton }) {
+export default function SideBar({ }, { PageIndex, PageTasks, AlertButton }) {
   return (
-    <nav>
-      <ul>
-        <li><PageIndex.Link text="Go Home" /></li>
-        <li><AlertButton label="Alert" message="Hello" /></li>
-      </ul>
-    </nav>
+    <>
+      <nav>
+        <img src="/img/favicon.png" id="logo" />
+        <ul>
+          <li><PageIndex.Link text="Go Home" /></li>
+          <li><PageTasks.Link text="Tasks" /></li>
+          <li><AlertButton label="Alert" message="Hello" /></li>
+        </ul>
+      </nav>
+    </>
   );
 }

package/starter/public/css/main.css

@@ -1,31 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-article {
-  max-width:1000px;
-  margin: 0 auto;
-  padding: 0 10px;
-  display: grid;
-  grid-template-columns: 1fr max(25%, 200px);
-  grid-template-areas: "header header" "main aside";
-  gap: 20px;
-
-  main {
-    grid-area:main
-  }
-
-  header {
-    grid-area:header
-  }
-
-  aside {
-    grid-area:aside
-  }
-}
-
-