Merge pull request #22 from rikukissa/component-structure

Component-based directory structure

gulpfile.js

@@ -26,20 +26,20 @@ var production = process.env.NODE_ENV === 'production';
 var config = {
   destination: './public',
   scripts: {
-    source: './src/js/main.js',
+    source: './src/main.js',
     destination: './public/js/',
     extensions: ['.jsx'],
     filename: 'bundle.js'
   },
   templates: {
-    source: './src/jade/*.jade',
-    watch: './src/jade/*.jade',
+    source: './src/*.jade',
+    watch: './src/*.jade',
     destination: './public/',
     revision: './public/**/*.html'
   },
   styles: {
-    source: './src/stylus/style.styl',
-    watch: './src/stylus/*.styl',
+    source: './src/style.styl',
+    watch: './src/**/*.styl',
     destination: './public/css/'
   },
   assets: {

src/components/repository/__tests__/renderer.js

@@ -1,5 +1,5 @@
 /* globals beforeEach, describe, it */
-import {render} from '../renderer';
+import {render} from '../';
 import {expect} from 'chai';
 
 const REPO_DATA = {

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

@@ -1,23 +1,17 @@
-body, html
-  margin 0
-  padding 1em
-  font 14px/1.4 'Helvetica Neue', Helvetica, Arial
-  color #333
+.repository__title
+  margin-bottom 0
 
-li
+.repository__description
+  margin-top 0
+
+.repository__commits
+  margin-top 2em
+
+.commit
   margin 1em 0
   padding 1em 0
   border-bottom 1px solid #eee
 
-h1
-  margin-bottom 0
-
-h2
-  margin-top 0
-
-ul
-  margin-top 2em
-
-li
   small
     color #777
+

src/js/utils/renderer.js

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

src/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {getCommits, getRepo} from './services/github';
-import {render} from './utils/renderer';
+import {render} from './components/repository';
 
 Promise.all([getRepo(), getCommits()])
 .then(([repository, commits]) => {

src/style.styl

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