Merge pull request #78 from marzeelabs/release/1.0.1

Release/1.0.1

.gitignore

@@ -7,5 +7,3 @@ yarn-error.log
 Thumbs.db
 .DS_Store
 !.gitkeep
-static/css/app.css
-static/css/admin.css

README.md

@@ -19,7 +19,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
     - If after running the above command it complains that *xcode alone is not sufficient on sierra*, try running `xcode-select --install`. Note that **macOS Sierra 10.12.6 or higher and XCode 9.2 are required.**
 
 
-1. [hugo](https://gohugo.io/) v0.31.1 - builds the structure of the website based on the content setup, although we're phasing it out in favor of a fully JS/React solution. Any version over 0.27.1 should still work though.
+1. [hugo](https://gohugo.io/) v0.37.1 - builds the structure of the website based on the content setup, although we're phasing it out in favor of a fully JS/React solution. Any version over 0.27.1 should still work though.
 
     - Install:
       ```sh
@@ -30,7 +30,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
       brew update && brew upgrade hugo
       ```
 
-2. [yarn](https://yarnpkg.com/) v1.3.2 - package/dependency manager. Any version of yarn above 0.27.5 should still work though.
+2. [yarn](https://yarnpkg.com/) v1.5.1 - package/dependency manager. Any version of yarn above 0.27.5 should still work though.
 
     - Install:
       ```sh
@@ -46,7 +46,7 @@ Below are listed the versions used in Netlify to create the live, preview and br
       ```
     - Switch between yarn versions (global change):
       ```sh
-      brew switch yarn 1.3.2
+      brew switch yarn 1.5.1
       ```
 
 3. [nvm](https://github.com/creationix/nvm) v0.33.8 - (not used by Netlify), very useful to manage your locale Node.js versions.

components/SrcSet.jsx

@@ -168,17 +168,17 @@ export class SrcSetBg extends BesugoComponent {
 };
 
 const buildSrcSet = function(src) {
-  const sassConfig = require('../temp/sassConfig');
+  const sharpConfig = require('../temp/sharpConfig');
   const chunks = src.split('.');
   const ext = chunks.pop();
 
   // We don't build a srcset if we won't have any responsive images built for this src image.
-  if (sassConfig.types.indexOf(ext) === -1) {
+  if (sharpConfig.types.indexOf(ext) === -1) {
     return null;
   }
 
   const path = chunks.join('.');
-  return sassConfig.sizes.map((size) => {
+  return sharpConfig.sizes.map((size) => {
     return path + size.suffix + '.' + ext + ' ' + size.width + 'w';
   }).join(', ');
 };

components/blog/BlogPost.jsx

@@ -51,9 +51,7 @@ export default class BlogPost extends BesugoComponent {
             link: '#',
             Title: personData.getIn(['title']),
             Summary: personData.getIn(['body']),
-            Params: {
-              image: personData.getIn(['image'])
-            }
+            image: personData.getIn(['image'])
           }
         })
       };

components/people/Card.jsx

@@ -50,7 +50,7 @@ export default class PersonCard extends BesugoComponent {
           <a href={ data.link } target="_self">
             <SrcSet
               className="profile__image"
-              src={ data.Params.image }
+              src={ data.image }
               sizes="
                 (max-width: 730px) 100vw,
                 730px" />

components/people/Person.jsx

@@ -33,9 +33,7 @@ export default class Person extends BesugoComponent {
       return {
         Title: entry.getIn(['data', 'title']),
         Content: this.props.widgetFor('body'),
-        Params: {
-          image: entry.getIn(['data', 'image']) ? this.props.getAsset(entry.getIn(['data', 'image'])).toString() : '/admin/default.jpg'
-        }
+        image: entry.getIn(['data', 'image']) ? this.props.getAsset(entry.getIn(['data', 'image'])).toString() : '/admin/default.jpg'
       };
     }
 
@@ -55,15 +53,15 @@ export default class Person extends BesugoComponent {
         <div className="profile__header">
           <SrcSet
             className="profile__header__image-bg"
-            src={ data.Params.image }
+            src={ data.image }
             sizes="120vw" />
         </div>
 
         <div className="profile__header-info">
           <div className="profile__header-info__image__wrapper">
              <SrcSet
                className="profile__header-info__image"
-               src={ data.Params.image }
+               src={ data.image }
                sizes="
                 (max-width: 500px) 100vw,
                 500px" />

content/pages/about.md

@@ -1,6 +1,6 @@
 ---
 title: About page
-image: /images/example.jpg
+image: /images/uploads/example.jpg
 description: Integer iaculis tortor ut magna suscipit, in suscipit risus pharetra.
 
 ---

content/pages/about.pt.md

@@ -1,6 +1,6 @@
 ---
 title: Sobre nós
-image: /images/example.jpg
+image: /images/uploads/example.jpg
 description: Integer iaculis tortor ut magna suscipit, in suscipit risus pharetra.
 
 ---

layouts/blog/li.html

@@ -4,7 +4,7 @@
   <div class="teaser-text-side__image__wrapper">
     <a href="{{ .URL }}">
       <SrcSet
-        class="teaser-text-side__image"
+        classname="teaser-text-side__image"
         src="{{ .Params.Image }}"
         sizes="
           (max-width: 729px) 100vw,

layouts/partials/styleguide.html

@@ -90,7 +90,7 @@ <h1 class="styleguide__section-component__title">Image with text-overlay</h1>
 
       <SrcSet
         className="teaser__element"
-        src="/images/example.jpg"
+        src="/images/uploads/example.jpg"
         sizes="
           (max-width: 1024px) 100vw,
           1024px" ></SrcSet>
@@ -107,19 +107,19 @@ <h2 class="section-component__subtitle">Slider</h2>
     <SlideShow>
       <SlideShowSlide
         title="First Slide"
-        image="/images/example.jpg"
+        image="/images/uploads/example.jpg"
         link-label="Link"
         link-url="#"
       ></SlideShowSlide>
       <SlideShowSlide
         title="Second Slide"
-        image="/images/example.jpg"
+        image="/images/uploads/example.jpg"
         link-label="Link"
         link-url="#"
       ></SlideShowSlide>
       <SlideShowSlide
         title="Third Slide"
-        image="/images/example.jpg"
+        image="/images/uploads/example.jpg"
         link-label="Link"
         link-url="#"
       ></SlideShowSlide>
@@ -141,7 +141,7 @@ <h1 class="styleguide__section-component__title">Teasers in grid</h1>
 
         <SrcSet
           className="teaser__element"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 730px) 100vw,
             (max-width: 1024px) 33vw,
@@ -158,7 +158,7 @@ <h1 class="styleguide__section-component__title">Teasers in grid</h1>
 
         <SrcSet
           className="teaser__element"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 730px) 100vw,
             (max-width: 1024px) 33vw,
@@ -175,7 +175,7 @@ <h1 class="styleguide__section-component__title">Teasers in grid</h1>
 
         <SrcSet
           className="teaser__element"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 730px) 100vw,
             (max-width: 1024px) 33vw,
@@ -195,7 +195,7 @@ <h1 class="styleguide__section-component__title">Teaser with image and text side
       <div class="teaser-text-side__image__wrapper">
         <SrcSet
           className="teaser-text-side__image"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 729px) 100vw,
             (max-width: 1024px) 60vw,
@@ -217,7 +217,7 @@ <h1 class="styleguide__section-component__title">Teaser with image and text side
       <div class="teaser-text-side__image__wrapper">
         <SrcSet
           className="teaser-text-side__image"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 729px) 100vw,
             (max-width: 1024px) 60vw,
@@ -239,7 +239,7 @@ <h1 class="styleguide__section-component__title">Teaser with image and text side
       <div class="teaser-text-side__image__wrapper">
         <SrcSet
           className="teaser-text-side__image"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 729px) 100vw,
             (max-width: 1024px) 60vw,
@@ -261,7 +261,7 @@ <h1 class="styleguide__section-component__title">Teaser with image and text side
       <div class="teaser-text-side__image__wrapper">
         <SrcSet
           className="teaser-text-side__image"
-          src="/images/example.jpg"
+          src="/images/uploads/example.jpg"
           sizes="
             (max-width: 729px) 100vw,
             (max-width: 1024px) 60vw,
@@ -289,7 +289,7 @@ <h2 class="section-component__subtitle">Profile</h2>
       <div class="profile__image__wrapper">
         <SrcSet
           className="profile__image"
-          src="/images/example_profile.jpg"
+          src="/images/uploads/example_profile.jpg"
           sizes="
             (max-width: 730px) 100vw,
             730px"></SrcSet>

layouts/people/li.html

@@ -1,3 +1,3 @@
-<PersonCard link="{{ .URL }}">
+<PersonCard link="{{ .URL }}" image="{{ .Params.image }}">
   {{ jsonify . }}
 </PersonCard>

layouts/people/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<Person>
+<Person image="{{ .Params.image }}">
   {{ jsonify . }}
 </Person>
 

netlify.toml

@@ -7,22 +7,22 @@
 # Production context: All deploys to the main
 # repository branch will inherit these settings.
 [context.production.environment]
-  HUGO_VERSION = "0.31.1"
-  YARN_VERSION = "1.3.2"
+  HUGO_VERSION = "0.37.1"
+  YARN_VERSION = "1.5.1"
   YARN_FLAGS = "--no-ignore-optional"
 
 # Deploy Preview context: All Deploy Previews
 # will inherit these settings.
 [context.deploy-preview.environment]
-  HUGO_VERSION = "0.31.1"
-  YARN_VERSION = "1.3.2"
+  HUGO_VERSION = "0.37.1"
+  YARN_VERSION = "1.5.1"
   YARN_FLAGS = "--no-ignore-optional"
 
 # Branch Deploy context: All Branch Deploys
 # will inherit these settings.
 [context.branch-deploy.environment]
-  HUGO_VERSION = "0.31.1"
-  YARN_VERSION = "1.3.2"
+  HUGO_VERSION = "0.37.1"
+  YARN_VERSION = "1.5.1"
   YARN_FLAGS = "--no-ignore-optional"
 
 # Branch Deploy context: All deploys that are not in

package.json

@@ -37,53 +37,61 @@
     "erase:public": "rm -Rf ./public && mkdir ./public",
     "erase:temp": "rm -Rf ./temp && mkdir ./temp && mkdir ./temp/hugo",
     "sass:scss-compile": "node-sass scss/ -o temp/css --include-path ./node_modules",
-    "sass:postcss": "postcss temp/css/*.css -d static/css --use autoprefixer --use cssnano",
-    "build:sass": "npm-run-all -s sass:scss-compile sass:postcss",
+    "sass:postcss": "postcss temp/css/*.css -d public/css --use autoprefixer --verbose",
+    "sass:postcssnano": "postcss temp/css/*.css -d public/css --use autoprefixer --use cssnano --verbose",
+    "build:sass": "npm-run-all -s sass:scss-compile sass:postcssnano",
     "build:cms": "node scripts/cms.js",
     "build:sharp": "node scripts/sharp.js",
-    "watch:sass": "chokidar 'scss/**/*.scss' -c 'yarn build:sass'",
-    "watch:cms": "chokidar 'cms/config.yml' -c 'yarn build:cms'",
+    "compile:webpack": "webpack --watch --display none & webpack-dev-server --color",
+    "watch:sass": "chokidar 'package.json' 'scss/**/*.scss' -c 'npm-run-all -s sass:scss-compile sass:postcss dummy:refresh' --initial --silent",
+    "watch:cms": "chokidar 'scripts/cms.js' 'cms/config.yml' -c 'yarn build:cms && yarn dummy:refresh' --initial --silent",
+    "watch:sharp": "nodemon -q -w scripts/sharp.js -x 'yarn build:sharp && yarn dummy:refresh'",
     "watch:hugo": "hugo -w",
-    "watch:webpack": "webpack --watch --display none & webpack-dev-server --color --progress",
+    "watch:webpack": "nodemon -q -w webpack.config.js -x 'yarn compile:webpack'",
+    "dummy:refresh": "node scripts/dummy-refresh.js",
     "webpack": "webpack",
     "build": "export NODE_ENV=production && npm-run-all -p erase:* && npm-run-all -p build:* && hugo && webpack",
-    "start": "export NODE_ENV=development && npm-run-all -p erase:* && npm-run-all -p build:* watch:*",
+    "start:verbose": "export NODE_ENV=development && npm-run-all -p erase:* && npm-run-all -p watch:*",
+    "start": "nodemon -q -w package.json -w scripts/serve.js -w scripts/libs -w scripts/tasks -x 'node scripts/serve.js'",
     "rebuild": "rm -Rf node_modules && yarn install"
   },
   "dependencies": {
-    "autoprefixer": "^7.2.3",
+    "autoprefixer": "^8.2.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "chalk": "^2.3.0",
+    "chalk": "^2.3.2",
     "child_process": "^1.0.2",
-    "chokidar": "^1.7.0",
+    "chokidar": "^2.0.3",
     "chokidar-cli": "^1.2.0",
-    "copy-webpack-plugin": "^4.3.0",
+    "cli-spinners": "^1.1.0",
+    "copy-webpack-plugin": "^4.5.1",
     "cssnano": "^3.10.0",
     "find-and-replace": "^1.0.2",
     "glob": "^7.1.2",
-    "jquery": "^3.2.1",
-    "jsdom": "^11.5.1",
-    "node-sass": "^4.7.2",
+    "jquery": "^3.3.1",
+    "jsdom": "11.5.1",
+    "multispinner": "^0.2.1",
+    "node-sass": "^4.8.3",
+    "node-yaml": "^3.1.1",
+    "nodemon": "^1.17.2",
     "npm-run-all": "^4.1.2",
-    "parse5": "^3.0.3",
+    "parse5": "^4.0.0",
     "parse5-utils": "^2.0.0",
-    "postcss-cli": "^4.1.1",
+    "postcss-cli": "^5.0.0",
     "punycode": "^2.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-html-parser": "^2.0.2",
     "ritmo": "^0.5.0",
-    "sass-mq": "^3.2.9",
-    "sharp": "^0.18.4",
+    "sass-mq": "^4.0.2",
+    "sharp": "^0.20.1",
     "slick-carousel": "^1.8.1",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "susy": "^2.2.12",
     "toml-require": "^1.1.0",
-    "uglifyjs-webpack-plugin": "1.1.4",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.2"
   }
 }

scripts/cms.js

@@ -1,7 +1,8 @@
+const chalk = require('chalk');
 const exec = require('child_process').execSync;
-const path = require("path");
-const fs = require('fs');
 const far = require('find-and-replace');
+const fs = require('fs');
+const path = require("path");
 
 require('toml-require').install();
 const netlifyToml = require("../netlify.toml");
@@ -34,8 +35,8 @@ far
     '<% CURRENT_BRANCH %>': branch
   })
   .complete(function() {
-    console.log("Updated CMS configuration file.");
+    console.log(chalk.green("Updated CMS configuration file."));
   })
   .error(function(err) {
-    console.log(err);
+    throw err;
   });

scripts/dummy-refresh.js

@@ -0,0 +1,17 @@
+// webpack-dev-server's watchContentBase option does not recursively watch all
+// files in the directory. This file creates/rewrites an empty dummy.txt file at
+// the root of the build directory, so that WDS catches the change and refreshes
+// the pages in the browser automatically.
+
+const chalk = require('chalk');
+const fs = require('fs');
+const path = require('path');
+
+require('toml-require').install();
+const netlifyToml = require("../netlify.toml");
+
+fs.writeFile(path.resolve(netlifyToml.build.publish, 'dummy'), 'contents', function(err) {
+  if (err) {
+    console.log(chalk.red(err));
+  }
+});