Docs/issue 430 update technical documentation to reflect current project status

packages/cli/src/commands/develop.js

@@ -12,7 +12,7 @@ module.exports = runDevServer = async () => {
       const { userWorkspace } = compilation.context;
 
       devServer(compilation).listen(port, () => {
-        console.info(`Started local development at localhost:${port}`);
+        console.info(`Started local development server at localhost:${port}`);
         const liveReloadServer = livereload.createServer({
           exts: ['html', 'css', 'js', 'md'],
           applyCSSLive: false // https://github.com/napcs/node-livereload/issues/33#issuecomment-693707006

packages/cli/src/lifecycles/config.js

@@ -11,7 +11,7 @@ let defaultConfig = {
     host: 'localhost'
   },
   // TODO optimization: 'spa',
-  publicPath: '/',
+  publicPath: '/', // TODO
   title: 'My App',
   meta: [],
   plugins: [],

www/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greenwood/www",
-  "version": "0.10.0-alpha.0",
+  "version": "0.10.0-alpha.1",
   "private": true,
   "description": "Greenwood website workspace.",
   "repository": "https://github.com/ProjectEvergreen/greenwood",

www/pages/docs/build.md

@@ -7,7 +7,9 @@ linkheadings: 3
 ---
 
 # Build Configurations
+> ⛔ [_**Coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/426)
 
+<!-- 
 A number of [core build configuration files](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli/src/config) can be overridden by creating each file within the root path of your project. You can also automate this task in a single command [see eject configurations](#eject-configurations).
 
 ### Babel
@@ -63,3 +65,4 @@ $ npm run eject
 ```
 
 To run the eject task which copies all the configuration files into your project's working directory.
+-->

www/pages/docs/component-model.md

@@ -6,11 +6,21 @@ index: 1
 ---
 
 ## Component Model
-In this section we'll review a little bit about how you can use Web Components in Greenwood.  Both the native `HTMLElement` and `LitElement` are available by default.
+Greenwood aims to support and optimize around the standard capabilities of the web platform and its features.  In particular, the concept of using Web Components as a way to add interactivity and dynamic content into your application and... that can all be prerendered for you, just like you could do with any server side templating language.
 
-### HTMLElement
+The options for how to design your app efficetively come down to what you're trying to build, so if that's with the native `HTMLElement` or something based on it like **LitElement** (installed seperately), **Greenwood** will take care of the rest.
 
-_footer.js_
+Below are a couple examples to get you going.  
+
+> _Check out our [README](https://github.com/ProjectEvergreen/greenwood#built-with-greenwood) for more examples of sites built with **Greenwood** to see what's possible._
+
+## Example
+
+Below is an example of creating a footer component using native `HTMLElement` within a page template of a Greenwood project. This is all just normal HTML / CSS / JS.
+
+### Component
+
+Our component, in a file called _src/components/footer.js_ could look like this
 
 ```js
 class FooterComponent extends HTMLElement {
@@ -26,81 +36,80 @@ class FooterComponent extends HTMLElement {
     this.root.innerHTML = this.getTemplate();
   }
 
-  // create templates that interpolate variables and HTML!
+  // function can be called anything you want
+  // return a string to be set to innerHTML, can include variable interpolation!
   getTemplate() {
     const year = new Date().getFullYear();
 
-    return \`<header>This is the header component.  &copy; \${year}</header>\`;
+    return `<footer>This is the header component.  &copy; ${year}</footer>`;
   }
 }
 
-customElements.define('x-footer', FooterComponent);
+customElements.define('my-footer', FooterComponent);
 ```
 
-You can then import it in a template and use it within your templates `render` function.
+> _You can use anything you want for the element's tag name (e.g. `app-footer`, `x-footer`, etc), it just needs to have a `-` in the name_.
 
-```javascript
-import { html, LitElement } from 'lit-element';
-import '../components/footer';
+### Usage
 
-class PageTemplate extends LitElement {
+You can then use it within a page template.
 
-  constructor() {
-    super();
-  }
+```html
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
 
-  render() {
-    return html\`
-      <section class='container'>
-        <entry></entry>
-      </section>
-
-      <section
-        <x-footer></x-footer>
-      </section>
-    \`;
-  }
-}
+  <head>
+    <script type="module" src="/components/footer.js"></script>  
+  </head>
 
-customElements.define('page-template', PageTemplate);
+  <body>
+    <my-footer></my-footer>
+  </body>
+
+</html>
 ```
 
 
-### LitElement
-A simple example of a web component utilizing a basic [LitElement](https://lit-element.polymer-project.org/) base class
+### Alternaties
+An alternaative like [**LitElement**](https://lit-element.polymer-project.org/) would work the same way.  
 
-_hello-world.js_
+> _Make sure you have installed LitElement with **npm** first!_
+
+_src/components/greeting.js_
 ```javascript
 import { html, LitElement } from 'lit-element';
 
-class HelloWorld extends LitElement {
+class GreetingComponent extends LitElement {
 
   constructor() {
     super();
   }
 
   render() {
-    return html\`
+    return html`
       <div>
         <h1>Hello World!</h1>
       </div>
-    \`;
+    `;
   }
 }
 
-customElements.define('hello-world', HelloWorld);
+customElements.define('x-greeting', GreetingComponent);
 ```
 
-Which can then imported and used with
+```html
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
 
-```javascript
-import './hello-world.js'
+  <head>
+    <script type="module" src="/components/greeting.js"></script>  
+  </head>
 
-render() {
-  return html\`
-    <hello-world></hello-world>
-  \`
-}
+  <body>
+    <x-greeting></x-greeting>
+  </body>
+
+</html>
 ```
 
 ## References

www/pages/docs/configuration.md

@@ -9,7 +9,7 @@ linkheadings: 3
 ## Configuration
 These are all the supported configuration options in Greenwood, which you can define in a _greenwood.config.js_ file in your project's root directory.
 
-A **greenwood.config.js** file with default values would be:
+A **greenwood.config.js** file reflecting default values would be:
 ```js
 module.exports = {
   workspace: 'src',  // path.join(process.cwd(), 'src')
@@ -18,7 +18,7 @@ module.exports = {
     host: 'localhost'
   },
   publicPath: '/',
-  title: 'Greenwood App',
+  title: 'My App',
   meta: []
 };
 ```
@@ -39,11 +39,10 @@ module.exports = {
 ```
 
 ### Markdown
-Using your `greenwood.config.js`, within your project's root directory, you can add additional [unifiedjs presets](https://github.com/unifiedjs/unified#preset) and settings to the [wc-markdown-loader](https://github.com/hutchgrant/wc-markdown-loader/blob/master/src/parser.js#L30).
+You can provide custom **unifiedjs** [presets](https://github.com/unifiedjs/unified#preset) and [plugins](https://github.com/unifiedjs/unified#plugin) to further custonmize and process your markdown past what [Greenwood does by default](https://github.com/ProjectEvergreen/greenwood/blob/release/0.10.0/packages/cli/src/transforms/transform.md.js#L68). 
 
 #### Example
 
-*greenwood.config.js*
 ```js
 module.exports = {
   markdown: {
@@ -56,14 +55,11 @@ module.exports = {
 }
 ```
 
-Keep in mind, the point in the chain in which [these configured presets will be inserted](https://github.com/hutchgrant/wc-markdown-loader/blob/master/src/parser.js#L30) is in rehype and ends with converting rehype to html.
-
-
 ### Meta
 You can use the `meta` option for the configuration of [`<meta>` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `<head>` tag of the generated _index.html_ file.  This is especially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the [Open Graph](https://ogp.me/) set of tags.
 
 #### Example
-This is an example of the `meta` configuration for the Greenwood website.
+This is an example of the `meta` configuration for the [Greenwood website](https://github.com/ProjectEvergreen/greenwood/blob/master/greenwood.config.js).
 
 ```js
 const FAVICON_HREF = '/assets/favicon.ico';
@@ -99,7 +95,9 @@ Which would be equivalent to:
 ```
 
 ### Optimization
-Greenwood supports a couple different options for how it will generate a production build, depending on how much JavaScript you will need to serve your users.
+> ⛔ [_**Coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/354)
+
+<!-- Greenwood supports a couple different options for how it will generate a production build, depending on how much JavaScript you will need to serve your users.
 - **strict** (expiremental, but recommended for basic sites): What you write will only be used to pre-render your application. No JavaScript is shipped at all and will typically yield the best results in regards to performance.
 - **spa** (default): This will pre-render your site _and_ also ship a full "SPA" experience for your users.
 
@@ -111,9 +109,13 @@ module.exports = {
   optimization: 'spa'
 }
 ```
+-->
 
 ### Public Path
-The `publicPath` options allows configuring additional URL segments to customize the [`<base href="/">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) for your site.
+
+> ⛔ _**Coming Soon!**_
+
+<!-- The `publicPath` options allows configuring additional URL segments to customize the [`<base href="/">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) for your site.
 
 #### Example
 As an example, given:
@@ -126,10 +128,11 @@ Your `publicPath` configuration would be:
 module.exports = {
   publicPath: '/web'
 }
-```
+``` 
+-->
 
 ### Title
-A `<title>` element for all pages can be configured with the `title` option.
+A default `<title>` element for all pages can be configured with the `title` option.
 
 #### Example
 An example of configuring your app's title:
@@ -140,13 +143,16 @@ module.exports = {
 ```
 
 ### Workspace
-Workspace path for your project where all your project files will be located.  You can change it by passing a string.  Using an absolute path is recommended.
+Path to where all your project files will be located.  Using an absolute path is recommended.
 
 #### Example
+
+Setting the workspace path to be the _www/_ folder in the current directory from where Greenwood is being run.
+
 ```js
 const path = require('path');
 
 module.exports = {
-  workspace: path.join(__dirname, 'www'),
+  workspace: path.join(process.cwd(), 'www')
 }
 ```