Adding dynamic, configurable, meta component, to page template

packages/cli/config/webpack.config.common.js

@@ -13,19 +13,22 @@ const mapUserWorkspaceDirectory = (userPath) => {
   return new webpack.NormalModuleReplacementPlugin(
     new RegExp(`${directory}`),
     (resource) => {
-      resource.request = resource.request.replace(new RegExp(`\.\.\/${directory}`), userPath);
 
+      // workaround to ignore cli/templates default imports when rewriting
+      if (!new RegExp('\/cli\/templates').test(resource.request)) {
+        resource.request = resource.request.replace(new RegExp(`\.\.\/${directory}`), userPath);
+      }
       // remove any additional nests, after replacement with absolute path of user workspace + directory
       const additionalNestedPathIndex = resource.request.lastIndexOf('..');
-      
+
       if (additionalNestedPathIndex > -1) {
         resource.request = resource.request.substring(additionalNestedPathIndex + 2, resource.request.length);
       }
     }
   );
 };
 
-module.exports = (config, context) => {
+module.exports = ({ config, context }) => {
   // dynamically map all the user's workspace directories for resolution by webpack
   // this essentially helps us keep watch over changes from the user, and greenwood's build pipeline
   const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(context.userWorkspace).map(mapUserWorkspaceDirectory);

packages/cli/config/webpack.config.develop.js

@@ -23,7 +23,7 @@ const rebuild = async() => {
 };
 
 module.exports = ({ config, context, graph }) => {
-  const configWithContext = commonConfig(config, context, graph);
+  const configWithContext = commonConfig({ config, context, graph });
   const { devServer, publicPath } = config;
   const { host, port } = devServer;
 

packages/cli/config/webpack.config.prod.js

@@ -4,7 +4,7 @@ const webpackMerge = require('webpack-merge');
 const commonConfig = require(path.join(__dirname, '..', './config/webpack.config.common.js'));
 
 module.exports = ({ config, context, graph }) => {
-  const configWithContext = commonConfig(config, context, graph);
+  const configWithContext = commonConfig({ config, context, graph });
 
   return webpackMerge(configWithContext, {
 

packages/cli/lib/compile.js

@@ -24,7 +24,7 @@ module.exports = generateCompilation = () => {
 
       // generate a graph of all pages / components to build
       console.log('Generating graph of workspace files...');
-      compilation.graph = await generateGraph(compilation);
+      compilation = await generateGraph(compilation);
 
       // generate scaffolding
       console.log('Scaffolding out project files...');

packages/cli/lib/config.js

@@ -8,18 +8,22 @@ let defaultConfig = {
     port: 1984,
     host: 'http://localhost'
   },
-  publicPath: '/'
+  publicPath: '/',
+  title: 'Greenwood App',
+  meta: []
 };
 
 module.exports = readAndMergeConfig = async() => {
+  // eslint-disable-next-line complexity
   return new Promise((resolve, reject) => {
     try {
       // deep clone of default config
       let customConfig = JSON.parse(JSON.stringify(defaultConfig));
 
       if (fs.existsSync(path.join(process.cwd(), 'greenwood.config.js'))) {
         const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.js'));
-        const { workspace, devServer, publicPath } = userCfgFile;
+
+        const { workspace, devServer, publicPath, title, meta } = userCfgFile;
 
         // workspace validation
         if (workspace) {
@@ -41,6 +45,13 @@ module.exports = readAndMergeConfig = async() => {
           }
         }
 
+        if (title) {
+          if (typeof title !== 'string') {
+            reject('Error: greenwood.config.js title must be a string');
+          }
+          customConfig.title = title;
+        }
+
         if (publicPath) {
           if (typeof publicPath !== 'string') {
             reject('Error: greenwood.config.js publicPath must be a string');
@@ -50,7 +61,10 @@ module.exports = readAndMergeConfig = async() => {
           }
         }
 
-        // devServer checks
+        if (meta && meta.length > 0) {
+          customConfig.meta = meta;
+        }
+
         if (devServer && Object.keys(devServer).length > 0) {
 
           if (devServer.host) {
@@ -72,6 +86,7 @@ module.exports = readAndMergeConfig = async() => {
               // console.log(`custom port provided => ${customConfig.devServer.port}`);
             }
           }
+
         }
       }
 

packages/cli/lib/graph.js

@@ -5,7 +5,7 @@ const fm = require('front-matter');
 const path = require('path');
 const util = require('util');
 
-const createGraphFromPages = async (pagesDir) => {
+const createGraphFromPages = async (pagesDir, config) => {
   let pages = [];
   const readdir = util.promisify(fs.readdir);
   const readFile = util.promisify(fs.readFile);
@@ -26,7 +26,8 @@ const createGraphFromPages = async (pagesDir) => {
               if (isMdFile && !stats.isDirectory()) {
                 const fileContents = await readFile(filePath, 'utf8');
                 const { attributes } = fm(fileContents);
-                let { label, template } = attributes;
+                let { label, template, title } = attributes;
+                let { meta } = config;
                 let mdFile = '';
 
                 // if template not set, use default
@@ -54,8 +55,8 @@ const createGraphFromPages = async (pagesDir) => {
 
                   // set route to the nested pages path and file name(without extension)
                   route = completeNestedPath + route;
-                  mdFile = `./${completeNestedPath}${fileRoute}.md`;
-                  relativeExpectedPath = `'../${completeNestedPath}/${fileName}/${fileName}.js'`; 
+                  mdFile = `.${completeNestedPath}${fileRoute}.md`;
+                  relativeExpectedPath = `'..${completeNestedPath}/${fileName}/${fileName}.js'`; 
                 } else {
                   mdFile = `.${fileRoute}.md`;
                   relativeExpectedPath = `'../${fileName}/${fileName}.js'`; 
@@ -64,6 +65,11 @@ const createGraphFromPages = async (pagesDir) => {
                 // generate a random element name
                 label = label || generateLabelHash(filePath);
 
+                // set <title></title> element text, override with markdown title
+                title = title || config.title;
+
+                // TODO: Allow for other, per page, dynamic, meta data, merge meta array
+
                 /*
                 * Variable Definitions
                 *----------------------
@@ -75,10 +81,11 @@ const createGraphFromPages = async (pagesDir) => {
                 * fileName: file name without extension/path, so that it can be copied to scratch dir with same name
                 * relativeExpectedPath: relative import path for generated component within a list.js file to later be 
                 * imported into app.js root component
-                * elementLabel: the element name for the generated md page e.g. <wc-md-hello-world></wc-md-hello-world>
+                * title: the head <title></title> text
+                * meta: og graph meta array of objects { property/name, content }
                 */
 
-                pages.push({ mdFile, label, route, template, filePath, fileName, relativeExpectedPath });
+                pages.push({ mdFile, label, route, template, filePath, fileName, relativeExpectedPath, title, meta });
               }
               if (stats.isDirectory()) {
                 await walkDirectory(filePath);
@@ -116,9 +123,11 @@ module.exports = generateGraph = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
     try {
-      const graph = await createGraphFromPages(compilation.context.pagesDir);
+      const { context, config } = compilation;
+
+      compilation.graph = await createGraphFromPages(context.pagesDir, config);
 
-      resolve(graph);
+      resolve(compilation);
     } catch (err) {
       reject(err);
     }

packages/cli/lib/init.js

@@ -3,6 +3,7 @@ const path = require('path');
 const defaultTemplatesDir = path.join(__dirname, '../templates/');
 const scratchDir = path.join(process.cwd(), './.greenwood/');
 const publicDir = path.join(process.cwd(), './public');
+const metaComponent = path.join(__dirname, '..', 'templates', './components/meta');
 
 module.exports = initContexts = async({ config }) => {
 
@@ -44,7 +45,8 @@ module.exports = initContexts = async({ config }) => {
           ? path.join(userTemplatesDir, notFoundPageTemplate)
           : path.join(defaultTemplatesDir, notFoundPageTemplate),
         indexPageTemplate,
-        notFoundPageTemplate
+        notFoundPageTemplate,
+        metaComponent
       };
 
       if (!fs.existsSync(scratchDir)) {

packages/cli/lib/scaffold.js

@@ -23,13 +23,37 @@ const writePageComponentsFromTemplate = async (compilation) => {
     });
   };
 
+  const loadPageMeta = async (file, result, { metaComponent }) => {
+    return new Promise((resolve, reject) => {
+      try {
+        const { title, meta, route } = file;
+        const metadata = {
+          title,
+          meta
+        };
+
+        metadata.meta.push({ property: 'og:title', content: title });
+        metadata.meta.push({ property: 'og:url', content: route });
+
+        result = result.replace(/METAIMPORT/, `import '${metaComponent}'`);
+        result = result.replace(/METADATA/, `const metadata = ${JSON.stringify(metadata)}`);
+        result = result.replace(/METAELEMENT/, '<eve-meta .attributes=\${metadata}></eve-meta>');
+
+        resolve(result);
+      } catch (err) {
+        reject(err);
+      }
+    });
+  };
+
   return Promise.all(compilation.graph.map(file => {
     const context = compilation.context;
 
     return new Promise(async(resolve, reject) => {
       try {
         let result = await createPageComponent(file, context);
 
+        result = await loadPageMeta(file, result, context);
         let relPageDir = file.filePath.substring(context.pagesDir.length, file.filePath.length);
         const pathLastBackslash = relPageDir.lastIndexOf('/');
 

packages/cli/templates/components/meta.js

@@ -0,0 +1,72 @@
+import { html, LitElement } from 'lit-element';
+
+/*
+* Take an attributes object with an array of meta objects, add them to an element and replace/add the element to DOM
+*  {
+*   title: 'my title',
+*   meta: [
+*     { property: 'og:site', content: 'greenwood' },
+*     { name: 'twitter:site', content: '@PrjEvergreen ' }
+*   ]
+*  }
+*/
+
+class meta extends LitElement {
+
+  static get properties() {
+    return {
+      attributes: {
+        type: Object
+      }
+    };
+  }
+
+  firstUpdated() {
+    let header = document.head;
+    let meta;
+
+    if (this.attributes) {        
+      this.attributes.meta.map(attr => {
+        meta = document.createElement('meta');
+
+        const metaPropertyOrName = Object.keys(attr)[0];
+        const metaPropValue = Object.values(attr)[0];
+        let metaContentVal = Object.values(attr)[1];
+
+        // insert origin domain into url
+        if (metaPropValue === 'og:url') {
+          metaContentVal = window.location.origin + metaContentVal;
+        }
+
+        meta.setAttribute(metaPropertyOrName, metaPropValue);
+        meta.setAttribute('content', metaContentVal);
+
+        const oldmeta = header.querySelector(`[${metaPropertyOrName}="${metaPropValue}"]`);
+
+        // rehydration
+        if (oldmeta) {
+          header.replaceChild(meta, oldmeta);
+        } else {
+          header.appendChild(meta);
+        }
+      });
+      let title = document.createElement('title');
+
+      title.innerText = this.attributes.title;
+      const oldTitle = document.head.querySelector('title');
+
+      header.replaceChild(title, oldTitle);
+    }
+
+  }
+
+  render() {
+    return html`
+      <div>
+
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-meta', meta);

packages/cli/templates/page-template.js

@@ -1,9 +1,12 @@
 import { html, LitElement } from 'lit-element';
 MDIMPORT;
+METAIMPORT;
+METADATA;
 
 class PageTemplate extends LitElement {
   render() {
     return html`
+      METAELEMENT
       <div class='wrapper'>
         <div class='page-template content'>
           <entry></entry>

test/cli/cases/build.config.default/build.config.default.spec.js

@@ -30,7 +30,7 @@ describe('Build Greenwood With: ', async function() {
     before(async function() {     
       await setup.runGreenwoodCommand('build');
     });
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    runSmokeTest(['public', 'index', 'not-found', 'hello', 'meta'], LABEL);
   });
 
   after(function() {

test/cli/cases/build.config.error-title/build.config.error-title.spec.js

@@ -0,0 +1,44 @@
+/*
+ * Use Case
+ * Run Greenwood build command with a bad value for title in a custom config.
+ * 
+ * User Result
+ * Should throw an error.
+ * 
+ * User Command
+ * greenwood build
+ * 
+ * User Config
+ * {
+ *   title: {}
+ * }
+ * 
+ * User Workspace
+ * Greenwood default
+ */
+const expect = require('chai').expect;
+const TestBed = require('../../test-bed');
+
+describe('Build Greenwood With: ', () => {
+  let setup;
+
+  before(async () => {
+    setup = new TestBed();
+    setup.setupTestBed(__dirname);
+  });
+
+  describe('Custom Configuration with a bad value for Title', () => {
+    it('should throw an error that title must be a string', async () => {
+      try { 
+        await setup.runGreenwoodCommand('build');
+      } catch (err) {
+        expect(err).to.contain('greenwood.config.js title must be a string');
+      }
+    });
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});

test/cli/cases/build.config.error-title/greenwood.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  title: {}
+};