diff --git a/nyc.config.js b/nyc.config.js index e70f906e0..6e7059bbe 100644 --- a/nyc.config.js +++ b/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], diff --git a/packages/cli/src/data/queries/config.gql b/packages/cli/src/data/queries/config.gql index 95592cea4..371cc8867 100644 --- a/packages/cli/src/data/queries/config.gql +++ b/packages/cli/src/data/queries/config.gql @@ -9,7 +9,8 @@ query { rel, content, property, - value + value, + href }, publicPath, title, diff --git a/packages/cli/src/data/schema/config.js b/packages/cli/src/data/schema/config.js index c6fffe2b8..595aa0af7 100644 --- a/packages/cli/src/data/schema/config.js +++ b/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 { diff --git a/packages/cli/src/lifecycles/context.js b/packages/cli/src/lifecycles/context.js index 18ccc2a4e..b552c319d 100644 --- a/packages/cli/src/lifecycles/context.js +++ b/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') }; diff --git a/packages/cli/src/lifecycles/scaffold.js b/packages/cli/src/lifecycles/scaffold.js index 9ae474c14..d290da854 100644 --- a/packages/cli/src/lifecycles/scaffold.js +++ b/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/, ''); - - 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); diff --git a/packages/cli/src/plugins/meta.js b/packages/cli/src/plugins/meta.js deleted file mode 100644 index b8c529a7b..000000000 --- a/packages/cli/src/plugins/meta.js +++ /dev/null @@ -1,63 +0,0 @@ -import { 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' }, -* { rel: 'icon', href: '/assets/favicon.ico ' } -* ] -* } -*/ - -class meta extends LitElement { - - static get properties() { - return { - attributes: { - type: Object - } - }; - } - - firstUpdated() { - if (this.attributes) { - let header = document.head; - - // handle + tags - this.attributes.meta.forEach(metaItem => { - const metaType = Object.keys(metaItem)[0]; // property or name attribute - const metaTypeValue = metaItem[metaType]; // value of the attribute - let meta = document.createElement('meta'); - - if (metaType === 'rel') { - // change to a tag instead - meta = document.createElement('link'); - - meta.setAttribute(metaType, metaTypeValue); - meta.setAttribute('href', metaItem.href); - } else { - const metaContent = metaTypeValue === 'og:url' - ? `${metaItem.content}${this.attributes.route}` - : metaItem.content; - - meta.setAttribute(metaType, metaTypeValue); - meta.setAttribute('content', metaContent); - } - - const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`); - - // rehydration - if (oldmeta) { - header.replaceChild(meta, oldmeta); - } else { - header.appendChild(meta); - } - }); - } - } -} - -customElements.define('eve-meta', meta); \ No newline at end of file diff --git a/packages/cli/src/templates/app-template.js b/packages/cli/src/templates/app-template.js index fc59bfc66..4600b01a3 100644 --- a/packages/cli/src/templates/app-template.js +++ b/packages/cli/src/templates/app-template.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 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 diff --git a/packages/cli/src/templates/page-template.js b/packages/cli/src/templates/page-template.js index 4355f1987..16ff0fe5a 100644 --- a/packages/cli/src/templates/page-template.js +++ b/packages/cli/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
diff --git a/packages/cli/test/cases/build.config.theme/src/templates/page-template.js b/packages/cli/test/cases/build.config.theme/src/templates/page-template.js index c166b165e..1641d9481 100644 --- a/packages/cli/test/cases/build.config.theme/src/templates/page-template.js +++ b/packages/cli/test/cases/build.config.theme/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
diff --git a/packages/cli/test/cases/build.data.graph/src/templates/blog-template.js b/packages/cli/test/cases/build.data.graph/src/templates/blog-template.js index 161d79519..ef42d041f 100644 --- a/packages/cli/test/cases/build.data.graph/src/templates/blog-template.js +++ b/packages/cli/test/cases/build.data.graph/src/templates/blog-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
diff --git a/packages/cli/test/cases/build.data.graph/src/templates/page-template.js b/packages/cli/test/cases/build.data.graph/src/templates/page-template.js index f649c8990..bc70f14bb 100644 --- a/packages/cli/test/cases/build.data.graph/src/templates/page-template.js +++ b/packages/cli/test/cases/build.data.graph/src/templates/page-template.js @@ -2,8 +2,6 @@ import { html, LitElement } from 'lit-element'; import '../components/header'; MDIMPORT; -METAIMPORT; -METADATA; class PageTemplate extends LitElement { diff --git a/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js b/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js index 210eeb8eb..21e910acb 100644 --- a/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js +++ b/packages/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-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 { - - METAELEMENT
diff --git a/packages/cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js b/packages/cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js index a3fd3539e..9ccad35e0 100644 --- a/packages/cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js +++ b/packages/cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js @@ -2,8 +2,6 @@ import { html, LitElement } from 'lit-element'; import '../styles/theme.css'; import css from '../styles/style.css'; MDIMPORT; -METAIMPORT; -METADATA; class PageTemplate extends LitElement { render() { @@ -11,7 +9,6 @@ class PageTemplate extends LitElement { - METAELEMENT
diff --git a/packages/cli/test/cases/build.default.workspace-template-page/src/templates/page-template.js b/packages/cli/test/cases/build.default.workspace-template-page/src/templates/page-template.js index e410a7648..394bf5808 100644 --- a/packages/cli/test/cases/build.default.workspace-template-page/src/templates/page-template.js +++ b/packages/cli/test/cases/build.default.workspace-template-page/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
diff --git a/packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js b/packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js index ec440bedb..d08a451ba 100644 --- a/packages/cli/test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js +++ b/packages/cli/test/cases/build.default.workspace-user-directory-mapping/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
diff --git a/www/pages/docs/data.md b/www/pages/docs/data.md index 70a99348a..d29f35ab6 100644 --- a/www/pages/docs/data.md +++ b/www/pages/docs/data.md @@ -248,7 +248,8 @@ query { rel, content, property, - value + value, + href }, publicPath, title, diff --git a/www/pages/docs/layouts.md b/www/pages/docs/layouts.md index 15c1352be..df48670b9 100644 --- a/www/pages/docs/layouts.md +++ b/www/pages/docs/layouts.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
@@ -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 `` 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. diff --git a/www/pages/getting-started/key-concepts.md b/www/pages/getting-started/key-concepts.md index 954c260bf..a4aa5f2a4 100644 --- a/www/pages/getting-started/key-concepts.md +++ b/www/pages/getting-started/key-concepts.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
@@ -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 diff --git a/www/templates/home-template.js b/www/templates/home-template.js index 59500515e..ad1410d7d 100644 --- a/www/templates/home-template.js +++ b/www/templates/home-template.js @@ -11,8 +11,6 @@ import '../styles/theme.css'; import homeCss from '../styles/home.css'; MDIMPORT; -METAIMPORT; -METADATA; class HomeTemplate extends LitElement { @@ -31,7 +29,6 @@ class HomeTemplate extends LitElement { - METAELEMENT
diff --git a/www/templates/page-template.js b/www/templates/page-template.js index 428f8b3dd..bebf13d1a 100644 --- a/www/templates/page-template.js +++ b/www/templates/page-template.js @@ -9,8 +9,6 @@ import pageCss from '../styles/page.css'; import '../styles/theme.css'; MDIMPORT; -METAIMPORT; -METADATA; class PageTemplate extends LitElement { @@ -39,8 +37,6 @@ class PageTemplate extends LitElement { - - METAELEMENT