diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..96edf66 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore index 123ae94..41f70e5 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ logs pids *.pid *.seed +*.DS_Store # Directory for instrumented libs generated by jscoverage/JSCover lib-cov @@ -21,6 +22,8 @@ coverage # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release +app/public/js/**/*.js +app/public/css/*.css # Dependency directory # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git diff --git a/Gulpfile.js b/Gulpfile.js new file mode 100644 index 0000000..22028b7 --- /dev/null +++ b/Gulpfile.js @@ -0,0 +1,84 @@ +var gulp = require('gulp'), + sass = require('gulp-sass'), + neat = require('node-neat'), + browserify = require('browserify'), + source = require('vinyl-source-stream'), + uglify = require('gulp-uglify'), + rename = require('gulp-rename'), + es = require('event-stream'), + autoprefixer = require('gulp-autoprefixer'); + +var csslint = require('gulp-csslint'); +var jshint = require('gulp-jshint'); + +///////all the js to one min file/////////////////// +gulp.task('browserify', function() { + // we define our input files, which we want to have + // bundled: + var files = [ + './app/entry.js' + ]; + // map them to our stream function + var tasks = files.map(function(entry) { + return browserify({ entries: [entry] }) + .bundle() + .pipe(source(entry)) + // rename them to have "bundle as postfix" + .pipe(rename({ + extname: '.bundle.js' + })) + .pipe(gulp.dest('./app/public/js')); + }); + // create a merged stream + return es.merge.apply(null, tasks); +}); + +//////// sass ////////////// +var csspaths = { + scss: './app/**/*.scss' +}; + +gulp.task('sass', function () { + return gulp.src(csspaths.scss) + .pipe(sass({ + includePaths: [['run'].concat(neat), + require('node-bourbon').includePaths, + require('node-neat').includePaths + ] + })) + .pipe(autoprefixer({ + browsers: ['last 2 versions'], + cascade: false + })) + .pipe(gulp.dest('./app/public/css')); +}); + + +/////// run js and sass /////////// +gulp.task('run',function(){ + gulp.start('sass'); + gulp.start('browserify'); +}); + +/////// watch js and sass ////////// +gulp.task('watch', function() { + gulp.watch("./app/**/*.scss", ["sass"]); + gulp.watch(['./node_modules/angular/angular.js', './node_modules/angular-route/angular-route.js', './app/app.js', './app/script/**/*js'], ['browserify']); +}); + +//////// server js and sass ///////// +gulp.task('serve', ['run', 'watch']); + +////////// css lint ////////// +gulp.task("css", function() { + gulp.src(".app/public/css/*.css") + .pipe(csslint()) + .pipe(csslint.reporter()); +}); + +//////// js lint ////////////// +gulp.task('lint', function() { + return gulp.src('./app/**/*.js') + .pipe(jshint()) + .pipe(jshint.reporter('default')); +}); diff --git a/app/.DS_Store b/app/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/app/.DS_Store differ diff --git a/app/app.js b/app/app.js new file mode 100644 index 0000000..a8c028e --- /dev/null +++ b/app/app.js @@ -0,0 +1,46 @@ +// require('angular'); +// require('angular-route'); +(function(){ + + 'use strict'; + // Declare app level module which depends on filters, and services + var AwesomeBlogApp = angular.module('AwesomeBlog', ['ngRoute']). + + config(["$routeProvider", function ($routeProvider) { + $routeProvider + + ////route home page blog posts////////// + .when("/blogposts", { + templateUrl: "partials/blogpost.html", + controller: "BlogpostsCtrl as vm", + }) + + /////form to make more blog posts/////// + .when("/blogposts/new", { + templateUrl: "partials/form.html", + controller: "BlogFormCtrl as vm", + }) + .when("/blogposts/:blogpost_id/edit", { + templateUrl: "partials/form.html", + controller: "BlogFormCtrl as vm", + }) + .when("/blogposts/:blogpost_id", { + templateUrl: "partials/blog.html", + controller: "BlogpostCtrl as vm", + }) + .otherwise({ + redirectTo: "/blogposts", + }); + + }]); + + // Controller to make DATE work! + AwesomeBlogApp.controller("DateCtrl", ["$scope", function($scope) { + $scope.date = new Date(); + }]); + +}()); + +// require('./scripts/blog.service'); +// require('./scripts/blog.ctrl'); +// require('./blog_form.ctrl'); diff --git a/app/entry.js b/app/entry.js new file mode 100644 index 0000000..1cb79f4 --- /dev/null +++ b/app/entry.js @@ -0,0 +1,8 @@ +require("../node_modules/angular/angular.js"); +require("../node_modules/angular-route/angular-route.js"); +require("./app.js"); +require("./scripts/blog.ctrl.js"); +require("./scripts/blog.service.js"); +require("./scripts/blog_details.directive.js"); +require("./scripts/blog_form.ctrl.js"); +require("./scripts/blogposts.ctrl.js"); \ No newline at end of file diff --git a/app/index.scss b/app/index.scss new file mode 100755 index 0000000..5643ae1 --- /dev/null +++ b/app/index.scss @@ -0,0 +1,5 @@ +@import "bourbon"; +@import "sass/base/index"; +@import "sass/typography/index"; +@import "sass/utils/index"; +@import "sass/components/index"; diff --git a/app/public/css/fonts/RobotoSlab-Light.ttf b/app/public/css/fonts/RobotoSlab-Light.ttf new file mode 100755 index 0000000..ccb99cd Binary files /dev/null and b/app/public/css/fonts/RobotoSlab-Light.ttf differ diff --git a/app/public/css/fonts/RobotoSlab-Regular.ttf b/app/public/css/fonts/RobotoSlab-Regular.ttf new file mode 100755 index 0000000..eb52a79 Binary files /dev/null and b/app/public/css/fonts/RobotoSlab-Regular.ttf differ diff --git a/app/public/css/fonts/Ubuntu-B.ttf b/app/public/css/fonts/Ubuntu-B.ttf new file mode 100644 index 0000000..b173da2 Binary files /dev/null and b/app/public/css/fonts/Ubuntu-B.ttf differ diff --git a/app/public/css/fonts/Ubuntu-L.ttf b/app/public/css/fonts/Ubuntu-L.ttf new file mode 100644 index 0000000..ed0f5bc Binary files /dev/null and b/app/public/css/fonts/Ubuntu-L.ttf differ diff --git a/app/public/css/fonts/Ubuntu-LI.ttf b/app/public/css/fonts/Ubuntu-LI.ttf new file mode 100644 index 0000000..c6cec55 Binary files /dev/null and b/app/public/css/fonts/Ubuntu-LI.ttf differ diff --git a/app/public/css/fonts/Ubuntu-M.ttf b/app/public/css/fonts/Ubuntu-M.ttf new file mode 100644 index 0000000..ca9c03a Binary files /dev/null and b/app/public/css/fonts/Ubuntu-M.ttf differ diff --git a/app/public/css/fonts/Ubuntu-R.ttf b/app/public/css/fonts/Ubuntu-R.ttf new file mode 100644 index 0000000..d748728 Binary files /dev/null and b/app/public/css/fonts/Ubuntu-R.ttf differ diff --git a/app/public/css/fonts/icomoon.eot b/app/public/css/fonts/icomoon.eot new file mode 100755 index 0000000..a94b0fd Binary files /dev/null and b/app/public/css/fonts/icomoon.eot differ diff --git a/app/public/css/fonts/icomoon.svg b/app/public/css/fonts/icomoon.svg new file mode 100755 index 0000000..2a73939 --- /dev/null +++ b/app/public/css/fonts/icomoon.svg @@ -0,0 +1,15 @@ + + + +Generated by IcoMoon + + + + + + + + + + + \ No newline at end of file diff --git a/app/public/css/fonts/icomoon.ttf b/app/public/css/fonts/icomoon.ttf new file mode 100755 index 0000000..e025ff2 Binary files /dev/null and b/app/public/css/fonts/icomoon.ttf differ diff --git a/app/public/css/fonts/icomoon.woff b/app/public/css/fonts/icomoon.woff new file mode 100755 index 0000000..62db938 Binary files /dev/null and b/app/public/css/fonts/icomoon.woff differ diff --git a/app/public/index.html b/app/public/index.html new file mode 100755 index 0000000..ffe7c49 --- /dev/null +++ b/app/public/index.html @@ -0,0 +1,100 @@ + + + + + + + + AwesomeBlog! + + + +
+

intelly

+ +
+ + + +
+ + +
+
+

Serene in their assurance of their empire over matter

+

No one would have believed in the last years of the nine-teenth century that this world was being watched keenly and closely by intelligence grater than man's

+
+ Contact Now + Learn More +
+
+
+
+
+ 2319 Hilltop Haven Drive
+ Upper Greenwood Lake, NJ 07421 +
+
+
+ 662-407-6792
+ contact@intell.com +
+
+
+ +
+
+ + + + + + + + + diff --git a/app/public/partials/blog.html b/app/public/partials/blog.html new file mode 100644 index 0000000..084a9e7 --- /dev/null +++ b/app/public/partials/blog.html @@ -0,0 +1,37 @@ + +
+

Blog

+
+ +
+ +
+

Share

+ +
+
+
+ +
+

{{ vm.blogpost.title }}

+

{{ vm.blogpost.text }}

+ + View All + Edit +
+
diff --git a/app/public/partials/blogpost.html b/app/public/partials/blogpost.html new file mode 100644 index 0000000..1a50dbd --- /dev/null +++ b/app/public/partials/blogpost.html @@ -0,0 +1,41 @@ + +
+

Blog

+

The secular cooling that must someday overtake our planet has already gone far indeed with our neighbour. Its physical condition is still largely a mystery, but we know now that

+
+ + +
+ +
+

Share

+ +
+
+ +
+ +
+

{{ blogpost.title }}

+

{{ blogpost.text | limitTo: 300 }}{{ blogpost.text.length > 300 ? '...' : '' }}

+ + Read More + Delete +
+ Add New +
diff --git a/app/public/partials/form.html b/app/public/partials/form.html new file mode 100644 index 0000000..fb7699d --- /dev/null +++ b/app/public/partials/form.html @@ -0,0 +1,31 @@ +
+

Add or Edit A Blogpost

+
+ + +
+ +
+

Share

+ +
+
+ +
+ + + + + +
diff --git a/app/sass/.DS_Store b/app/sass/.DS_Store new file mode 100644 index 0000000..e71a451 Binary files /dev/null and b/app/sass/.DS_Store differ diff --git a/app/sass/base/_index.scss b/app/sass/base/_index.scss new file mode 100644 index 0000000..a2ce49e --- /dev/null +++ b/app/sass/base/_index.scss @@ -0,0 +1,3 @@ +@import "reset"; +@import "variables"; +@import "typography"; diff --git a/app/sass/base/_reset.scss b/app/sass/base/_reset.scss new file mode 100644 index 0000000..0c59b47 --- /dev/null +++ b/app/sass/base/_reset.scss @@ -0,0 +1,51 @@ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +body { + width: 100%; + margin: 0 auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote { + &:before, &:after { + content: ''; + content: none; } + } + +q { + &:before, &:after { + content: ''; + content: none; } + } + +li, a { + text-decoration: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/app/sass/base/_typography.scss b/app/sass/base/_typography.scss new file mode 100644 index 0000000..403636c --- /dev/null +++ b/app/sass/base/_typography.scss @@ -0,0 +1,66 @@ +@font-face { + font-family: 'icomoon'; + src:url('fonts/icomoon.eot?xktnuc'); + src:url('fonts/icomoon.eot?xktnuc#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?xktnuc') format('truetype'), + url('fonts/icomoon.woff?xktnuc') format('woff'), + url('fonts/icomoon.svg?xktnuc#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +// Ubuntu Light +@font-face { + font-family: 'Ubuntu-Light'; + src:url('fonts/Ubuntu-L.ttf'); + font-weight: normal; +} + +//Ubuntu Light Italic +@font-face { + font-family: 'Ubuntu-Light-Italic'; + src:url('fonts/Ubuntu-LI.ttf'); + font-weight: normal; + font-style: normal; +} + + +// Ubuntu Regular +@font-face { + font-family: 'Ubuntu-Regular'; + src:url('fonts/Ubuntu-R.ttf'); + font-weight: normal; + font-style: normal; +} + +// Ubuntu Medium +@font-face { + font-family: 'Ubuntu-Medium'; + src:url('fonts/Ubuntu-M.ttf'); + font-weight: normal; + font-style: normal; +} + +//Ubuntu Bold +@font-face { + font-family: 'Ubuntu-Bold'; + src:url('fonts/Ubuntu-B.ttf'); + font-weight: normal; + font-style: normal; +} + +//RobotoSlab Light +@font-face { + font-family: 'RobotoSlab-Light'; + src:url('fonts/RobotoSlab-Light.ttf'); + font-weight: normal; + font-style: normal; +} + +//RobotoSlab Regular +@font-face { + font-family: 'RobotoSlab-Regular'; + src:url('fonts/RobotoSlab-Regular.ttf'); + font-weight: normal; + font-style: normal; +} diff --git a/app/sass/base/_variables.scss b/app/sass/base/_variables.scss new file mode 100644 index 0000000..0f209e5 --- /dev/null +++ b/app/sass/base/_variables.scss @@ -0,0 +1,40 @@ +// Breakpoint for Media Queries +$break: 50em; + +// Color Maps + +$colors: ( + 'base': #fff, + 'primary': #1e1d24, + 'secondary': #b4b3b5, + 'accent': #97f1e7, +); + +//text size maps +$font-size: ( + 'x-small': em(14), + 'small': em(16), + 'medium': em(20), + 'large': em(24), + 'x-large': em(28), + 'xx-large': em(34), + 'mega-small': em(48), + 'mega-medium': em(64), + 'mega-large': em(72), +); + + +//font family map +$font-family: ( + 'primary': ( + 'light': 'Ubuntu-Light' sans-serif, + 'light-italic': 'Ubuntu-Light-Italic' sans-serif, + 'regular': 'Ubuntu-Regular' sans-serif, + 'medium': 'Ubuntu-Medium' sans-serif, + 'bold': 'Ubuntu-Bold' sans-serif + ), + 'secondary': ( + 'light': 'RobotoSlab-Light' serif, + 'regular': 'RobotoSlab-Regular' serif + ), +); diff --git a/app/sass/components/_blogContainer.scss b/app/sass/components/_blogContainer.scss new file mode 100644 index 0000000..6f4011b --- /dev/null +++ b/app/sass/components/_blogContainer.scss @@ -0,0 +1,16 @@ +.blog-container { + padding: 5% 10%; + @media only screen and (min-width: $break) { + padding: 0 20%; + } + h1 { + font-family: font-family('primary', 'regular'); + font-size: font-size('xx-large'); + text-align: center; + } + + .btn-primary-alt:last-child { + display: flex; + margin: 2em auto; + } +} diff --git a/app/sass/components/_blogSummary.scss b/app/sass/components/_blogSummary.scss new file mode 100644 index 0000000..024b935 --- /dev/null +++ b/app/sass/components/_blogSummary.scss @@ -0,0 +1,81 @@ +.blog-summary { + @include flex-box($align: center, $wrap: wrap, $direction: column, $justify: center); + margin: 1em auto; + padding-bottom: 3em; + border-bottom: 1px solid; + border-color: rgba(0, 0, 0, .1); + @media only screen and (min-width: $break) { + @include flex-box($align: center, $wrap: wrap, $direction: row, $justify: space-between); + } + + h1 { + font-family: font-family('primary', 'regular'); + font-size: font-size('x-large'); + text-align: left; + flex-basis: 100%; + order: 1; + @media only screen and (min-width: $break) { + flex-basis: 60%; + margin: 1em 0; + order: 1; + } + } + + p { + font-family: font-family('primary', 'light'); + font-size: font-size('medium'); + color: color('secondary'); + opacity: .7; + flex-basis: 100%; + order: 3; + @media only screen and (min-width: $break) { + order: 3; + } + } + + .blog-metadata { + display: inline-block; + flex-basis: 100%; + order: 2; + margin-bottom: 1em; + @media only screen and (min-width: $break) { + flex-basis: 50%; + order: 4; + } + + li { + font-family: font-family('primary', 'light-italic'); + font-size: font-size('small'); + color: color('secondary'); + display: inline-flex; + padding: 1em 1em 0 0; + &:last-child { + display: none; + } + @media only screen and (min-width: $break) { + &:last-child { + display: inline-flex; + } + } + } + } + + .btn-primary { + order: 4; + margin-top: 1em; + @media only screen and (min-width: $break) { + order: 5 + } + } + + .btn-small { + order: 5; + margin: 1em 0; + &:hover { + cursor: pointer; + } + @media only screen and (min-width: $break) { + order: 2 + } + } +} diff --git a/app/sass/components/_footer.scss b/app/sass/components/_footer.scss new file mode 100644 index 0000000..e6ff53a --- /dev/null +++ b/app/sass/components/_footer.scss @@ -0,0 +1,30 @@ +footer { + text-align: center; + border-top: 0.1em solid black; + padding: 1.5em; + clear: both; + font-family: font-family('primary', 'light'); + font-size: font-size('x-small'); + letter-spacing: 0.1em; + @media screen and (min-width: 50em) { + clear: both; + } + ul { + + } + li { + list-style-type: none; + padding: 0.1em; + @media screen and (min-width: 50em) { + display: inline; + padding: 0.5em; + } + } + a { + text-decoration: none; + color: color('primary'); + &:hover { + color: color('accent'); + } + } +} diff --git a/app/sass/components/_form.scss b/app/sass/components/_form.scss new file mode 100644 index 0000000..5540913 --- /dev/null +++ b/app/sass/components/_form.scss @@ -0,0 +1,61 @@ + +form { + text-align: center; + padding: 1em; + @media screen and (min-width: 50em) { + + } + h1 { + font-family: font-family('primary', 'regular'); + font-size: font-size($key: 'medium'); + } + textarea { + margin: 1em auto; + padding: 1em; + width: 20em; + height: 10em; + display: block; + font-family: font-family('primary', 'light'); + font-size: font-size('small'); + @media screen and (min-width: 50em) { + width: 40em; + height: 15em; + border: .1em solid #ddd; + border-radius: em(4); + &:focus { + outline-color: color('accent'); + outline-style: solid; + outline-width: .25em; + } + } + } + input { + padding: 1em; + width: 20em; + display: block; + margin: 1em auto; + font-family: font-family('primary', 'light'); + font-size: font-size('small'); + @media screen and (min-width: 50em) { + border: .1em solid #ddd; + border-radius: em(4); + &:focus { + outline-color: color('accent'); + outline-style: solid; + outline-width: .25em; + } + } + } + // input[type="submit"] { + // border: none; + // padding: 1em; + // width: 20em; + // display: block; + // margin: 1em auto; + // color: color($key: 'base'); + // &:hover { + // background-color: color($key: 'accent'); + // cursor: pointer; + // } + // } +} diff --git a/app/sass/components/_index.scss b/app/sass/components/_index.scss new file mode 100644 index 0000000..be4d4e6 --- /dev/null +++ b/app/sass/components/_index.scss @@ -0,0 +1,11 @@ +@import "header/index"; +@import "buttons/index"; +@import "pageBanner"; +@import "sub-nav"; +@import "share-social-icons"; +@import "blogContainer"; +@import "blogSummary"; +@import "contact/index"; +@import "learn-more"; +@import "footer"; +@import "form"; diff --git a/app/sass/components/_learn-more.scss b/app/sass/components/_learn-more.scss new file mode 100644 index 0000000..3d73e34 --- /dev/null +++ b/app/sass/components/_learn-more.scss @@ -0,0 +1,42 @@ +.learn-more-wrapper { + @include flex-box($align: center, $wrap: wrap, $direction: column, $justify: center); + text-align: center; + padding: 1em; + background: color('accent'); + color: color('base'); + margin: 0 0 1.5em 0; + @media only screen and (min-width: $break) { + padding: 2em 0 4em 0; + } + + h1 { + font-family: font-family('primary', 'bold'); + font-size: font-size('xx-large'); + padding-bottom: 1em; + padding-top: 1em; + @media only screen and (min-width: $break) { + padding-bottom: .5em; + } + } + p { + font-family: font-family('primary', 'regular'); + font-size: font-size('small'); + padding-bottom: 1em; + line-height: 1.5em; + @media screen and (min-width: $break) { + width: 50%; + // padding: 2em 10em; + } + } + + .learn-button-wrapper { + + .btn-secondary { + display: inline-flex; + margin: 1em auto; + @media only screen and (min-width: $break) { + margin: 1em .5em; + } + } + } +} diff --git a/app/sass/components/_pageBanner.scss b/app/sass/components/_pageBanner.scss new file mode 100644 index 0000000..93f2c21 --- /dev/null +++ b/app/sass/components/_pageBanner.scss @@ -0,0 +1,23 @@ +@mixin banner($background, $heading-family, $text-family, $heading-size, $text-size, $text-color) { + background-color: color($background); + h1 { + font-family: $heading-family; + font-size: font-size($heading-size); + margin: 0; + } + p { + font-family: $text-family; + font-size: font-size($text-size); + font-color: color($text-color); + opacity: .5; + margin: .5em 0 0 0; + } +} + +.page-banner { + @include banner('accent', font-family('secondary', 'regular'), font-family('secondary', 'light'), 'mega-small', 'large', 'secondary'); + padding: 1.5em; + @media screen and (min-width: 50em) { + padding: 5em 35% 5em 10%; + } +} diff --git a/app/sass/components/_share-social-icons.scss b/app/sass/components/_share-social-icons.scss new file mode 100644 index 0000000..ba41908 --- /dev/null +++ b/app/sass/components/_share-social-icons.scss @@ -0,0 +1,35 @@ +// share social icons +.share-social-icons { + font-size: font-size('x-small'); + font-family: font-family('primary', 'light'); + text-align: center; + padding: 0.5em; + //On media call do this: + @media screen and (min-width: 50em) { + @include flex-box($align: center, $direction: row); + align-content: flex-end; + float: right; + margin-right: 10%; + } + + p { + display: inline; + color: color('primary'); + opacity: .4; + } + ul { + display: inline; + padding-left: 0; + } + li { // icons + display: inline; + padding-left: 0.5em; + } + a { + opacity: .4; + &:hover { + color: color('accent'); + opacity: 1; + } + } +} diff --git a/app/sass/components/_sub-nav.scss b/app/sass/components/_sub-nav.scss new file mode 100644 index 0000000..331d512 --- /dev/null +++ b/app/sass/components/_sub-nav.scss @@ -0,0 +1,45 @@ +// mini nav section +.sub-nav { + font-size: font-size('x-small'); + font-family: font-family('primary', 'light'); + text-align: center; + padding: 0.5em; + @media screen and (min-width: 50em) { + float: left; + padding-left: 5em; + } + li { + display: inline; + } + li:after { + content:'\00B7'; + padding-left:5px; + font-weight: 700; + } + li:last-child { + font-family: font-family('primary', 'medium'); + text-transform: uppercase; + &:after { + content: ''; + } + } + a { + text-decoration: none; + color: color('primary'); + &:hover { + color: color('accent'); + } + } +} + +.sub-nav-wrapper { + padding: 0.5em; + border-bottom: 1px solid; + border-color: rgba(0, 0, 0, .1); + @media screen and (min-width: 50em) { + padding-left: 5em; + height: 2.5em; + } +} + + diff --git a/app/sass/components/buttons/_INDEX.scss b/app/sass/components/buttons/_INDEX.scss new file mode 100644 index 0000000..c858e41 --- /dev/null +++ b/app/sass/components/buttons/_INDEX.scss @@ -0,0 +1,2 @@ +@import "mixins"; +@import "buttons"; diff --git a/app/sass/components/buttons/_buttons.scss b/app/sass/components/buttons/_buttons.scss new file mode 100644 index 0000000..da57329 --- /dev/null +++ b/app/sass/components/buttons/_buttons.scss @@ -0,0 +1,37 @@ +.btn-primary { + @include button(color('primary'), color('base'), color('accent'), color('base'), 8em, 'small'); + @media only screen and (min-width: $break) { + width: 12em; + } +} + +.btn-primary-alt { + @include button(color('base'), color('primary'), color('primary'), color('base'), 8em, 'small'); + &:hover { + border-color: color('primary'); + } + @media only screen and (min-width: $break) { + width: 12em; + } +} + +.btn-secondary { + @include button(color('accent'), color('base'), color('base'), color('primary'), 10em, 'small'); + &:hover { + border-color: color('base'); + } + @media only screen and (min-width: $break) { + width: 12em; + } +} + +.btn-small { + @include button(color('base'), color('primary'), color('primary'), color('base'), 8em, 'x-small'); + padding: .5em; + &:hover { + border-color: color('primary'); + } + @media only screen and (min-width: $break) { + width: 6em; + } +} diff --git a/app/sass/components/buttons/_mixins.scss b/app/sass/components/buttons/_mixins.scss new file mode 100644 index 0000000..1dbeaa1 --- /dev/null +++ b/app/sass/components/buttons/_mixins.scss @@ -0,0 +1,20 @@ +@mixin button($background, $color, $hover-bg, $hover-color, $width, $f-size) { + font-family: font-family('primary', 'medium'); + font-size: font-size($f-size); + letter-spacing: .125em; + display: inline-flex; + justify-content: center; + text-transform: uppercase; + width: $width; + padding: 1em 0; + border: solid 1px; + background-color: $background; + color: $color; + border-color: $color; + border-radius: .5em; + &:hover{ + background-color: $hover-bg; + color: $hover-color; + border-color: $hover-color; + } +} diff --git a/app/sass/components/contact/_contact-social-links.scss b/app/sass/components/contact/_contact-social-links.scss new file mode 100644 index 0000000..c848cd3 --- /dev/null +++ b/app/sass/components/contact/_contact-social-links.scss @@ -0,0 +1,61 @@ +.contact-social-links-wrapper { + padding-bottom: 5em; + margin: 0 auto; + width: 20em; + @media screen and (min-width: 50em) { + float: right; + padding-right: 5em; + padding-bottom: 6em; + width: 30em; + display: inline; + margin-top: 0; + } + ul { + @include flex-box($align: center, $wrap: wrap, $direction: row, $justify: center); + padding-left: 0; + // margin-right: 2em; + // width: 100%; + } + li { + @include flexitem; + list-style-type: none; + display: inline; + padding: 0.5em; + } + a { + position: relative; + // Icon styles in a:before + &:before { + font-size: 1.5em; + background-color: color('base'); + border-radius: 50%; // Icon is in the box + border-color: transparent; + } + &:hover { + color: color('accent'); + } + } + // Span for text for text styles + span { + @extend %border-circle; + text-transform: uppercase; + font-size: 0.5em; + text-align: center; + padding-top: 3.5em; + } +} +// Code for the circle +%border-circle { + position: absolute; + border: 0.1em solid color('secondary'); + border-radius: 50%; + width: 8em; + height: 4.5em; + top: 0.1em; + left: 0; + content:""; + z-index: -1; +} + + + diff --git a/app/sass/components/contact/_contact.scss b/app/sass/components/contact/_contact.scss new file mode 100644 index 0000000..4ff458e --- /dev/null +++ b/app/sass/components/contact/_contact.scss @@ -0,0 +1,39 @@ +.contact-info-wrapper { + text-align: center; + padding: 1em; + font-family: font-family('primary', 'regular'); + line-height: 1.5em; + @media screen and (min-width: 50em) { + padding: 2em; + width: 50em; + display: inline; + } +} +.address-wrapper { + padding-bottom: 1em; + @media screen and (min-width: 50em) { + float: left; + padding-left: 5em; + text-align: left; + margin-top: 3em; + } + address { + font-style: normal; + } +} +.phone-email-wrapper { + @media screen and (min-width: 50em) { + float: left; + padding-left: 5em; + text-align: left; + margin-top: 3em; + } + a { + text-decoration: none; + color: color($key: 'primary'); + &:hover { + color: color($key: 'accent'); + } + } +} + diff --git a/app/sass/components/contact/_index.scss b/app/sass/components/contact/_index.scss new file mode 100644 index 0000000..dab668e --- /dev/null +++ b/app/sass/components/contact/_index.scss @@ -0,0 +1,2 @@ +@import "contact-social-links"; +@import "contact"; diff --git a/app/sass/components/header/_header-logo.scss b/app/sass/components/header/_header-logo.scss new file mode 100644 index 0000000..04c1a9a --- /dev/null +++ b/app/sass/components/header/_header-logo.scss @@ -0,0 +1,5 @@ +.logo { + font-family: font-family('primary', 'medium'); + font-size: font-size('large'); + color: color('primary'); +} diff --git a/app/sass/components/header/_header-nav.scss b/app/sass/components/header/_header-nav.scss new file mode 100644 index 0000000..5c66c6f --- /dev/null +++ b/app/sass/components/header/_header-nav.scss @@ -0,0 +1,78 @@ +//colors +$color_alto_approx: color('primary'); + +@media screen and (max-width: 50em) { + .primary-nav-wrap { + ul { + float: right; + margin: 0; + padding: 0; + a { + display: block; + line-height: 32px; + padding: 0 15px; + } + li { + padding: 0 1em 0 0; + margin: 0 1em 0 0; + &.current-menu-item { + background: $color_alto_approx; + } + &:hover { + background-color: $color_alto_approx; + position: absolute; + > ul { + -webkit-transition: 2s 2s; + float: right; + display: block; + padding: 0 1em 0 0; + margin: 0 1em 0 0; + } + } + } + ul { + -webkit-transition: 2s 2s; + background-color: $color_alto_approx; + position: relative; + display: none; + top: 100%; + left: 0; + padding: 0 1em 0 0; + margin: 0 1em 0 0; + li { + width: 200px; + } + a { + line-height: 120%; + padding: 10px 15px; + } + ul { + top: 0; + } + } + } + } +} + +@media screen and (min-width: 50em) { + .mobile-nav { + display: none; + } + .main-nav { + li { + ul:hover { + display: block; + position: absolute; + } + } + li { + display: inline-block; + padding-right: 1em; + ul { + li { + display: none; + } + } + } + } +} diff --git a/app/sass/components/header/_header.scss b/app/sass/components/header/_header.scss new file mode 100644 index 0000000..86480d7 --- /dev/null +++ b/app/sass/components/header/_header.scss @@ -0,0 +1,21 @@ +.header-container { + background-color: color('primary'); + @include flex-box($align: center, $wrap: wrap, $direction: row, $justify: space-between); + align-content: flex-start; + padding: 4em 3em 4em 2em; + + h1 { + color: color('base'); + } + + a { + color: color('base'); + font-family: font-family('primary', 'regular'); + font-size: font-size('x-small'); + &:hover { + color: color('accent'); + } + } +} + + diff --git a/app/sass/components/header/_index.scss b/app/sass/components/header/_index.scss new file mode 100644 index 0000000..dcfe642 --- /dev/null +++ b/app/sass/components/header/_index.scss @@ -0,0 +1,3 @@ +@import "header-logo"; +@import "header-nav"; +@import "header"; diff --git a/app/sass/typography/_icons.scss b/app/sass/typography/_icons.scss new file mode 100644 index 0000000..5e04f9e --- /dev/null +++ b/app/sass/typography/_icons.scss @@ -0,0 +1,28 @@ +%icon-font-base { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; +} + +$iconPrimary: +(pinterest 1.5em "\e800") +(google 1.5em "\e801") +(twitter 1.5em "\e802") +(facebook 1.5em "\e803") +(linkedin 1.5em "\e804"); + +@each $iconP in $iconPrimary { + .icon-#{nth($iconP, 1)} { + @extend %icon-font-base; + font-size: #{nth($iconP, 2)}; + color: #1e1d24; + width: 100%; + &:before { + content: nth($iconP, 3); + } + } +} diff --git a/app/sass/typography/_index.scss b/app/sass/typography/_index.scss new file mode 100644 index 0000000..c8b0f44 --- /dev/null +++ b/app/sass/typography/_index.scss @@ -0,0 +1 @@ +@import "icons"; diff --git a/app/sass/utils/_functions.scss b/app/sass/utils/_functions.scss new file mode 100644 index 0000000..14b6f4f --- /dev/null +++ b/app/sass/utils/_functions.scss @@ -0,0 +1,17 @@ + +// Map-Get Function for Colors + +@function color($key: 'primary') { + @return map-get($colors, $key); +} + +//Map-Get Function for font-size: +@function font-size($key: 'x-small') { + @return map-get($font-size, $key); +} + +//Map-Get Function for Font-Family +@function font-family($font-name, $font-variant) { + @return map-get(map-get($font-family, $font-name), $font-variant); +} + diff --git a/app/sass/utils/_globalMixins.scss b/app/sass/utils/_globalMixins.scss new file mode 100644 index 0000000..3da3032 --- /dev/null +++ b/app/sass/utils/_globalMixins.scss @@ -0,0 +1,15 @@ +@mixin flex-box($align: null, $wrap: null, $direction: null, $justify: null, $basis: null) { + @include display(flex); + @include align-items($align); + @include flex-wrap($wrap); + @include flex-direction($direction); + @include justify-content($justify); + @include flex-basis($basis); +} + +@mixin flexitem { + -webkit-flex-grow: 1; + -webkit-flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; +} diff --git a/app/sass/utils/_index.scss b/app/sass/utils/_index.scss new file mode 100644 index 0000000..aa2ed81 --- /dev/null +++ b/app/sass/utils/_index.scss @@ -0,0 +1,2 @@ +@import "functions"; +@import "_globalMixins"; diff --git a/app/scripts/blog.ctrl.js b/app/scripts/blog.ctrl.js new file mode 100644 index 0000000..aeb4da9 --- /dev/null +++ b/app/scripts/blog.ctrl.js @@ -0,0 +1,11 @@ +angular.module("AwesomeBlog").controller("BlogpostCtrl", ["BlogpostService", "$routeParams", function(BlogpostService, $routeParams) { + var vm = this; + + start(); + + function start() { + BlogpostService.get($routeParams.blogpost_id).then(function(resp) { + vm.blogpost = resp.data; + }); + } +}]); diff --git a/app/scripts/blog.service.js b/app/scripts/blog.service.js new file mode 100644 index 0000000..cdbdbe4 --- /dev/null +++ b/app/scripts/blog.service.js @@ -0,0 +1,27 @@ +(function () { + "use strict"; + + angular.module("AwesomeBlog").service("BlogpostService", ["$http", function ($http) { + var urlRoot = "/blogposts"; + + var Blog = { + get: function (id) { + if (angular.isDefined(id)) { + return $http.get(urlRoot + "/" + id); + } else { + return $http.get(urlRoot); + } + }, + update: function (blog) { + return $http.put(urlRoot + "/" + blog._id, blog); + }, + create: function (blog) { + return $http.post(urlRoot, blog); // ideal, but doesn't work + }, + delete: function (blog) { + return $http.delete(urlRoot + "/" + blog._id); + } + }; + return Blog; + }]); +}()); diff --git a/app/scripts/blog_details.directive.js b/app/scripts/blog_details.directive.js new file mode 100644 index 0000000..bdf299e --- /dev/null +++ b/app/scripts/blog_details.directive.js @@ -0,0 +1,17 @@ +require("../app"); + +angular.module("AwesomeBlog") + .directive("bl", function () { + return { + scope: { + player: "=player", // functionally the same as ng-model + }, + templateUrl: "views/player/player_details_directive.html", + }; +}); +// in the .html +//dl +//
position
+//
{{ foobar.position }}
+//
Jersey Number
+//
diff --git a/app/scripts/blog_form.ctrl.js b/app/scripts/blog_form.ctrl.js new file mode 100644 index 0000000..4e6e4a3 --- /dev/null +++ b/app/scripts/blog_form.ctrl.js @@ -0,0 +1,36 @@ +(function() { +'use strict'; + + angular.module("AwesomeBlog").controller("BlogFormCtrl", ["BlogpostService", "$routeParams", "$location", function(BlogpostService, $routeParams, $location){ + var vm = this; + + vm.save = saveBlog; + + vm.blogpost = {}; + + start(); + + // IF statement only works when edit + function start() { + + vm.blogpost.date = new Date(Date.now()); + if ($routeParams.blogpost_id) { + BlogpostService.get($routeParams.blogpost_id).then(function (resp) { + + vm.blogpost = resp.data; + vm.blogpost.date = vm.blogpost.date || new Date(Date.now()); + }); + } + } + + function saveBlog () { + var method; + + method = $routeParams.blogpost_id ? "update" : "create"; + BlogpostService[method](vm.blogpost).then(function (resp) { + $location.path("/blogposts/" + resp.data._id); + }); + } + }]); + +}()); diff --git a/app/scripts/blogposts.ctrl.js b/app/scripts/blogposts.ctrl.js new file mode 100644 index 0000000..e3bc486 --- /dev/null +++ b/app/scripts/blogposts.ctrl.js @@ -0,0 +1,28 @@ +(function() { + 'use strict'; + + angular.module("AwesomeBlog").controller("BlogpostsCtrl", ["BlogpostService", function(BlogpostService) { + var vm = this; + + vm.blogposts = []; + vm.delete = deleteBlog; + + start(); + + function start() { + getBlogposts(); + } + + function getBlogposts() { + BlogpostService.get().then(function(resp) { + vm.blogposts = resp.data; + }); + } + + function deleteBlog (blog) { + BlogpostService.delete(blog).then(function() { + getBlogposts(); + }); + } + }]); +}()); diff --git a/app/styleguide.md b/app/styleguide.md new file mode 100644 index 0000000..a373371 --- /dev/null +++ b/app/styleguide.md @@ -0,0 +1,61 @@ +# Styleguide for MEAN Stack Week 6 Project +## Brian, Chris, Alina + + +### Base +- Reset +- Global styles / margins for mobile vs desktop? + +### Layout +- Should tell sections how they sit next to each other +- Margins / padding between sections +- Mobile vs desktop margins / padding + + +### Components +- Top nav +- Mini nav +- Share social links +- Summaries +- Articles + - (header, paragraph, author, date, comments, read more link) +- Links + - (circles near footer) +- Links + - (rectangular - Contact / Read More / Learn More) +- Footer + + +### Typography +**Icons** + +**Font Families** + +- Logo // 'primary', 'medium' // mega-small +- Main Nav // 'primary', 'regular' // small +- Submenu // 'primary', 'light' // small +- Breadcrumbs // 'primary', 'bold' // small +- Share // 'primary', 'medium' // small +- Blog Hero // RobotoSlab Regular // mega-large +- Blog Hero Summary // RobotoSlab Light // mega-small +- Blog Summary Heading // 'primary', 'regular' // mega-medium +- Blog summary text // 'primary', 'light' // xx-large +- Blog Summary meta // 'primary', 'light-italic' // large +- Blog Read More // 'primary', 'medium' // small +- Contact Heading // 'primary', 'medium' // mega-medium +- Contact text // 'primary', 'regular' // large +- Contact Buttons // 'primary', 'medium' // medium +- Address, Phone, Contact // 'primary', 'regular' // x-large +- Follow Us // 'primary', 'bold' // small +- Footer // 'primary', 'regular' // x-small + +## Colors + +'base': #fff, // white +'primary': #1e1d24, // thunderstorm grey +'secondary': #b4b3b5, // light grey +'accent': #97f1e7, // seafoam green + + +ICON FONT DETAILS: + diff --git a/comps/intelly-blog-III@2x.psd b/comps/intelly-blog-III@2x.psd deleted file mode 100644 index ebfdb1a..0000000 Binary files a/comps/intelly-blog-III@2x.psd and /dev/null differ diff --git a/comps/intelly-blog-post@2x.psd b/comps/intelly-blog-post@2x.psd deleted file mode 100644 index 0964434..0000000 Binary files a/comps/intelly-blog-post@2x.psd and /dev/null differ diff --git a/models/blog.js b/models/blog.js new file mode 100644 index 0000000..5f920a2 --- /dev/null +++ b/models/blog.js @@ -0,0 +1,16 @@ +// BLOG SCHEMA + +// Load required packages +var mongoose = require("mongoose"); +var Schema = mongoose.Schema; + +// Define our teams schema +var BlogpostSchema = new Schema({ + title: String, + text: String, + author: String, + date: Date +}); + +// Export the Mongoose model +module.exports = mongoose.model("Blogpost", BlogpostSchema); diff --git a/package.json b/package.json new file mode 100644 index 0000000..11ca34c --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "blogwithangularandmongo", + "version": "1.0.0", + "description": "A awesome blog!", + "main": "server.js", + "scripts": { + "start": "webpack-dev-server --content-base app --hot" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/brain11f/mean-stack-1.git" + }, + "keywords": [ + "code", + "fellows", + "blog", + "angular", + "mongodb" + ], + "author": "Brian Finck and Chris Holt and Alina To", + "license": "ISC", + "bugs": { + "url": "https://github.com/brain11f/mean-stack-1/issues" + }, + "homepage": "https://github.com/brain11f/mean-stack-1#readme", + "devDependencies": { + "browserify": "^11.2.0", + "event-stream": "^3.3.1", + "express": "^4.13.3", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.0.2", + "gulp-csslint": "^0.2.0", + "gulp-install": "^0.6.0", + "gulp-jshint": "^1.11.2", + "gulp-rename": "^1.2.2", + "gulp-sass": "^2.0.4", + "gulp-uglify": "^1.4.1", + "node-bourbon": "^4.2.3", + "node-neat": "^1.7.2", + "node-sass": "^3.3.3", + "stream-browserify": "^2.0.1", + "vinyl-source-stream": "^1.1.0" + }, + "dependencies": { + "angular-route": "^1.4.7", + "angular": "^1.4.7", + "body-parser": "^1.14.1", + "mongoose": "^4.1.10" + } +} diff --git a/readme.md b/readme.md index dde636c..e818217 100644 --- a/readme.md +++ b/readme.md @@ -1,25 +1,23 @@ -# Week Six - MEAN Stack I +# Code Fellows Week Six Project - MEAN Stack I +## Brian Finck, Chris Holt, & Alina To -Last week we focussed on JavaScript basics. This week we're going to build up a function web application. You'll be expected to build on knowledge you've already learned (semantic HTML, Sass instead of CSS, in addition to all of the Angular work we'll be doing) and produce a "production-ready" blog for your assignment this week. +Our team built a functional blog CRUD web application prototype with the application of MEAN Stack. The completed blog is production-ready. The user can create, read, update, and delete blog posts from the application. There are three different views: A list of all available blog posts, a detail view of a specific blog post, and a form view to add/edit a blog post. -We want this assignment to feel like a 'week on the job.' And by that we mean, we will provide a completed comp and an expected outcome specification. It is up to you to deliver on this project specification. +For the back-end, we implemented a Node Express server and MongoDB. We used Mongoose as our MongoDB object modeling tool, and Body-Parser as our JSON parsing middleware. Chrome extension Postman was used to test the server.js. A schema for a blog post was created using Mongoose. -## The Comp +For the front-end, we implemented Angular, Sass, and semantic HTML. We produced and tested our completed web responsive prototype, ready for desktop and mobile views, based on a provided [comp](https://github.com/SEA-Design-Dev/mean-stack-1/tree/master/comps). The production of the prototype and CRUD application used best practices in coding HTML/CSS/Sass/JavaScript. -You can download the view that you are to complete [here](https://github.com/SEA-Design-Dev/mean-stack-1/tree/master/comps). It is provided as a Photoshop format, if you do not have access to Photoshop, other applications like Pixelmator are able to open these layered files as well. +Live demo [here](https://nameless-waters-2769.herokuapp.com/) +## Resources Used -## The spec +1. Function from Web Design Weekly article on converting Px to Em. Wanted to limit excess dependencies when not needed, so avoided adding Bourbon and others (http://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/) +1. Font Family Function inspired by map-get article for map-get inception for colors by Jake Albaugh (http://codepen.io/jakealbaugh/post/using-sass-functions-to-access-complex-variable-maps) +1. Found limitTo in Angular Docs when searching for a way to show partial text. Found concatenation idea from Nicholas Mandel (https://nicholasmandel.wordpress.com/2014/12/18/limit-characters-displayed-in-text-with-angular/); -As a product owner, I need a functional prototype of the application. The final prototype must be visible in a desktop browser. -Prototype is to use best practices in coding HTML/CSS as there is the potential that some or all of the code will made it into production. - -Aside from images as content, all visual assets should be produced via CSS or typography. The only background image asset allowed will be the main page header. - -The user should be able to create, read, update, and delete blog posts from the application. There should be at least two different views - one a list of available blog posts, the other a detail view of the blog post. You do not need to worry about authentication or user management for this assignment. - -### Requirements +## From the original assignment readme.md: +### Requirements 1. Semantically correct HTML is required as this will be the model for prod app integration 1. Think in terms of '*components*'; if all parts of the UI were lego blocks, who would you code that? @@ -30,15 +28,17 @@ The user should be able to create, read, update, and delete blog posts from the 1. Write up a description for every plugin used (no limit, but you must justify them) 1. jQuery is not allowed. Angular's built-in DOM manipulation can manage most of what you'd need jQuery for. -### Constraints +### Constraints 1. Must work in all major browsers of latest versions; * Desktop (IE Edge, Safari, Chrome and Firefox) 1. All interactions must be clearly functional 1. All code must pass HTML Tidy, CSS Lint, and JSHint. -__DO NOT__ fence yourself in with invisible constraints. Unless it is specifically listed and/or we discussed it in lecture, there is not an expectation to meet an objective that has not been set. +__DO NOT__ fence yourself in with invisible constraints. Unless it is specifically listed and/or we discussed it in lecture, there is not an expectation to meet an objective that has not been set. -## The expectation +### The expectation In this assignment, you should be able to demonstrate mastery over the basics of Angular as well as creating a simple CRUD application. We're looking for you to build on best practices that you've already learned (proper HTML and CSS) as well as incorporate the new practices discussed during the course of the week. + + diff --git a/selection.json b/selection.json new file mode 100755 index 0000000..8755398 --- /dev/null +++ b/selection.json @@ -0,0 +1,159 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M512 20.48c-271.462 0-491.52 220.058-491.52 491.52s220.058 491.52 491.52 491.52 491.52-220.058 491.52-491.52-220.058-491.52-491.52-491.52zM391.68 715.725h-99.533v-320.307h99.533v320.307zM341.299 356.096c-31.437 0-51.763-22.272-51.763-49.818 0-28.109 20.941-49.715 53.043-49.715s51.763 21.606 52.378 49.715c0 27.546-20.275 49.818-53.658 49.818zM755.2 715.725h-99.533v-177.51c0-41.318-14.438-69.376-50.432-69.376-27.494 0-43.827 18.995-51.046 37.274-2.662 6.502-3.328 15.718-3.328 24.883v184.678h-99.584v-218.112c0-39.987-1.28-73.421-2.611-102.195h86.477l4.557 44.493h1.997c13.107-20.89 45.21-51.712 98.918-51.712 65.485 0 114.586 43.878 114.586 138.189v189.389z" + ], + "attrs": [], + "isMulticolor": false, + "tags": [ + "linkedin-with-circle" + ], + "grid": 20 + }, + "attrs": [], + "properties": { + "order": 1, + "id": 4, + "prevSize": 20, + "code": 59396, + "name": "linkedin" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 0 + }, + { + "icon": { + "paths": [ + "M512 20.48c-271.462 0-491.52 220.058-491.52 491.52s220.058 491.52 491.52 491.52 491.52-220.058 491.52-491.52-220.058-491.52-491.52-491.52zM545.638 628.48c-31.539-2.406-44.749-18.022-69.427-32.973-13.568 71.219-30.157 139.52-79.309 175.206-15.206-107.725 22.221-188.518 39.629-274.381-29.645-49.92 3.533-150.323 66.099-125.645 76.954 30.515-66.662 185.6 29.747 205.005 100.659 20.173 141.773-174.694 79.36-237.978-90.214-91.494-262.502-2.099-241.306 128.87 5.12 32 38.246 41.728 13.21 85.914-57.702-12.8-74.957-58.317-72.704-118.989 3.533-99.328 89.242-168.909 175.155-178.483 108.698-12.083 210.688 39.885 224.819 142.182 15.821 115.405-49.101 240.282-165.274 231.27z" + ], + "attrs": [], + "isMulticolor": false, + "tags": [ + "pinterest-with-circle" + ], + "grid": 20 + }, + "attrs": [], + "properties": { + "order": 1, + "id": 3, + "prevSize": 20, + "code": 59392, + "name": "pinterest" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 1 + }, + { + "icon": { + "paths": [ + "M512 20.48c-271.462 0-491.52 220.058-491.52 491.52s220.058 491.52 491.52 491.52 491.52-220.058 491.52-491.52-220.058-491.52-491.52-491.52zM483.686 722.995c-30.874 15.002-64.102 16.589-76.954 16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962-4.608-119.962-95.59 0-89.395 108.8-96.41 142.131-96.41h0.87c-19.251-25.702-15.258-51.61-15.258-51.61-1.69 0.102-4.147 0.205-7.168 0.205-12.544 0-36.762-1.997-57.549-15.411-25.498-16.384-38.4-44.288-38.4-82.893 0-109.107 119.142-113.51 120.32-113.613h118.989v2.611c0 13.312-23.91 15.923-40.192 18.125-5.53 0.819-16.64 1.894-19.763 3.482 30.157 16.128 35.021 41.421 35.021 79.104 0 42.906-16.794 65.587-34.611 81.51-11.059 9.882-19.712 17.613-19.712 28.006 0 10.189 11.878 20.582 25.702 32.717 22.579 19.917 53.555 47.002 53.555 92.723 0 47.258-20.326 81.050-60.416 100.454zM742.4 512h-76.8v76.8h-51.2v-76.8h-76.8v-51.2h76.8v-76.8h51.2v76.8h76.8v51.2zM421.018 570.88c-2.662 0-5.325 0.102-8.038 0.307-22.733 1.69-43.725 10.189-58.88 24.013-15.053 13.619-22.733 30.822-21.658 48.179 2.304 36.403 41.37 57.702 88.832 54.323 46.694-3.379 77.824-30.31 75.571-66.714-2.15-34.202-31.898-60.109-75.827-60.109zM465.766 372.992c-12.39-43.52-32.358-56.422-63.386-56.422-3.328 0-6.707 0.512-9.933 1.382-13.466 3.84-24.166 15.053-30.106 31.744-6.093 16.896-6.451 34.509-1.229 54.579 9.472 35.891 34.97 61.901 60.672 61.901 3.379 0 6.758-0.41 9.933-1.382 28.109-7.885 45.722-50.79 34.048-91.802z" + ], + "attrs": [], + "isMulticolor": false, + "tags": [ + "google+-with-circle" + ], + "grid": 20 + }, + "attrs": [], + "properties": { + "order": 1, + "id": 2, + "prevSize": 20, + "code": 59393, + "name": "google" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 2 + }, + { + "icon": { + "paths": [ + "M512 20.48c-271.462 0-491.52 220.058-491.52 491.52s220.058 491.52 491.52 491.52 491.52-220.058 491.52-491.52-220.058-491.52-491.52-491.52zM711.936 423.117c0.205 4.198 0.256 8.397 0.256 12.493 0 128-97.331 275.507-275.405 275.507-54.682 0-105.574-15.974-148.378-43.52 7.526 0.922 15.258 1.28 23.091 1.28 45.363 0 87.091-15.411 120.218-41.421-42.342-0.819-78.080-28.774-90.419-67.174 5.888 1.075 11.93 1.69 18.176 1.69 8.806 0 17.408-1.178 25.498-3.379-44.288-8.909-77.67-48.026-77.67-94.925v-1.178c13.056 7.219 28.006 11.622 43.878 12.134-26.010-17.408-43.059-47.002-43.059-80.64 0-17.715 4.762-34.406 13.107-48.691 47.77 58.573 119.040 97.075 199.526 101.222-1.69-7.117-2.509-14.49-2.509-22.118 0-53.402 43.315-96.819 96.819-96.819 27.802 0 52.992 11.776 70.656 30.618 22.067-4.403 42.752-12.39 61.44-23.501-7.219 22.579-22.528 41.574-42.547 53.606 19.61-2.406 38.246-7.578 55.603-15.309-12.954 19.405-29.389 36.506-48.282 50.125z" + ], + "attrs": [], + "isMulticolor": false, + "tags": [ + "twitter-with-circle" + ], + "grid": 20 + }, + "attrs": [], + "properties": { + "order": 1, + "id": 1, + "prevSize": 20, + "code": 59394, + "name": "twitter" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 3 + }, + { + "icon": { + "paths": [ + "M512 20.48c-271.462 0-491.52 220.058-491.52 491.52s220.058 491.52 491.52 491.52 491.52-220.058 491.52-491.52-220.058-491.52-491.52-491.52zM628.429 360.141h-73.882c-8.755 0-18.483 11.52-18.483 26.829v53.35h92.416l-13.978 76.083h-78.438v228.403h-87.194v-228.403h-79.104v-76.083h79.104v-44.749c0-64.205 44.544-116.378 105.677-116.378h73.882v80.947z" + ], + "attrs": [], + "isMulticolor": false, + "tags": [ + "facebook-with-circle" + ], + "grid": 20 + }, + "attrs": [], + "properties": { + "order": 1, + "id": 0, + "prevSize": 20, + "code": 59395, + "name": "facebook" + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 4 + } + ], + "height": 1024, + "metadata": { + "name": "icomoon" + }, + "preferences": { + "showGlyphs": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "icon-", + "metadata": { + "fontFamily": "icomoon", + "majorVersion": 1, + "minorVersion": 0 + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "embed": false + }, + "imagePref": { + "prefix": "icon-", + "png": true, + "useClassSelector": true, + "color": 4473924, + "bgColor": 16777215 + }, + "historySize": 100, + "showCodes": true, + "showLiga": false + } +} \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 0000000..8f3754f --- /dev/null +++ b/server.js @@ -0,0 +1,138 @@ +'use strict'; + +// Load required packages +var express = require('express'); +var bodyparser = require('body-parser'); +var mongoose = require('mongoose'); +var Blogpost = require('./models/blog'); + +// Connect to the database +mongoose.connect(process.env.MONGO_URL || 'mongodb://localhost/mongoblog'); + +// Create the Express application +var app = express(); + +// Use environment defined port OR 4000 +var port = process.env.PORT || 4000; + +// Create the Express router +var router = express.Router(); + +// Declare the middleware, use for error checking +router.use(function(req, res, next) { + console.log('Something is happening.'); + next(); +}); + +// Use body-parser package in our application +app.use(bodyparser.json()); +app.use(bodyparser.urlencoded({ + extended: true +})); + +app.use(express.static(__dirname + '/app/public')); + +// Root route +router.get('/', function (req, res) { + res.sendFile(__dirname + '/app/public/index.html'); +}); + +// Test route +router.get('/test', function (req, res) { + res.json({ message: 'testing testing 1 2 3' }); +}); + +app.set('port', port); + +router.route('/blogposts') + // READ + // Create endpoint for /blogposts for POST + .post(function (req, res) { + // Create a new instance of the blogpost model + var blogpost = new Blogpost(); + + // Set the blogpost properties that came from the POST data + blogpost.title = req.body.title; + blogpost.text = req.body.text; + blogpost.author = req.body.author; + blogpost.date = req.body.date; + + // Save the blogpost and check for errors + blogpost.save(function (err) { + if (err) { + res.send(err); + } + res.json(blogpost); + }); + }) + + // Create endpoint /blogposts for GET + .get(function(req, res) { + // Use the blogpost model to find all blogposts + Blogpost.find(function (err, blogpost) { + if (err) { + res.send(err); + } + res.json(blogpost); + }); + }); + +// Create endpoint /blogpost/:blogpost_id +router.route('/blogposts/:blogpost_id') + // GET blogpost by id + .get(function(req, res) { + // Use the blogpost model to find a specific blogpost + Blogpost.findById(req.params.blogpost_id, function (err, blogpost) { + if (err) { + res.send(err); + } + res.json(blogpost); + }); + }) + + // Endpoint for /blogpost/:blogpost_id for PUT (UPDATE) + .put(function (req, res) { + // Use the Blogpost model to find a specific blogpost + Blogpost.findById(req.params.blogpost_id, function (err, blogpost) { + if (err) { + res.send(err); + } + // Update the blogpost's properties + blogpost.title = req.body.title; + blogpost.text = req.body.text; + blogpost.author = req.body.author; + blogpost.date = req.body.date; + + // Save the blogpost and check for errors + blogpost.save(function (err) { + if (err) { + res.send(err); + } + res.json(blogpost); + }); + }); + }) + + // DELETE + // Create endpoint /blogpost/:blogpost_id for DELETE + .delete(function (req, res) { + // Use the blog model to find a specific blogpost and remove it + Blogpost.remove({ + _id: req.params.blogpost_id + }, function(err, blogpost) { + if (err) { + res.send(err); + } + res.json({ message: "Successfully removed blogpost." }); + }); + }); + +app.use('/', router); + +app.listen(app.get('port'), function(){ + console.log('Server listening at port ' + port); +}); + + + +