Task/issue 322 remove need for MDIMPORT, rename MYROUTES (#387)

* task: replace MYROUTES with <routes></routes> * task: remove need for MDIMPORT * docs: remove references to predefined vars MDIMPORT and MYROUTES * fix: remove all test/doc references to MDIMPORT * fix: remove additional ref to MDIMPORT * fix: move mdimport to start of file * fix: test template example Co-authored-by: hutchgrant <[email protected]>
ProjectEvergreen · Jul 22, 2020 · 4e12b64 · 4e12b64
1 parent 7bbdb17
commit 4e12b64
Show file tree

Hide file tree

Showing 22 changed files with 12 additions and 64 deletions.
diff --git a/packages/cli/src/lifecycles/scaffold.js b/packages/cli/src/lifecycles/scaffold.js
@@ -10,11 +10,10 @@ const writePageComponentsFromTemplate = async (compilation) => {
           : path.join(context.templatesDir, `${file.template}-template.js`);
 
         const templateData = await fs.readFile(pageTemplatePath, 'utf8');
-
         let result = templateData.toString().replace(/entry/g, `wc-md-${file.label}`);
-
+
+        result = `import '${file.mdFile}';\n${result}`;
         result = result.replace(/page-template/g, `eve-${file.label}`);
-        result = result.replace(/MDIMPORT;/, `import '${file.mdFile}';`);
 
         resolve(result);
       } catch (err) {
@@ -84,7 +83,7 @@ const writeRoutes = async(compilation) => {
           ></lit-route>`;
       });
 
-      const result = data.toString().replace(/MYROUTES/g, routes.join(''));
+      const result = data.toString().replace(/<routes><\/routes>/g, routes.join(''));
       // Create app directory so that app-template relative imports are correct
       const appDir = path.join(compilation.context.scratchDir, 'app');
 

diff --git a/packages/cli/src/templates/app-template.js b/packages/cli/src/templates/app-template.js
@@ -4,7 +4,7 @@ class AppComponent extends LitElement {
 
   render() {
     return html`
-      MYROUTES
+      <routes></routes>
       <lit-route><h1>404 Not found</h1></lit-route>
     `;
   }

diff --git a/packages/cli/src/templates/page-template.js b/packages/cli/src/templates/page-template.js
@@ -1,5 +1,4 @@
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

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
@@ -1,6 +1,5 @@
 import { html, LitElement } from 'lit-element';
 import '../styles/my-brand.css';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

diff --git a/packages/cli/test/cases/build.data.graph-custom-frontmatter/src/templates/blog-template.js b/packages/cli/test/cases/build.data.graph-custom-frontmatter/src/templates/blog-template.js
@@ -2,8 +2,6 @@ import { html, LitElement } from 'lit-element';
 import client from '@greenwood/cli/data/client';
 import gql from 'graphql-tag';
 
-MDIMPORT;
-
 class BlogTemplate extends LitElement {
 
   static get properties() {

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
@@ -3,8 +3,6 @@ import client from '@greenwood/cli/data/client';
 import ChildrenQuery from '@greenwood/cli/data/queries/children';
 import '../components/header';
 
-MDIMPORT;
-
 class BlogTemplate extends LitElement {
 
   static get properties() {

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
@@ -1,8 +1,6 @@
 import { html, LitElement } from 'lit-element';
 import '../components/header';
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   constructor() {

diff --git a/packages/cli/test/cases/build.data.graph/src/templates/post-template.js b/packages/cli/test/cases/build.data.graph/src/templates/post-template.js
@@ -3,8 +3,6 @@ import gql from 'graphql-tag';
 import { html, LitElement } from 'lit-element';
 import '../components/header';
 
-MDIMPORT;
-
 class PostTemplate extends LitElement {
 
   static get properties() {

diff --git a/...ges/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js b/...ges/cli/test/cases/build.default.workspace-getting-started/src/templates/blog-template.js
@@ -2,8 +2,6 @@ import { html, LitElement } from 'lit-element';
 import '../components/footer';
 import '../components/header';
 
-MDIMPORT;
-
 class BlogTemplate extends LitElement {
 
   constructor() {

diff --git a/...ges/cli/test/cases/build.default.workspace-getting-started/src/templates/page-template.js b/...ges/cli/test/cases/build.default.workspace-getting-started/src/templates/page-template.js
@@ -3,8 +3,6 @@ import '../components/footer';
 import '../components/header';
 import '../styles/theme.css';
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   constructor() {

diff --git a/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js b/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js
@@ -4,7 +4,7 @@ class AppComponent extends LitElement {
 
   render() {
     return html`
-      MYROUTES
+      <routes></routes>
       <p id="custom-app-template">My Custom App Template</p>
     `;
   }

diff --git a/...cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js b/...cli/test/cases/build.default.workspace-template-page-style/src/templates/page-template.js
@@ -1,7 +1,6 @@
 import { html, LitElement } from 'lit-element';
 import '../styles/theme.css';
 import css from '../styles/style.css';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

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
@@ -1,5 +1,4 @@
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

diff --git a/.../test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js b/.../test/cases/build.default.workspace-user-directory-mapping/src/templates/page-template.js
@@ -1,6 +1,5 @@
 import { html, LitElement } from 'lit-element';
 import '../components/header/header';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md
@@ -38,8 +38,6 @@ The below is an example of using _theme.css_ to load a Google font and apply a g
 import { html, LitElement } from 'lit-element';
 import '../styles/theme.css';
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   constructor() {
@@ -62,8 +60,6 @@ For any of your components and page templates, it is recommended to use the [Sha
 import { html, LitElement } from 'lit-element';
 import pageTemplateCss '../styles/page-template.css';  // if you like your CSS-in-JS
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   constructor() {

diff --git a/www/pages/docs/layouts.md b/www/pages/docs/layouts.md
@@ -13,13 +13,12 @@ Greenwood has two types of templates:
 
 
 ### Page Template
-In order to make a page template, you need to create a `LitElement` based custom element that contains a number of pre-defined variables, elements, and imports. You need to do this in a file within your _templates/_ directory named _<type>-template.js_.
+In order to make a page template, you need to create a `LitElement` based custom element that contains a predefined `<entry></entry>` element. The `<entry></entry>` element is where your markdown page content will be placed once compiled. You need to do this in a file within your _templates/_ directory named _<type>-template.js_.
 
-Here is an example `page-template.js` (the [default](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/page-template.js) one included with Greenwood).  You can just copy / paste this to start your own page template.
+Here is an example `page-template.js` (the [default](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/page-template.js) one included with Greenwood which is the default page-template.js if no other is defined).  You can just copy / paste this to start your own page template.
 
 ```js
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {
@@ -38,44 +37,26 @@ customElements.define('page-template', PageTemplate);
 
 > **Note**: the filename must be in the format `<label>-templates.js` and the `customElements` name must be `page-template`.
 
-#### Template Hooks
-A number of hook variables are defined that tell greenwood to do different things
-
-```js
-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.
-
-
-```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.
 
 ### App Template
 
 In order to make an app template, you need to create a `LitElement` component that contains a predefined hook `MYROUTES` aswell the component element itself **must be defined as `eve-app`**.  You need to do this in a file name and path _`<workspace>`/templates/app-template.js_.
 
-`MYROUTES` is used in our app template to define where our routes will be placed. Greenwood uses [**lit-redux-router**](https://github.com/fernandopasik/lit-redux-router) and will replace the `MYROUTES` placeholder with all page routes automatically.
+First, we need our app template to use routes, by default greenwood uses [**lit-redux-router**](https://github.com/fernandopasik/lit-redux-router). To do this we define a `<routes></routes>` element in our app-template.js where our routes will be placed when compiled.
 
 Here is an example app-template:
 
 ```js
 import { html, LitElement } from 'lit-element';
 
-// Add the MY-ROUTES(without dash) predefined hook. This is where all your routes will be
+// Add the <routes>-</routes>(without the dash) predefined hook. This is where all your routes will be loaded.
+// You may also opt to define a custom 404 route here.
 // You must define the app-template with the element name eve-app
 class AppComponent extends LitElement {
   render() {
     return html\`
-      MYROUTES
+      <routes></routes>
       <lit-route><h1>404 Not found</h1></lit-route>
     \`;
   }

diff --git a/www/pages/getting-started/branding.md b/www/pages/getting-started/branding.md
@@ -52,8 +52,6 @@ Now we can use it in both our templates, like so:
 import { html, LitElement } from 'lit-element';
 import '../components/header'; // import our custom element
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   constructor() {
@@ -107,8 +105,6 @@ import { html, LitElement } from 'lit-element';
 import '../components/header';
 import '../styles/theme.css'; // add this line
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   ...

diff --git a/www/pages/getting-started/creating-content.md b/www/pages/getting-started/creating-content.md
@@ -49,7 +49,6 @@ Neat!  But naturally you're here to learn how to make your own site, and this is
 For this template, create a _page-template.js_ in a directory located at _src/templates/_ (make the _templates/_ directory if it doesn't exist) and include this code in it:
 ```javascript
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
 
@@ -77,7 +76,6 @@ We just made a template for our home page, but for our blog posts, we're going t
 Create a _blog-template.js_ in _src/templates/_ and include this code in it.
 ```javascript
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class BlogTemplate extends LitElement {
 

diff --git a/www/pages/getting-started/key-concepts.md b/www/pages/getting-started/key-concepts.md
@@ -50,7 +50,6 @@ So using the project structure we setup previously, adding your own custom page
 For reference, here's what the default page template included by Greenwood looks like (using `LitElement`).
 ```javascript
 import { html, LitElement } from 'lit-element';
-MDIMPORT;
 
 class PageTemplate extends LitElement {
   render() {

diff --git a/www/templates/app-template.js b/www/templates/app-template.js
@@ -16,7 +16,7 @@ class AppComponent extends LitElement {
       <div class='gwd-wrapper'>
         <eve-header></eve-header>
         <div class="gwd-content-outlet">
-          MYROUTES
+          <routes></routes>
         </div>
         <lit-route><h1>404 Not found</h1></lit-route>
         <eve-footer></eve-footer>

diff --git a/www/templates/home-template.js b/www/templates/home-template.js
@@ -8,8 +8,6 @@ import '@evergreen-wc/eve-container';
 import '../styles/theme.css';
 import homeCss from '../styles/home.css';
 
-MDIMPORT;
-
 class HomeTemplate extends LitElement {
 
   render() {

diff --git a/www/templates/page-template.js b/www/templates/page-template.js
@@ -5,8 +5,6 @@ import '../components/scroll/scroll';
 import pageCss from '../styles/page.css';
 import '../styles/theme.css';
 
-MDIMPORT;
-
 class PageTemplate extends LitElement {
 
   static get properties() {