basic components with HTML module imports

.circleci/config.yml

@@ -5,9 +5,8 @@
 version: 2
 jobs:
   build:
-    machine:
-      node:
-        version: 6.10.0
+    docker:
+      - image: thegreenhouse/nodejs-dev:0.1.0
 
     working_directory: ~/repo
 
@@ -22,9 +21,9 @@ jobs:
           - v1-dependencies-
 
       - run:
-          name: Install Yarn
-          command: npm install -g [email protected]
+          name: Install Dependencies
+          command: yarn install
 
       - run:
-          name: Execute the Build
-          command: bin/build.sh
+          name: Run the Build
+          command: yarn run build

.gitignore

@@ -1,3 +1,4 @@
 .idea/
 build/
-node_modules/
+node_modules/
+reports/

README.md

@@ -103,7 +103,7 @@ This project uses Webpack as the build tool, executed via npm scripts.  All avai
 section of _package.json_
 
 ### Development
-This will start up a webpack-dev-server, which watches for changes and 'redeploys' as needed.
+This will start up [webpack-dev-server](https://webpack.js.org/configuration/dev-server/), which watches for changes and 'redeploys' as needed.
 
 
 ```
@@ -126,14 +126,6 @@ production version of the application.
 $ yarn run build
 ```
 
-### Continuous Integration
-Jenkins runs three scripts together (_bin/build.sh_) that lints non TS files, runs unit tests, and builds the application
-```bash
-$ yarn run clean
-$ yarn run test
-$ yarn run build
-```
-
 ### Demo
 To serve a production build locally , like for a demo run:
 

package.json

@@ -15,18 +15,28 @@
   },
   "dependencies": {
     "@polymer/polymer": "^3.0.0-pre.1",
+    "bootstrap": "^4.0.0-alpha.6",
+    "moment": "^2.19.1",
     "webcomponentsjs": "^1.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
+    "css-loader": "^0.28.7",
     "eslint": "^4.6.1",
     "eslint-loader": "^1.9.0",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "favicons-webpack-plugin": "^0.0.7",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "http-server": "^0.10.0",
+    "node-sass": "^4.5.3",
+    "polymer-webpack-loader": "^2.0.0",
     "rimraf": "^2.6.1",
+    "sass": "^1.0.0-beta.2",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
     "webpack": "^3.5.6",
     "webpack-dev-server": "^2.7.1",
     "webpack-md5-hash": "^0.0.5",

src/components/bootstrap/bootstrap.html

@@ -0,0 +1,11 @@
+<section>
+  <tgh-header></tgh-header>
+</section>
+
+<section>
+  <tgh-home></tgh-home>
+</section>
+
+<section>
+  <tgh-footer></tgh-footer>
+</section>

src/components/bootstrap/bootstrap.js

@@ -0,0 +1,22 @@
+import { Element as PolymerElement } from '../../../node_modules/@polymer/polymer/polymer-element.js';
+
+import '../../components/footer/footer';
+import '../../components/header/header';
+import '../../views/home/home';
+import BootstrapTemplate from './bootstrap.html';
+
+class CustomElement extends PolymerElement {
+  constructor() {
+    super();
+  }
+
+  static get is() {
+    return 'tgh-bootstrap';
+  }
+
+  static get template() {
+    return BootstrapTemplate;
+  }
+}
+
+customElements.define(CustomElement.is, CustomElement);

src/components/bootstrap/bootstrap.scss

@@ -0,0 +1,19 @@
+@import '~bootstrap/scss/bootstrap';
+@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
+
+//variables
+$white: #efefef;
+$black: #020202;
+
+$primary: #6d0202;
+$bg-primary: #c2b08b;
+$bg-secondary: #ae996b;
+$bg-tertiary: #d3c6ae;
+
+$font-family-primary: 'Baloo Bhaina', cursive;
+$font-color-primary: $white;
+$font-color-secondary: #316291;
+
+#bootstrap::shadow {
+  font-family: $font-family-primary;
+}

src/components/footer/footer.html

@@ -0,0 +1,16 @@
+<header>
+
+  <footer class="col-xs-12">
+
+    <p class="copyright-text">&copy; {{ year }} - <a href="http://www.thegreenhouse.io">The Greenhouse</a></p>
+
+  </footer>
+
+</header>
+
+<style>
+  footer .copyright-text {
+    margin: 10px auto;
+    text-align: center;
+  }
+</style>

src/components/footer/footer.js

@@ -0,0 +1,19 @@
+import { Element as PolymerElement } from '../../../node_modules/@polymer/polymer/polymer-element.js';
+import FooterTemplate from './footer.html';
+
+class CustomElement extends PolymerElement {
+  constructor() {
+    super();
+    this.year = 2017;
+  }
+
+  static get is() {
+    return 'tgh-footer';
+  }
+
+  static get template() {
+    return FooterTemplate;
+  }
+}
+
+customElements.define(CustomElement.is, CustomElement);

src/components/header/header.html

@@ -0,0 +1,33 @@
+<header class="col-xs-12">
+
+  <a href="/">
+    <h2 class="hidden-md-up header-text ">The Greenhouse</h2>
+    <div class="hidden-sm-down header-banner"></div>
+    <p class="io-text">.io</p>
+  </a>
+
+  <style>
+    header {
+      margin-bottom: 20px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-text {
+      margin: 0 auto;
+    }
+
+    .header-banner {
+      background: url('./images/banner.gif');
+      background-repeat: no-repeat;
+      background-position: center;
+      height: 250px;
+    }
+
+    .io-text {
+      width: 50px;
+      margin: 0 auto;
+    }
+  </style>
+
+</header>

src/components/header/header.js

@@ -0,0 +1,18 @@
+import { Element as PolymerElement } from '../../../node_modules/@polymer/polymer/polymer-element.js';
+import HeaderTemplate from './header.html';
+
+class CustomElement extends PolymerElement {
+  constructor() {
+    super();
+  }
+
+  static get is() {
+    return 'tgh-header';
+  }
+
+  static get template() {
+    return HeaderTemplate;
+  }
+}
+
+customElements.define(CustomElement.is, CustomElement);

src/components/posts-list/posts-list.html

@@ -0,0 +1,30 @@
+<h2>Latest Posts</h2>
+
+<template is="dom-repeat" items="{{posts}}">
+
+  <template is="dom-if" if="{{shouldShowPost(index)}}" class="post">
+
+    <h4 class="post-header">{{item.title}}
+      <span class="post-time">{{formatPostCreatedTime(item.createdTime)}}</span>
+    </h4>
+
+    <!-- inner-h-t-m-l is a hack it seems -->
+    <details inner-h-t-m-l="{{item.summary}}" class="post-summary"></details>
+
+    <!--<router-link :to="{ path: `/posts/${post.id}`}">Click for full details</router-link>-->
+
+    <hr/>
+
+  </template>
+</template>
+
+<style>
+  .post .post-header {
+    text-decoration: underline;
+  }
+
+  .post .post-time {
+    font-size: .7em;
+    text-decoration: none;
+  }
+</style>

src/components/posts-list/posts-list.js

@@ -0,0 +1,31 @@
+import { Element as PolymerElement } from '../../../node_modules/@polymer/polymer/polymer-element.js';
+import moment from 'moment';
+import PostsListTemplate from './posts-list.html';
+import PostsService from '../../services/posts-service';
+
+class CustomElement extends PolymerElement {
+  constructor() {
+    super();
+
+    this.maxPosts = 2;
+    this.posts = new PostsService().getPosts();
+  }
+
+  formatPostCreatedTime(createdTime) {
+    return moment.unix(createdTime).format('MMMM Do YYYY, h:mm:ss a');
+  }
+
+  shouldShowPost(index) {
+    return index < this.maxPosts;
+  }
+
+  static get is() {
+    return 'tgh-posts-list';
+  }
+
+  static get template() {
+    return PostsListTemplate;
+  }
+}
+
+customElements.define(CustomElement.is, CustomElement);

src/index.html

@@ -15,7 +15,7 @@
 
   <body>
 
-    <custom-element>Loading...</custom-element>
+    <tgh-bootstrap></tgh-bootstrap>
 
   </body>
 

src/index.js

@@ -1,16 +1 @@
-import { Element as PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';
-
-// Define the class for a new element called custom-element
-class CustomElement extends PolymerElement {
-  static get is() {
-    return 'custom-element';
-  }
-
-  constructor() {
-    super();
-    this.textContent = 'I\'m a custom-element.';
-  }
-}
-
-// Register the new element with the browser
-customElements.define(CustomElement.is, CustomElement);
+import './components/bootstrap/bootstrap';

src/services/posts-service.js

@@ -0,0 +1,36 @@
+export default class PostsService {
+  constructor() {
+    this.posts = [{
+      id: 1,
+      title: 'Post 1 Title',
+      summary: '<p>Analog is playing at <a href="https://www.facebook.com/tankedatthetank" target="">The Tankard</a> this Saturday, with opening act Sean Daley.  Please come join as we prevew some of the new songs on the album.</p>', // eslint-disable-line max-len
+      createdTime: 1472091258
+    }, {
+      id: 2,
+      title: 'Post 2 Title',
+      summary: 'Post 2 Summary',
+      createdTime: 1471989627
+    }, {
+      id: 3,
+      title: 'Post 3 Title',
+      summary: 'Post 3 Summary',
+      createdTime: 1471959311
+    }];
+  }
+
+  getPosts(postId) {
+
+    if (postId) {
+
+      return this.posts.filter((post) => {
+        if (post.id === postId) {
+          return post;
+        }
+      })[0];
+
+    }
+
+    return this.posts;
+  }
+
+}

src/vendor.js

@@ -1,2 +1,3 @@
+import 'moment';
 import 'webcomponentsjs';
-import '../node_modules/@polymer/polymer/polymer-element.js';
+import '../node_modules/@polymer/polymer/polymer';