Blog

Gulpfile.js

@@ -3,18 +3,29 @@ var sync    = require('run-sequence');
 var browser = require('browser-sync');
 var webpack = require('webpack-stream');
 var todo    = require('gulp-todoist');
+var path    = require('path');
+var yargs   = require('yargs').argv;
+var tpl     = require('gulp-template');
+var rename  = require('gulp-rename');
 
 /*
 map of paths for using with the tasks below
  */
 var paths = {
   entry: 'client/app/app.js',
-  app: ['client/app/**/*.{js,styl,html}', 'client/index.html'],
+  app: ['client/app/**/*.{js,styl,html}', 'client/styles/**/*.styl'],
   js: 'client/app/**/*!(.spec.js).js',
-  styl: 'client/app/**/*.styl',
+  styl: ['client/app/**/*.styl', 'client/style/**/*.styl'],
   toCopy: ['client/index.html'],
   html: ['client/index.html', 'client/app/**/*.html'],
-  dest: 'dist'
+  dest: 'dist',
+  blankTemplates: 'templates/component/*.**'
+};
+
+// helper funciton
+var resolveToComponents = function(glob){
+  glob = glob || '';
+  return path.join('client', 'app/components', glob); // app/components/{glob}
 };
 
 gulp.task('todo', function() {
@@ -23,13 +34,9 @@ gulp.task('todo', function() {
 });
 
 gulp.task('build', ['todo'], function() {
-  //TODO
-  /*
-  fill this task out to take in entry file
-  and build using the webpack plugin.
-  the plugin takes the webpack.config as an arg.
-  be sure to stream the result to the destination path
-   */
+  return gulp.src(paths.entry)
+    .pipe(webpack(require('./webpack.config')))
+    .pipe(gulp.dest(paths.dest));
 });
 
 gulp.task('serve', function() {
@@ -47,7 +54,7 @@ gulp.task('serve', function() {
 simple task to copy over needed files to dist
  */
 gulp.task('copy', function() {
-  return gulp.src(paths.toCopy, { base: '.' })
+  return gulp.src(paths.toCopy, { base: 'client' })
     .pipe(gulp.dest(paths.dest));
 });
 
@@ -56,9 +63,30 @@ task to watch files for changes and call build and copy tasks
  */
 gulp.task('watch', function() {
   gulp.watch(paths.app, ['build', browser.reload]);
-  gulp.watch(paths.toCopy, ['copy']);
+  gulp.watch(paths.toCopy, ['copy', browser.reload]);
+});
+
+gulp.task('component', function(){
+  var cap = function(val){
+    return val.charAt(0).toUpperCase() + val.slice(1);
+  };
+
+  var name = yargs.name;
+  var parentPath = yargs.parent || '';
+  var destPath = path.join(resolveToComponents(), parentPath, name);
+
+  return gulp.src(paths.blankTemplates)
+    .pipe(tpl({
+      name: name,
+      upCaseName: cap(name)
+    }))
+    .pipe(rename(function(path){
+      path.basename = path.basename.replace('component', name);
+    }))
+    .pipe(gulp.dest(destPath));
 });
 
+
 gulp.task('default', function(done) {
   sync('build', 'copy', 'serve', 'watch', done)
 });

client/app/app.directive.js

@@ -0,0 +1,11 @@
+import './app.styl';
+import template from './app.html';
+
+export const appDirective = ()=> {
+  return {
+    template,
+    restrict: 'E',
+    scope: {},
+    replace: true
+  };
+};

client/app/app.html

@@ -0,0 +1,20 @@
+<div id="app">
+  <header>
+    <nav>
+      <div class="logo">
+        <span ui-sref="home">
+          <a ui-sref="home">ngBlog</a>
+        </span>
+      </div>
+      <div class="links">
+        <a ui-sref="blog">blog</a>
+        <a ui-sref="admin">admin</a>
+        <a ui-sref="auth">signin</a>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <div ui-view></div>
+  </main>
+  <footer></footer>
+</div>

client/app/app.js

@@ -1,6 +1,45 @@
-const showMessage = ()=> {
-  alert('it works!!!');
-}
-
-showMessage();
+// we don't need to use a variable
+// or the from keyword when importing a css/styl file
+// thanks the the styles loader it gets added as a
+// <style> tag in the head by default but can be changed
+import 'normalize.css';
+import {appDirective} from './app.directive';
+// the angular libs are just common js
+// and therefore we can assume they were
+// exported using the default keyword in ES2015
+// so we can import each module
+// with any name we see fit.
+// Note that the actual value are just strings except angular itself
+// because that's how angular decided to export
+// their auxillary modules
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+import ngAnimate from 'angular-animate';
+// because we exported a named variable
+// without using default keyword
+// we must import it with the brackets
+import {home} from './components/home/home';
+import {blog} from './components/blog/blog';
+import {common} from './components/common/common';
+import {shared} from './shared/shared';
+import {blogPost} from './components/blogPost/blogPost';
+import {admin} from './components/admin/admin';
+import {auth} from './components/auth/auth';
 
+angular.module('app', [
+  uiRouter,
+  ngAnimate,
+  // home is the module, the angular module
+  // because that's what we exported in home.js
+  // all angular modules have a name
+  // property who's value is the name you set the
+  // module to be
+  home.name,
+  blog.name,
+  common.name,
+  shared.name,
+  blogPost.name,
+  admin.name,
+  auth.name
+])
+.directive('app', appDirective);

client/app/app.styl

@@ -0,0 +1,119 @@
+@import '../styles'
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
+
+html
+body
+  height 100%
+
+body
+  font-family 'Roboto', sans-serif
+  background-color bg-color
+  *
+    box-sizing border-box
+a
+  color white
+  text-decoration none
+  &:visited
+    color white
+  &:hover
+  &:active
+    text-decoration none
+
+#app
+  header nav
+    height navbar-height
+    background-color primary-color
+    makeShadow(2)
+    z-index max-z
+    position fixed
+    min-width 100%
+    padding 15px
+    .logo
+      span(1/8)
+      color white
+      font-size 1.8rem
+      cursor pointer
+    .links
+      span(2/8, 5/8, 2)
+      *
+        font-size 1.3rem
+        margin-left 10px
+  main
+    padding-top navbar-height
+
+.button
+  outline none
+  border none
+  border-radius 2px
+  background-color primary-color
+  color white
+  text-transform uppercase
+  text-align center
+  min-width 88px
+  min-height 36px
+  overflow hidden
+  user-select none
+  vertical-align middle
+  position relative
+  padding 0px 6px
+  white-space nowrap
+  cursor pointer
+  font-weight 500
+  user-select none
+  font-size 14px
+  line-height 30px
+  &[disabled]
+  &.disabled
+  :disabled
+    background-color white !important//shade(primary-color, 20%)
+    color text-disabled-color
+    box-shadow none !important
+  &.accent
+    background-color accent-color
+  &.fab
+    width 56px
+    min-width 0px
+    background-clip padding-box
+    height 56px
+    line-height 56px
+    z-index 20
+    border-radius 50%
+
+  &:active
+  &:focus
+    border none
+    outline none
+
+  &.raised
+  &.fab
+    makeShadow(1)
+    transition all .3s ease
+
+    &:active
+      makeShadow(3)
+main
+  position relative
+  min-height 400px
+
+  [ui-view].ng-enter
+    opacity 0
+    transform scale3d(0.5,0.5,0.5)
+
+  [ui-view].ng-enter-active
+    opacity 1
+    transform scale3d(1,1,1)
+
+  [ui-view].ng-leave
+    opacity 1
+    transform translate3d(0,0,0)
+
+  [ui-view].ng-leave-active
+    opacity 0
+    transform translate3d(100px, 0, 0)
+
+  [ui-view].ng-enter
+  [ui-view].ng-leave
+    position absolute
+    left 0
+    right 0
+    transition all .5s ease-in-out

client/app/components/about/about.controller.js

@@ -0,0 +1,10 @@
+class AboutController {
+  constructor() {
+    this.greeting = 'AboutController!';
+  }
+
+}
+
+AboutController.$inject = [];
+
+export {AboutController};

client/app/components/about/about.directive.js

@@ -0,0 +1,14 @@
+import './about.styl';
+import {AboutController as controller} from './about.controller';
+import template from './about.html';
+
+export const aboutDirective = ()=> {
+  return {
+    controller,
+    template,
+    controllerAs: 'vm',
+    scope: {},
+    replace: true,
+    restrict: 'E'
+  }
+};

client/app/components/about/about.html

@@ -0,0 +1,3 @@
+<section class="about">
+  <h1>Hey from {{ vm.greeting }}</h1>
+</section>

client/app/components/about/about.js

@@ -0,0 +1,13 @@
+import {aboutDirective} from './about.directive';
+import angular from 'angular';
+import uiRouter from 'angular-ui-router';
+
+
+export const about = angular.module('about', [uiRouter])
+  .config(($stateProvider) => {
+    $stateProvider.state('about', {
+      url: '/about',
+      template: '<about></about>'
+    })
+  })
+  .directive('about', aboutDirective);