Website/issue 503 copy and content updates for ssr (#877)

* home page and banner copy updates

* about page updates and revisions

* update and revisit docs pages

* update and revisit getting started pages

* refreah plugins and guides pages

* big round of spellchecking

* underline and darken home page links

* spellcheck package READMEs

* update project description in packages and README, and meta

* add link on static and server rendering stratigies and remove extra plugin from docs greenwood config

* update project README content

README.md

@@ -7,7 +7,7 @@
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 ## Overview
-Greenwood is a modern and performant static site generator supporting Web Component based development.  For more information about how to get started, read our docs, or learn more about the project and how it works, please visit our [website](https://www.greenwoodjs.io/).
+Greenwood is a framework focused on supporting modern web standards and development to help you build your next project.  For more information about how to get started, read our docs, or learn more about the project and how it works, please visit our [website](https://www.greenwoodjs.io/).
 
 Features:
 - ⚡ [No bundle development](https://www.greenwoodjs.io/about/how-it-works/). Pages are built on the fly.

greenwood.config.js

@@ -4,11 +4,10 @@ import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
 import { greenwoodPluginImportJson } from '@greenwood/plugin-import-json';
 import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';
 import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
-import { greenwoodPluginRendererLit } from '@greenwood/plugin-renderer-lit';
 import rollupPluginAnalyzer from 'rollup-plugin-analyzer';
 import { fileURLToPath, URL } from 'url';
 
-const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';
+const META_DESCRIPTION = 'A modern framework focused on web standards to help you build your next project.';
 const FAVICON_HREF = '/favicon.ico';
 
 export default {
@@ -47,8 +46,7 @@ export default {
         ];
       }
     },
-    ...greenwoodPluginIncludeHTML(),
-    greenwoodPluginRendererLit()
+    ...greenwoodPluginIncludeHTML()
   ],
   markdown: {
     plugins: [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "greenwood",
   "private": true,
-  "description": "A modern and performant static site generator supporting Web Component based development.",
+  "description": "A modern framework focused on web standards to help you build your next project.",
   "repository": "https://github.com/ProjectEvergreen/greenwood",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "license": "MIT",

packages/cli/src/lifecycles/config.js

@@ -83,7 +83,7 @@ const readAndMergeConfig = async() => {
               'common issues to check might be: \n' +
               '- typo in your workspace directory name, or in greenwood.config.js \n' +
               '- if using relative paths, make sure your workspace is in the same cwd as _greenwood.config.js_ \n' +
-              '- consider using an absolute path, e.g. path.join(__dirname, \'my\', \'custom\', \'path\') // <__dirname>/my/custom/path/ ');
+              '- consider using an absolute path, e.g. new URL(\'/your/relative/path/\', import.meta.url)');
           }
         }
 

packages/plugin-babel/README.md

@@ -43,12 +43,12 @@ module.exports = {
 };
 ```
 
-This will then process your JavaScript with Babel with the configurated plugins / settings you provide.  
+This will then process your JavaScript with Babel using the configured plugins and settings you provide.
 
 > _For now Babel configuration needs to be in CJS.  Will we be adding ESM support soon!_
 
 ## Options
-This plugin provides a default _babel.config.js_ that includes support for [**@babel/preset-env**](https://babeljs.io/docs/en/babel-preset-env) using [**browserslist**](https://github.com/browserslist/browserslist) with reasonable [default configs](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-babel/src/) for each.  
+This plugin provides a default _babel.config.js_ that includes support for [**@babel/preset-env**](https://babeljs.io/docs/en/babel-preset-env) using [**browserslist**](https://github.com/browserslist/browserslist) with reasonable [default configs](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-babel/src/) for each.
 
 If you would like to use it, either standalone or with your own custom _babel.config.js_, you will need to take the following extra steps:
 

packages/plugin-google-analytics/README.md

@@ -1,12 +1,12 @@
 # @greenwood/plugin-google-analytics
 
 ## Overview
-A Greenwood plugin adding support for [Google Analytics](https://developers.google.com/analytics/) JavaScript tracker. It assumes you already have your own Tracking ID(s) and [can eiterh filter out tracking for everything but your production environment](https://stackoverflow.com/a/1251931/417806) so that local testing doesn't interfere with production data, or use a conditional based `analyticsId` using an environment variable, ex.
+A Greenwood plugin adding support for [Google Analytics](https://developers.google.com/analytics/) JavaScript tracker. It assumes you already have your own Tracking ID(s) and [can either filter out tracking for everything but your production environment](https://stackoverflow.com/a/1251931/417806) so that local testing doesn't interfere with production data, or use a conditional based `analyticsId` using an environment variable, ex.
 ```js
 const analyticsId = process.env.NODE_ENV === 'xxx' ? 'UA-123...' : 'UA-345...';
 ```
 
-> _For more information and complete docs about Greenwood, please visit the [Greenwood website](https://www.greenwoodjs.io/)._  
+> _For more information and complete docs about Greenwood, please visit the [Greenwood website](https://www.greenwoodjs.io/)._
 
 
 ## Installation
@@ -49,14 +49,14 @@ This will then add the Google Analytics [JavaScript tracker snippet](https://dev
 - `anonymous` (optional) - Sets if tracking of IPs should be done anonymously.  Default is `true`
 
 ### Outbound Links
-For links that go outside of your domain, the global function [`getOutboundLink`](https://support.google.com/analytics/answer/7478520) is available for you to use.  
+For links that go outside of your domain, the global function [`getOutboundLink`](https://support.google.com/analytics/answer/7478520) is available for you to use.
 
 Example:
 ```html
-<a 
-  target="_blank" 
+<a
+  target="_blank"
   rel="noopener"
-  onclick="getOutboundLink('www.mylink.com');" 
+  onclick="getOutboundLink('www.mylink.com');"
   href="www.mylink.com">My Link
 </a>
 ```

packages/plugin-graphql/README.md

@@ -1,4 +1,4 @@
-# @greenwood/plugin-graphl
+# @greenwood/plugin-graphql
 
 ## Overview
 A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query your content graph.  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend and provides an [**@apollo/client** like](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend.
@@ -48,7 +48,7 @@ class HeaderComponent extends HTMLElement {
 
   connectedCallback() {
     const response = await client.query({
-      query: MenuQuery, 
+      query: MenuQuery,
       variables: {
         name: 'navigation',
         order: 'index_asc'
@@ -67,7 +67,7 @@ class HeaderComponent extends HTMLElement {
         </li>
       `;
     }).join();
-    
+
     return `
       <header>
         <nav>

packages/plugin-import-commonjs/README.md

@@ -32,7 +32,7 @@ export default {
 }
 ```
 
-This will then allow you to use a CommonJS based modules in the browser.   For example, here is how you could use [**lodash**](https://lodash.com/) (although as mentioend above, in this case, you would want to use [**lodash-es**](https://www.npmjs.com/package/lodash-es) instead.)
+This will then allow you to use a CommonJS based modules in the browser.   For example, here is how you could use [**lodash**](https://lodash.com/) (although as mentioned above, in this case, you would want to use [**lodash-es**](https://www.npmjs.com/package/lodash-es) instead.)
 
 ```javascript
 // <script src="my-file.js">

packages/plugin-import-css/README.md

@@ -32,7 +32,7 @@ export default {
 }
 ```
 
-> 👉 _If you are using this along with [**PostCSS plugin**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss), make sure **plugin-postcss** comes first!  All non standard transformations need to come last._ 
+> 👉 _If you are using this along with [**PostCSS plugin**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss), make sure **plugin-postcss** comes first!  All non standard transformations need to come last._
 
 
 This will then allow you use `import` to include CSS in your JavaScript files by appending `?type=css` to the end of the `import` statement.
@@ -64,4 +64,4 @@ module.exports = {
     require('postcss-import')
   ]
 };
-```
+```

packages/plugin-include-html/README.md

@@ -1,7 +1,7 @@
 # @greenwood/plugin-include-html
 
 ## Overview
-In the spirit of the since [abandoned HTML Imports spec](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) that was originally part of the init Web Components "feature suite", and given the renewed [interest in bringing it back](https://github.com/whatwg/html/issues/2791), this plugin adds expiremental support to realize the HTML Includes "spec" as a build time templating system for HTML.  The goal here is to enable developers the ability to ship more static HTML while allowing the authoring context to be JavaScript **and** leveraging standard semantics and web expectations. 💚 
+In the spirit of the since [abandoned HTML Imports spec](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) that was originally part of the init Web Components "feature suite", and given the renewed [interest in bringing it back](https://github.com/whatwg/html/issues/2791), this plugin adds experimental support to realize the HTML Includes "spec" as a build time templating system for HTML.  The goal here is to enable developers the ability to ship more static HTML while allowing the authoring context to be JavaScript **and** leveraging standard semantics and web expectations. 💚
 
 > **Note**: I think if you want this feature in its most strictest sense of the word, I would recommend the [**<html-include>**](https://github.com/justinfagnani/html-include-element) custom element, which provides a runtime implementation of this as a Web Component.
 
@@ -37,7 +37,7 @@ So given a snippet of HTML, e.g.
 
 <header class="my-include">
   <h1>Welcome to my website!<h1>
-</header> 
+</header>
 ```
 
 In a page template, you could then do this
@@ -49,7 +49,7 @@ In a page template, you could then do this
     <link rel="html" href="/includes/header.html"></link>
 
     <h2>Hello 👋</h2>
-  
+
   </body>
 
 <html>
@@ -69,10 +69,10 @@ And Greenwood will statically generate this
 
     <header class="my-include">
       <h1>Welcome to my website!<h1>
-    </header> 
+    </header>
 
     <h2>Hello 👋</h2>
-  
+
   </body>
 
 <html>
@@ -113,7 +113,7 @@ const getData = async () => {
 export {
   getTemplate,
   getData
-}; 
+};
 ```
 
 In a page template, you can now do this
@@ -123,7 +123,7 @@ In a page template, you can now do this
   <body>
     <h2>Hello 👋</h2>
 
-    <app-footer src="../includes/footer.js"></app-footer>  
+    <app-footer src="../includes/footer.js"></app-footer>
   </body>
 
 <html>
@@ -148,10 +148,10 @@ And Greenwood would statically generate this
           <a href="/">Greenwood v0.19.0-alpha.2</a>
         </h4>
       </footer>
-    </app-footer>  
+    </app-footer>
   </body>
 
 <html>
 ```
 
-> We think the JS flavor will really come to shine more when Greenwood adds support for [SSR](https://github.com/ProjectEvergreen/greenwood/issues/708), and then you could use this TECHNIQUE for displaying user / session data, or serverlessly at the edge!
+> We think the JS flavor will really come to shine more when Greenwood adds support for [SSR](https://github.com/ProjectEvergreen/greenwood/issues/708), and then you could use this TECHNIQUE for displaying user / session data, or serverless at the edge!

packages/plugin-polyfills/README.md

@@ -1,7 +1,7 @@
 # @greenwood/plugin-polyfills
 
 ## Overview
-A Greenwood plugin adding support for [Web Component related polyfills](https://github.com/webcomponents/polyfills) for browsers that need support for part of the Web Component spec like **Custom Elements** and **Shadow DOM**.  It uses [feature detection](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#using-webcomponents-loaderjs) to determine what polyfills are actually needed based on the user's browser, to ensure only the minumum extra code is loaded.  If you are using **Lit@2**, it also loads the needed [_polyfill-support.js_](https://lit.dev/docs/tools/requirements/#polyfills) file.
+A Greenwood plugin adding support for [Web Component related polyfills](https://github.com/webcomponents/polyfills) for browsers that need support for part of the Web Component spec like **Custom Elements** and **Shadow DOM**.  It uses [feature detection](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#using-webcomponents-loaderjs) to determine what polyfills are actually needed based on the user's browser, to ensure only the minimum extra code is loaded.  If you are using **Lit@2**, it also loads the needed [_polyfill-support.js_](https://lit.dev/docs/tools/requirements/#polyfills) file.
 
 As of right now, you will likely need this plugin to load additional polyfills if you want to support these browser(s):
 

packages/plugin-postcss/README.md

@@ -32,7 +32,7 @@ export default {
 }
 ```
 
-> 👉 _If you are using this along with [**plugin-import-css**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-css), make sure **plugin-postcss** comes first.  All non stanrd transformation need to come last._ 
+> 👉 _If you are using this along with [**plugin-import-css**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-css), make sure **plugin-postcss** comes first.  All non standard transformations need to come last._
 
 Optionally, to use your own PostCSS configuration, you'll need to create _two (2)_ config files in the root of your project, by which you can provide your own custom plugins / settings that you've installed.
 - _postcss.config.js_
@@ -58,7 +58,7 @@ export default {
 _Eventually once [PostCSS adds support for ESM configuration files](https://github.com/postcss/postcss-cli/issues/387), then this will drop to only needing one file._
 
 ## Options
-This plugin provides a default _postcss.config.js_ that includes support for [**postcss-preset-env**](https://github.com/csstools/postcss-preset-env) using [**browserslist**](https://github.com/browserslist/browserslist) with reasonable [default configs](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss/src/) for each.  
+This plugin provides a default _postcss.config.js_ that includes support for [**postcss-preset-env**](https://github.com/csstools/postcss-preset-env) using [**browserslist**](https://github.com/browserslist/browserslist) with reasonable [default configs](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss/src/) for each.
 
 If you would like to use it with your own custom _postcss.config.js_, you will need to enable the `extendConfig` option
 ```js
@@ -85,4 +85,4 @@ export default {
 };
 ```
 
-This will then process your CSS with PostCSS with the configurated plugins / settings you provide, merged after the default `plugins` listed above.
+This will then process your CSS with PostCSS using the configured plugins / settings you provide, merged after the default `plugins` listed above.

packages/plugin-renderer-lit/README.md

@@ -2,14 +2,14 @@
 
 ## Overview
 
-A Greenwood plugin for using [**Lit**'s SSR capabilities](https://github.com/lit/lit/tree/main/packages/labs/ssr) as a custom server-side renderer.  Although support is expiremental at this time, this plugin also gives the ability to statically render entire pages and templates (instead of puppeteer) to output completely static sites.
+A Greenwood plugin for using [**Lit**'s SSR capabilities](https://github.com/lit/lit/tree/main/packages/labs/ssr) as a custom server-side renderer.  Although support is experimental at this time, this plugin also gives the ability to statically render entire pages and templates (instead of puppeteer) to output completely static sites.
 
 _We are still actively working on SSR features and enhancements for Greenwood [as part of our 1.0 release](https://github.com/ProjectEvergreen/greenwood/issues?q=is%3Aissue+is%3Aopen+label%3Assr+milestone%3A1.0) so please feel free to test it out and report your feedback._  🙏
 
 > This package assumes you already have `@greenwood/cli` installed.
 
 
-## Prequisite
+## Prerequisite
 
 This packages depends on the Lit package as a `peerDependency`.  This means you must have Lit already installed in your project.  You can install anything following the `2.x` release line.
 
@@ -63,7 +63,7 @@ async function getBody() {
       <tr>
         <th>ID</th>
         <th>Name</th>
-        <th>Decription</th>
+        <th>Description</th>
         <th>Message</th>
         <th>Picture</th>
       </tr>
@@ -113,4 +113,4 @@ export default {
 }
 ```
 
-> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatiblity and portablity._
+> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability._

packages/plugin-typescript/README.md

@@ -65,7 +65,7 @@ This plugin provides the following default `compilerOptions`.
     "moduleResolution": "node",
     "sourceMap": true
   }
-} 
+}
 ```
 
 If you would like to extend / override these options:
@@ -74,7 +74,7 @@ If you would like to extend / override these options:
     ```json
     {
       "compilerOptions": {
-        "expirementalDecorators": true
+        "experimentalDecorators": true
       }
     }
     ```
@@ -94,4 +94,4 @@ If you would like to extend / override these options:
     }
     ```
 
-This will then process your JavaScript with TypeScript with the additional configurated settings you provide.  This also allows you to configure the rest of _tsconfig.json_ to support your IDE and local development environment settings.
+This will then process your JavaScript with TypeScript with the additional configuration settings you provide.  This also allows you to configure the rest of _tsconfig.json_ to support your IDE and local development environment settings.

www/components/banner/banner.js

@@ -54,16 +54,16 @@ class Banner extends LitElement {
       <div class='banner'>
         <eve-container>
           <div class='content'>
-            <img 
-              src="../../assets/greenwood-logo-300w.png" 
+            <img
+              src="../../assets/greenwood-logo-300w.png"
               alt="Greenwood Logo"
               srcset="../../assets/greenwood-logo-300w.png 1x,
                       ../../assets/greenwood-logo-500w.png 2x,
                       ../../assets/greenwood-logo-750w.png 3x,
                       ../../assets/greenwood-logo-1000w.png 4x,
                       ../../assets/greenwood-logo-1500w.png 5x"/>
 
-            <h3>The static site generator for your. . . <br /><span class="${this.animateState}">${currentProjectType}.</span></h3>
+            <h3>Ready to help you build your next. . . <br /><span class="${this.animateState}">${currentProjectType}.</span></h3>
 
             <eve-button size="md" href="/getting-started/" style="${buttonCss}">Get Started</eve-button>
           </div>