Enhancement/issue 125 meta from config (#303)

* Rfc/issue 115 build time data access (#269)

* graphql server working

* apollo client connect to apollo server

* connected header example using lit apollo

* todo

* todos

* query and client + server refactor

* schema refactoring

* clean up console logging

* alias all @greenwood/cli/data module imports

* avoid paramater destructuring

* graphql example in the header

* multiple schemas

* internal data sources documentation

* shelf refactor and children query integration

* refactor out ApolloQuery

* ability to intercept client.query calls

* basic semi-working implementation

* remove extra config from server context

* have puppeteer wait for graphql requests before returning content

* fix and add test cases for apollo

* merged resolvers not actually working

* multiple queries support

* everything working

* todos

* TODO tracking

* fix fallback apollo client fetch handling

* full test suite

* cache json test cases

* stablize test due to inconsistent data results ordering

* clean up deps

* todo cleanup

* remove forced client call in SSG mode for client

* represent graph through the schema

* updated data docs

* typos and grammer

* typos and community link fixes

* hello and graph queries working together

* config def and resolvers

* flesh out config schema and query

* remove theme file from config

* delete hello query example

* formatting

* documentation

* app template with config title from data

* tests for custom page title

* refactoring meta to app-template and data instead of scaffolding and added tests

* update coverage config

* fix spelling mistake

Author: thescientist13

nyc.config.js

@@ -6,7 +6,6 @@ module.exports = {
     'packages/cli/src/data/*.js',
     'packages/cli/src/lib/*.js',
     'packages/cli/src/lifecycles/*.js',
-    'packages/cli/src/plugins/*.js',
     'packages/cli/src/tasks/*.js',
     'packages/plugin-*/src/*.js'
   ],
@@ -20,10 +19,10 @@ module.exports = {
 
   checkCoverage: true,
 
-  statements: 80,
-  branches: 70,
-  functions: 85,
-  lines: 80,
+  statements: 85,
+  branches: 75,
+  functions: 90,
+  lines: 85,
 
   watermarks: {
     statements: [75, 85],

packages/cli/src/data/queries/config.gql

@@ -9,7 +9,8 @@ query {
       rel,
       content,
       property,
-      value
+      value,
+      href
     },
     publicPath,
     title,

packages/cli/src/data/schema/config.js

@@ -16,7 +16,8 @@ const configTypeDefs = gql`
     value: String,
     content: String,
     rel: String,
-    property: String
+    property: String,
+    href: String
   }
 
   type Config {

packages/cli/src/lifecycles/context.js

@@ -3,7 +3,6 @@ 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, '../plugins/meta');
 
 module.exports = initContexts = async({ config }) => {
 
@@ -46,7 +45,6 @@ module.exports = initContexts = async({ config }) => {
           : path.join(defaultTemplatesDir, notFoundPageTemplate),
         indexPageTemplate,
         notFoundPageTemplate,
-        metaComponent,
         assetDir: path.join(userHasWorkspace ? userWorkspace : defaultTemplatesDir, 'assets')
       };
 

packages/cli/src/lifecycles/scaffold.js

@@ -23,21 +23,6 @@ const writePageComponentsFromTemplate = async (compilation) => {
     });
   };
 
-  const loadPageMeta = (file, result, { metaComponent }) => {
-    const { title, meta, route } = file;
-    const metadata = {
-      title,
-      meta,
-      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>');
-
-    return result;
-  };
-
   const writePageComponentToFile = async (target, filename, result) => {
     return new Promise(async(resolve, reject) => {
       try {
@@ -70,10 +55,7 @@ const writePageComponentsFromTemplate = async (compilation) => {
     return new Promise(async(resolve, reject) => {
       try {
         // Create Standard Page Component from Markdown File
-        let result = await createPageComponent(file, context);
-
-        // Add Meta Data based on config
-        result = loadPageMeta(file, result, context);
+        const result = await createPageComponent(file, context);
 
         // Determine path to newly scaffolded component
         const filePath = getPageComponentPath(file, context);

packages/cli/src/plugins/meta.js

@@ -41,16 +41,55 @@ class AppComponent extends LitElement {
       : ` - ${currentPage.title}`;
     const fullTitle = `${config.title}${currentPageTitleSuffix}`;
 
-    this.setDocoumentTitle(fullTitle);
+    this.setDocumentTitle(fullTitle);
+    this.setMeta(config.meta, currentPage);
   }
 
-  setDocoumentTitle(title) {
+  setDocumentTitle(title = '') {
     const head = document.head;
     const titleElement = head.getElementsByTagName('title')[0];
 
     titleElement.innerHTML = title;
   }
 
+  setMeta(meta = [], currentPage = {}) {
+    let header = document.head;
+
+    meta.forEach(metaItem => {
+      const metaType = metaItem.rel // type of meta
+        ? 'rel'
+        : metaItem.name 
+          ? 'name'
+          : 'property';
+      const metaTypeValue = metaItem[metaType]; // value of the meta
+      let meta = document.createElement('meta');
+
+      if (metaType === 'rel') {
+        // change to a <link> tag instead
+        meta = document.createElement('link');
+
+        meta.setAttribute('rel', metaTypeValue);
+        meta.setAttribute('href', metaItem.href);
+      } else {
+        const metaContent = metaItem.property === 'og:url' 
+          ? `${metaItem.content}${currentPage.link}` 
+          : metaItem.content;
+
+        meta.setAttribute(metaType, metaItem[metaType]);
+        meta.setAttribute('content', metaContent);
+      }
+
+      const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`);
+      
+      // rehydration
+      if (oldmeta) {
+        header.replaceChild(meta, oldmeta);
+      } else {
+        header.appendChild(meta);
+      }
+    });
+  }
+
   render() {
     return html`
         MYROUTES

packages/cli/src/templates/app-template.js

@@ -1,12 +1,9 @@
 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>

packages/cli/src/templates/page-template.js

@@ -1,13 +1,10 @@
 import { html, LitElement } from 'lit-element';
 import '../styles/my-brand.css';
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class PageTemplate extends LitElement {
   render() {
     return html`
-      METAELEMENT
       <div class='wrapper'>
         <div class='page-template content owen-test'>
           <entry></entry>

packages/cli/test/cases/build.config.theme/src/templates/page-template.js

@@ -4,8 +4,6 @@ import ChildrenQuery from '@greenwood/cli/data/queries/children';
 import '../components/header';
 
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class BlogTemplate extends LitElement {
 
@@ -39,7 +37,6 @@ class BlogTemplate extends LitElement {
     const { posts } = this;
 
     return html`
-      METAELEMENT
 
       <div class='container'>
         <app-header></app-header>

packages/cli/test/cases/build.data.graph/src/templates/blog-template.js

@@ -2,8 +2,6 @@ import { html, LitElement } from 'lit-element';
 import '../components/header';
 
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class PageTemplate extends LitElement {
 

packages/cli/test/cases/build.data.graph/src/templates/page-template.js

@@ -3,8 +3,6 @@ import '../components/footer';
 import '../components/header';
 
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class BlogTemplate extends LitElement {
 
@@ -17,8 +15,6 @@ class BlogTemplate extends LitElement {
       <style>
 
       </style>
-      
-      METAELEMENT
 
       <div class='container'>
         <app-header></app-header>

packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js

@@ -2,16 +2,13 @@ import { html, LitElement } from 'lit-element';
 import '../styles/theme.css';
 import css from '../styles/style.css';
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class PageTemplate extends LitElement {
   render() {
     return html`
       <style>
         ${css}
       </style>
-      METAELEMENT
       <div class='wrapper'>
         <div class='page-template content owen-test'>
           <entry></entry>

packages/cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js

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

packages/cli/test/cases/build.default.workspace-template-page/src/templates/page-template.js

@@ -1,14 +1,10 @@
 import { html, LitElement } from 'lit-element';
 import '../components/header/header';
-
 MDIMPORT;
-METAIMPORT;
-METADATA;
 
 class PageTemplate extends LitElement {
   render() {
     return html`
-      METAELEMENT
       <div class='wrapper'>
         <div class='page-template blog-content content owen-test'>
           <entry></entry>

packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js

@@ -248,7 +248,8 @@ query {
       rel,
       content,
       property,
-      value
+      value,
+      href
     },
     publicPath,
     title,

www/pages/docs/data.md

@@ -12,13 +12,10 @@ Here is an example `page-template.js` (the [default](https://github.com/ProjectE
 ```render js
 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>
@@ -43,13 +40,6 @@ MDIMPORT;
 `MDIMPORT;` Tells Greenwood to import a markdown file into this component.  But we also have to define where the compiled markdown element(page) will be placed within our page-template.  Hence below within our `render()` method you will see the `<entry></entry>` element. That defines exactly where to place it.
 
 
-```render js
-METAIMPORT;
-METADATA;
-```
-
-`METAIMPORT;` and `METADATA;` hook variables import the default greenwood meta component and data which handles all your configured meta data.  You can then render this component within the `render()` method using the `METAELEMENT` variable hook.
-
 The complete example can be found in the [greenwood source](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/page-template.js) which is the default page-template.js if no other is defined.
 
 With a completed page-template.js present in your `src/templates/` folder you can define which page uses it via front-matter at the top of any markdown file.  See [Front Matter Docs](/docs/front-matter#define-template) for more information.  Simply including a file named `page-template.js` will overwrite the greenwood default template for all markdown files, without needing to declare the template at the top of markdown file.

www/pages/docs/layouts.md

@@ -42,13 +42,10 @@ For reference, here's what the default page template included by Greenwood looks
 ```render javascript
 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>
@@ -61,7 +58,7 @@ class PageTemplate extends LitElement {
 customElements.define('page-template', PageTemplate);
 ```
 
-> Don't worry too much about the capitalized expressions, this is discussed in more detail in our [docs](/docs/template/).  Also, as seen here, Greenwood provides a version of [**LitElement**](https://lit-element.polymer-project.org/) by default that you can use for your own components if you would like.
+> Don't worry too much about the capitalized expression, this is discussed in more detail in our [docs](/docs/template/).  Also, as seen here, Greenwood provides a version of [**LitElement**](https://lit-element.polymer-project.org/) by default that you can use for your own components if you would like.
 
 
 ### Pages