Molly and Zach Week 6 MEAN Stack 1: FINAL

.gitignore

@@ -1,27 +1,5 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
+node_modules/
+.DS_Store
+/public/js/*
+/public/styles/app.css
+/public/app.css

CRUDGulpfile.js

@@ -0,0 +1,29 @@
+var gulp = require("gulp");
+var server = require("gulp-express");
+var sass = require("gulp-sass");
+var webpack = require('webpack-stream');
+
+gulp.task("build:css", function() {
+  gulp.src("./src/sass/**/*.scss")
+    .pipe(sass().on("error", sass.logError))
+    .pipe(gulp.dest("./public/css"));
+});
+
+gulp.task("webpack", function(callback) {
+  return gulp.src("src/js/index.js")
+  .pipe(webpack({
+    output: {
+      filename: "packed.js"
+    }
+  }))
+  .pipe(gulp.dest('public/js/'));
+});
+
+gulp.task("serve", function() {
+  server.run([server.js]);
+  gulp.watch("src/sass/**/*.scss", ["build:css"]);
+  gulp.watch("src/js/**/*.js", ["webpack"]);
+  gulp.watch("server.js", [server.run]);
+});
+
+gulp.task("default", ["build:css", "serve"]);

Gulpfile.js

@@ -0,0 +1,2 @@
+var requireDir = require('require-dir');
+requireDir('./gulp/tasks', { recurse: true });

Procfile

@@ -0,0 +1 @@
+web: node server.js

README.md

@@ -0,0 +1,15 @@
+#C.R.U.D. Blog
+### Molly Kent & Zach Gordon
+
+This assignment was to create a simple CRUD application that will allow a user to create, read, update, and delete blog posts from the application. There are two different views - one a list of available blog posts, the other a detail view of the blog post. We did not have to worry about authentication or user management for this assignment.
+
+The requirements were: 
+1. Semantically correct HTML 
+2. Images will be cropped and compressed correctly 
+3. Flexible CSS measurements
+4. Clean, maintainable JavaScript
+5. After checking out the repository, a user must be able to run npm install and gulp serve in order to access the application locally
+6. Plugins are allowed, but must be described and justified
+7. No jQuery
+
+We modeled our code after Mike's ng-soccer app, refactored to handle blog posts.

gulp/config.js

@@ -0,0 +1,30 @@
+var dest = './public';
+var src = './src';
+
+module.exports = {
+  javascript: {
+    src: src + '/app/**/*.js',
+    dest: dest + '/js/',
+    entryPoint: src + '/webpack-entry.js',
+    packedFile: 'packed.js'
+  },
+  sass: {
+    src: src + '/styles/**/*.{sass,scss}',
+    dest: dest + '/styles/',
+    settings: {
+      indentedSyntax: true,
+    }
+  },
+  html: {
+    src: src + "/app/**/*.html",
+    dest: dest + "/views/",
+  },
+  server: {
+    serverFile: './server.js'
+  },
+  production: {
+    cssSrc: dest + '/styles/*.css',
+    jsSrc: dest + '/*.js',
+    dest: dest
+  }
+};

gulp/tasks/html.js

@@ -0,0 +1,7 @@
+var gulp = require("gulp");
+var config = require('../config').html;
+
+gulp.task('html', function() {
+  return gulp.src(config.src)
+  .pipe(gulp.dest(config.dest));
+});

gulp/tasks/minifyCSS.js

@@ -0,0 +1,11 @@
+var gulp = require('gulp');
+var config = require('../config').production;
+var minifyCSS = require('gulp-minify-css');
+var size = require('gulp-filesize');
+
+gulp.task('minifyCSS', ['sass'], function() {
+  return gulp.src(config.cssSrc)
+    .pipe(minifyCSS({ keepBreaks: true }))
+    .pipe(gulp.dest(config.dest))
+    .pipe(size());
+})

gulp/tasks/production.js

@@ -0,0 +1,4 @@
+var gulp = require('gulp');
+gulp.task('production', function() {
+  gulp.start(['minifyCSS', 'uglifyJs'])
+});

gulp/tasks/sass.js

@@ -0,0 +1,16 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var handleErrors = require('../util/handleErrors');
+var autoprefixer = require('gulp-autoprefixer');
+var config = require('../config').sass;
+
+gulp.task('sass', function() {
+  return gulp.src(config.src)
+    .pipe(sourcemaps.init())
+    .pipe(sass(config.settings))
+    .on('error', handleErrors)
+    .pipe(sourcemaps.write())
+    .pipe(autoprefixer({ browsers: ['last 2 version'] }))
+    .pipe(gulp.dest(config.dest));
+});

gulp/tasks/serve.js

@@ -0,0 +1,2 @@
+var gulp = require('gulp');
+gulp.task('serve', ['sass', 'html', 'webpack', 'watch', 'server']);

gulp/tasks/server.js

@@ -0,0 +1,8 @@
+var gulp = require('gulp');
+var config = require('../config').server;
+var server = require("gulp-express");
+
+gulp.task('server', ['sass', 'webpack'], function() {
+  server.run([config.serverFile]);
+  gulp.watch([config.serverFile], [server.run]);
+});

gulp/tasks/uglifyJs.js

@@ -0,0 +1,11 @@
+var gulp    = require('gulp');
+var config  = require('../config').production;
+var size    = require('gulp-filesize');
+var uglify = require('gulp-uglify');
+
+gulp.task('uglifyJs', ['webpack'], function() {
+  return gulp.src(config.jsSrc)
+    .pipe(uglify())
+    .pipe(gulp.dest(config.dest))
+    .pipe(size());
+});

gulp/tasks/watch.js

@@ -0,0 +1,7 @@
+var gulp     = require('gulp');
+var config   = require('../config');
+
+gulp.task('watch', function() {
+  gulp.watch(config.javascript.src, ['webpack']);
+  gulp.watch(config.sass.src,   ['sass']);
+});

gulp/tasks/webpack.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var config = require('../config').javascript;
+var webpack = require('webpack-stream');
+
+gulp.task('webpack', function(callback) {
+  return gulp.src(config.entryPoint)
+  .pipe(webpack({
+    output: {
+      filename: config.packedFile
+    }
+  }))
+  .pipe(gulp.dest(config.dest));
+});

gulp/util/handleErrors.js

@@ -0,0 +1,15 @@
+var notify = require("gulp-notify");
+
+module.exports = function() {
+
+  var args = Array.prototype.slice.call(arguments);
+
+  // Send error to notification center with gulp-notify
+  notify.onError({
+    title: "Compile Error",
+    message: "<%= error %>"
+  }).apply(this, args);
+
+  // Keep gulp from hanging on this task
+  this.emit('end');
+};

models/post.js

@@ -0,0 +1,14 @@
+// Load required packages
+var mongoose = require("mongoose");
+
+// Define our teams schema
+var PostSchema = new mongoose.Schema({
+  title: String,
+  content: String,
+  author: String,
+  date: Date,
+  comments: Number
+});
+
+// Export the Mongoose model
+module.exports = mongoose.model("Post", PostSchema);

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "mean-stack-1",
+  "version": "0.1.0",
+  "description": "Simple CRUD app to demonstrate the MEAN stack",
+  "main": "Gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mollyfish/mean-stack-1.git"
+  },
+  "author": [
+    "Molly Kent <kent.molly@gmail.com>",
+    "Zach Gordon <zachkgordon@gmail.com>"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mollyfish/mean-stack-1/issues"
+  },
+  "homepage": "https://github.com/mollyfish/mean-stack-1#readme",
+  "dependencies": {
+    "angular": "^1.4.7",
+    "angular-route": "^1.4.7",
+    "body-parser": "^1.14.1",
+    "connect-livereload": "^0.5.3",
+    "express": "^4.13.3",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^2.1.0",
+    "gulp-changed": "^1.1.1",
+    "gulp-express": "^0.3.5",
+    "gulp-filesize": "0.0.6",
+    "gulp-jshint": "^1.11.2",
+    "gulp-livereload": "^3.8.1",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-notify": "^2.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.0.4",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.4.1",
+    "gulp-util": "^3.0.4",
+    "jshint-stylish": "^2.0.1",
+    "lodash": "^3.3.1",
+    "merge-stream": "^0.1.7",
+    "mongoose": "^4.1.10",
+    "pretty-hrtime": "~1.0.0",
+    "require-dir": "^0.3.0",
+    "vinyl-source-stream": "~1.0.0",
+    "webpack": "^1.12.2",
+    "webpack-stream": "^2.1.1"
+  }
+}

public/404.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>404 - Page Not Found</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        <h1>404: Page Not Found</h1>
+    </body>
+</html>

public/buttons.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Buttons</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+    <a class="btn btn__text btn--dark">Read More</a>
+    <a class="btn btn__text btn--light">Prev</a>
+    <a class="btn btn__text btn--theme">Contact Now</a>
+    <a class="btn btn__text btn--theme">Learn More</a>
+    <a class="btn btn__number btn--light">1</a>
+    <script src="js/index.js"></script>
+  </body>
+</html>

public/connection-links.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Connection Links</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+    <a href="https://twitter.com/" class="connection-links connection-links__text">
+      <span class="icon-twitter connection-links__icon"></span><span>Follow Us</span>
+    </a>
+    <a href="https://www.facebook.com/" class="connection-links connection-links__text">
+      <span class="icon-facebook connection-links__icon"></span>Like Us
+    </a>
+    <a href="https://www.linkedin.com/" class="connection-links connection-links__text">
+      <span class="icon-linkedin connection-links__icon"></span>Connect
+    </a>
+    <script src="js/index.js"></script>
+  </body>
+</html>
+

public/contact.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Contact</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+    <div class="contact">
+      <address class="contact__method"><a href="https://goo.gl/maps/C4Q1FUpTdJx">2319 Hilltop Haven Drive<br />Upper Greenwood Lake, NJ 07421</a></address>
+      <div class="contact__method">
+        <a href="tel:6624076792">662-407-6792</a>
+        <a href="mailto:contact@intell.com">contact@intell.com</a>
+      </div>
+      <div class="contact__method">
+        <a href="https://twitter.com/" class="connection-links connection-links__text">
+          <span class="icon-twitter connection-links__icon"></span>Follow Us
+        </a>
+        <a href="https://www.facebook.com/" class="connection-links connection-links__text">
+          <span class="icon-facebook connection-links__icon"></span>Like Us
+        </a>
+        <a href="https://www.linkedin.com/" class="connection-links connection-links__text">
+          <span class="icon-linkedin connection-links__icon"></span>Connect
+        </a>
+      </div>
+    </div>
+    <script src="js/index.js"></script>
+  </body>
+</html>
+