diff --git a/.eslintrc.json b/.eslintrc.json index 6861a08..3c40a23 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -39,7 +39,7 @@ "no-param-reassign": [ 2, { - "props": true + "props": false } ], "complexity": [ 2, 2 ], diff --git a/.gitignore b/.gitignore index b5f0fb0..9468358 100644 --- a/.gitignore +++ b/.gitignore @@ -6,9 +6,8 @@ tmp .DS_Store .idea public/build/ -npm-debug.log +npm-debug.log* config/*.local.* public/* -!public/index.html +!public/*.html .idea -www diff --git a/.sass-lint.yml b/.sass-lint.yml index 035ad57..67320c8 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -37,8 +37,7 @@ rules: - 2 - properties: - - margin - - content + - color quote: - 2 - diff --git a/.travis.yml b/.travis.yml index 0f8cad4..f5a6eb3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,4 +11,4 @@ before_install: npm install -g npm@latest-2 npm --version script: - - npm test + - npm run ci -s diff --git a/README.md b/README.md index 13ca2c9..04efccd 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,116 @@ -# Moxie's Leean Web App [![Build Status](https://travis-ci.org/moxie-leean/web-app.svg?branch=master)](https://travis-ci.org/moxie-leean/web-app) - -Starter Web App based on the modular/atomic Leean concept. - -Based on the [Angular Seed](https://github.com/angular/angular-seed) project. Follow the link to check the documentation. - -Point your DocumentRoot at the /public folder to run the app. Or you can use ```npm start``` as described in the Angular Seed project. +# skaled.com + +# Useful links + +- [Staging](http://moxienyc:moxiestaging101@skaled.moxie-staging.com/) +- [Style guide](https://projects.invisionapp.com/share/7G6AKII5R#/screens) + +# Scope of Work + +## Templates +- [ ] Home / Landing +- [ ] About + - [ ] Our Approach + - [ ] Team & Careers + - [ ] Contact +- [ ] Solutions + - [ ] Lead Generation + - [ ] Training & Consulting +- [ ] Resources +- [ ] Blog + +### GLOBAL +- [ ] Navigation - We will add a script field in the back end to add tags and other scripts in: + - [ ] Header + - [ ] Footer +- [ ] Skaled's Branding (colors, logos, etc.) + +### HOME PAGE +Page template to include support for following content: +- [ ] Title +- [ ] Images +- [ ] Text +- [ ] Testimonials + +### ABOUT - APPROACH +Page template to include support for following content: +- [ ] Title +- [ ] Images +- [ ] Text +- [ ] Contact Form including but not limited to: + - [ ] Name + - [ ] Email + +### ABOUT - TEAM +Page template to include support for following content: +- [ ] Title +- [ ] Images +- [ ] Text +- [ ] Table +- [ ] Contact Form including but not limited to: + - [ ] Name + - [ ] Email +- [ ] Links to third party (linkedin) + +### SOLUTIONS - TRAINING +Page template to include support for following content: +- [ ] Title +- [ ] Image +- [ ] Text +- [ ] Table +- [ ] Contact Form including but not limited to: + - [ ] Name + - [ ] Email +- [ ] Use a dynamic for to animate/update content on the page depending on the pack that +the user selects +- [ ] Look into ways to add CRM and analytics in the packs + +### SOLUTIONS - LEAD GENERATION +Page template to include support for following content: +- [ ] Title +- [ ] Graphic illustrations (not included in our scope - to be handled by third party) +- [ ] Contact Form including but not limited to: + - [ ] Name + - [ ] Email +- [ ] Packages area including the following content: + - [ ] Images + - [ ] Titles + - [ ] Text + - [ ] Other CTA + - [ ] Text + - [ ] Tables + +### RESOURCES +(TBD) + +### BLOG +Page template to include support for following content: +- [ ] Index of all posts including: + - [ ] Title + - [ ] Excerpt + - [ ] Image + - [ ] Link to single post page including support for following content + - [ ] Title + - [ ] Embedded media (images and videos) + - [ ] Text + - [ ] Quotes + - [ ] Tables + +# Timeline: + +- V1 wireframes - 11.11.15 +- V2 wireframes - 11.18.15 +- V3 wireframes - 1.8.16 + +- V1 Design - 1.15.16 +- V2 Design - 1.22.16 +- V3 Design - 1.29.16 + +- Front end delivery - 2.12.16 +- Backend Delivery - 2.26.16 +- QA, content integration - 2.22.16 > 3.4.16 + +### Launch 3.4.16 ## Content @@ -19,21 +125,8 @@ Point your DocumentRoot at the /public folder to run the app. Or you can use ``` - [Commands](#commands) - [start](#start) - [json-server](#json-server) - - [js](#js) - - [js:ci](#jsci) - - [browserify](#browserify) - - [styles](#styles) - - [scss](#scss) - - [scss:ci](#scssci) - - [watch](#watch) - - [watch:js](#watch) - - [watch:scss](#watch) - - [develop](#develop) - - [build](#build) - - [build:js](#buildjs) - - [build:scss](#buildscss) - - [build:css](#buildcss) - - [test](#test) + - [Build Commands](#build-commands) + ## Requirements @@ -101,10 +194,7 @@ Inside of the projet there are several commands you can use as a build tools and npm start ``` -This command will allow you to wake up the `http` server, and you will be able to access to the site at -the address that will be displayed on the console, you will be able to -test internally with your other devices as well to acess to the site -using an external IP. +This command will allow you to wake up the `http` server, and you will be able to access to the site at `localhost:8000`, the command will be waiting for any response to the server you can run this command on the background or in another tab for preference, you can kill the server at any time just by typing `ctrl + c`. ### json-server @@ -116,160 +206,52 @@ This is very similar to the previous but instead it opens a server at port `3000` where you can access to fake APIs and you can create your own APIS and use that in your development process to test. -### js - -``` -npm run js -``` - -Alias for the command `npm run browserify`, makes easier to remember and -type. -### js:ci - -``` -npm run js:ci -s -``` - -Run the eslint script rules again every `.js` file inside of the app -directory in order to follow the same rules to write consisten JS. - -### browserify - -``` -npm run browserify -``` +### Build Commands -This command creates a single `.js` file from all the imports that are -made on `app/app.js` and makes transformations as well from ES6, this -script creates a source map as well so you can debug more easily where -errors are generated or triggered from the code. +Several build commands are included. Each can be run for all file types or just a specific file type. +- Use ```npm run ``` to run for all file types (where available). +- Use ```npm run :``` to run for a specific file type [js, styles or templates]. -### styles +For example: -``` -npm run styles -``` +- Run ```npm run watch``` whilst developing. +- Run ```npm run build``` on the production server. +- Run ```npm run ci``` in Travis. +- Run ```npm run styles:watch``` to only watch scss files whilst developing.. + -This script runs the script above `scss` in order to generate the css -file after that applies the autoprefixer script in order to avoid -the need of write prefixer on some properties. +The build commands are: -### autoprefix +#### ci ``` -npm run autoprefix +npm run ci ``` -This command loops on the created `.css` file and adds the autoprefixer -for different browsers on different properties to avoid the need to -write that manually. +Runs Lint code sniffer on all file types [js and styles]. -### scss +#### dev ``` -npm run scss +npm run dev ``` -This script compiles the sass files into a single css file with no -minification, and adds a source map as well to the file to easy track -the properties of each element. - -**Note:** Please don't use this script directly since you are not -going to have the autoprefixer feature if you do so, use `npm run styles` instead. +Creates the dev versions (unminified with sourcemaps) of all file types [js, styles and template]. -### scss:ci +#### build ``` -npm run scss:ci -s +npm run dev ``` -This task applies the a sass lint on every `.scss` file inside of the app -directory, in order to write consisten sass files. +Creates the production versions (minified) of all file types [js, styles and template]. -### watch +#### watch ``` npm run watch ``` -This command will watch any change on the `.js` and `.scss` files and -will trigger the compilation of JS or SASS if it's the case with this -you can avoid the need to run every time the taks to build the js or -sass to css. - -### watch:js - -``` -npm run watch:js -``` - -This command will watch any change on the `.js` files and will generate -the bundle file on development mode so we can follow any problem using -the sourcemaps and avoid large wait times between compliation of assets. - -### watch:scss - -``` -npm run watch:scss -``` - -This command will watch any change on the `.scss` files and will generate -the `.css` file on development mode so we can follow any problem using -the sourcemaps generated it will run the the autoprefix as well. - -### develop - -``` -npm run develop -``` - -This tasks run the tasks: `styles` and `js`, which compiles all sass -into a single CSS and all JS in a single JS as well, the files are -develop friendly since includes the sourcemaps for easy develop process. - -### build - -``` -npm run build -``` - -This tasks removes the source maps, and creates minified versions of the -CSS and JS files in order to be production ready. - -### build:js - -``` -npm run build:js -``` - -This task removes the source maps, and creates minified versions of the -js file. - -### build:scss - -``` -npm run build:scss -``` - -This task removes the source maps, and creates minified versions of the -CSS file. - -### build:css - -``` -npm run build:css -``` - -This task creates a single CSS version with autoprefix, minified version -and with no source map to be production ready. - -### test - -``` -npm test -``` - -Task that runs the JS and CSS lint used for travis in order to have a CI -sytem before tests. +Watches for changes on all file types and runs their dev task when detected [js, styles and template]. diff --git a/app/app.js b/app/app.js index 4df4f62..5e36ad9 100644 --- a/app/app.js +++ b/app/app.js @@ -1,14 +1,16 @@ import angular from 'angular'; -import { name as home } from './views/home/'; -import { name as about } from './views/about'; + +require('../public/js/ngConstants.js'); +require('ln-cms'); +require('ln-filters'); angular - .module('app', ['ngRoute', home, about]) - .config(config); + .module('app', [ + 'ngSanitize', + 'templateCache', + 'lnCms', + 'lnFilters' + ]); -function config($routeProvider) { - $routeProvider - .otherwise({ - redirectTo: '/' - }); -} +// Dependent on app. +require('./templates'); diff --git a/app/atoms/_style.scss b/app/atoms/_style.scss index 4fc077e..1c3a3a0 100644 --- a/app/atoms/_style.scss +++ b/app/atoms/_style.scss @@ -1,3 +1,23 @@ -@import "grid/style"; +@import "base/reset"; +@import "base/colors"; +@import "base/fonts"; +@import "base/grid-settings"; +@import "base/media"; @import "base/headings"; @import "base/links"; +@import "base/forms"; +@import "base/lists"; +@import "base/icomoon"; +@import "base/text"; + + +@import "mixins/omega-reset"; +@import "mixins/ellipsis-multiline"; +@import "mixins/lines"; + +@import "buttons/default"; + +@import "ui/general"; +@import "ui/animations"; + +@import "img/figure-responsive"; diff --git a/app/atoms/base/_colors.scss b/app/atoms/base/_colors.scss new file mode 100644 index 0000000..28145cd --- /dev/null +++ b/app/atoms/base/_colors.scss @@ -0,0 +1,34 @@ +// Put color names here, using the names from Zeplin. +// Do not use these variables anywhere else except this file! +// The should all start with $_ . +// (you can delete the example below). + +$_black_pearl: #1E2330; +$_red: #FF0000; + +// Put color usages here and assign them a color from above . +// You can use these variables anywhere else. +// (you can delete the example below). + +// Brand +$branding: $_black_pearl; + +// Body +$body: $_black_pearl; + +// Heading +$heading: $_black_pearl; + +// Links +$link: $_black_pearl; +$link_hover: rgba($link, 0.6); + +// Buttons +$button_text: $_black_pearl; +$button_bg: $_black_pearl; +$button_hover_text: $_black_pearl; +$button_hover_bg: $_black_pearl; + + +// Form +$form_error: $_red; diff --git a/app/atoms/base/_fonts.scss b/app/atoms/base/_fonts.scss new file mode 100644 index 0000000..952236e --- /dev/null +++ b/app/atoms/base/_fonts.scss @@ -0,0 +1,4 @@ +/* font defintions */ + +$font_arial: "Arial", sans-serif; +$primary-font: $font_arial; diff --git a/app/atoms/base/_forms.scss b/app/atoms/base/_forms.scss new file mode 100644 index 0000000..35620b2 --- /dev/null +++ b/app/atoms/base/_forms.scss @@ -0,0 +1,21 @@ +input { + @include placeholder { + opacity:0.5; + } + + border: 2px solid transparent; + width:100%; + + &.ng-dirty:not(.ng-empty) { + &.ng-invalid { + border-color: $form_error; + } + &.ng-valid { + border-color: transparent; + } + } +} + +textarea:focus, input:focus, button:focus { + outline: none; +} diff --git a/app/atoms/grid/_style.scss b/app/atoms/base/_grid-settings.scss similarity index 54% rename from app/atoms/grid/_style.scss rename to app/atoms/base/_grid-settings.scss index 98485e3..66d018a 100644 --- a/app/atoms/grid/_style.scss +++ b/app/atoms/base/_grid-settings.scss @@ -7,17 +7,8 @@ $visual-grid-index: front; $visual-grid-opacity: 0.2; // Change the grid settings -$column: 60px; -$gutter: 20px; +$column: 57px; +$gutter: 25px; $grid-columns: 12; -$max-width: 940px; - - -// Breakpoints Units - -$small-screen: 640px; -$medium-screen: 768px; - -// Breakpoints -$mobile: new-breakpoint(max-width $small-screen 12); -$tablet: new-breakpoint(max-width $medium-screen 12); +$max-width: 960px; +$max-width-extended: 1224px; diff --git a/app/atoms/base/_headings.scss b/app/atoms/base/_headings.scss index 93fa875..b7d0c51 100644 --- a/app/atoms/base/_headings.scss +++ b/app/atoms/base/_headings.scss @@ -1,3 +1,30 @@ h1, h2, h3, h4, h5, h6 { - color: green; + color: $heading; + line-height: 1em; + font-weight: 400; } + +h1 { + @include fontSize (32px); +} + +h2 { + @include fontSize (28px); +} + +h3 { + @include fontSize (24px); +} + +h4 { + @include fontSize (14px); +} + +h5 { + @include fontSize (12px); +} + +h6 { + @include fontSize (10px); +} + diff --git a/app/atoms/base/_icomoon.scss b/app/atoms/base/_icomoon.scss new file mode 100644 index 0000000..6a5c8d8 --- /dev/null +++ b/app/atoms/base/_icomoon.scss @@ -0,0 +1,36 @@ +$icons_id: "9rc3go"; + +@font-face { + font-family: "icomoon"; + src: url("../fonts/icomoon/icomoon.eot?#{$icons_id}"); + src: url("../fonts/icomoon/icomoon.eot?#{$icons_id}#iefix") format("embedded-opentype"), + url("../fonts/icomoon/icomoon.ttf?#{$icons_id}") format("truetype"), + url("../fonts/icomoon/icomoon.woff?#{$icons_id}") format("woff"), + url("../fonts/icomoon/icomoon.svg?#{$icons_id}#icomoon") format("svg"); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "icomoon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Assign classes to the icons +// (you can delete the example below) + +.icon-up-arrow:before { + content: "\e901"; +} + + + diff --git a/app/atoms/base/_links.scss b/app/atoms/base/_links.scss index 28d08e4..32c84f7 100644 --- a/app/atoms/base/_links.scss +++ b/app/atoms/base/_links.scss @@ -1,4 +1,9 @@ a { - color: orange; + color: $link; text-decoration: none; + + &:hover { + color: $link_hover; + text-decoration: none; + } } diff --git a/app/atoms/base/_lists.scss b/app/atoms/base/_lists.scss new file mode 100644 index 0000000..b070611 --- /dev/null +++ b/app/atoms/base/_lists.scss @@ -0,0 +1,7 @@ +%list_nobullets { + ul { + margin: 0; + padding: 0; + list-style-type: none; + } +} diff --git a/app/atoms/base/_media.scss b/app/atoms/base/_media.scss new file mode 100644 index 0000000..7a07768 --- /dev/null +++ b/app/atoms/base/_media.scss @@ -0,0 +1,12 @@ +/* Variables */ + +$container-width: $max-width; + +/* media queries */ +$mobile_xs: new-breakpoint(max-width 319px 12); +$mobile_s: new-breakpoint(min-width 320px 12); +$mobile_l: new-breakpoint(min-width 480px 12); +$tablet: new-breakpoint(min-width 768px 12); +$desktop: new-breakpoint(min-width 960px 12); + +$container: new-breakpoint(min-width $container-width 12); diff --git a/app/atoms/base/_reset.scss b/app/atoms/base/_reset.scss new file mode 100644 index 0000000..e361edd --- /dev/null +++ b/app/atoms/base/_reset.scss @@ -0,0 +1,3 @@ +figure { + margin: 0; +} \ No newline at end of file diff --git a/app/atoms/base/_text.scss b/app/atoms/base/_text.scss new file mode 100644 index 0000000..f7796be --- /dev/null +++ b/app/atoms/base/_text.scss @@ -0,0 +1,26 @@ +body { + @include fontSize(15px); + font-family: $primary-font; + font-weight:400; + letter-spacing: 0.04em; + line-height: 1.5em; + color: $body; +} + +p { + margin-bottom: 2.4em; +} + +blockquote { + @include fontSize(20px); + font-family: Georgia; + font-style: italic; + line-height: 1.4em; + margin-left: 0; + margin-right: 0; +} + +%title_thin { + font-family: $primary-font; + font-weight: 100; +} diff --git a/app/atoms/buttons/_default.scss b/app/atoms/buttons/_default.scss new file mode 100644 index 0000000..c12cdfe --- /dev/null +++ b/app/atoms/buttons/_default.scss @@ -0,0 +1,18 @@ +a, +button{ + &.a__button{ + background: $button_bg; + color: $button_text; + + &:not([disabled]):hover { + background: $button_hover_bg; + color: $button_hover_text; + } + } +} + +button { + &:not([disabled]):hover { + color: $button_text; + } +} diff --git a/app/atoms/img/_figure-responsive.scss b/app/atoms/img/_figure-responsive.scss new file mode 100644 index 0000000..8086a9c --- /dev/null +++ b/app/atoms/img/_figure-responsive.scss @@ -0,0 +1,16 @@ +%figure_responsive { + figure { + @include media($tablet) { + display: inline; + overflow: hidden; + height: auto; + } + + position: relative; + width: 100%; + + img { + max-width: 100%; + } + } +} diff --git a/app/atoms/mixins/_ellipsis-multiline.scss b/app/atoms/mixins/_ellipsis-multiline.scss new file mode 100644 index 0000000..04cee41 --- /dev/null +++ b/app/atoms/mixins/_ellipsis-multiline.scss @@ -0,0 +1,16 @@ +// ------------------------------------------------------------ +// Text Ellipsis Multiline +// ------------------------------------------------------------ + +@mixin text-ellipsis($font-size, $line-height, $lines-to-show) { + display: block; /* Fallback for non-webkit */ + display: -webkit-box; + margin: 0 auto; + height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ + font-size: $font-size; + line-height: $line-height; + -webkit-line-clamp: $lines-to-show; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/app/atoms/mixins/_lines.scss b/app/atoms/mixins/_lines.scss new file mode 100644 index 0000000..c2402fa --- /dev/null +++ b/app/atoms/mixins/_lines.scss @@ -0,0 +1,26 @@ +$margin_line_horizontal: 5em 0 1em 0; + +@mixin helper_content { + display: block; + content: $whitespace; +} + +@mixin line_vertical { + @include helper_content; + height: 40%; + width: 1px; + background: $gray_chateau; + opacity: 0.4; + position: absolute; + left: 50%; + top: 10%; +} + +@mixin line_horizontal { + @include helper_content; + margin: $margin_line_horizontal; + height: 1px; + width: 100%; + background: $gray_chateau; + opacity: 0.4; +} diff --git a/app/atoms/mixins/_omega-reset.scss b/app/atoms/mixins/_omega-reset.scss new file mode 100644 index 0000000..9ca7dfd --- /dev/null +++ b/app/atoms/mixins/_omega-reset.scss @@ -0,0 +1,8 @@ +// ------------------------------------------------------------ +// Omega Reset +// ------------------------------------------------------------ + +@mixin omega-reset($nth) { + &:nth-child(#{$nth}) { margin-right: flex-gutter(); } + &:nth-child(#{$nth}+1) { clear: none } +} diff --git a/app/atoms/ui/_animations.scss b/app/atoms/ui/_animations.scss new file mode 100644 index 0000000..33f6493 --- /dev/null +++ b/app/atoms/ui/_animations.scss @@ -0,0 +1,9 @@ +@keyframes fadeOut { + from { opacity: 1 } + to { opacity: 0 } +} + +@keyframes fadeIn { + from { opacity: 0 } + to { opacity: 1 } +} diff --git a/app/atoms/ui/_general.scss b/app/atoms/ui/_general.scss new file mode 100644 index 0000000..a0dd14a --- /dev/null +++ b/app/atoms/ui/_general.scss @@ -0,0 +1,30 @@ +// put a hard limit on how narrow the screen can be: 320px +body { + min-width: 320px; +} + +// container class, for all sections that need to fill the screen with color beyond their limit +.container { + @include outer-container; + @include padding(null 10px); + + @include media($tablet){ + @include padding(null 0); + } +} + +.container-extended { + @include outer-container; + width: 96%; + max-width: $max-width-extended; +} + +.container-special { + @include outer-container; + max-width: $max-width; +} + +.container-nolimit { + @include outer-container; + max-width: 100%; +} diff --git a/app/style.scss b/app/style.scss index aeecbd1..8041b9f 100644 --- a/app/style.scss +++ b/app/style.scss @@ -7,15 +7,14 @@ /*-------------------------------------------------------------- 1.0 Normalize/Reset --------------------------------------------------------------*/ +/* vendor and frameworks */ @import "../bower_components/normalize-scss/normalize.scss"; - -/*-------------------------------------------------------------- -2.0 Bourbon, Neat ---------------------------------------------------------------*/ @import "../bower_components/bourbon/app/assets/stylesheets/bourbon"; @import "../bower_components/neat/app/assets/stylesheets/neat"; @import "../bower_components/fontSize.scss/font-size"; + +/* app styles */ @import "atoms/style"; @import "molecules/style"; @import "organisms/style"; diff --git a/app/templates/_style.scss b/app/templates/_style.scss index f373e53..9f68e95 100644 --- a/app/templates/_style.scss +++ b/app/templates/_style.scss @@ -1,2 +1 @@ @import "home/style"; -@import "about/style"; diff --git a/app/templates/about/_style.scss b/app/templates/about/_style.scss deleted file mode 100644 index eba9f53..0000000 --- a/app/templates/about/_style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.t__about { - h1 { - color: pink; - } -} diff --git a/app/templates/about/about.html b/app/templates/about/about.html deleted file mode 100644 index d6d75b5..0000000 --- a/app/templates/about/about.html +++ /dev/null @@ -1,10 +0,0 @@ -
- -

About

-

This is the partial for about.

-

- Showing of 'interpolate' filter: -

- -
- diff --git a/app/templates/home/_style.scss b/app/templates/home/_style.scss index f4d3779..2860308 100644 --- a/app/templates/home/_style.scss +++ b/app/templates/home/_style.scss @@ -1,5 +1,3 @@ .t__home { - h1 { - color: red; - } + } diff --git a/app/templates/home/home.html b/app/templates/home/home.html deleted file mode 100644 index dfce09c..0000000 --- a/app/templates/home/home.html +++ /dev/null @@ -1,7 +0,0 @@ -
- -

Home!

- -

This is the partial for view 1.

- -
diff --git a/app/templates/home/index.js b/app/templates/home/index.js new file mode 100644 index 0000000..ac9417b --- /dev/null +++ b/app/templates/home/index.js @@ -0,0 +1 @@ +/* Add requires here for all directives referenced by the home template */ diff --git a/app/templates/home/template.html b/app/templates/home/template.html new file mode 100644 index 0000000..b04aca3 --- /dev/null +++ b/app/templates/home/template.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/app/templates/index.js b/app/templates/index.js index 5d5a1e4..6797828 100644 --- a/app/templates/index.js +++ b/app/templates/index.js @@ -1,7 +1 @@ -import angular from 'angular'; - -module.exports = angular.module('templates', []) -.run(['$templateCache', function($templateCache) { - $templateCache.put('home.html', require('./home/home.html')); - $templateCache.put('about.html', require('./about/about.html')); -}]); +require('./home'); diff --git a/app/views/README.md b/app/views/README.md deleted file mode 100644 index a273978..0000000 --- a/app/views/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# Views -Views go in this folder. diff --git a/app/views/about/index.js b/app/views/about/index.js deleted file mode 100644 index d3ee073..0000000 --- a/app/views/about/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import angular from 'angular'; -import { name as templates } from './../../templates'; - -module.exports = angular.module('views.about', [ - 'ngRoute', - templates -]) -.config(config); - -function config($routeProvider) { - $routeProvider - .when('/about', { - templateUrl: 'about.html' - }); -} - diff --git a/app/views/home/index.js b/app/views/home/index.js deleted file mode 100644 index 02000c6..0000000 --- a/app/views/home/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import angular from 'angular'; -import { name as templates } from './../../templates'; - -module.exports = angular.module('views.home', [ - 'ngRoute', - templates -]) -.config(config); - -function config($routeProvider){ - $routeProvider - .when('/', { - templateUrl: 'home.html' - }); -} diff --git a/config/config.json b/config/config.json new file mode 100644 index 0000000..98e829b --- /dev/null +++ b/config/config.json @@ -0,0 +1,11 @@ +{ + "production": { + "apiBase": "https://api.XXXXX.com/" + }, + "staging": { + "apiBase": "http://api.XXXXX.moxie-staging.com/" + }, + "dev": { + "apiBase": "http://localhost:3000/" + } +} diff --git a/config/env.prod.json b/config/env.prod.json deleted file mode 100644 index d89590c..0000000 --- a/config/env.prod.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "debug": false, - "apiEndpoint": "https://api.sample.com/" -} \ No newline at end of file diff --git a/config/json/db.json b/config/json/db.json index f2ae48d..69c405f 100644 --- a/config/json/db.json +++ b/config/json/db.json @@ -1,19 +1,50 @@ { - "posts": [ + "static": { + "site_title": "XXXXX", + "logo": "img/general/logo-header.svg", + "main_menu": { + "slug": "main_menu", + "items": [ + { + "title": "", + "link": "#/" + }, + { + "title": "", + "link": "#/", + "sub_menu": [ + { + "title": "", + "link": "#/" + }, + { + "title": "", + "link": "#/" + } + ] + } + ] + }, + "widgets": {}, + "footer": {} + }, + "post": [ { - "id": 1, - "title": "json-server", - "author": "typicode" - } - ], - "comments": [ + "post_id": 5, + "slug": "/", + "type": "page-home", + "content": { + "title": "Home", + "content": "" + }, + "meta": {} + }, { - "id": 1, - "body": "some comment", - "postId": 1 + "post_id": 10, + "slug": "/contact-us", + "template": "contact", + "content": {}, + "meta": {} } - ], - "profile": { - "name": "typicode" - } + ] } \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index f4557a7..c6b6b77 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,16 +1,49 @@ 'use strict'; +/********************************************************* + * Modules + ********************************************************/ var gulp = require('gulp'); -var env = require('gulp-env'); -var fs = require('fs'); +var templateCache = require('gulp-angular-templatecache'); +var ngConstant = require('gulp-ng-constant'); +/********************************************************* + * Vars + ********************************************************/ var projectPath = 'app/'; -var outputPath = 'public/build/'; +var outputPath = 'public/'; var configPath = 'config/'; -var envFile = configPath + 'env.prod.json'; -if( fs.existsSync(configPath + 'env.local.json') ) { - envFile = configPath + 'env.local.json'; -} -console.log('Using env file: ' + envFile); +/********************************************************* + * Angular Templates + ********************************************************/ +gulp.task('templates', function() { + return gulp.src(projectPath + '**/*.html') + .pipe(templateCache({ + module: 'templateCache', + standalone: true + })) + .pipe(gulp.dest(outputPath + 'js')); +}); + + +/********************************************************* + * Environment Config + ********************************************************/ + +var configFunc = function(env) { + var myConfig = require('./' + configPath + 'config.json'); + var envConfig = myConfig[env]; + return ngConstant({ + constants: envConfig, + stream: true + }) + .pipe(gulp.dest(outputPath + 'js')); +}; + +gulp.task('config:dev', configFunc.bind(this, 'dev')); + +gulp.task('config:staging', configFunc.bind(this, 'staging')); + +gulp.task('config:build', configFunc.bind(this, 'production')); diff --git a/json-api.js b/json-api.js new file mode 100644 index 0000000..14996b1 --- /dev/null +++ b/json-api.js @@ -0,0 +1,10 @@ +var jsonServer = require('json-server') +var server = jsonServer.create() + +server.use(jsonServer.defaults({ + static: './htdocs' +})) + +var router = jsonServer.router('./config/json/db.json') +server.use(router) +server.listen(3000) diff --git a/package.json b/package.json index a46184e..126c19f 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { - "name": "leean-angular", + "name": "web-app", "private": true, "version": "0.1.0", "description": "An atomic starter project for Leean", - "repository": "https://github.com/moxie-leean/leean-angular", + "repository": "https://github.com/moxie-leean/web-app", "license": "MIT", "devDependencies": { + "aliasify": "^1.9.0", "autoprefixer": "^6.3.3", "babel-preset-es2015": "^6.5.0", "babelify": "^7.2.0", @@ -16,8 +17,13 @@ "eslint": "^1.10.3", "eslint-plugin-angular": "^0.15.0", "gulp": "^3.9.0", + "gulp-angular-templatecache": "^1.8.0", "gulp-env": "^0.4.0", + "gulp-ng-constant": "^1.1.0", + "http-server": "^0.6.1", "json-server": "^0.8.8", + "ln-cms": "^0.3.1", + "ln-filters": "^0.3.1", "node-sass": "^3.4.2", "npm-run-all": "^1.5.1", "onchange": "^2.0.0", @@ -32,32 +38,47 @@ "transform": [ "babelify", "browserify-shim", - "stringify" + "stringify", + "aliasify" ] }, "browserify-shim": { "jQuery": "global:jQuery", "angular": "global:angular" }, + "aliasify": { + "aliases": { + "atoms": "./app/atoms", + "molecules": "./app/molecules", + "organisms": "./app/organisms", + "template": "./app/templates", + "components": "./app/components", + "default-link": "ln-cms/default-link" + } + }, "scripts": { - "postinstall": "bower install && mkdir -p public/js public/css public/img && npm run develop", - "start": "browser-sync start --server public --files 'public/*.html, public/css/*.css, public/js/*.js'", - "json-server": "json-server --watch config/json/db.json", - "watch": "npm-run-all -p watch:js watch:sass", - "browserify": "browserify ./app/app.js -d > ./public/js/bundle.js", - "js": "npm run browserify", + "postinstall": "bower install && mkdir -p public/js public/css public/img && npm run dev", + "json-server": "json-server --watch config/json/db.json --port 3000 --static ./htdocs", + "start": "browser-sync start --port 8000 --server public --files 'public/*.html, public/css/*.css, public/js/*.js'", + "ci": "npm run js:ci -s && npm run styles:ci -s", + "dev": "npm run config:dev && npm run js:dev && npm run styles:dev && npm run templates:dev", + "staging": "npm run config:staging && npm run js:build && npm run styles:build && npm run templates:build", + "build": "npm run config:build && npm run js:build && npm run styles:build && npm run templates:build", + "watch": "npm run dev && npm-run-all -p js:watch styles:watch templates:watch", "js:ci": "eslint app/\\*\\*/\\*.js", - "scss": "node-sass app/style.scss -o public/css/ --source-map-embed", - "scss:ci": "sass-lint app/\\*\\*/\\*.scss -v -q", - "styles": "npm run scss && npm run autoprefix", - "autoprefix": "postcss -u autoprefixer -r public/css/style.css", - "watch:js": "watchify ./app/app.js -d -o public/js/bundle.js -v", - "watch:sass": "onchange app/\\*\\*/\\*.scss -- npm run styles", - "build:js": "uglifyjs public/js/bundle.js -m -c -o public/js/bundle.js", - "build:scss": "node-sass app/style.scss --output-style compressed -o public/css/", - "build:css": "npm run build:scss && npm run autoprefix", - "build": "npm run build:js && npm run build:css", - "develop": "npm run styles && npm run js", - "test": "npm run js:ci -s && npm run scss:ci -s" + "js:dev": "browserify ./app/app.js -d > ./public/js/bundle.js", + "js:build": "npm run js:dev && uglifyjs public/js/bundle.js -m -c -o public/js/bundle.js", + "js:watch": "onchange app/\\*\\*/\\*.js -- npm run js:dev", + "styles:ci": "sass-lint app/\\*\\*/\\*.scss -v -q", + "styles:dev": "node-sass app/style.scss -o public/css/ --source-map-embed && npm run styles:autoprefix", + "styles:build": "node-sass app/style.scss --output-style compressed -o public/css/ && npm run styles:autoprefix", + "styles:watch": "onchange app/\\*\\*/\\*.scss -- npm run styles:dev", + "styles:autoprefix": "postcss -u autoprefixer -r public/css/style.css", + "templates:dev": "gulp templates", + "templates:build": "gulp templates", + "templates:watch": "onchange app/\\*\\*/\\*.html -- npm run templates:dev", + "config:dev": "gulp config:dev", + "config:staging": "gulp config:staging", + "config:build": "gulp config:build" } } diff --git a/public/index.html b/public/index.html index e12f96f..3de5cad 100644 --- a/public/index.html +++ b/public/index.html @@ -1,33 +1,37 @@ - - - - + + + + + - - - My AngularJS App - - - + + + My AngularJS App + + + + + + + - - + -
+ -
Angular seed app: v
+ + + + - - - -