Merge branch 'master' of github.com:leonidas/gulp-project-template

src/components/repository/__tests__/renderer.js

@@ -0,0 +1,37 @@
+/* globals beforeEach, describe, it */
+import {render} from '../';
+import {expect} from 'chai';
+
+const REPO_DATA = {
+  html_url: 'http://example.com',
+  full_name: 'Gulp project template',
+  description: 'Hello world!'
+};
+
+const COMMITS = [{
+  message: 'initial commit',
+  committer: {
+    name: 'Riku'
+  }
+}, {
+  message: 'final commit',
+  committer: {
+    name: 'L.H.Ahne'
+  }
+}];
+
+describe('View renderer', function() {
+  beforeEach(function() {
+    document.body.innerHTML = render(REPO_DATA, COMMITS);
+  });
+
+  it('should render a title with the string "Hello world!"', function() {
+    const $title = document.getElementsByTagName('h1')[0];
+    expect($title.innerHTML).to.equal('Hello world!');
+  });
+
+  it('should render 2 list items', function() {
+    const $listItems = document.querySelectorAll('li');
+    expect($listItems.length).to.equal(2);
+  });
+});

src/components/repository/index.js

@@ -0,0 +1,28 @@
+
+export function render(repository, commits) {
+  const $commits = commits.map(commit => {
+    return `
+      <li class="commit">
+        <span>
+          ${commit.message.replace(/\n/g, '<br />')}
+        <span>
+        <br /><br />
+        <small>
+          ${commit.committer.name}
+        </small>
+      </li>`;
+  });
+
+  return `
+    <div class="repository">
+      <h1 class="repository__title">${repository.description}</h1>
+      <h2 class="repository__description">
+        <a href="${repository.html_url}">${repository.full_name}</a>
+      </h2>
+      <ul class="repository__commits">
+        ${$commits.join('')}
+      </ul>
+    </div>
+  `;
+}
+

src/components/repository/index.styl

@@ -0,0 +1,17 @@
+.repository__title
+  margin-bottom 0
+
+.repository__description
+  margin-top 0
+
+.repository__commits
+  margin-top 2em
+
+.commit
+  margin 1em 0
+  padding 1em 0
+  border-bottom 1px solid #eee
+
+  small
+    color #777
+

src/index.jade

@@ -0,0 +1,10 @@
+doctype html
+html
+  head
+    title Gulp template
+    // inject:css
+    // endinject
+  body
+    h1 Hello world!
+    // inject:js
+    // endinject

src/main.js

@@ -0,0 +1,8 @@
+import {getCommits, getRepo} from './services/github';
+import {render} from './components/repository';
+
+Promise.all([getRepo(), getCommits()])
+.then(([repository, commits]) => {
+  document.body.innerHTML = render(repository, commits);
+});
+

src/services/github.js

@@ -0,0 +1,13 @@
+const REPO_URL = 'https://api.github.com/repos/leonidas/gulp-project-template';
+
+export function getRepo() {
+  return fetch(REPO_URL).then(res => res.json());
+}
+
+export function getCommits() {
+  return fetch(`${REPO_URL}/commits`)
+    .then(res => res.json())
+    .then(commits => {
+      return commits.map(({commit}) => commit);
+    });
+}

src/style.styl

@@ -0,0 +1,8 @@
+body, html
+  margin 0
+  padding 1em
+  font 14px/1.4 'Helvetica Neue', Helvetica, Arial
+  color #333
+
+@import 'components/repository'
+// @import 'bootstrap/dist/css/bootstrap.css'