Website/issue 98 getting started guide (#139)

* init WIP getting started skeleton and introduction * project setup * key concepts * creating content WIP * syntax highlighting * quick start and proofreading * components and styles * build and deploy and next steps * getting started full test case * proof reading and grammar checks * grammar * fix specs * sub nav items * eslint for www * test for styles in getting started case * final grammar and typos
ProjectEvergreen · Aug 8, 2019 · 5e5a048 · 5e5a048
1 parent ca44424
commit 5e5a048
Show file tree

Hide file tree

Showing 25 changed files with 955 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "clean": "rimraf ./**/.greenwood/** && rimraf ./**/public/** && rimraf ./coverage",
-    "lint": "eslint \"./packages/**/**/*.js\" \"./test/**/**/*.js\"",
+    "lint": "eslint \"./packages/**/**/*.js\" \"./test/**/**/*.js\" \"./www/**/**/*.js\"",
     "build": "yarn clean && node ./packages/cli/index.js build",
     "serve": "yarn build && cd ./public && ws",
     "develop": "yarn clean && node ./packages/cli/index.js develop",

diff --git a/packages/cli/templates/index.md b/packages/cli/templates/index.md
@@ -1,6 +1,7 @@
 ---
 label: 'index'
 ---
+
 ### Greenwood
 
 This is the home page built by Greenwood. Make your own pages in src/pages/index.js!
diff --git a/...s/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js b/...s/build.default.workspace-getting-started/build.default.workspace-getting-started.spec.js
@@ -0,0 +1,159 @@
+/*
+ * Use Case
+ * Run Greenwood build command and reproduce building the Getting Started docs companion repo
+ * https://github.com/thescientist13/greenwood-getting-started
+ *
+ * User Result
+ * Should generate a Greenwood build that generally reproduces the Getting Started guide
+ *
+ * User Command
+ * greenwood build
+ *
+ * Default Config
+ *
+ * Custom Workspace
+ * src/
+ *   assets/
+ *     greenwood-logo.png
+ *   components/
+ *     footer.js
+ *     header.js
+ *   pages/
+ *     first-post.md
+ *     second-post.md
+ *   styles/
+ *     theme.css
+ *   templates/
+ *     app-template.js
+ *     blog-template.js
+ */
+const expect = require('chai').expect;
+const fs = require('fs');
+const glob = require('glob-promise');
+const { JSDOM } = require('jsdom');
+const path = require('path');
+const TestBed = require('../../test-bed');
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Custom Workspace based on the Getting Started guide and repo';
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    this.context = setup.setupTestBed(__dirname);
+  });
+
+  describe(LABEL, function() {
+    before(async function() {
+      await setup.runGreenwoodCommand('build');
+    });
+
+    describe('Folder Structure and Home Page', function() {
+      beforeEach(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+      });
+
+      it('should create a public directory', function() {
+        expect(fs.existsSync(this.context.publicDir)).to.be.true;
+      });
+
+      it('should create a new assets directory', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, 'assets'))).to.be.true;
+      });
+
+      it('should contain files from the asset directory', async function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, 'assets', './greenwood-logo.png'))).to.be.true;
+      });
+
+      it('should output an index.html file (home page)', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, './index.html'))).to.be.true;
+      });
+
+      it('should output a single 404.html file (not found page)', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, './404.html'))).to.be.true;
+      });
+
+      it('should output one JS bundle file', async function() {
+        expect(await glob.promise(path.join(this.context.publicDir, './index.*.bundle.js'))).to.have.lengthOf(1);
+      });
+
+      it('should have a <header> tag in the <body>', function() {
+        const header = dom.window.document.querySelectorAll('body header');
+
+        expect(header.length).to.be.equal(1);
+      });
+
+      it('should have a <footer> tag in the <body>', function() {
+        const footer = dom.window.document.querySelectorAll('body footer');
+
+        expect(footer.length).to.be.equal(1);
+      });
+
+      it('should have the expected font import', async function() {
+        const styles = '@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);';
+        const styleTags = dom.window.document.querySelectorAll('head style');
+        let importCount = 0;
+
+        styleTags.forEach((tag) => {
+          if (tag.textContent.indexOf(styles) >= 0) {
+            importCount += 1;
+          }
+        });
+
+        expect(importCount).to.equal(1);
+      });
+    });
+
+    describe('Blog Posts', function() {
+      it('should create a blog directory', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, 'blog'))).to.be.true;
+      });
+
+      it('should output an index.html file (home page)', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, 'blog', 'first-post', './index.html'))).to.be.true;
+      });
+
+      it('should output a single 404.html file (not found page)', function() {
+        expect(fs.existsSync(path.join(this.context.publicDir, 'blog', 'second-post', './index.html'))).to.be.true;
+      });
+
+      it('should output one JS bundle file', async function() {
+        expect(await glob.promise(path.join(this.context.publicDir, './index.*.bundle.js'))).to.have.lengthOf(1);
+      });
+
+      it('should have a <header> tag in the <body> in first-post.md', async function() {
+        const dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'blog', 'first-post', 'index.html'));
+        const header = dom.window.document.querySelectorAll('body header');
+
+        expect(header.length).to.be.equal(1);
+      });
+
+      it('should have a <footer> tag in the <body>', async function() {
+        const dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'blog', 'first-post', 'index.html'));
+        const footer = dom.window.document.querySelectorAll('body footer');
+
+        expect(footer.length).to.be.equal(1);
+      });
+
+      it('should have the expected font import', async function() {
+        const styles = '@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);';
+        const styleTags = dom.window.document.querySelectorAll('head style');
+        let importCount = 0;
+
+        styleTags.forEach((tag) => {
+          if (tag.textContent.indexOf(styles) >= 0) {
+            importCount += 1;
+          }
+        });
+
+        expect(importCount).to.equal(1);
+      });
+    });
+
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});
diff --git a/...cli/cases/build.default.workspace-getting-started/src/assets/greenwood-logo.png b/...cli/cases/build.default.workspace-getting-started/src/assets/greenwood-logo.png
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/components/footer.js b/test/cli/cases/build.default.workspace-getting-started/src/components/footer.js
@@ -0,0 +1,24 @@
+class FooterComponent extends HTMLElement {
+  constructor() {
+    super();
+
+    // create a Shadow DOM
+    this.root = this.attachShadow({ mode: 'open' });
+  }
+
+  // run some code when the component is ready
+  connectedCallback() {
+    this.root.innerHTML = this.getTemplate();
+  }
+
+  // create templates that interpolate variables and HTML!
+  getTemplate() {
+    return `
+      <style>
+      </style>
+      <footer>This is the footer component.</footer>
+    `;
+  }
+}
+
+customElements.define('app-footer', FooterComponent);
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/components/header.js b/test/cli/cases/build.default.workspace-getting-started/src/components/header.js
@@ -0,0 +1,24 @@
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+
+    // create a Shadow DOM
+    this.root = this.attachShadow({ mode: 'open' });
+  }
+
+  // run some code when the component is ready
+  connectedCallback() {
+    this.root.innerHTML = this.getTemplate();
+  }
+
+  // create templates that interpolate variables and HTML!
+  getTemplate() {
+    return `
+      <style>
+      </style>
+      <header>This is the header component.</header>
+    `;
+  }
+}
+
+customElements.define('app-header', HeaderComponent);
diff --git a/.../cli/cases/build.default.workspace-getting-started/src/pages/blog/first-post.md b/.../cli/cases/build.default.workspace-getting-started/src/pages/blog/first-post.md
@@ -0,0 +1,8 @@
+---
+template: 'blog'
+---
+
+## My First Blog Post
+Lorem Ipsum
+
+[back](/)
diff --git a/...cli/cases/build.default.workspace-getting-started/src/pages/blog/second-post.md b/...cli/cases/build.default.workspace-getting-started/src/pages/blog/second-post.md
@@ -0,0 +1,8 @@
+---
+template: 'blog'
+---
+
+## My Second Blog Post
+Lorem Ipsum
+
+[back](/)
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/pages/index.md b/test/cli/cases/build.default.workspace-getting-started/src/pages/index.md
@@ -0,0 +1,7 @@
+## Home Page
+
+This is the Getting Started home page!
+
+### My Posts
+- [my-second-post](/blog/second-post/)
+- [my-first-post](/blog/first-post/)
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/styles/theme.css b/test/cli/cases/build.default.workspace-getting-started/src/styles/theme.css
@@ -0,0 +1,7 @@
+@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Source Sans Pro', sans-serif;
+}
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/templates/blog-template.js b/test/cli/cases/build.default.workspace-getting-started/src/templates/blog-template.js
@@ -0,0 +1,32 @@
+import { html, LitElement } from 'lit-element';
+import '../components/footer';
+import '../components/header';
+
+MDIMPORT;
+METAIMPORT;
+METADATA;
+
+class BlogTemplate extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <style>
+
+      </style>
+      
+      METAELEMENT
+
+      <div class='container'>
+        <app-header></app-header>
+        <entry></entry>
+        <app-footer></app-footer>
+      </div>
+    `;
+  }
+}
+
+customElements.define('page-template', BlogTemplate);
diff --git a/test/cli/cases/build.default.workspace-getting-started/src/templates/page-template.js b/test/cli/cases/build.default.workspace-getting-started/src/templates/page-template.js
@@ -0,0 +1,34 @@
+import { html, LitElement } from 'lit-element';
+import '../components/footer';
+import '../components/header';
+import '../styles/theme.css';
+
+MDIMPORT;
+
+class PageTemplate extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      
+      <style>
+        section {
+          margin: 0 auto;
+          width: 70%;
+        }
+      </style>
+    
+
+      <div>
+        <app-header></app-header>
+        <entry></entry>
+        <app-footer></app-footer>
+      </div>
+    `;
+  }
+}
+
+customElements.define('page-template', PageTemplate);
diff --git a/www/assets/greenwood-netlify-config.png b/www/assets/greenwood-netlify-config.png