more descriptive default structure

README.md

@@ -32,10 +32,10 @@ src/                                <-- your source code
     css/                            <-- processed css files
     js/                             <-- processed javascript files
     public/                         <-- unprocessed static `/` assets
-    pages/                          <-- page components
+    components/                     <-- riots components
         hello-riot/
             hello-riot.riot         <-- riot component
-            hello-riot.spec.js      <-- component test
+            hello-riot.spec.js      <-- component tests
     index.js                        <-- application bootstrap
 index.html                          <-- START HERE
 vite.config.js                      <-- build configuration
@@ -45,11 +45,12 @@ README.md
 
 ### Mounting Strategy
 
-This template uses a static component mounting registry to mount global **pages** (components) which in-turn mounts content specific components to flesh out your pages using `components` export option.
+This template uses a static registry to mount global **components** which in-turn can mount other nested components via `components` export option.
 
 #### Components Example
 
 ```
+// my-page.riot
 <my-page>
     <div>
         <example-component></example-component>
@@ -76,7 +77,7 @@ In a folder-per-component setup, you can place your `*.spec.js` files right next
 
 *bring your own testing solution*
 
-> CHAI/MOCHA EXAMPLE: `src/pages/hello-riot/hello-riot.spec.js` (unwired)
+> CHAI/MOCHA EXAMPLE: `src/components/hello-riot/hello-riot.spec.js` (unwired)
 
 
 ## NPM Scripts

src/components/hello-riot/hello-riot.riot

@@ -11,16 +11,16 @@
 
         <h2>Getting Started</h2>
         <p>
-            This page is found at <code>src/pages/hello-riot/hello-riot.riot</code>,
+            This page is found at <code>src/components/hello-riot/hello-riot.riot</code>,
             <br> and is statically mounted via <code>src/js/registry.js</code>.
             <p>
-                <em>many mounting strategies exist, this is but <strong>one!</strong></em>
+                <em>many mounting strategies exist, this is but <strong>one</strong></em>
             </p>
         </p>
 
         <h2>Documentation</h2>
 
-        <div class="links">
+        <div class="flex">
             <span>
                 <a href="https://riot.js.org/documentation/">Riot </a>
                 <br>
@@ -36,7 +36,7 @@
 
         <h2>Ecosystem</h2>
 
-        <div class="links">
+        <div class="flex">
             <a href="https://github.com/riot/examples">Examples</a>
             <a href="https://github.com/riot/route">Router</a>
             <a href="https://github.com/riot/riot/blob/main/AWESOME.md">Community</a>

src/components/hello-riot/hello-riot.spec.js

@@ -1,6 +1,6 @@
-import HelloRiot from './hello-riot.riot';
-import {expect} from 'chai';
 import {component} from 'riot';
+import {expect} from 'chai';
+import HelloRiot from './hello-riot.riot';
 
 describe('Hello Riot Page Unit Test', () => {
     const mount = component(HelloRiot);

src/css/main.css

@@ -14,7 +14,7 @@ code {
   color: gray;
 }
 
-.links {
+.flex {
     display: flex; 
     justify-content: space-evenly; 
     text-align: center;
@@ -23,6 +23,6 @@ code {
 .splash {
     font-size: larger;
     text-align: center;
-    margin: 6vh auto;
+    margin: 4vh auto;
     width: 620px;
 }