diff --git a/greenwood.config.js b/greenwood.config.js
index 0eab90367..970f3e119 100644
--- a/greenwood.config.js
+++ b/greenwood.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
-// const pluginGoogleAnalytics = require('./packages/plugin-google-analytics/src/index');
-// const pluginPolyfills = require('./packages/plugin-polyfills/src/index');
+const pluginGoogleAnalytics = require('./packages/plugin-google-analytics/src/index');
+const pluginPolyfills = require('./packages/plugin-polyfills/src/index');
 
 const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';
 const FAVICON_HREF = '/assets/favicon.ico';
@@ -20,13 +20,12 @@ module.exports = {
     { rel: 'icon', href: FAVICON_HREF },
     { name: 'google-site-verification', content: '4rYd8k5aFD0jDnN0CCFgUXNe4eakLP4NnA18mNnK5P0' }
   ],
-  // TODO
-  // plugins: [
-  //   ...pluginGoogleAnalytics({
-  //     analyticsId: 'UA-147204327-1'
-  //   }),
-  //   ...pluginPolyfills()
-  // ],
+  plugins: [
+    pluginGoogleAnalytics({
+      analyticsId: 'UA-147204327-1'
+    }),
+    pluginPolyfills()
+  ],
   markdown: {
     plugins: [
       '@mapbox/rehype-prism',
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index a8ea9b94a..ca0eaab51 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -37,9 +37,28 @@ function greenwoodHtmlPlugin(compilation) {
 
   return {
     name: 'greenwood-html-plugin',
-    load(id) {
-      if (path.extname(id) === '.html') {
-        return '';
+    async load(id) {
+      const extension = path.extname(id);
+      
+      if (extension === '.html') {
+        return Promise.resolve('');
+      }
+
+      // handle custom user file extensions
+      const customResources = compilation.config.plugins.filter((plugin) => {
+        return plugin.type === 'resource';
+      }).map((plugin) => {
+        return plugin.provider(compilation);
+      }).filter((resource) => {
+        if (resource.shouldServe(id)) {
+          return resource;
+        }
+      });
+
+      if (customResources.length) {
+        const response = await customResources[0].serve(id);
+
+        return response.body;
       }
     },
     // TODO do this during load instead?
@@ -59,7 +78,7 @@ function greenwoodHtmlPlugin(compilation) {
 
             const srcPath = src.replace('../', './');
             const source = fs.readFileSync(path.join(userWorkspace, srcPath), 'utf-8');
-            
+
             that.emitFile({
               type: 'chunk',
               id: srcPath,
diff --git a/packages/cli/src/lib/resource-interface.js b/packages/cli/src/lib/resource-interface.js
new file mode 100644
index 000000000..5430f0dca
--- /dev/null
+++ b/packages/cli/src/lib/resource-interface.js
@@ -0,0 +1,62 @@
+const path = require('path');
+
+class ResourceInterface {
+  constructor(compilation, options = {}) {
+    this.compilation = compilation;
+    this.options = options;
+    this.extensions = [];
+    this.contentType = '';
+  }
+
+  // hidden API?
+  shouldResolve(url) {
+    const { extensions } = this;
+    
+    return extensions.length && extensions.length > 0 
+      || extensions[0] === '*' 
+      || extensions.indexOf(path.extname(url) >= 0);
+  }
+
+  async resolve(url) {
+    return Promise.resolve(url);
+  }
+
+  // introduce a new resource type to the browser, on the fly, ex: `<script src="index.ts">`
+  // eslint-disable-next-line no-unused-vars
+  shouldServe(url, headers) {
+    return this.extensions.indexOf(path.extname(url)) >= 0;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  async serve(url, headers) {
+    return Promise.resolve({});
+  }
+
+  // handle an already resolved / served resource
+  // eslint-disable-next-line no-unused-vars
+  shouldIntercept(url, headers) {
+    return false;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  async intercept(contents, headers) {
+    return Promise.resolve(contents);
+  }
+
+  // handle a (final) resource type post build, pre optimize, 
+  // ex: remove es shim <script>, convert .ts -> .js and update path references 
+  // this is only an _index.html_ file, BYOA (Bring Your Own AST)
+  // eslint-disable-next-line no-unused-vars
+  shouldOptimize(contents, url) {
+    return false;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  async optimize (contents, url) {
+    return Promise.resolve(contents);
+  }
+}
+
+module.exports = {
+  ResourceInterface
+};
\ No newline at end of file
diff --git a/packages/cli/src/lifecycles/config.js b/packages/cli/src/lifecycles/config.js
index d73fc9aa7..2d830ce07 100644
--- a/packages/cli/src/lifecycles/config.js
+++ b/packages/cli/src/lifecycles/config.js
@@ -23,7 +23,7 @@ module.exports = readAndMergeConfig = async() => {
       
       if (fs.existsSync(path.join(process.cwd(), 'greenwood.config.js'))) {
         const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.js'));
-        const { workspace, devServer, title, markdown, meta } = userCfgFile;
+        const { workspace, devServer, title, markdown, meta, plugins } = userCfgFile;
 
         // workspace validation
         if (workspace) {
@@ -68,24 +68,29 @@ module.exports = readAndMergeConfig = async() => {
         //   reject(`Error: provided optimization "${optimization}" is not supported.  Please use one of: ${optimizations.join(', ')}.`);
         // }
 
-        // TODO
-        // if (plugins && plugins.length > 0) {
-        //   const types = ['index', 'webpack'];
+        if (plugins && plugins.length > 0) {
+          const types = ['resource'];
 
-        //   plugins.forEach(plugin => {
-        //     if (!plugin.type || types.indexOf(plugin.type) < 0) {
-        //       reject(`Error: greenwood.config.js plugins must be one of type "${types.join(', ')}". got "${plugin.type}" instead.`);
-        //     }
+          plugins.forEach(plugin => {
+            if (!plugin.type || types.indexOf(plugin.type) < 0) {
+              reject(`Error: greenwood.config.js plugins must be one of type "${types.join(', ')}". got "${plugin.type}" instead.`);
+            }
 
-        //     if (!plugin.provider || typeof plugin.provider !== 'function') {
-        //       const providerTypeof = typeof plugin.provider;
+            if (!plugin.provider || typeof plugin.provider !== 'function') {
+              const providerTypeof = typeof plugin.provider;
 
-        //       reject(`Error: greenwood.config.js plugins provider must of type function. got ${providerTypeof} instead.`);
-        //     }
-        //   });
+              reject(`Error: greenwood.config.js plugins provider must be a function. got ${providerTypeof} instead.`);
+            }
 
-        //   customConfig.plugins = customConfig.plugins.concat(plugins);
-        // }
+            if (!plugin.name || typeof plugin.name !== 'string') {
+              const nameTypeof = typeof plugin.name;
+
+              reject(`Error: greenwood.config.js plugins must have a name. got ${nameTypeof} instead.`);
+            }
+          });
+
+          customConfig.plugins = customConfig.plugins.concat(plugins);
+        }
 
         if (devServer && Object.keys(devServer).length > 0) {
 
@@ -95,7 +100,6 @@ module.exports = readAndMergeConfig = async() => {
               reject(`Error: greenwood.config.js devServer port must be an integer.  Passed value was: ${devServer.port}`);
             } else {
               customConfig.devServer.port = devServer.port;
-              // console.log(`custom port provided => ${customConfig.devServer.port}`);
             }
           }
         }
diff --git a/packages/cli/src/lifecycles/serialize.js b/packages/cli/src/lifecycles/serialize.js
index 343e14bce..819eed7c8 100644
--- a/packages/cli/src/lifecycles/serialize.js
+++ b/packages/cli/src/lifecycles/serialize.js
@@ -1,14 +1,27 @@
 const BrowserRunner = require('../lib/browser');
-const { promises: fsp } = require('fs');
 const fs = require('fs');
 const path = require('path');
+const pluginResourceStandardHtml = require('../plugins/resource/plugin-standard-html');
 
 module.exports = serializeCompilation = async (compilation) => {
+  const compilationCopy = Object.assign({}, compilation);
   const browserRunner = new BrowserRunner();
+  const optimizeResources = [
+    pluginResourceStandardHtml.provider(compilationCopy),
+    ...compilation.config.plugins.filter((plugin) => {
+      const provider = plugin.provider(compilationCopy);
+
+      return plugin.type === 'resource' 
+        && provider.shouldOptimize 
+        && provider.optimize;
+    }).map((plugin) => {
+      return plugin.provider(compilationCopy);
+    })
+  ];
+
   await browserRunner.init();
 
   const runBrowser = async (serverUrl, pages, outputDir) => {
-
     try {
       return Promise.all(pages.map(async(page) => {
         const { route } = page;
@@ -16,29 +29,25 @@ module.exports = serializeCompilation = async (compilation) => {
         
         return await browserRunner
           .serialize(`${serverUrl}${route}`)
-          .then(async (html) => {
+          .then(async (indexHtml) => {
             const outputPath = `${outputDir}${route}index.html`;
-            
-            // TODO allow setup / teardown (e.g. module shims, then remove module-shims)
-            let htmlModified = html;
-  
-            // TODO should really be happening via plugins or other standardize setup / teardown mechanism
-            htmlModified = htmlModified.replace(/<script src="\/node_modules\/@webcomponents\/webcomponentsjs\/webcomponents-bundle.js"><\/script>/, '');
-            htmlModified = htmlModified.replace(/<script type="importmap-shim">.*?<\/script>/s, '');
-            htmlModified = htmlModified.replace(/<script defer="" src="\/node_modules\/es-module-shims\/dist\/es-module-shims.js"><\/script>/, '');
-            htmlModified = htmlModified.replace(/<script type="module-shim"/g, '<script type="module"');
-  
-            // console.debug('final HTML', htmlModified);
             console.info(`Serializing complete for page ${route}.`);
-            // console.debug(`outputting to... ${outputDir.replace(`${process.cwd()}`, '.')}${outputPath}`);
             
+            const htmlOptimized = await optimizeResources.reduce(async (htmlPromise, resource) => {
+              const html = await htmlPromise;
+              
+              return resource.shouldOptimize(html)
+                ? resource.optimize(html)
+                : Promise.resolve(html);
+            }, Promise.resolve(indexHtml));
+
             if (!fs.existsSync(path.join(outputDir, route))) {
               fs.mkdirSync(path.join(outputDir, route), {
                 recursive: true
               });
             }
             
-            await fsp.writeFile(outputPath, htmlModified);
+            await fs.promises.writeFile(outputPath, htmlOptimized);
           });
       }));
     } catch (e) {
diff --git a/packages/cli/src/lifecycles/serve.js b/packages/cli/src/lifecycles/serve.js
index 0b0e13c8e..700bcbd27 100644
--- a/packages/cli/src/lifecycles/serve.js
+++ b/packages/cli/src/lifecycles/serve.js
@@ -1,61 +1,109 @@
-/* eslint-disable complexity */
-// TODO ^^^
-const { promises: fsp } = require('fs');
+const fs = require('fs');
 const path = require('path');
 const Koa = require('koa');
 
-const Transform = require('../transforms/transform.interface');
-const HTMLTransform = require('../transforms/transform.html');
-const MarkdownTransform = require('../transforms/transform.md');
-const CSSTransform = require('../transforms/transform.css');
-const JSTransform = require('../transforms/transform.js');
-const JSONTransform = require('../transforms/transform.json.js');
-const AssetTransform = require('../transforms/transform.assets');
+const pluginNodeModules = require('../plugins/resource/plugin-node-modules');
+const pluginResourceStandardCss = require('../plugins/resource/plugin-standard-css');
+const pluginResourceStandardFont = require('../plugins/resource/plugin-standard-font');
+const pluginResourceStandardHtml = require('../plugins/resource/plugin-standard-html');
+const pluginResourceStandardImage = require('../plugins/resource/plugin-standard-image');
+const pluginResourceStandardJavaScript = require('../plugins/resource/plugin-standard-javascript');
+const pluginResourceStandardJson = require('../plugins/resource/plugin-standard-json');
+const { ResourceInterface } = require('../lib/resource-interface');
+const pluginUserWorkspace = require('../plugins/resource/plugin-user-workspace');
 
 function getDevServer(compilation) {
   const app = new Koa();
+  const compilationCopy = Object.assign({}, compilation);
+  const resources = [
+    // Greenwood default standard resource plugins
+    pluginResourceStandardCss.provider(compilationCopy),
+    pluginResourceStandardFont.provider(compilationCopy),
+    pluginResourceStandardHtml.provider(compilationCopy),
+    pluginResourceStandardImage.provider(compilationCopy),
+    pluginResourceStandardJavaScript.provider(compilationCopy),
+    pluginResourceStandardJson.provider(compilationCopy),
+
+    // custom user resource plugins
+    ...compilation.config.plugins.filter((plugin) => {
+      return plugin.type === 'resource';
+    }).map((plugin) => {
+      const provider = plugin.provider(compilationCopy);
+
+      if (!(provider instanceof ResourceInterface)) {
+        console.warn(`WARNING: ${plugin.name}'s provider is not an instance of ResourceInterface.`);
+      }
 
-  app.use(async ctx => {
-    let response = {
-      body: '',
-      contentType: '',
-      extension: ''
-    };
+      return provider;
+    })
+  ];
+
+  // resolve urls to paths first
+  app.use(async (ctx, next) => {
+    const resolveResources = [
+      pluginUserWorkspace.provider(compilation),
+      pluginNodeModules.provider(compilation)
+    ];
+
+    ctx.url = await resolveResources.reduce(async (responsePromise, resource) => {
+      const response = await responsePromise;
+      const { url } = ctx; 
+      
+      return resource.shouldResolve(url)
+        ? resource.resolve(url)
+        : Promise.resolve(response);
+    }, Promise.resolve(''));
+    
+    await next();
+  });
 
-    request = {
-      header: ctx.request.header,
-      url: ctx.request.url,
-      compilation: { ...compilation }
+  // then handle serving urls
+  app.use(async (ctx, next) => {
+    const responseAccumulator = {
+      body: ctx.body,
+      contentType: ctx.response.contentType
     };
+    
+    const reducedResponse = await resources.reduce(async (responsePromise, resource) => {
+      const response = await responsePromise;
+      const { url, headers } = ctx;
+
+      if (resource.shouldServe(url, headers)) {
+        const resolvedResource = await resource.serve(url, headers);
+        
+        return Promise.resolve({
+          ...response,
+          ...resolvedResource
+        });
+      } else {
+        return Promise.resolve(response);
+      }
+    }, Promise.resolve(responseAccumulator));
 
-    try {
-      // default transforms 
-      const defaultTransforms = [
-        new HTMLTransform(request),
-        new MarkdownTransform(request),
-        new CSSTransform(request),
-        new JSTransform(request),
-        new JSONTransform(request),
-        new AssetTransform(request)
-      ];
-
-      // walk through all transforms
-      await Promise.all(defaultTransforms.map(async (plugin) => {
-        if (plugin instanceof Transform && plugin.shouldTransform()) {
-
-          const transformedResponse = await plugin.applyTransform();
-
-          response = { 
-            ...transformedResponse
-          };
-        }
-      }));
+    ctx.set('Content-Type', reducedResponse.contentType);
+    ctx.body = reducedResponse.body;
 
-      ctx.set('Content-Type', `${response.contentType}`);
-      ctx.body = response.body;
-    } catch (err) {
-      console.log(err);
-    }
+    await next();
+  });
+
+  // allow intercepting of urls
+  app.use(async (ctx) => {
+    const modifiedResources = resources.concat(pluginNodeModules.provider(compilation));
+
+    const reducedResponse = await modifiedResources.reduce(async (responsePromise, resource) => {
+      const response = await responsePromise;
+      const { url, headers } = ctx;
+
+      if (resource.shouldIntercept(url, headers)) {
+        const interceptedResponse = await resource.intercept(response);
+        
+        return Promise.resolve(interceptedResponse);
+      } else {
+        return Promise.resolve(response);
+      }
+    }, Promise.resolve(ctx.body));
+
+    ctx.body = reducedResponse;
   });
 
   return app;
@@ -65,26 +113,26 @@ function getProdServer(compilation) {
   const app = new Koa();
 
   app.use(async ctx => {
-    // console.debug('URL', ctx.request.url);
     const { outputDir } = compilation.context;
     const { url } = ctx.request;
 
     if (url.endsWith('/') || url.endsWith('.html')) {
       const barePath = url.endsWith('/') ? path.join(url, 'index.html') : url;
-      const contents = await fsp.readFile(path.join(outputDir, barePath), 'utf-8');
+      const contents = await fs.promises.readFile(path.join(outputDir, barePath), 'utf-8');
+      
       ctx.set('Content-Type', 'text/html');
       ctx.body = contents;
     }
 
     if (url.endsWith('.js')) {
-      const contents = await fsp.readFile(path.join(outputDir, url), 'utf-8');
+      const contents = await fs.promises.readFile(path.join(outputDir, url), 'utf-8');
 
       ctx.set('Content-Type', 'text/javascript');
       ctx.body = contents;
     }
 
     if (url.endsWith('.css')) {
-      const contents = await fsp.readFile(path.join(outputDir, url), 'utf-8');
+      const contents = await fs.promises.readFile(path.join(outputDir, url), 'utf-8');
 
       ctx.set('Content-Type', 'text/css');
       ctx.body = contents;
@@ -102,21 +150,21 @@ function getProdServer(compilation) {
         ctx.set('Content-Type', `image/${type}`);
 
         if (ext === '.svg') {
-          ctx.body = await fsp.readFile(assetPath, 'utf-8');
+          ctx.body = await fs.promises.readFile(assetPath, 'utf-8');
         } else {
-          ctx.body = await fsp.readFile(assetPath); 
+          ctx.body = await fs.promises.readFile(assetPath); 
         }
       } else if (['.woff2', '.woff', '.ttf'].includes(ext)) {
         ctx.set('Content-Type', `font/${type}`);
-        ctx.body = await fsp.readFile(assetPath);
+        ctx.body = await fs.promises.readFile(assetPath);
       } else if (['.ico'].includes(ext)) {
         ctx.set('Content-Type', 'image/x-icon');
-        ctx.body = await fsp.readFile(assetPath);
+        ctx.body = await fs.promises.readFile(assetPath);
       }
     }
 
     if (url.endsWith('.json')) {
-      const contents = await fsp.readFile(path.join(outputDir, 'graph.json'), 'utf-8');
+      const contents = await fs.promises.readFile(path.join(outputDir, 'graph.json'), 'utf-8');
 
       ctx.set('Content-Type', 'application/json');
       ctx.body = JSON.parse(contents);
diff --git a/packages/cli/src/plugins/resource/plugin-node-modules.js b/packages/cli/src/plugins/resource/plugin-node-modules.js
new file mode 100644
index 000000000..b6038fd3f
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-node-modules.js
@@ -0,0 +1,108 @@
+/*
+ * 
+ * Detects and fully resolve srequest to node_modules.
+ *
+ */
+const acorn = require('acorn');
+const fs = require('fs');
+const path = require('path');
+const { ResourceInterface } = require('../../lib/resource-interface');
+const walk = require('acorn-walk');
+
+class NodeModulesResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['*'];
+  }
+
+  shouldResolve(url) {
+    return url.indexOf('node_modules/') >= 0;
+  }
+
+  async resolve(url) {
+    return new Promise((resolve, reject) => {
+      try {
+        const relativeUrl = url.replace(this.compilation.context.userWorkspace, '');
+        const nodeModulesUrl = path.join(process.cwd(), relativeUrl);
+        
+        resolve(nodeModulesUrl);
+      } catch (e) {
+        console.error(e);
+        reject(e);
+      }
+    });
+  }
+
+  shouldIntercept(url) {
+    return path.extname(url) === '';
+  }
+
+  async intercept(contents) {
+    return new Promise((resolve, reject) => {
+      try {
+        const { userWorkspace } = this.compilation.context;
+        let newContents = contents;
+        
+        newContents = newContents.replace(/type="module"/g, 'type="module-shim"');
+
+        const importMap = {};
+        const userPackageJson = fs.existsSync(`${userWorkspace}/package.json`)
+          ? require(path.join(userWorkspace, 'package.json')) // its a monorepo?
+          : fs.existsSync(`${process.cwd()}/package.json`)
+            ? require(path.join(process.cwd(), 'package.json'))
+            : {};
+
+        Object.keys(userPackageJson.dependencies || {}).forEach(dependency => {
+          const packageRootPath = path.join(process.cwd(), './node_modules', dependency);
+          const packageJsonPath = path.join(packageRootPath, 'package.json');
+          const packageJson = require(packageJsonPath);
+          const packageEntryPointPath = path.join(process.cwd(), './node_modules', dependency, packageJson.main);
+          const packageFileContents = fs.readFileSync(packageEntryPointPath, 'utf-8');
+
+          walk.simple(acorn.parse(packageFileContents, { sourceType: 'module' }), {
+            ImportDeclaration(node) {
+              // console.log('Found a ImportDeclaration');
+              const sourceValue = node.source.value;
+
+              if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
+                // console.log(`found a bare import for ${sourceValue}!!!!!`);
+                importMap[sourceValue] = `/node_modules/${sourceValue}`;
+              }
+            },
+            ExportNamedDeclaration(node) {
+              // console.log('Found a ExportNamedDeclaration');
+              const sourceValue = node && node.source ? node.source.value : '';
+
+              if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
+                // console.log(`found a bare export for ${sourceValue}!!!!!`);
+                importMap[sourceValue] = `/node_modules/${sourceValue}`;
+              }
+            }
+          });
+          
+          importMap[dependency] = `/node_modules/${dependency}/${packageJson.main}`;
+        });
+
+        newContents = newContents.replace('<head>', `
+          <head>
+            <script defer src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+            <script type="importmap-shim">
+              {
+                "imports": ${JSON.stringify(importMap, null, 1)}
+              }
+            </script>
+        `);
+
+        resolve(newContents);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-node-modules',
+  provider: (compilation, options) => new NodeModulesResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
similarity index 55%
rename from packages/cli/src/transforms/transform.css.js
rename to packages/cli/src/plugins/resource/plugin-standard-css.js
index 8430d65b7..e940d88c1 100644
--- a/packages/cli/src/transforms/transform.css.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -1,26 +1,28 @@
+/*
+ * 
+ * Manages web standard resource related operations for CSS.
+ * This is a Greenwood default plugin.
+ *
+ */
 const fs = require('fs');
 const path = require('path');
 const postcss = require('postcss');
-const TransformInterface = require('./transform.interface');
+const { ResourceInterface } = require('../../lib/resource-interface');
 
-class CSSTransform extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.css'], 'text/css');
+class StandardCssResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.css'];
+    this.contentType = 'text/css';
   }
 
-  async applyTransform() {
-    // do stuff with path
+  async serve(url, header) {
     return new Promise(async (resolve, reject) => {
       try {
-        const { url, header } = this.request;
-        const destHeader = header['sec-fetch-dest'];
-        const cssPath = url.indexOf('/node_modules') >= 0
-          ? path.join(process.cwd(), url)
-          : path.join(this.workspace, url);
-        
-        let css = await fs.promises.readFile(cssPath, 'utf-8');
-        let body = '', contentType = '';
+        const destHeader = header['sec-fetch-dest'];        
+        let css = await fs.promises.readFile(url, 'utf-8');
+        let body = '';
+        let contentType = '';
 
         // TODO try and use context.projectDirectory
         if (fs.existsSync(path.join(process.cwd(), 'postcss.config.js'))) {
@@ -29,7 +31,7 @@ class CSSTransform extends TransformInterface {
           
           if (userPostcssPlugins.length > 0) {
             const result = await postcss(userPostcssPlugins)
-              .process(css, { from: cssPath });
+              .process(css, { from: url });
 
             css = result.css;
           }
@@ -37,19 +39,19 @@ class CSSTransform extends TransformInterface {
 
         // <style> tag used
         if (destHeader === 'style') {
-          contentType = 'text/css';
+          contentType = this.contentType;
           body = css;
         } else if (destHeader === 'empty') {
           // assume JS import being being used
           contentType = 'text/javascript';
           // TODO line breaks are bad for fetch, need to return CSS string all on one line
+          // TODO this should be a seperate plugin / package
           body = `const css = "${css.replace(/\r?\n|\r/g, ' ')}";\nexport default css;`;
         }
 
         resolve({
           body,
-          contentType,
-          extension: this.extentsions
+          contentType
         });
       } catch (e) {
         reject(e);
@@ -58,4 +60,8 @@ class CSSTransform extends TransformInterface {
   }
 }
 
-module.exports = CSSTransform;
\ No newline at end of file
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-css',
+  provider: (compilation, options) => new StandardCssResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-font.js b/packages/cli/src/plugins/resource/plugin-standard-font.js
new file mode 100644
index 000000000..ec898b57d
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-standard-font.js
@@ -0,0 +1,38 @@
+/*
+ * 
+ * Manages web standard resource related operations for JavaScript.
+ * This is a Greenwood default plugin.
+ *
+ */
+const fs = require('fs');
+const path = require('path');
+const { ResourceInterface } = require('../../lib/resource-interface');
+
+class StandardFontResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.woff2', '.woff', '.ttf']; // TODO support more types?
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const contentType = path.extname(url).replace('.', '');
+        const body = await fs.promises.readFile(url);
+
+        resolve({
+          body,
+          contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-font',
+  provider: (compilation, options) => new StandardFontResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
new file mode 100644
index 000000000..590cfb6fa
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -0,0 +1,273 @@
+/*
+ * 
+ * Manages web standard resource related operations for HTML and markdown.
+ * This is a Greenwood default plugin.
+ *
+ */
+const frontmatter = require('front-matter');
+const fs = require('fs');
+const htmlparser = require('node-html-parser');
+const path = require('path');
+const rehypeStringify = require('rehype-stringify');
+const rehypeRaw = require('rehype-raw');
+const remarkFrontmatter = require('remark-frontmatter');
+const remarkParse = require('remark-parse');
+const remarkRehype = require('remark-rehype');
+const { ResourceInterface } = require('../../lib/resource-interface');
+const unified = require('unified');
+
+// TODO better error handling / messaging for users if things are not where they are expected to be
+// general refactoring
+const getPageTemplate = (barePath, workspace, template) => {
+  const templatesDir = path.join(workspace, 'templates');
+
+  if (template && fs.existsSync(`${templatesDir}/${template}.html`)) {
+    // use a predefined template, usually from markdown frontmatter
+    contents = fs.readFileSync(`${templatesDir}/${template}.html`, 'utf-8');
+  } else if (fs.existsSync(`${barePath}.html`)) {
+    // if the page is already HTML, use that as the template
+    contents = fs.readFileSync(`${barePath}.html`, 'utf-8');
+  } else if (fs.existsSync(`${templatesDir}/page.html`)) {
+    // else look for default page template
+    contents = fs.readFileSync(`${templatesDir}/page.html`, 'utf-8');
+  } else if (fs.existsSync(`${templatesDir}/app.html`)) {
+    // fallback to just using their app template
+    contents = fs.readFileSync(`${templatesDir}/app.html`, 'utf-8');
+  } else {
+    // fallback to using Greenwood's stock app template
+    contents = fs.readFileSync(path.join(__dirname, '../../templates/app.html'), 'utf-8');
+  }
+
+  return contents;
+};
+
+const getAppTemplate = (contents, userWorkspace) => {
+
+  const appTemplate = `${userWorkspace}/templates/app.html`;
+  let appTemplateContents = '';
+
+  if (fs.existsSync(appTemplate)) {
+    appTemplateContents = fs.readFileSync(appTemplate, 'utf-8');
+    const root = htmlparser.parse(contents, {
+      script: true,
+      style: true,
+      noscript: true,
+      pre: true
+    });
+    const body = root.querySelector('body').innerHTML;
+    const headScripts = root.querySelectorAll('head script');
+    const headLinks = root.querySelectorAll('head link');
+
+    appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
+    headScripts.forEach(script => {
+      if (script.rawAttrs !== '') {
+        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
+          </script>\n
+          <script ${script.rawAttrs}></script>\n
+        `);
+      }
+
+      if (script.rawAttrs === '') {
+        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
+          </script>\n
+          <script>
+            ${script.text}
+          </script>\n
+        `);
+      }
+    });
+
+    headLinks.forEach(link => {
+      appTemplateContents = appTemplateContents.replace(/<\/link>/, `
+        </link>\n
+        <link ${link.rawAttrs}></link>\n
+      `);
+    });
+  }
+
+  return appTemplateContents || contents;
+};
+
+const getUserScripts = (contents) => {
+  // TODO use an HTML parser?  https://www.npmjs.com/package/node-html-parser
+  if (process.env.__GWD_COMMAND__ === 'develop') { // eslint-disable-line no-underscore-dangle
+    // TODO setup and teardown should be done together
+    // console.debug('running in develop mode, attach live reload script');
+    contents = contents.replace('</head>', `
+        <script src="http://localhost:35729/livereload.js?snipver=1"></script>
+      </head>
+    `);
+  }
+
+  if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
+    // TODO setup and teardown should be done together
+    // console.debug('running in build mode, polyfill WebComponents for puppeteer');
+    contents = contents.replace('<head>', `
+      <head>
+        <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    `);
+  }
+  return contents;
+};
+
+const getMetaContent = (url, config, contents) => {
+  const title = config.title || '';
+  const metaContent = config.meta.map(item => {
+    let metaHtml = '';
+
+    // TODO better way to implememnt this?  should we implement this?
+    for (const [key, value] of Object.entries(item)) {
+      const isOgUrl = item.property === 'og:url' && key === 'content';
+      const hasTrailingSlash = isOgUrl && value[value.length - 1] === '/';
+      const contextualValue = isOgUrl
+        ? hasTrailingSlash
+          ? `${value}${url.replace('/', '')}`
+          : `${value}${url === '/' ? '' : url}`
+        : value;
+        
+      metaHtml += ` ${key}="${contextualValue}"`;
+    }
+
+    return item.rel
+      ? `<link${metaHtml}/>`
+      : `<meta${metaHtml}/>`;
+  }).join('\n');
+
+  // TODO make smarter so that if it already exists, then leave it alone
+  contents = contents.replace(/<title>(.*)<\/title>/, '');
+  contents = contents.replace('<head>', `<head><title>${title}</title>`);
+  contents = contents.replace('<meta-outlet></meta-outlet>', metaContent);
+
+  return contents;
+};
+
+class StandardHtmlResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    
+    this.extensions = ['.html', '.md'];
+    this.contentType = 'text/html';
+  }
+
+  getRelativeUserworkspaceUrl(url) {
+    return url.replace(this.compilation.context.userWorkspace, '');
+  }
+
+  shouldServe(url) {
+    const { userWorkspace } = this.compilation.context;
+    const relativeUrl = this.getRelativeUserworkspaceUrl(url);
+    const barePath = relativeUrl.endsWith('/')
+      ? `${userWorkspace}/pages${relativeUrl}index`
+      : `${userWorkspace}/pages${relativeUrl.replace('.html', '')}`;
+      
+    return (this.extensions.indexOf(path.extname(relativeUrl)) >= 0 || path.extname(relativeUrl) === '') && 
+      (fs.existsSync(`${barePath}.html`) || barePath.substring(barePath.length - 5, barePath.length) === 'index')
+      || fs.existsSync(`${barePath}.md`) || fs.existsSync(`${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`);
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const config = Object.assign({}, this.compilation.config);
+        const { userWorkspace } = this.compilation.context;
+        const normalizedUrl = this.getRelativeUserworkspaceUrl(url);
+        let body = '';
+        let template = null;
+        let processedMarkdown = null;
+        const barePath = normalizedUrl.endsWith('/')
+          ? `${userWorkspace}/pages${normalizedUrl}index`
+          : `${userWorkspace}/pages${normalizedUrl.replace('.html', '')}`;
+        const isMarkdownContent = fs.existsSync(`${barePath}.md`)
+          || fs.existsSync(`${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`)
+          || fs.existsSync(`${barePath.replace('/index', '.md')}`);
+
+        if (isMarkdownContent) {
+          const markdownPath = fs.existsSync(`${barePath}.md`)
+            ? `${barePath}.md`
+            : fs.existsSync(`${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`)
+              ? `${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`
+              : `${userWorkspace}/pages${url.replace('/index.html', '.md')}`;
+          const markdownContents = await fs.promises.readFile(markdownPath, 'utf-8');
+          const rehypePlugins = [];
+          const remarkPlugins = [];
+
+          config.markdown.plugins.forEach(plugin => {
+            if (plugin.indexOf('rehype-') >= 0) {
+              rehypePlugins.push(require(plugin));
+            }
+
+            if (plugin.indexOf('remark-') >= 0) {
+              remarkPlugins.push(require(plugin));
+            }
+          });
+
+          // TODO extract front matter contents from remark-frontmatter instead of frontmatter lib
+          const fm = frontmatter(markdownContents);
+          processedMarkdown = await unified()
+            .use(remarkParse) // parse markdown into AST
+            .use(remarkFrontmatter) // extract frontmatter from AST
+            .use(...remarkPlugins) // apply userland remark plugins
+            .use(remarkRehype, { allowDangerousHtml: true }) // convert from markdown to HTML AST
+            .use(rehypeRaw) // support mixed HTML in markdown
+            .use(...rehypePlugins) // apply userland rehype plugins
+            .use(rehypeStringify) // convert AST to HTML string
+            .process(markdownContents);
+
+          // configure via frontmatter
+          if (fm.attributes) {
+            const { attributes } = fm;
+
+            if (attributes.title) {
+              config.title = `${config.title} - ${attributes.title}`;
+            }
+  
+            if (attributes.template) {
+              template = attributes.template;
+            }
+          }
+        }
+        
+        body = getPageTemplate(barePath, userWorkspace, template);
+        body = getAppTemplate(body, userWorkspace);
+        body = getUserScripts(body);
+        body = getMetaContent(normalizedUrl, config, body);
+
+        if (processedMarkdown) {
+          body = body.replace(/\<content-outlet>(.*)<\/content-outlet>/s, processedMarkdown.contents);
+        }
+
+        resolve({
+          body,
+          contentType: this.contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+
+  shouldOptimize() {
+    return true;
+  }
+
+  async optimize(html) {
+    return new Promise((resolve, reject) => {
+      try {
+        html = html.replace(/<script src="\/node_modules\/@webcomponents\/webcomponentsjs\/webcomponents-bundle.js"><\/script>/, '');
+        html = html.replace(/<script type="importmap-shim">.*?<\/script>/s, '');
+        html = html.replace(/<script defer="" src="\/node_modules\/es-module-shims\/dist\/es-module-shims.js"><\/script>/, '');
+        html = html.replace(/<script type="module-shim"/g, '<script type="module"');
+    
+        resolve(html);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-html',
+  provider: (compilation, options) => new StandardHtmlResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-image.js b/packages/cli/src/plugins/resource/plugin-standard-image.js
new file mode 100644
index 000000000..08c80e591
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-standard-image.js
@@ -0,0 +1,55 @@
+/*
+ * 
+ * Manages web standard resource related operations for JavaScript.
+ * This is a Greenwood default plugin.
+ *
+ */
+const fs = require('fs');
+const path = require('path');
+const { ResourceInterface } = require('../../lib/resource-interface');
+
+class StandardFontResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.jpg', '.png', '.gif', '.svg', '.ico'];
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        let body = '';
+        let contentType = '';
+        const ext = path.extname(url);
+        const type = ext === '.svg'
+          ? `${ext.replace('.', '')}+xml`
+          : ext.replace('.', '');
+
+        if (['.jpg', '.png', '.gif', '.svg'].includes(ext)) {
+          contentType = `image/${type}`;
+
+          if (ext === '.svg') {
+            body = await fs.promises.readFile(url, 'utf-8');
+          } else {
+            body = await fs.promises.readFile(url); 
+          }
+        } else if (['.ico'].includes(ext)) {
+          contentType = 'image/x-icon';
+          body = await fs.promises.readFile(url);
+        }
+
+        resolve({
+          body,
+          contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-font',
+  provider: (compilation, options) => new StandardFontResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-javascript.js b/packages/cli/src/plugins/resource/plugin-standard-javascript.js
new file mode 100644
index 000000000..b46012a5e
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-standard-javascript.js
@@ -0,0 +1,37 @@
+/*
+ * 
+ * Manages web standard resource related operations for JavaScript.
+ * This is a Greenwood default plugin.
+ *
+ */
+const fs = require('fs');
+const { ResourceInterface } = require('../../lib/resource-interface');
+
+class StandardJavaScriptResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.js'];
+    this.contentType = 'text/javascript';
+  }
+
+  async serve(url) {
+    return new Promise(async(resolve, reject) => {
+      try {
+        const body = await fs.promises.readFile(url, 'utf-8');
+    
+        resolve({
+          body,
+          contentType: this.contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-javascript',
+  provider: (compilation, options) => new StandardJavaScriptResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-json.js b/packages/cli/src/plugins/resource/plugin-standard-json.js
new file mode 100644
index 000000000..a5dda23a1
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-standard-json.js
@@ -0,0 +1,54 @@
+/*
+ * 
+ * Manages web standard resource related operations for JavaScript.
+ * This is a Greenwood default plugin.
+ *
+ */
+const fs = require('fs');
+const path = require('path');
+const { ResourceInterface } = require('../../lib/resource-interface');
+
+class StandardJsonResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.json'];
+    this.contentType = 'text/javascript';
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        let body = ''; 
+        let contentType = '';
+        const { context } = this.compilation;
+
+        // TODO should be its own plugin / package, as part of data
+        if (url.indexOf('graph.json') >= 0) {
+          const json = await fs.promises.readFile(path.join(context.scratchDir, 'graph.json'), 'utf-8');
+
+          contentType = 'application/json';
+          body = JSON.parse(json);
+        } else {
+          // TODO should be its own plugin / package
+          const json = await fs.promises.readFile(url, 'utf-8');
+
+          contentType = 'text/javascript';
+          body = `export default ${json}`;
+        }
+
+        resolve({
+          body,
+          contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-standard-json',
+  provider: (compilation, options) => new StandardJsonResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-user-workspace.js b/packages/cli/src/plugins/resource/plugin-user-workspace.js
new file mode 100644
index 000000000..75ce15f6a
--- /dev/null
+++ b/packages/cli/src/plugins/resource/plugin-user-workspace.js
@@ -0,0 +1,33 @@
+/*
+ * 
+ * Detects and fully resolve requests to the user's workspace.  
+ * This sets the default value for requests in Greenwood.
+ *
+ */
+const path = require('path');
+const { ResourceInterface } = require('../../lib/resource-interface');
+
+class UserWorkspaceResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['*'];
+  }
+
+  async resolve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const workspaceUrl = path.join(this.compilation.context.userWorkspace, url);
+        
+        resolve(workspaceUrl);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  type: 'resource',
+  name: 'plugin-user-workspace',
+  provider: (compilation, options) => new UserWorkspaceResource(compilation, options)
+};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.assets.js b/packages/cli/src/transforms/transform.assets.js
deleted file mode 100644
index f6b353077..000000000
--- a/packages/cli/src/transforms/transform.assets.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const path = require('path');
-const { promises: fsp } = require('fs');
-const TransformInterface = require('./transform.interface');
-
-class AssetTransform extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.woff2', '.woff', '.ttf', '.jpg', '.png', '.gif', '.svg']);
-  }
-
-  shouldTransform() {
-    const { url } = this.request;
-
-    return url.indexOf('assets/') >= 0 && url.indexOf('.css') < 0;
-  }
-
-  async applyTransform() {
-    return new Promise(async (resolve, reject) => {
-      try {
-
-        let body = '', contentType = '';
-        const assetPath = path.join(this.workspace, this.request.url);
-        const ext = path.extname(assetPath);
-        const type = ext === '.svg'
-          ? `${ext.replace('.', '')}+xml`
-          : ext.replace('.', '');
-
-        if (['.jpg', '.png', '.gif', '.svg'].includes(ext)) {
-          contentType = `image/${type}`;
-
-          if (ext === '.svg') {
-            body = await fsp.readFile(assetPath, 'utf-8');
-          } else {
-            body = await fsp.readFile(assetPath); 
-          }
-        } else if (['.woff2', '.woff', '.ttf'].includes(ext)) {
-          contentType = `font/${type}`;
-          body = await fsp.readFile(assetPath);
-        } else if (['.ico'].includes(ext)) {
-          contentType = 'image/x-icon';
-          body = await fsp.readFile(assetPath);
-        } else {
-          contentType = `text/${type}`;
-          body = await fsp.readFile(assetPath, 'utf-8');
-        }
-
-        resolve({
-          body,
-          contentType,
-          extension: this.extensions
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  }
-}
-
-module.exports = AssetTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.html.js b/packages/cli/src/transforms/transform.html.js
deleted file mode 100644
index fec6143ee..000000000
--- a/packages/cli/src/transforms/transform.html.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const TransformInterface = require('./transform.interface');
-const { getAppTemplate, getAppTemplateScripts, getUserScripts, getMetaContent } = require('./transform.tools');
-
-class HTMLTransform extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.html'], 'text/html');
-  }
-
-  shouldTransform() {
-    const { url } = this.request;
-    const barePath = url.endsWith('/')
-      ? `${this.workspace}/pages${url}index`
-      : `${this.workspace}/pages${url.replace('.html', '')}`;
-      
-    return (this.extensions.indexOf(path.extname(url)) >= 0 || path.extname(url) === '') && 
-      (fs.existsSync(`${barePath}.html`) || barePath.substring(barePath.length - 5, barePath.length) === 'index');
-  }
-
-  async applyTransform() {
-    // do stuff with path
-    let { url } = this.request;
-
-    return new Promise(async (resolve, reject) => {
-      try {
-        // do something with markdown or html
-        const barePath = url[url.length - 1] === '/'
-          ? `${this.workspace}/pages${url}index`
-          : `${this.workspace}/pages${url.replace('.html', '')}`;
-        
-        let body = await getAppTemplate(barePath, this.workspace);
-        body = await getAppTemplateScripts(body, this.workspace);
-        body = getUserScripts(body, this.workspace);
-        body = getMetaContent(url, this.config, body);
-
-        resolve({
-          body,
-          contentType: this.contentType,
-          extension: this.extensions
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  }
-}
-
-module.exports = HTMLTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.interface.js b/packages/cli/src/transforms/transform.interface.js
deleted file mode 100644
index 6016c3cc4..000000000
--- a/packages/cli/src/transforms/transform.interface.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable no-unused-vars */
-const path = require('path');
-
-// tranform.interface.js
-module.exports = class TransformInterface {
-
-  constructor(request, extensions, contentType = '') {
-    const { context, config } = request.compilation;
-    this.extensions = extensions; // ['.foo', '.bar'] 
-    this.workspace = context.userWorkspace; // greenwood
-    this.scratchDir = context.scratchDir;
-    this.request = request;
-    this.config = config;
-    this.contentType = contentType;
-  }
-
-  shouldTransform() {
-    return this.extensions.indexOf(path.extname(this.request.url)) >= 0;
-  }
-
-  applyTransform() {
-    // do stuff with path
-  }
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.js.js b/packages/cli/src/transforms/transform.js.js
deleted file mode 100644
index 43d118282..000000000
--- a/packages/cli/src/transforms/transform.js.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const path = require('path');
-const { promises: fsp } = require('fs');
-const TransformInterface = require('./transform.interface');
-
-class JSTransform extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.js'], 'text/javascript');
-  }
-
-  shouldTransform() {
-    const { url } = this.request;
-
-    return this.extensions.indexOf(path.extname(url)) >= 0 && url.indexOf('.json') < 0;
-  }
-
-  async applyTransform() {
-    return new Promise(async (resolve, reject) => {
-      try {
-        const { url } = this.request;
-        const jsPath = url.indexOf('/node_modules') >= 0
-          ? path.join(process.cwd(), url)
-          : path.join(this.workspace, this.request.url);
-
-        const body = await fsp.readFile(jsPath, 'utf-8');
-        resolve({
-          body,
-          contentType: this.contentType,
-          extension: this.extensions
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  }
-}
-
-module.exports = JSTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.json.js b/packages/cli/src/transforms/transform.json.js
deleted file mode 100644
index 236a040b7..000000000
--- a/packages/cli/src/transforms/transform.json.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const path = require('path');
-const { promises: fsp } = require('fs');
-const TransformInterface = require('./transform.interface');
-
-class TransformJSON extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.json']);
-  }
-
-  async applyTransform() {
-    return new Promise(async (resolve, reject) => {
-      try {
-
-        // TODO This is here because of ordering, should make JS / JSON matching less greedy
-        // handle things outside if workspace, like a root directory resolver plugin?
-        // console.debug('JSON file request!', ctx.url);'
-        let body = '', contentType = '';
-        const { url } = this.request;
-
-        if (url.indexOf('graph.json') >= 0) {
-          const json = await fsp.readFile(path.join(this.scratchDir, 'graph.json'), 'utf-8');
-
-          contentType = 'application/json';
-          body = JSON.parse(json);
-        } else {
-          const json = await fsp.readFile(path.join(this.workspace, url), 'utf-8');
-
-          contentType = 'text/javascript';
-          body = `export default ${json}`;
-        }
-
-        resolve({
-          body,
-          contentType,
-          extension: this.extensions
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  }
-}
-
-module.exports = TransformJSON;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.md.js b/packages/cli/src/transforms/transform.md.js
deleted file mode 100644
index 06a7a2e51..000000000
--- a/packages/cli/src/transforms/transform.md.js
+++ /dev/null
@@ -1,108 +0,0 @@
-const path = require('path');
-const { promises: fsp } = require('fs');
-const fs = require('fs');
-const frontmatter = require('front-matter');
-const remarkFrontmatter = require('remark-frontmatter');
-const rehypeStringify = require('rehype-stringify');
-const remarkParse = require('remark-parse');
-const rehypeRaw = require('rehype-raw');
-const remarkRehype = require('remark-rehype');
-const unified = require('unified');
-
-const TransformInterface = require('./transform.interface');
-const { getAppTemplateScripts, getUserScripts, getMetaContent } = require('./transform.tools');
-
-class MDTransform extends TransformInterface {
-
-  constructor(req) {
-    super(req, ['.md']);
-  }
-
-  shouldTransform() {
-    const { request, workspace } = this;
-    const { url } = request;
-
-    const barePath = url.endsWith('/')
-      ? `${workspace}/pages${url}index`
-      : `${workspace}/pages${url.replace('.html', '')}`;
-
-    return fs.existsSync(`${barePath}.md`) || fs.existsSync(`${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`);
-  }
-
-  async applyTransform() {
-    const { workspace, request } = this;
-    const { url } = request;
-    const config = { ...this.config }; 
-
-    let contents = '', title = config.title || '';
-
-    return new Promise(async (resolve, reject) => {
-      try {
-        const barePath = url.endsWith('/')
-          ? `${workspace}/pages${url}index`
-          : `${workspace}/pages${url.replace('.html', '')}`;
-          
-        // TODO all this lookup could probably be handled a bit more gracefully perhaps?
-        const markdownPath = fs.existsSync(`${barePath}.md`)
-          ? `${barePath}.md`
-          : fs.existsSync(`${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`)
-            ? `${barePath.substring(0, barePath.lastIndexOf('/index'))}.md`
-            : `${workspace}/pages${url.replace('/index.html', '.md')}`;
-        const markdownContents = await fsp.readFile(markdownPath, 'utf-8');
-        const rehypePlugins = [];
-        const remarkPlugins = [];
-
-        config.markdown.plugins.forEach(plugin => {
-          if (plugin.indexOf('rehype-') >= 0) {
-            rehypePlugins.push(require(plugin));
-          }
-
-          if (plugin.indexOf('remark-') >= 0) {
-            remarkPlugins.push(require(plugin));
-          }
-        });
-
-        // TODO extract front matter contents from remark-frontmatter instead of frontmatter lib
-        const fm = frontmatter(markdownContents);
-        const processedMarkdown = await unified()
-          .use(remarkParse) // parse markdown into AST
-          .use(remarkFrontmatter) // extract frontmatter from AST
-          .use(...remarkPlugins) // apply userland remark plugins
-          .use(remarkRehype, { allowDangerousHtml: true }) // convert from markdown to HTML AST
-          .use(rehypeRaw) // support mixed HTML in markdown
-          .use(...rehypePlugins) // apply userland rehype plugins
-          .use(rehypeStringify) // convert AST to HTML string
-          .process(markdownContents);
-
-        // TODO use an app template
-        if (fm.attributes.template) {
-          contents = await fsp.readFile(`${workspace}/templates/${fm.attributes.template}.html`, 'utf-8');
-        } else if (fs.existsSync(`${workspace}/templates/page.html`)) {
-          contents = await fsp.readFile(`${workspace}/templates/page.html`, 'utf-8');
-        } else {
-          contents = await fsp.readFile(path.join(__dirname, '../templates/app.html'), 'utf-8');
-        }
-
-        // use page title
-        if (fm.attributes.title) {
-          config.title = `${title} - ${fm.attributes.title}`;
-        }
-
-        let body = await getAppTemplateScripts(contents, workspace);
-        body = getUserScripts(body, workspace);
-        body = body.replace(/\<content-outlet>(.*)<\/content-outlet>/s, processedMarkdown.contents);
-        body = getMetaContent(url, config, body);
-        
-        resolve({
-          body,
-          contentType: this.contentType,
-          extension: this.extensions
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  }
-}
-
-module.exports = MDTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.tools.js b/packages/cli/src/transforms/transform.tools.js
deleted file mode 100644
index 1c13f614a..000000000
--- a/packages/cli/src/transforms/transform.tools.js
+++ /dev/null
@@ -1,183 +0,0 @@
-const acorn = require('acorn');
-const { promises: fsp } = require('fs');
-const fs = require('fs');
-const path = require('path');
-const htmlparser = require('node-html-parser');
-const walk = require('acorn-walk');
-
-const getAppTemplate = async (barePath, workspace) => {
-  if (fs.existsSync(`${barePath}.html`)) {
-    // console.debug('this route exists as HTML');
-    contents = await fsp.readFile(`${barePath}.html`, 'utf-8');
-  } else if (fs.existsSync(`${workspace}/templates/page.html`)) {
-    // use custom workspace page template
-    contents = await fsp.readFile(`${workspace}/templates/page.html`, 'utf-8');
-  } else {
-    contents = await fsp.readFile(path.join(__dirname, '../templates/app.html'), 'utf-8');
-  }
-  return contents;
-};
-
-const getAppTemplateScripts = async (contents, userWorkspace) => {
-  
-  const appTemplate = `${userWorkspace}/templates/app.html`;
-  let appTemplateContents = '';
-
-  if (fs.existsSync(appTemplate)) {
-    appTemplateContents = fs.readFileSync(appTemplate, 'utf-8');
-    const root = htmlparser.parse(contents, {
-      script: true,
-      style: true,
-      noscript: true,
-      pre: true
-    });
-    const body = root.querySelector('body').innerHTML;
-    const headScripts = root.querySelectorAll('head script');
-    const headLinks = root.querySelectorAll('head link');
-
-    appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
-    headScripts.forEach(script => {
-      if (script.rawAttrs !== '') {
-        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
-          </script>\n
-          <script ${script.rawAttrs}></script>\n
-        `);
-      }
-
-      if (script.rawAttrs === '') {
-        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
-          </script>\n
-          <script>
-            ${script.text}
-          </script>\n
-        `);
-      }
-    });
-
-    headLinks.forEach(link => {
-      appTemplateContents = appTemplateContents.replace(/<\/link>/, `
-        </link>\n
-        <link ${link.rawAttrs}></link>\n
-      `);
-    });
-  }
-  return appTemplateContents || contents;
-};
-
-const getUserScripts = (contents, userWorkspace) => {
-  // TODO use an HTML parser?  https://www.npmjs.com/package/node-html-parser
-  if (process.env.__GWD_COMMAND__ === 'develop') { // eslint-disable-line no-underscore-dangle
-    // TODO setup and teardown should be done together
-    // console.debug('running in develop mode, attach live reload script');
-    contents = contents.replace('</head>', `
-        <script src="http://localhost:35729/livereload.js?snipver=1"></script>
-      </head>
-    `);
-  }
-
-  contents = contents.replace(/type="module"/g, 'type="module-shim"');
-
-  const importMap = {};
-  const userPackageJson = fs.existsSync(`${userWorkspace}/package.json`)
-    ? require(path.join(userWorkspace, 'package.json')) // its a monorepo?
-    : fs.existsSync(`${process.cwd()}/package.json`)
-      ? require(path.join(process.cwd(), 'package.json'))
-      : {};
-
-  // console.debug('userPackageJson', userPackageJson);
-  // console.debug('dependencies', userPackageJson.dependencies);
-
-  Object.keys(userPackageJson.dependencies || {}).forEach(dependency => {
-    const packageRootPath = path.join(process.cwd(), './node_modules', dependency);
-    const packageJsonPath = path.join(packageRootPath, 'package.json');
-    const packageJson = require(packageJsonPath);
-    const packageEntryPointPath = path.join(process.cwd(), './node_modules', dependency, packageJson.main);
-    const packageFileContents = fs.readFileSync(packageEntryPointPath, 'utf-8');
-
-    walk.simple(acorn.parse(packageFileContents, { sourceType: 'module' }), {
-      ImportDeclaration(node) {
-        // console.log('Found a ImportDeclaration');
-        const sourceValue = node.source.value;
-
-        if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
-          // console.log(`found a bare import for ${sourceValue}!!!!!`);
-          importMap[sourceValue] = `/node_modules/${sourceValue}`;
-        }
-      },
-      ExportNamedDeclaration(node) {
-        // console.log('Found a ExportNamedDeclaration');
-        const sourceValue = node && node.source ? node.source.value : '';
-
-        if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
-          // console.log(`found a bare export for ${sourceValue}!!!!!`);
-          importMap[sourceValue] = `/node_modules/${sourceValue}`;
-        }
-      }
-    });
-    
-    importMap[dependency] = `/node_modules/${dependency}/${packageJson.main}`;
-  });
-
-  // console.log('importMap all complete', importMap);
-
-  contents = contents.replace('<head>', `
-    <head>
-      <script defer src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
-      <script type="importmap-shim">
-        {
-          "imports": ${JSON.stringify(importMap, null, 1)}
-        }
-      </script>
-  `);
-
-  if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
-    // TODO setup and teardown should be done together
-    // console.debug('running in build mode, polyfill WebComponents for puppeteer');
-    contents = contents.replace('<head>', `
-      <head>
-        <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    `);
-  }
-  return contents;
-};
-
-const getMetaContent = (url, config, contents) => {
-
-  const title = config.title;
-  const metaContent = config.meta.map(item => {
-    let metaHtml = '';
-
-    // TODO better way to implememnt this?  should we implement this?
-    for (const [key, value] of Object.entries(item)) {
-      const isOgUrl = item.property === 'og:url' && key === 'content';
-      const hasTrailingSlash = isOgUrl && value[value.length - 1] === '/';
-      const contextualValue = isOgUrl
-        ? hasTrailingSlash
-          ? `${value}${url.replace('/', '')}`
-          : `${value}${url === '/' ? '' : url}`
-        : value;
-        
-      metaHtml += ` ${key}="${contextualValue}"`;
-    }
-
-    return item.rel
-      ? `<link${metaHtml}/>`
-      : `<meta${metaHtml}/>`;
-  }).join('\n');
-
-  // console.log(contents);
-
-  // TODO make smarter so that if it already exists, then leave it alone
-  contents = contents.replace(/<title>(.*)<\/title>/, '');
-  contents = contents.replace('<head>', `<head><title>${title}</title>`);
-  contents = contents.replace('<meta-outlet></meta-outlet>', metaContent);
-
-  return contents;
-};
-
-module.exports = {
-  getAppTemplate,
-  getAppTemplateScripts,
-  getMetaContent,
-  getUserScripts
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.markdown/src/pages/index.md b/packages/cli/test/cases/build.default.markdown/src/pages/index.md
index bd96b580d..66ce731f5 100644
--- a/packages/cli/test/cases/build.default.markdown/src/pages/index.md
+++ b/packages/cli/test/cases/build.default.markdown/src/pages/index.md
@@ -6,4 +6,4 @@ This is some markdown being rendered by Greenwood.
 console.log('hello world');
 ```
 
-<img src="my-image.png" alt="just passing by"/>
\ No newline at end of file
+<img src="#my-image.png" alt="just passing by"/>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js b/packages/cli/test/cases/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js
index 446470b50..55a8a95d5 100644
--- a/packages/cli/test/cases/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js
+++ b/packages/cli/test/cases/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js
@@ -187,9 +187,11 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have an the expected content in the <body>', function() {
+        const h1 = dom.window.document.querySelector('body h1');
         const h2 = dom.window.document.querySelector('body h2');
         const p = dom.window.document.querySelectorAll('body p');
 
+        expect(h1.textContent).to.be.equal('A Blog Post Page');
         expect(h2.textContent).to.be.equal('My First Blog Post');
         
         expect(p[0].textContent).to.be.equal('Lorem Ipsum');
@@ -252,9 +254,11 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have an the expected content in the <body>', function() {
+        const h1 = dom.window.document.querySelector('body h1');
         const h2 = dom.window.document.querySelector('body h2');
         const p = dom.window.document.querySelectorAll('body p');
 
+        expect(h1.textContent).to.be.equal('A Blog Post Page');
         expect(h2.textContent).to.be.equal('My Second Blog Post');
         
         expect(p[0].textContent).to.be.equal('Lorem Ipsum');
diff --git a/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog.html b/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog.html
index abd851272..6d590b088 100644
--- a/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog.html
+++ b/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog.html
@@ -14,6 +14,7 @@
     <div class="gwd-content-outlet">
       <div class='container'>
         <app-header></app-header>
+        <h1>A Blog Post Page</h1>
         <content-outlet></content-outlet>
         <app-footer></app-footer>
       </div>
diff --git a/packages/cli/test/cases/build.plugins-index/build.plugins-index.spec.js b/packages/cli/test/cases/build.plugins-index/build.plugins-index.spec.js
deleted file mode 100644
index 08e44fbd5..000000000
--- a/packages/cli/test/cases/build.plugins-index/build.plugins-index.spec.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Use Case
- * Run Greenwood with some plugins and default workspace.
- *
- * Uaer Result
- * Should generate a bare bones Greenwood build with certain plugins injected into index.html.
- *
- * User Command
- * greenwood build
- *
- * User Config
- * {
- *   plugins: [{
- *     type: 'index',
- *     provider: function() {
- *       return {
- *         hookGreenwoodAnalytics: `
- *           <!-- some analytics code -->
- *         `
- *       };
- *     }
- *   }, {
- *     type: 'index',
- *     provider: function() {
- *       return {
- *         hookGreenwoodPolyfills: `
- *           <!-- some polyfills code -->
- *         `
- *       };
- *     }
- *  }]
- *
- * }
- *
- * User Workspace
- * Greenwood default (src/)
- */
-const expect = require('chai').expect;
-const { JSDOM } = require('jsdom');
-const path = require('path');
-const runSmokeTest = require('../../../../../test/smoke-test');
-const TestBed = require('../../../../../test/test-bed');
-
-xdescribe('Build Greenwood With: ', function() {
-  const LABEL = 'Custom Index Plugin and Default Workspace';
-  let setup;
-
-  before(async function() {
-    setup = new TestBed();
-    this.context = await setup.setupTestBed(__dirname);
-  });
-
-  describe(LABEL, function() {
-    before(async function() {
-      await setup.runGreenwoodCommand('build');
-    });
-
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
-
-    describe('Custom Index Hooks', function() {
-      let dom;
-
-      beforeEach(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
-      });
-
-      it('should have placeholder for hookGreenwoodAnalytics', function() {
-        const placeholder = dom.window.document.querySelectorAll('body div.hook-analytics');
-
-        expect(placeholder.length).to.be.equal(1);
-      });
-
-      it('should have placeholder for hookGreenwoodPolyfills', function() {
-        const placeholder = dom.window.document.querySelectorAll('body div.hook-polyfills');
-
-        expect(placeholder.length).to.be.equal(1);
-      });
-    });
-  });
-
-  after(function() {
-    setup.teardownTestBed();
-  });
-
-});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins-index/greenwood.config.js b/packages/cli/test/cases/build.plugins-index/greenwood.config.js
deleted file mode 100644
index bbbdce65f..000000000
--- a/packages/cli/test/cases/build.plugins-index/greenwood.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-module.exports = {
-  
-  plugins: [{
-    type: 'index',
-    provider: function() {
-      return {
-        hookGreenwoodAnalytics: `
-          <div class="hook-analytics">
-            <!-- analytics code goes here -->
-          </div>
-        `
-      };
-    }
-  }, {
-    type: 'index',
-    provider: function() {
-      return {
-        hookGreenwoodPolyfills: `
-          <!-- 
-            this covers custom overriding since polyfills are on by default already
-            so for this test, we actully need to load something that works with puppeteer + JSDOM 
-          -->
-          <div class="hook-polyfills">
-            <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-bundle.js"></script>
-          </div>
-        `
-      };
-    }
-  }]
-  
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins-webpack/build-plugins-webpack.spec.js b/packages/cli/test/cases/build.plugins-webpack/build-plugins-webpack.spec.js
deleted file mode 100644
index 758ea144b..000000000
--- a/packages/cli/test/cases/build.plugins-webpack/build-plugins-webpack.spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Use Case
- * Run Greenwood with some plugins and default workspace.
- *
- * Uaer Result
- * Should generate a bare bones Greenwood build with certain plugins injected into index.html.
- *
- * User Command
- * greenwood build
- *
- * User Config
- * const webpack = require('webpack');
- *
- * {
- *   plugins: [{
- *     type: 'weboack',
- *     provider: function() {
- *       return new webpack.BannerPlugin('Some custom text')
- *     }
- *   }]
- * }
- *
- * User Workspace
- * Greenwood default (src/)
- */
-const expect = require('chai').expect;
-const fs = require('fs');
-const { JSDOM } = require('jsdom');
-const path = require('path');
-const runSmokeTest = require('../../../../../test/smoke-test');
-const TestBed = require('../../../../../test/test-bed');
-const { version } = require('../../../package.json');
-
-xdescribe('Build Greenwood With: ', function() {
-  const mockBanner = `My Banner - v${version}`;
-  const LABEL = 'Custom Webpack Plugin and Default Workspace';
-  let setup;
-
-  before(async function() {
-    setup = new TestBed();
-    this.context = await setup.setupTestBed(__dirname);
-  });
-
-  describe(LABEL, function() {
-    before(async function() {
-      await setup.runGreenwoodCommand('build');
-    });
-
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
-
-    describe('Banner Plugin', function() {
-      let bundleFile;
-
-      beforeEach(async function() {
-        const dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
-        const scriptTags = dom.window.document.querySelectorAll('body script');
-        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
-          const src = script.src;
-
-          return src.indexOf('index.') >= 0 && src.indexOf('.bundle.js') >= 0;
-        });
-
-        bundleFile = bundleScripts[0].src.replace('file:///', '');
-      });
-
-      it('should have the banner text in index.js', function() {
-        const fileContents = fs.readFileSync(path.resolve(this.context.publicDir, bundleFile), 'utf8');
-
-        expect(fileContents).to.contain(mockBanner);
-      });
-    });
-  });
-
-  after(function() {
-    setup.teardownTestBed();
-  });
-
-});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins-webpack/greenwood.config.js b/packages/cli/test/cases/build.plugins-webpack/greenwood.config.js
deleted file mode 100644
index 62c9bf8cb..000000000
--- a/packages/cli/test/cases/build.plugins-webpack/greenwood.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { version } = require('../../../package.json');
-const webpack = require('webpack');
-
-module.exports = {
-  
-  plugins: [{
-    type: 'webpack',
-    provider: function() {
-      return new webpack.BannerPlugin(`My Banner - v${version}`);
-    }
-  }]
-  
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.error-name/build.plugins.error-name.spec.js b/packages/cli/test/cases/build.plugins.error-name/build.plugins.error-name.spec.js
new file mode 100644
index 000000000..88ee9352d
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.error-name/build.plugins.error-name.spec.js
@@ -0,0 +1,49 @@
+/*
+ * Use Case
+ * Run Greenwood build command with a bad value for the type of a plugin.
+ *
+ * User Result
+ * Should throw an error.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   plugins: [{
+ *     type: 'resource',
+ *     plugin: function () { }
+ *  }]
+ * }
+ *
+ * User Workspace
+ * Greenwood default (src/)
+ *
+ */
+
+const expect = require('chai').expect;
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    await setup.setupTestBed(__dirname);
+  });
+
+  describe('Custom Configuration with a bad name value for a plugin', function() {
+    it('should throw an error that plugin.name is not a string', async function() {
+      try {
+        await setup.runGreenwoodCommand('build');
+      } catch (err) {
+        expect(err).to.contain('Error: greenwood.config.js plugins must have a name. got undefined instead.');
+      }
+    });
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.error-name/greenwood.config.js b/packages/cli/test/cases/build.plugins.error-name/greenwood.config.js
new file mode 100644
index 000000000..004d95a53
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.error-name/greenwood.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  
+  plugins: [{
+    type: 'resource',
+    provider: function() { }
+  }]
+  
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins-error-provider/build.plugins-error-provider.spec.js b/packages/cli/test/cases/build.plugins.error-provider/build.plugins.error-provider.spec.js
similarity index 79%
rename from packages/cli/test/cases/build.plugins-error-provider/build.plugins-error-provider.spec.js
rename to packages/cli/test/cases/build.plugins.error-provider/build.plugins.error-provider.spec.js
index d0288050f..2177b4060 100644
--- a/packages/cli/test/cases/build.plugins-error-provider/build.plugins-error-provider.spec.js
+++ b/packages/cli/test/cases/build.plugins.error-provider/build.plugins.error-provider.spec.js
@@ -12,6 +12,7 @@
  * {
  *   plugins: [{
  *     type: 'index',
+ *     name: 'plugin-something',
  *     plugin: {}
  *  }]
  * }
@@ -24,7 +25,7 @@
 const expect = require('chai').expect;
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   let setup;
 
   before(async function() {
@@ -33,11 +34,11 @@ xdescribe('Build Greenwood With: ', function() {
   });
 
   describe('Custom Configuration with a bad provider value for a plugin', function() {
-    it('should throw an error that plugin.type is not valid must be a string', async function() {
+    it('should throw an error that plugin.provider is not a function', async function() {
       try {
         await setup.runGreenwoodCommand('build');
       } catch (err) {
-        expect(err).to.contain('Error: greenwood.config.js plugins provider must of type function. got object instead');
+        expect(err).to.contain('Error: greenwood.config.js plugins provider must be a function. got object instead.');
       }
     });
   });
diff --git a/packages/cli/test/cases/build.plugins-error-provider/greenwood.config.js b/packages/cli/test/cases/build.plugins.error-provider/greenwood.config.js
similarity index 74%
rename from packages/cli/test/cases/build.plugins-error-provider/greenwood.config.js
rename to packages/cli/test/cases/build.plugins.error-provider/greenwood.config.js
index cfb4a4e2f..ca2d3172e 100644
--- a/packages/cli/test/cases/build.plugins-error-provider/greenwood.config.js
+++ b/packages/cli/test/cases/build.plugins.error-provider/greenwood.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   
   plugins: [{
-    type: 'index',
+    type: 'resource',
     provider: {}
   }]
   
diff --git a/packages/cli/test/cases/build.plugins-error-type/build.plugins-error-type.spec.js b/packages/cli/test/cases/build.plugins.error-type/build.plugins.error-type.spec.js
similarity index 71%
rename from packages/cli/test/cases/build.plugins-error-type/build.plugins-error-type.spec.js
rename to packages/cli/test/cases/build.plugins.error-type/build.plugins.error-type.spec.js
index 04408f939..74cd25d4a 100644
--- a/packages/cli/test/cases/build.plugins-error-type/build.plugins-error-type.spec.js
+++ b/packages/cli/test/cases/build.plugins.error-type/build.plugins.error-type.spec.js
@@ -12,9 +12,9 @@
  * {
  *   plugins: [{
  *     type: 'indexxxx',
+ *     name: 'plugin-something',
  *     provider: function() { }
  *  }]
- *
  * }
  *
  * User Workspace
@@ -25,7 +25,7 @@
 const expect = require('chai').expect;
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   let setup;
 
   before(async function() {
@@ -33,12 +33,12 @@ xdescribe('Build Greenwood With: ', function() {
     await setup.setupTestBed(__dirname);
   });
 
-  describe('Custom Configuration with a bad type value for a plugin', function() {
-    it('should throw an error that plugin.type is not valid must be a string', async function() {
+  describe('Custom Configuration with a bad value for plugin type', function() {
+    it('should throw an error that plugin.type is not a valid value', async function() {
       try {
         await setup.runGreenwoodCommand('build');
       } catch (err) {
-        expect(err).to.contain('Error: greenwood.config.js plugins must be one of type "index, webpack". got "indexxx" instead.');
+        expect(err).to.contain('Error: greenwood.config.js plugins must be one of type "resource". got "indexxx" instead.');
       }
     });
   });
diff --git a/packages/cli/test/cases/build.plugins-error-type/greenwood.config.js b/packages/cli/test/cases/build.plugins.error-type/greenwood.config.js
similarity index 100%
rename from packages/cli/test/cases/build.plugins-error-type/greenwood.config.js
rename to packages/cli/test/cases/build.plugins.error-type/greenwood.config.js
diff --git a/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js b/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js
new file mode 100644
index 000000000..c23263953
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js
@@ -0,0 +1,70 @@
+/*
+ * Use Case
+ * Run Greenwood with a custom resource plugin and default workspace.
+ *
+ * Uaer Result
+ * Should generate a bare bones Greenwood build with expected custom file (.foo) behavior.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * class FooResource extends ResourceInterface {
+ *   // see complete implementation in the greenwood.config.js file used for this spec
+ * }
+ * 
+ * {
+ *   plugins: [{
+ *     type: 'resource',
+ *     name: 'plugin-foo',
+ *     provider: (compilation, options) => new FooResource(compilation, options)
+ *   }]
+ * }
+ *
+ * Custom Workspace
+ * src/
+ *   pages/
+ *     index.html
+ *   foo-files/
+ *     my-custom-file.foo
+ *     my-other-custom-file.foo
+ */
+const expect = require('chai').expect;
+const { JSDOM } = require('jsdom');
+const path = require('path');
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Custom FooResource Plugin and Default Workspace';
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    this.context = await setup.setupTestBed(__dirname);
+  });
+
+  describe(LABEL, function() {
+    before(async function() {
+      await setup.runGreenwoodCommand('build');
+    });
+
+    describe('Transpiling and DOM Manipulation', function() {
+      let dom;
+
+      beforeEach(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+      });
+
+      it('should have expected text executed from my-custom-file.foo in the DOM', function() {
+        const placeholder = dom.window.document.querySelector('body h6');
+
+        expect(placeholder.textContent).to.be.equal('hello from my-custom-file.foo');
+      });
+    });
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.resource/greenwood.config.js b/packages/cli/test/cases/build.plugins.resource/greenwood.config.js
new file mode 100644
index 000000000..2cd06f201
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.resource/greenwood.config.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+const { ResourceInterface } = require('../../../src/lib/resource-interface');
+
+class FooResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    
+    this.extensions = ['.foo'];
+    this.contentType = 'text/javascript';
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        let body = await fs.promises.readFile(url, 'utf-8');
+        
+        body = body.replace(/interface (.*){(.*)}/s, '');
+
+        resolve({
+          body,
+          contentType: this.contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = {
+  plugins: [{
+    type: 'resource',
+    name: 'plugin-foo',
+    provider: (compilation, options) => new FooResource(compilation, options)
+  }]
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-custom-file.foo b/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-custom-file.foo
new file mode 100644
index 000000000..974a7d013
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-custom-file.foo
@@ -0,0 +1,9 @@
+import './my-other-custom-file.foo';
+
+const node = document.createElement('h6');
+const textnode = document.createTextNode('hello from my-custom-file.foo');
+
+node.appendChild(textnode);
+document.getElementsByTagName('body')[0].appendChild(node);
+
+console.log('hello from my-custom-file.foo 👋');
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-other-custom-file.foo b/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-other-custom-file.foo
new file mode 100644
index 000000000..36d618ede
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.resource/src/foo-files/my-other-custom-file.foo
@@ -0,0 +1,8 @@
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+console.log('hello from some-other-custom-file.foo! 😎');
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.resource/src/pages/index.html b/packages/cli/test/cases/build.plugins.resource/src/pages/index.html
new file mode 100644
index 000000000..6532e0c88
--- /dev/null
+++ b/packages/cli/test/cases/build.plugins.resource/src/pages/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <!-- TODO have to use forward slash / for path references?  translate on the fly in serve.js? -->
+    <script type="module" src="../foo-files/my-custom-file.foo"></script>
+  </head>
+
+  <body>
+    <h1>My Foo Website</h1>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-google-analytics/src/index.js b/packages/plugin-google-analytics/src/index.js
index 99613f59b..756b5a335 100644
--- a/packages/plugin-google-analytics/src/index.js
+++ b/packages/plugin-google-analytics/src/index.js
@@ -1,22 +1,29 @@
-module.exports = (options = {}) => {
-  const { analyticsId, anonymous } = options;
+const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
+
+class GoogleAnalyticsResource extends ResourceInterface {
+  constructor(compilation, options = {}) {
+    super(compilation, options);
 
-  const validId = analyticsId && typeof analyticsId === 'string';
-  const trackAnon = typeof anonymous === 'boolean' ? anonymous : true;
+    const { analyticsId } = options;
 
-  if (!validId) {
-    throw new Error(`Error: analyticsId should be of type string.  get "${typeof analyticsId}" instead.`);
+    if (!analyticsId || typeof analyticsId !== 'string') {
+      throw new Error(`Error: analyticsId should be of type string.  got "${typeof analyticsId}" instead.`);
+    }
   }
 
-  return [{
-    type: 'index',
-    provider: () => {
-      return {
-        hookGreenwoodAnalytics: `
-          <link rel="preconnect" href="https://www.google-analytics.com/">
+  shouldOptimize() {
+    return true;
+  }
 
-          <script async src="https://www.googletagmanager.com/gtag/js?id=${analyticsId}"></script>
+  async optimize(html) {
+    const { analyticsId, anonymous } = this.options;
+    const trackAnon = typeof anonymous === 'boolean' ? anonymous : true;
 
+    return new Promise((resolve, reject) => {
+      try {
+        const newHtml = html.replace('</head>', `
+          <link rel="preconnect" href="https://www.google-analytics.com/">
+          <script async src="https://www.googletagmanager.com/gtag/js?id=${analyticsId}"></script>
           <script>
             var getOutboundLink = function(url) {
               gtag('event', 'click', {
@@ -25,16 +32,27 @@ module.exports = (options = {}) => {
                 'transport_type': 'beacon'
               });
             }
-
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-
             gtag('config', '${analyticsId}', { 'anonymize_ip': ${trackAnon} });
             gtag('config', '${analyticsId}');
           </script>
-        `
-      };
-    }
-  }];
+        </head>
+        `);
+
+        resolve(newHtml);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = (options = {}) => {
+  return {
+    type: 'resource',
+    name: 'plugin-google-analytics',
+    provider: (compilation) => new GoogleAnalyticsResource(compilation, options)
+  };
 };
\ No newline at end of file
diff --git a/packages/plugin-google-analytics/test/cases/default/default.spec.js b/packages/plugin-google-analytics/test/cases/default/default.spec.js
index 405462eef..31680308e 100644
--- a/packages/plugin-google-analytics/test/cases/default/default.spec.js
+++ b/packages/plugin-google-analytics/test/cases/default/default.spec.js
@@ -13,7 +13,7 @@
  *
  * {
  *   plugins: [{
- *     ...googleAnalyticsPlugin({
+ *     googleAnalyticsPlugin({
  *       analyticsId: 'UA-123456-1'
  *     })
  *  }]
@@ -29,7 +29,7 @@ const path = require('path');
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   const LABEL = 'Google Analytics Plugin with default options and Default Workspace';
   const mockAnalyticsId = 'UA-123456-1';
 
@@ -45,7 +45,8 @@ xdescribe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    // TODO runSmokeTest(['public', 'index', 'not-found'], LABEL);
+    runSmokeTest(['public'], LABEL);
 
     describe('Initialization script', function() {
       let inlineScript = [];
@@ -78,11 +79,9 @@ xdescribe('Build Greenwood With: ', function() {
                 'transport_type': 'beacon'
               });
             }
-
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-
             gtag('config', '${mockAnalyticsId}', { 'anonymize_ip': true });
             gtag('config', '${mockAnalyticsId}');
         `;
diff --git a/packages/plugin-google-analytics/test/cases/default/greenwood.config.js b/packages/plugin-google-analytics/test/cases/default/greenwood.config.js
index 9b18283c0..47a131dad 100644
--- a/packages/plugin-google-analytics/test/cases/default/greenwood.config.js
+++ b/packages/plugin-google-analytics/test/cases/default/greenwood.config.js
@@ -2,7 +2,7 @@ const googleAnalyticsPlugin = require('../../../src/index');
 
 module.exports = {
   plugins: [
-    ...googleAnalyticsPlugin({
+    googleAnalyticsPlugin({
       analyticsId: 'UA-123456-1'
     })
   ]
diff --git a/packages/plugin-google-analytics/test/cases/error-analytics-id/error-analytics-id.spec.js b/packages/plugin-google-analytics/test/cases/error-analytics-id/error-analytics-id.spec.js
index 46792e349..7a7558276 100644
--- a/packages/plugin-google-analytics/test/cases/error-analytics-id/error-analytics-id.spec.js
+++ b/packages/plugin-google-analytics/test/cases/error-analytics-id/error-analytics-id.spec.js
@@ -13,7 +13,7 @@
  *
  * {
  *   plugins: [{
- *     ...googleAnalyticsPlugin()
+ *     googleAnalyticsPlugin()
  *  }]
  *
  * }
@@ -24,7 +24,7 @@
 const expect = require('chai').expect;
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   let setup;
 
   before(async function() {
@@ -37,7 +37,7 @@ xdescribe('Build Greenwood With: ', function() {
       try {
         await setup.runGreenwoodCommand('build');
       } catch (err) {
-        expect(err).to.contain('analyticsId should be of type string.  get "undefined" instead.');
+        expect(err).to.contain('Error: analyticsId should be of type string.  got "undefined" instead.');
       }
     });
   });
diff --git a/packages/plugin-google-analytics/test/cases/error-analytics-id/greenwood.config.js b/packages/plugin-google-analytics/test/cases/error-analytics-id/greenwood.config.js
index 597d8216b..c2d3d48ee 100644
--- a/packages/plugin-google-analytics/test/cases/error-analytics-id/greenwood.config.js
+++ b/packages/plugin-google-analytics/test/cases/error-analytics-id/greenwood.config.js
@@ -2,6 +2,6 @@ const googleAnalyticsPlugin = require('../../../src/index');
 
 module.exports = {
   plugins: [
-    ...googleAnalyticsPlugin()
+    googleAnalyticsPlugin()
   ]
 };
\ No newline at end of file
diff --git a/packages/plugin-google-analytics/test/cases/option-anonymous/greenwood.config.js b/packages/plugin-google-analytics/test/cases/option-anonymous/greenwood.config.js
index 764538e7b..1c628c190 100644
--- a/packages/plugin-google-analytics/test/cases/option-anonymous/greenwood.config.js
+++ b/packages/plugin-google-analytics/test/cases/option-anonymous/greenwood.config.js
@@ -2,7 +2,7 @@ const googleAnalyticsPlugin = require('../../../src/index');
 
 module.exports = {
   plugins: [
-    ...googleAnalyticsPlugin({
+    googleAnalyticsPlugin({
       analyticsId: 'UA-123456-1',
       anonymous: false
     })
diff --git a/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js b/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
index 730f1f674..057c56288 100644
--- a/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
+++ b/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
@@ -13,7 +13,7 @@
  *
  * {
  *   plugins: [{
- *     ...googleAnalyticsPlugin({
+ *     googleAnalyticsPlugin({
  *       analyticsId: 'UA-123456-1',
  *       anonymouse: false
  *     })
@@ -30,7 +30,7 @@ const path = require('path');
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   const LABEL = 'Google Analytics Plugin with IP Anonymization tracking set to false and Default Workspace';
   const mockAnalyticsId = 'UA-123456-1';
 
@@ -46,7 +46,8 @@ xdescribe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    // TODO runSmokeTest([not-found'], LABEL);
+    runSmokeTest(['public'], LABEL);
 
     describe('Initialization script', function() {
       let inlineScript;
@@ -70,7 +71,6 @@ xdescribe('Build Greenwood With: ', function() {
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-
             gtag('config', '${mockAnalyticsId}', { 'anonymize_ip': false });
             gtag('config', '${mockAnalyticsId}');
         `;
diff --git a/packages/plugin-polyfills/src/index.js b/packages/plugin-polyfills/src/index.js
index e8deecf33..31186a735 100644
--- a/packages/plugin-polyfills/src/index.js
+++ b/packages/plugin-polyfills/src/index.js
@@ -1,34 +1,61 @@
-const CopyWebpackPlugin = require('copy-webpack-plugin'); // part of @greeenwood/cli
+const fs = require('fs');
 const path = require('path');
+const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
 
-module.exports = () => {
-  const filename = 'webcomponents-loader.js';
-  const nodeModuleRoot = 'node_modules/@webcomponents/webcomponentsjs';
-
-  return [{
-    type: 'index',
-    provider: () => {
-      return {
-        hookGreenwoodPolyfills: `
-          <!-- Web Components poyfill -->
-          <script src="/${filename}"></script>
-        `
-      };
-    }
-  }, {
-    type: 'webpack',
-    provider: (compilation) => {
-      const cwd = process.cwd();
-      const { publicDir } = compilation.context;
-    
-      return new CopyWebpackPlugin([{
-        from: path.join(cwd, nodeModuleRoot, filename),
-        to: publicDir
-      }, {
-        context: path.join(cwd, nodeModuleRoot),
-        from: 'bundles/*.js',
-        to: publicDir
-      }]);
-    }
-  }];
+class PolyfillsResource extends ResourceInterface {
+  constructor(compilation, options = {}) {
+    super(compilation, options);
+  }
+
+  shouldOptimize() {
+    return true;
+  }
+
+  async optimize(html) {
+    const filename = 'webcomponents-loader.js';
+    const nodeModuleRoot = 'node_modules/@webcomponents/webcomponentsjs';
+
+    return new Promise(async (resolve, reject) => {
+      try {
+        const cwd = process.cwd();
+        const { outputDir } = this.compilation.context;
+        const polyfillFiles = [
+          'webcomponents-loader.js',
+          ...fs.readdirSync(path.join(process.cwd(), nodeModuleRoot, 'bundles')).map(file => {
+            return `bundles/${file}`;
+          })
+        ];
+
+        if (!fs.existsSync(path.join(outputDir, 'bundles'))) {
+          fs.mkdirSync(path.join(outputDir, 'bundles'));
+        }
+
+        await Promise.all(polyfillFiles.map(async (file) => {
+          const from = path.join(cwd, nodeModuleRoot, file);
+          const to = path.join(outputDir, file);
+          
+          return !fs.existsSync(to)
+            ? fs.promises.copyFile(from, to)
+            : Promise.resolve();
+        }));
+
+        const newHtml = html.replace('<head>', `
+          <head>
+            <script src="/${filename}"></script>
+        `);
+
+        resolve(newHtml);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = (options = {}) => {
+  return {
+    type: 'resource',
+    name: 'plugin-polyfills',
+    provider: (compilation) => new PolyfillsResource(compilation, options)
+  };
 };
\ No newline at end of file
diff --git a/packages/plugin-polyfills/test/cases/default/default.spec.js b/packages/plugin-polyfills/test/cases/default/default.spec.js
index a580a4577..286f0879d 100644
--- a/packages/plugin-polyfills/test/cases/default/default.spec.js
+++ b/packages/plugin-polyfills/test/cases/default/default.spec.js
@@ -22,12 +22,24 @@
  * Greenwood default (src/)
  */
 const expect = require('chai').expect;
+const fs = require('fs');
 const { JSDOM } = require('jsdom');
 const path = require('path');
-const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+const expectedPolyfillFiles = [
+  'webcomponents-loader.js',
+  'webcomponents-ce.js',
+  'webcomponents-ce.js.map',
+  'webcomponents-sd-ce-pf.js',
+  'webcomponents-sd-ce-pf.js.map',
+  'webcomponents-sd-ce.js',
+  'webcomponents-sd-ce.js.map',
+  'webcomponents-sd.js',
+  'webcomponents-sd.js.map'
+];
+
+describe('Build Greenwood With: ', function() {
   const LABEL = 'Polyfill Plugin with default options and Default Workspace';
 
   let setup;
@@ -35,10 +47,16 @@ xdescribe('Build Greenwood With: ', function() {
   before(async function() {
     setup = new TestBed();
 
-    this.context = await setup.setupTestBed(__dirname, [{
-      dir: 'node_modules/@webcomponents/webcomponentsjs',
-      name: 'webcomponents-loader.js'
-    }]);
+    this.context = await setup.setupTestBed(__dirname, expectedPolyfillFiles.map((file) => {
+      const dir = file === 'webcomponents-loader.js'
+        ? 'node_modules/@webcomponents/webcomponentsjs'
+        : 'node_modules/@webcomponents/webcomponentsjs/bundles';
+
+      return {
+        dir,
+        name: file
+      };
+    }));
   });
 
   describe(LABEL, function() {
@@ -46,7 +64,7 @@ xdescribe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    // runSmokeTest(['not-found'], LABEL);
 
     describe('Script tag in the <head> tag', function() {
       let dom;
@@ -61,10 +79,18 @@ xdescribe('Build Greenwood With: ', function() {
           // hyphen is used to make sure no other bundles get loaded by accident (#9)
           return script.src.indexOf('/webcomponents-') >= 0;
         });
-
+        
         expect(polyfillScriptTags.length).to.be.equal(1);
       });
 
+      it('should have the expected polyfill files in the output directory', function() {
+        expectedPolyfillFiles.forEach((file) => {
+          const dir = file === 'webcomponents-loader.js' ? '' : 'bundles/';
+
+          expect(fs.existsSync(path.join(this.context.publicDir, `${dir}${file}`))).to.be.equal(true);
+        });
+      });
+
     });
   });
 
diff --git a/packages/plugin-polyfills/test/cases/default/greenwood.config.js b/packages/plugin-polyfills/test/cases/default/greenwood.config.js
index cd3d29444..df0a2b27d 100644
--- a/packages/plugin-polyfills/test/cases/default/greenwood.config.js
+++ b/packages/plugin-polyfills/test/cases/default/greenwood.config.js
@@ -2,6 +2,6 @@ const polyfillsPlugin = require('../../../src/index');
 
 module.exports = {
   plugins: [
-    ...polyfillsPlugin()
+    polyfillsPlugin()
   ]
 };
\ No newline at end of file
diff --git a/www/pages/plugins/composite-plugins.md b/www/pages/plugins/custom-plugins.md
similarity index 79%
rename from www/pages/plugins/composite-plugins.md
rename to www/pages/plugins/custom-plugins.md
index 19e98c827..9ae1f7be3 100644
--- a/www/pages/plugins/composite-plugins.md
+++ b/www/pages/plugins/custom-plugins.md
@@ -1,12 +1,12 @@
 ---
-label: 'composite-plugins'
+label: 'custom-plugins'
 menu: side
-title: 'Composite Plugins'
+title: 'Custom Plugins'
 index: 1
 ---
 
-## Composite Plugins
-Greenwood provides some custom "composite" plugins that are tasked with providing specific functionality to your project, built using the [available plugin types](/plugins/) already provided by Greenwood.
+## Custom Plugins
+Greenwood provides some custom plugins that can be used to enhance your project's default functionalty, using the [available plugin types](/plugins/) provided by Greenwood.
 
 The available plugins built and maintained by Greenwood team and contibutors have been provided in the table below, with links to their README with the appropriate installation and usage steps.
 
diff --git a/www/pages/plugins/index-hooks.md b/www/pages/plugins/index-hooks.md
deleted file mode 100644
index aaed0f2cc..000000000
--- a/www/pages/plugins/index-hooks.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-label: 'index-hooks'
-menu: side
-title: 'Index Hooks'
-index: 2
----
-
-## Index Hooks
-
-It is common when working with certain libraries (3rd party or otherwise) that scripts _must_ be loaded globally and / or unbundled.  Greenwood provides some prefined places in its _index.html_ that can be used to inject custom HTML which can be used to inject scripts for things like polyfills and analytics.
-
-## Hook Types
-Right now Greenwood supports the following hook types:
-- `hookGreenwoodAnalytics` - For analytics libraries like [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) or [Snowplow](https://snowplowanalytics.com/).
-- `hookGreenwoodPolyfills`- Depending on what kind of polyfill needs your users require, this can be used to include things like [Web Components poyfills](https://www.webcomponents.org/polyfills).
-
-
-## Usage
-Below is an example of creating an index hook for loading Google Analytics from a _greenwood.config.js_.
-
-```js
-module.exports = {
-
-  ...
-
-  plugins: [{
-    type: 'index',
-    provider: (compilation) => {
-      // you can access things like config, context if you need from compilation
-      return {
-        hookGreenwoodAnalytics: `
-          <script>
-            window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-            ga('create', 'UA-XXXXXXX', 'auto');
-            ga('send', 'pageview');
-          </script>
-          <script async src='https://www.google-analytics.com/analytics.js'></script>
-        `
-      }
-    }
-  }]
-}
-```
-### Custom Index File
-It should be noted that if these specific hook types are too limiting Greenwood supports providing your own _index.html_ in the root of your workspace directory.  This can either be used to define your own hooks or just hardcode everything you need instead of using plugins.
-
-The minimum recommended markup for a custom _index.html_ would be this following:
-```html
-<!DOCTYPE html>
-<html lang="en" prefix="og:http://ogp.me/ns#">
-  <head>
-
-    <meta charset='utf-8'>
-    <meta name='viewport' content='width=device-width, initial-scale=1'/>
-    <meta name='mobile-web-app-capable' content='yes'/>
-    <meta name='apple-mobile-web-app-capable' content='yes'/>
-    <meta name='apple-mobile-web-app-status-bar-style' content='black'/>
-
-    <%= htmlWebpackPlugin.options.hookSpaIndexFallback %>
-
-  </head>
-
-  <body>
-
-    <eve-app></eve-app>
-
-  </body>
-
-</html>
-```
-
-To add your own hook, define it in a _greenwood.config.js_
-```js
-module.exports = {
-
-  ...
-
-  plugins: [{
-    type: 'index',
-    provider: (compilation) => {
-      // you can access things like config, context if you need from compilation
-      return {
-        myCustomHook: `
-          <div>My custom HTML here</div>
-        `
-      ]
-    }
-  }]
-
-}
-```
-
-
-And updated _index.html_
-```html
-<!DOCTYPE html>
-<html lang="en" prefix="og:http://ogp.me/ns#">
-
-  ...
-
-  <body>
-
-    <eve-app></eve-app>
-
-    <%= htmlWebpackPlugin.options.myCustomHook %>
-
-  </body>
-</html>
-```
-
-> For reference, here is the [default _index.html_](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/templates/index.html) provided by Greenwood.  You can mix and match with your own hooks and Greenwood's hooks to support whatever best suits your needs.
\ No newline at end of file
diff --git a/www/pages/plugins/index.md b/www/pages/plugins/index.md
index 672bca36c..9d6d5e0d9 100644
--- a/www/pages/plugins/index.md
+++ b/www/pages/plugins/index.md
@@ -9,21 +9,23 @@ index: 4
 
 At its core, Greenwood provides a CLI to drive all the development related workflows for a Greenwood project.  The CLI aims to provide a simple interface for quickly and simply building sites from as little as markdown files.
 
-However, for more complex sites and use cases, there will come a need to extend the default functionality of Greenwood for additional capabilities like:
-- Site Analytics (Google, Snowplow)
-- Progressive Web App experiences (PWA)
+However, for more complex sites and use cases, there will come a need to extend the default functionality of Greenwood and the standard web primitives (e.g. HTML, CSS, JS) for additional capabilities like:
+- Integrating Site Analytics (Google, Snowplow)
+- Building out Progressive Web App (PWA) experiences
 - Consuming content from a CMS (like Wordpress, Drupal)
+- Supporting additional file types, like TypeScript
 - Whatever you can think of!
 
 Greenwood aims to cater to these use cases through two approaches:
-1. A plugin based architecture exposing low level "primitives" of the Greenwood build that anyone can extend.
+1. A plugin based architecture exposing areas of the Greenwood build that anyone can tap into.
 1. A set of pre-built plugins to help facilitate some of the most common uses cases and workflows, that don't require needing to know anything about the low level APIs.
 
 
 ### API
-Each plugin type requires two properties.
-- `type`: A string to specify to Greenwood the type of plugin.  Can be one of the following values: `'index'`, `'webpack'`
-- `provider`: A function that will be invoked by Greenwood during the build, determined by the `type`.  Can accept  a `compilation` param that provides read-only access to parts of Greenwood's state and configuration that can be used by a plugin.
+Each plugin must return a function that has the following three properties:.
+- `name`: A string to give your plugin a name and used for error handling and troubleshooting.
+- `type`: A string to specify to Greenwood the type of plugin.  Right now the current supported plugin type `'resource'`
+- `provider`: A function that will be invoked by Greenwood that Can accept  a `compilation` param that provides read-only access to parts of Greenwood's state and configuration that can be used by a plugin.
 
 Here is an example of creating a plugin in a _greenwood.config.js_.
 ```javascript
@@ -31,17 +33,22 @@ module.exports = {
 
   ...
 
-  plugins: [{
-    type: 'webpack',
-    provider: (compilation) => {
-      // do stuff here
+  plugins: [
+    ({ opt1: 'something' }) => {
+      return {
+        name: 'my-plugin',
+        type: 'resource',
+        provider: (compilation) => {
+          // do stuff here
+        }
+      }
     }
   }]
 
 }
 ```
-
-`compilation` provides read-only access to the follow objects:
+- `options` - Passed in by users when they run the exported function:
+- `compilation` - Provides read-only access to the follow objects:
 
 #### Config
 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.
@@ -52,9 +59,10 @@ module.exports = {
   title: 'My Blog',
 
   plugins: [{
-    type: 'index|webpack',
+    name: 'my-plugin',
+    type: 'resource',
     provider: (compilation) => {
-      console.log(compilation.config.title);  // My Blog
+      console.log(`Title of the site is ${compilation.config.title}`);  // My Blog
     }
   }]
 
@@ -65,12 +73,14 @@ module.exports = {
 This provides access to all the input / output directories and file paths Greenwood uses to build the site and output all the generated files.  Context is especially useful for copying files or writing to the build directory.
 
 Here are paths you can get from `context`, all of which are absolute URLs:
-- `scratchDir`: Greenwood's temporay output file (_.greenwood/_)
-- `publicDir`: Where Greenwood outputs the final static site
-- `pagesDir`: Path to the _pages/_ directory in the workspace
-- `templatesDir`: Path to the _templates/_ directory in the workspace
+
+- `outputDir`: Where Greenwood outputs the final static site
+- `pagesDir`: Path to the _pages/_ directory in the user's workspace
+- `projectDirectory`: Path to the root of the current project
+- `scratchDir`: Path to Greenwood's temporay output file directory (`${process.cwd()}.greenwood/`)s
+- `userTemplatesDir`: Path to the _templates/_ directory in the user's workspace
 - `userWorkspace`: Path to the workspace directory (_src/_ by default)
-- `assetDir`: Path to the _assets/_ directory in the workspace
+
 
 Example using `context` to write to `publicDir` from _greenwood.config.js_
 ```javascript
@@ -80,9 +90,10 @@ const path = require('path');
 module.exports = {
 
   plugins: [{
-    type: 'index|webpack',
+    name: 'my-plugin'
+    type: 'resource',
     provider: (compilation) => {
-      const outputDir = compilation.context.outputDir;
+      const { outputDir } = compilation.context;
 
       fs.writeFileSync(path.join(outputDir, 'robots.txt'), 'Hello World!');
     }
@@ -91,11 +102,8 @@ module.exports = {
 }
 ```
 
-### Types
+### Plugin Types
 While each API has its own documentation section on the left sidebar of this page, here is a quick overview of the current set of Plugin APIs Greenwood supports.
 
-#### Index Hooks
-It is common when working with certain libraries (3rd party or otherwise) that scripts _must_ be loaded globally and / or unbundled.  Good examples of these are analytics libraries and polyfills.  With an index hook plugin, users can leverage predefined "injection" sites to add this code to their project's _index.html_.
-
-#### Webpack Plugins
-Feel comfortable with **webpack**? Use this plugin type to pass in a **webpack** plugin directly!
\ No newline at end of file
+#### Resource Plugins
+Resource plugins allow users to interact with the request and response lifecycles of files at a variety of different ways.  These lifecycles provide the ability to do things like introduce new file types, to adding hosted 3rd party scripts to your site.
\ No newline at end of file
diff --git a/www/pages/plugins/resource.md b/www/pages/plugins/resource.md
new file mode 100644
index 000000000..74650e4e8
--- /dev/null
+++ b/www/pages/plugins/resource.md
@@ -0,0 +1,132 @@
+---
+label: 'Resource'
+menu: side
+title: 'Resource'
+index: 2
+---
+
+## Resource
+
+Resource plugins allow developers to interact with the request and response lifecycles of files at a variety of different points along the development and build workflow, when running the `develop` and `build` commands.  These lifecycles provide the ability to do things like:
+- Integrating Site Analytics (Google, Snowplow) in each generated _index.html_ page
+- Introduce additional file types, like TypeScript
+
+### API (Resource Interface)
+Although JavaScript is loosely typed, a [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli/src/lib/resource-interface.js) has been provided by Greenwood that you can use to start building our own resource plugins.  Effectively you have to define two things:
+- `extensions`: The file types your plugin will operate on
+- `contentType`: A browser compatible contentType to ensure browsers correctly interpret you transformations
+
+```javascript
+const fs = require('fs');
+const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
+
+class ExampleResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.xyz'];
+    this.contentType = 'text/something';
+  }
+
+  // test if this plugin should be used to process a given for the browser, ex: `<script type="module" src="index.foo">`
+  // return true if url / headers match your plugin's use case
+  shouldServe(url, headers) { }
+
+  // actually serve the contents of a url, e.g. convert .foo body -> .js body
+  // return body and / or contenType
+  async serve(url, headers) { }
+
+  // handle (intercept) an already resolved / served resource
+  // return true if url / headers match your plugin's case
+  shouldIntercept(url, headers) { }
+
+  // in exchange for a response body, return new respone body 
+  async intercept(body, headers) { }
+
+  // access to final index.html contents before final Rollup optimizing step
+  // inject tracking scripts here, or BYOA (Bring Your Own AST) if you need more than the contents of the HTML
+  shouldOptimze(contents) {}
+
+  // in exchange for file contents, return new file contents 
+  async optimize(contents) {}
+}
+
+module.exports = (options = {}) => {
+  return {
+    type: 'resource',
+    name: 'plugin-example',
+    provider: (compilation) => new ExampleResource(compilation, options)
+  }
+};
+```
+
+## Example
+Below is an example of turning files that have a _.foo_ extension into JavaScript.
+
+```js
+// file.foo
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+console.log('hello from file.foo with non standard JavaScript in it.');
+```
+
+```js
+// plugin-foo.js
+const fs = require('fs');
+const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
+
+class FooResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    
+    this.extensions = ['.foo'];
+    this.contentType = 'text/javascript';
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        let body = await fs.promises.readFile(url, 'utf-8');
+
+        // remove non standard JavaScript usage so browser is happy
+        body = body.replace(/interface (.*){(.*)}/s, '');
+
+        // and we can return .foo as .js!
+        resolve({
+          body,
+          contentType: this.contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = (options = {}) => {
+  return {
+    type: 'resource',
+    name: 'plugin-foo',
+    provider: (compilation) => new StandardJsonResource(compilation, options)
+  }
+};
+
+// greenwood.config.js
+const pluginFoo = require('./plugin-foo');
+
+module.exports = {
+
+  ...
+
+  plugins: [
+    pluginFoo()
+  ]
+
+}
+```
+
+> _You can see [more in-depth examples of resource plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli/src/plugins/resource/) by reviewing the default plugins maintained in Greenwood's CLI package._
\ No newline at end of file
diff --git a/www/pages/plugins/webpack.md b/www/pages/plugins/webpack.md
deleted file mode 100644
index 97428e7fe..000000000
--- a/www/pages/plugins/webpack.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-label: 'webpack'
-menu: side
-title: 'Webpack Plugins'
-index: 3
----
-
-## Webpack Plugins
-
-> This is an experimental API! [YMMV](http://onlineslangdictionary.com/meaning-definition-of/your-mileage-may-vary)
-
-Although Greenwood aims to provide a complete development environment out of the box, we recognize that for those users who are comfortable with webpack might want to introduce customizations using actual webpack plugins themselves.
-
-
-## Usage
-Below is an example of using the [Banner Plugin](https://webpack.js.org/plugins/banner-plugin/) to add text to each file generated by webpack in _greenwood.config.js_.
-
-```js
-const webpack = require('webpack');
-const { version } = require('package.json');
-
-module.exports = {
-
-  ...
-
-  plugins: [{
-    type: 'webpack',
-    provider: () => {
-      return new webpack.BannerPlugin(`My App v${version}`);
-    }
-  }]
-
-}
-```
-
-## Compatibility
-Although we can't promise all webpack plugins will work, we will try and document which ones we have had success with either as part of the CLI or one of our composite plugins.
-| Name  | Notes  |
-|---|---|
-| [BannerPlugin](https://webpack.js.org/plugins/banner-plugin/) | Used as an example in unit tests for `@greenwood/cli`. |
-| [CopyWebpackPlugin](https://github.com/webpack-contrib/copy-webpack-plugin/) | Used as part of our [Polyfills Plugin (`@greenwood/plugin-polyfills`)](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-polyfills) to copy `@webcomponentsjs/*` polyflls files to Greenwood's output directory. (`publicDir`).
-
-
-## Known Issues
-Currently there are no known issues (yet).  🤞
\ No newline at end of file
diff --git a/www/templates/app.html b/www/templates/app.html
index 9e5a92d74..30eec9e80 100644
--- a/www/templates/app.html
+++ b/www/templates/app.html
@@ -14,12 +14,6 @@
     <!-- TODO have to use / for path references?  translate on the fly in serve.js? -->
     <script type="module" src="/components/footer/footer.js"></script>
     <script type="module" src="/components/header/header.js"></script>
-    
-    <script>
-      function getOutboundLink() {
-        console.debug('TODO placeholder for Google Analytics...')
-      }
-    </script>
 
     <link rel="stylesheet" href="/styles/theme.css"></link>