update docs to demonstrate ESM usage

www/pages/docs/configuration.md

@@ -11,7 +11,7 @@ These are all the supported configuration options in **Greenwood**, which you ca
 
 The below is a _greenwood.config.js_ file reflecting default values:
 ```js
-module.exports = {
+export default {
   devServer: {
     extensions: [],
     hud: true,
@@ -42,7 +42,7 @@ Configuration for Greenwood's development server is available using the `devServ
 
 #### Example
 ```js
-module.exports = {
+export default {
   devServer: {
     extensions: ['.txt', '.rtf'],
     port: 8181,
@@ -60,7 +60,7 @@ You can install and provide custom **unifiedjs** [presets](https://github.com/un
 #### Example
 
 ```js
-module.exports = {
+export default {
   markdown: {
     settings: { commonmark: true },
     plugins: [
@@ -81,7 +81,7 @@ This is an example of the `meta` configuration for the [Greenwood website](https
 const FAVICON_HREF = '/assets/favicon.ico';
 const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';
 
-module.exports = {
+export default {
   meta: [
     { name: 'description', content: META_DESCRIPTION },
     { name: 'twitter:site', content: '@PrjEvergreen' },
@@ -122,7 +122,7 @@ Greenwood provides a couple different "modes" by which you can indicate the type
 
 #### Example
 ```js
-module.exports = {
+export default {
   mode: 'mpa'
 }
 ```
@@ -145,7 +145,7 @@ Greenwood provides a number of different ways to send hints to Greenwood as to h
 
 #### Example
 ```js
-module.exports = {
+export default {
   optimization: 'inline'
 }
 ```
@@ -170,7 +170,7 @@ By default the directory Greenwood will use to look for your local content is _p
 
 #### Example
 ```js
-module.exports = {
+export default {
   pagesDirectory: 'docs' // Greenwood will look for pages at src/docs/
 }
 ```
@@ -183,7 +183,7 @@ _However_, you may not need that, like for a [SPA (Single Page Application)](/do
 
 #### Example
 ```js
-module.exports = {
+export default {
   prerender: false
 }
 ```
@@ -196,7 +196,7 @@ By default the directory Greenwood will use to look for your templates is _templ
 
 #### Example
 ```js
-module.exports = {
+export default {
   templatesDirectory: 'layouts' // Greenwood will look for templates at src/layouts/
 }
 ```
@@ -207,7 +207,7 @@ A default `<title>` element for all pages can be configured with the `title` opt
 #### Example
 An example of configuring your app's title:
 ```js
-module.exports = {
+export default {
   title: 'My Static Site'
 }
 ```
@@ -220,9 +220,9 @@ Path to where all your project files will be located.  Using an absolute path is
 Setting the workspace path to be the _www/_ folder in the current directory from where Greenwood is being run.
 
 ```js
-const path = require('path');
+import path from 'path';
 
-module.exports = {
+export default {
   workspace: path.join(process.cwd(), 'www')
 }
 ```

www/pages/docs/index.md

@@ -33,11 +33,10 @@ With Greenwood installed, you can run its CLI to generate your site.  The princi
 - `greenwood serve`: Generates a production build of the project and serves it locally on a simple web server.
 - `greenwood eject`: Ejects CLI configurations (Just Rollup right now) to your working directory for more advanced customization.  [YMMV](https://www.howtogeek.com/693183/what-does-ymmv-mean-and-how-do-you-use-it/).
 
-You can define npm scripts in _package.json_ like so to automate your workflows:
-
+You can define npm scripts in _package.json_ like so to automate your workflows.  You also need to define a `type` field with the value of `module`:
 ```json
 {
-
+  "type": "module",
   "scripts": {
     "build": "greenwood build",
     "start": "greenwood develop",

www/pages/docs/markdown.md

@@ -34,7 +34,7 @@ Using your _greenwood.config.js_ you can have additional [markdown customization
 For example, to add support for [**Prism**](https://prismjs.com/) for syntax highlighting, after installing `@mapbox/rehype-prism` via **npm**, just add following to your config file:
 
 ```js
-module.exports = {
+export default {
 
   ...
 

www/pages/getting-started/next-steps.md

@@ -16,7 +16,7 @@ Although configuration is a topic all on its own, we do want to walk through set
 To change the title of the project (like in the companion repo), create a (NodeJS) module called _greenwood.config.js_ at the root of your project and configure the `export` object with a title property.
 
 ```javascript
-module.exports = {
+export default {
   title: 'My Personal Site'
 };
 ```

www/pages/getting-started/project-setup.md

@@ -36,9 +36,10 @@ All set!
 ### Configuring Workflows
 With Greenwood installed, let's create a couple of **npm** scripts so that we can automate our development workflows with easy to remember commands.
 
-In _package.json_, edit the `scripts` section accordingly by adding:
+In _package.json_, edit the `scripts` and `type` sections accordingly by adding:
 ```json
 {
+  "type": "module",
   "scripts": {
     "...": "....",
 

www/pages/guides/theme-packs.md

@@ -46,6 +46,7 @@ _package.json_
   "version": "0.1.0",
   "description": "My Custom Greenwood Theme Pack",
   "main": "my-theme-pack.js",
+  "type": "module",
   "files": [
     "dist/"
   ]
@@ -54,9 +55,9 @@ _package.json_
 
 _my-theme-pack.js_
 ```js
-const path = require('path');
+import path from 'path';
 
-module.exports = () => [{
+const myThemePack = () => [{
   type: 'context',
   name: 'my-theme-pack:context',
   provider: () => {
@@ -69,6 +70,10 @@ module.exports = () => [{
     };
   }
 }];
+
+export {
+  myThemePack
+};
 ```
 
 _src/layouts/blog-post.html_
@@ -118,16 +123,17 @@ The main consideration needed for development is that your files won't be in _no
 
 So using our current example, our final _my-theme-pack.js_ would look like this:
 ```js
-const path = require('path');
+import path from 'path';
+import { URL } from 'url';
 
-module.exports = (options = {}) => [{
+const myThemePackPlugin = (options = {}) => [{
   type: 'context',
   name: 'my-theme-pack:context',
   provider: compilation) => {
     // you can use other directory names besides templates/ this way!
     const templateLocation = options.__isDevelopment
       ? path.join(compilation.context.userWorkspace, 'layouts')
-      : path.join(__dirname, 'dist/layouts');
+      : path.join(new URL('', import.meta.url).pathname, 'dist/layouts');
 
     return {
       templates: [
@@ -136,17 +142,23 @@ module.exports = (options = {}) => [{
     };
   }
 }];
+
+export {
+  myThemePackPlugin
+};
 ```
 
 And our final _greenwood.config.js_ would look like this, which adds a "one-off" [resource plugin](/plugins/resource/) to tell Greenwood to route requests to your theme pack files away from _node_modules+ and to the location of your projects files for development.  
 
 Additionally, we make sure to pass the flag from above for `__isDevelopment` to our plugin.
 ```js
 // shared from another test
-const myThemePackPlugin = require('./my-theme-pack');
-const packageName = require('./package.json').name;
-const path = require('path');
-const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
+import { myThemePackPlugin } from './my-theme-pack.js';
+import fs from 'fs';
+import path from 'path';
+import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js';
+
+const packageName = JSON.parse(fs.readFileSync('./package.json', 'utf-8')).name;
 
 class MyThemePackDevelopmentResource extends ResourceInterface {
   constructor(compilation, options) {
@@ -167,7 +179,7 @@ class MyThemePackDevelopmentResource extends ResourceInterface {
   }
 }
 
-module.exports = {
+export default {
   plugins: [
     ...myThemePackPlugin({
       __isDevelopment: true
@@ -210,6 +222,7 @@ When it comes to publishing, it should be fairly straightforward, and you'll jus
       "version": "0.1.0",
       "description": "My Custom Greenwood Theme Pack",
       "main": "my-theme-pack.js",
+      "tyoe": "module",
       "files": [
         "dist/"
       ],

www/pages/plugins/context.md

@@ -45,20 +45,22 @@ Your plugin might look like this:
  *     acme-theme-pack.js
  *     package.json
  */
-const path = require('path');
+import path from 'path');
 
-module.exports = () => [{
-  type: 'context',
-  name: 'acme-theme-pack:context',
-  provider: () => {
-    return {
-      templates: [
-        // when the plugin is installed __dirname will be /path/to/node_modules/<your-package>/
-        path.join(__dirname, 'dist/layouts')
-      ]
-    };
+export function myCopyPlugin() {
+  return {
+    type: 'context',
+    name: 'acme-theme-pack:context',
+    provider: () => {
+      return {
+        templates: [
+          // when the plugin is installed __dirname will be /path/to/node_modules/<your-package>/
+          path.join(__dirname, 'dist/layouts')
+        ]
+      };
+    }
   }
-}];
+}
 ```
 
 > Additionally, you can provide the default _app.html_ and _page.html_ templates this way as well!

www/pages/plugins/copy.md

@@ -13,25 +13,27 @@ The copy plugins allow users to copy files around as part of the [build](/docs/#
 This plugin supports providing an array of "location" objects that can either be files or directories.
 
 ```js
-const path = require('path');
-
-module.exports = () => [{
-  type: 'copy',
-  name: 'plugin-copy-some-files',
-  provider: (compilation) => {
-    const { context } = compilation;
-
-    return [{
-      // can only copy a file to a file
-      from: path.join(context.userWorkspace, 'robots.txt'),
-      to: path.join(context.outputDir, 'robots.txt')
-    }, {
-      // can only copy a directory to a directory
-      from: path.join(context.userWorkspace, 'pdfs'),
-      to: path.join(context.outputDir, 'pdfs')
-    }];
+import path from 'path';
+
+export function myCopyPlugin(options = {}) {
+  return {
+    type: 'copy',
+    name: 'plugin-copy-some-files',
+    provider: (compilation) => {
+      const { context } = compilation;
+
+      return [{
+        // can only copy a file to a file
+        from: path.join(context.userWorkspace, 'robots.txt'),
+        to: path.join(context.outputDir, 'robots.txt')
+      }, {
+        // can only copy a directory to a directory
+        from: path.join(context.userWorkspace, 'pdfs'),
+        to: path.join(context.outputDir, 'pdfs')
+      }];
+    }
   }
-}];
+};
 ```
 
 

www/pages/plugins/index.md

@@ -29,7 +29,7 @@ Each plugin must return a function that has the following three properties:.
 
 Here is an example of creating a plugin in a _greenwood.config.js_.
 ```javascript
-module.exports = {
+export default {
 
   ...
 
@@ -54,7 +54,7 @@ module.exports = {
 This is Greenwood's default configuration options merged with any user provided configuration options in _greenwood.config.js_.  See the [configuration docs](/docs/configuration/) for more info.
 
 ```javascript
-module.exports = {
+export default {
 
   title: 'My Blog',
 
@@ -84,10 +84,10 @@ Here are paths you can get from `context`, all of which are absolute URLs:
 
 Example using `context` to write to `publicDir` from _greenwood.config.js_
 ```javascript
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
-module.exports = {
+export default {
 
   plugins: [{
     name: 'my-plugin'