#WB add sass compiler + add logger

README.md

@@ -1,6 +1,6 @@
 # web-boost
 
-<img src="https://github.com/ddimitrioglo/web-boost/blob/dev/web-boost-logo.svg" width="200"/>
+<img src="https://cdn.rawgit.com/ddimitrioglo/web-boost/master/web-boost-logo.svg" width="200"/>
 
 `web-boost` - boost your static site development.
 
@@ -10,10 +10,18 @@ Web-boost is a static site generator with page-speed optimisations. You build a
 and routing - web-boost will compile it into highly optimised static pages.
 
 * Uglify, concat & minify `javascript` files
-* Compile, concat & minify `scss`/`css` files
+* Compile, concat & minify `css`/`scss`/`sass` files
 * Compile & minify `twig` templates
 * Optimise `.jpg` and `.png` files
 
+> To speed-up compilation, all the minified files (`.min.css` and `.min.js`) will be just concatenated
+
+### Installation
+
+`npm install -g web-boost`
+
+> Global installation is preferable but not required
+
 ### Usage
 
 * Generate application with `web-boost-cli` (see [user guide][1]) or create it yourself by following the [structure][2]

bin/compile.js

@@ -7,6 +7,7 @@ const pngquant = require('imagemin-pngquant');
 const jpegRecompress = require('imagemin-jpeg-recompress');
 const Route = require('../src/route');
 const config = require('../src/config');
+const logger = require('../src/logger');
 const appPath = process.cwd();
 
 /**
@@ -32,7 +33,7 @@ Promise.all(promises).then(() => {
     ]
   })
 }).then(() => {
-  console.log('Compilation finished');
+  logger.log('Compilation finished');
 }).catch(err => {
   throw err;
 });

cli-component/index.js

@@ -14,16 +14,15 @@ if (!appName || !destination) {
 
 const sourcePath = path.join(__dirname, 'skeleton');
 const destinationPath = path.resolve(process.cwd(), destination);
+const appPackageJson = path.join(destination, 'package.json');
 
 fse.copy(sourcePath, destinationPath).then(() => {
-  const packageSrc = JSON.parse(
-    fs.readFileSync(path.join(destination, 'package.json.tmpl'))
-  );
-  const packageOut = JSON.stringify(
-    packageSrc, (key, val) => (key === 'name') ? appName : val, 2
-  );
-
-  fs.writeFileSync(path.join(destination, 'package.json'), packageOut);
+  fs.renameSync(`${appPackageJson}.tmpl`, appPackageJson);
+
+  const packageSrc = JSON.parse(fs.readFileSync(appPackageJson));
+  const packageOut = JSON.stringify(packageSrc, (key, val) => (key === 'name') ? appName : val, 2);
+
+  fs.writeFileSync(appPackageJson, packageOut);
 
   console.log(`${appName} successfully generated (cd ${destinationPath})`);
 }).catch(err => {

cli-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-boost-cli",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Web-boost application generator",
   "bin": {
     "web-boost-cli": "./index.js"

cli-component/skeleton/assets/styles/index.scss

@@ -1,4 +1,4 @@
-$primary-color: green;
+@import './styles/variables';
 
 .jumbotron {
   margin: 40px 20px;

cli-component/skeleton/assets/styles/user.scss

@@ -1,4 +1,4 @@
-$primary-color: blue;
+@import './styles/variables';
 
 .jumbotron {
   margin: 40px 20px;

cli-component/skeleton/assets/styles/variables.scss

@@ -0,0 +1 @@
+$primary-color: blue;

cli-component/skeleton/package.json.tmpl

@@ -3,10 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/.bin/wb-run",
-    "compile": "node node_modules/.bin/wb-compile"
+    "start": "node node_modules/web-boost/bin/run.js",
+    "compile": "node node_modules/web-boost/bin/compile.js"
   },
   "devDependencies": {
-    "web-boost": "^1.0.0"
+    "web-boost": "^1.1.0"
   }
 }

docs/faq.md

@@ -1,3 +1,9 @@
 # Frequently asked questions
 
-To be updated...
+* **How do I get the route name from the template?**
+
+    Yes, there is a build-in variable `routeName`, so you can use it in your templates `{{ routeName }}`
+
+* **Is @import supported in .scss/.sass files?**
+
+    Yes, just provide a path related to "app.assets" directory. Ex: `@import './styles/variables';`

docs/structure.md

@@ -3,43 +3,49 @@
 ### App structure
 
 ```text
-app                           // Root of your application
-├─ assets                     // Assets source directory
-│  ├─ img                     // Image folder
+app/                          # Root of your application
+├─ assets/                    # Source directory for all assets
+│  ├─ img/                    # Image folder
+│  ├─ fonts/                  # Fonts folder
 │  ├─ index.js
 │  └─ index.scss
-├─ views                      // Templates directory
+├─ views/                     # Templates directory
 │  ├─ index.twig
 │  └─ layout.twig
-├─ public                     // Compiled assets directory 
-├─ web-boost.json             // Web-boost configuration file
+├─ public/                    # Destination directory for compiled/minimized assets 
+├─ web-boost.json             # Web-boost configuration file
 └─ package.json
 ```
-> Image folder is always `img` which is relative to "app.assets" (supported `.jpg` and `.png`)
+> Image folder is **always** `img` (**not** `imgs`, `images` etc.) which is relative to "app.assets" (supported `.jpg` and `.png`)
 
 ### Configuration file (`web-boost.json`)
 
 ```text
 {
-  "app": {                    // Application config object [Optional] 
-    "views": "views",         // Templates directory [Optional, default: "views"]
-    "public": "public",       // Compiled assets directory [Optional, default: "public"]
-    "assets": "assets"        // Assets source directory [Optional, default: "assets"]
+  "$": {                      # Global config object [Optional]
+    "common": [               # Common assets block (accessible via "$.common" across config)
+      "styles/bootstrap.min.css",
+      "styles/main.scss"
+    ]
   },
-  "routes": {                 // A list of web-boost application routes [Required]
-    "/": {                    // Route slug [Required]
-      "view": "index.twig",   // View to render (relative to "app.views") [Required]
-      "vars": {               // View variables [Optional, default: {}]
+  "app": {                    # Application config object [Optional] 
+    "views": "views",         # Templates directory [Optional, default: "views"]
+    "assets": "assets"        # Assets source directory [Optional, default: "assets"]
+  },
+  "routes": {                 # A list of web-boost application routes [Required]
+    "/": {                    # Route slug [Required]
+      "view": "index.twig",   # View to render (relative to "app.views") [Required]
+      "vars": {               # View variables [Optional, default: {}]
         "name": "John",       
-        "age": "26"           // Example: "<p>{{ age }}-Year-Old {{ name }} liked our repo ;)</p>"
+        "age": "26"           # Example: "<p>{{ age }}-Year-Old {{ name }} liked our repo ;)</p>"
       },
-      "assets": {             // Route specific assets [Optional, default: {}]
-        "js/index.min.js": [  // Assets destination file (relative to "app.public")
-          "js/main.js",       // Assets source files (relative to "app.assets")
-          "js/index.js"       // js/main.js + js/index.js => js/index.min.js
+      "assets": {             # Route specific assets [Optional, default: {}]
+        "js/index.min.js": [  # Assets destination file (relative to "app.public")
+          "$.common",         # Common assets block == ["styles/bootstrap.min.css", "styles/main.scss"]
+          "js/index.js"
         ],
         "css/index.min.css": [
-          "styles/main.scss", // styles/main.scss + styles/index.scss => css/index.min.css
+          "styles/main.scss", # styles/main.scss + styles/index.scss => css/index.min.css
           "styles/index.scss" 
         ]
       }

helpers/twig.js

@@ -1,12 +1,17 @@
 'use strict';
 
 const Twig = require('twig');
+const logger = require('../src/logger');
 
 /**
  * Twig configuration
  */
 Twig.extendFunction('asset', (asset) => {
-  return asset.replace(/^@/, '/');
+  try {
+    return asset.replace(/^@/, '/');
+  } catch (error) {
+    logger.error(`'asset()' syntax error: ${error.message}`);
+  }
 });
 
 module.exports = Twig;

index.js

@@ -4,6 +4,7 @@
 
 const Route = require('./src/route');
 const config = require('./src/config');
+const logger = require('./src/logger');
 const express = require('express');
 
 const app = express();
@@ -20,6 +21,7 @@ config.init(appPath);
 app.set('views', config.getPath('app.views'));
 app.use('/', express.static(config.getPath('app.public')));
 app.use('/img', express.static(config.getPath('app.assets', 'img')));
+app.use('/fonts', express.static(config.getPath('app.assets', 'fonts')));
 
 /**
  * Init web-boost routes
@@ -30,7 +32,9 @@ const appRoutes = Object.keys(routes).map(route => new Route(route, routes[route
 /**
  * Trigger assets compilation
  */
-Promise.all(appRoutes.map(route => route.packAssets())).catch(err => { throw err; });
+Promise.all(appRoutes.map(route => route.packAssets()))
+  .then(() => logger.info('Ok'))
+  .catch(err => handleError(err));
 
 /**
  * Init app routes
@@ -45,3 +49,15 @@ appRoutes.forEach(route => {
  * Listen server
  */
 app.listen(port);
+
+/**
+ * @param {Error} error
+ */
+function handleError(error) {
+  let errorMsg = error.message;
+  if (error.code === 'ENOENT') {
+    errorMsg = `${error.path.replace(`${appPath}/`, '@')} does not exist`;
+  }
+
+  logger.error(errorMsg);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-boost",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Static site generator with page-speed optimisations",
   "main": "index.js",
   "bin": {

src/asset-factory.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const config = require('./config');
 const JsAsset = require('./js-asset');
 const ScssAsset = require('./scss-asset');
 
@@ -9,15 +10,17 @@ class AssetFactory {
    * @return {*}
    */
   static create(file) {
+    let assetsPath = config.getPath('app.assets');
     let type = file.getExt();
 
     switch (type) {
-      case '.sass':
       case '.less':
         throw Error(`'${type}' is not supported`);
+      case '.sass':
+        return new ScssAsset(file, { includePaths: [assetsPath], indentedSyntax: true });
       case '.scss':
       case '.css':
-        return new ScssAsset(file);
+        return new ScssAsset(file, { includePaths: [assetsPath] });
       case '.js':
         return new JsAsset(file);
       default:

src/file.js

@@ -73,7 +73,7 @@ class File {
    */
   getLocalContent() {
     return new Promise((resolve, reject) => {
-      fse.readFile(this.fullPath(), null, (err, data) => {
+      fse.readFile(this.fullPath(), (err, data) => {
         return err ? reject(err) : resolve(data);
       });
     });

src/logger.js

@@ -0,0 +1,71 @@
+'use strict';
+
+class Logger {
+  /**
+   * @param message
+   */
+  static log(message) {
+    Logger._log(Logger.LOG, message);
+  }
+
+  /**
+   * @param message
+   */
+  static info(message) {
+    Logger._log(Logger.INFO, message);
+  }
+
+  /**
+   * @param {String} message
+   */
+  static error(message) {
+    Logger._log(Logger.ERROR, message);
+  }
+
+  /**
+   * @param {String} type
+   * @param {String} message
+   * @private
+   */
+  static _log(type, message) {
+    const time = `[${(new Date()).toISOString()}]`;
+
+    switch (type) {
+      case Logger.LOG:
+        console.log('✅', time, message);
+        break;
+      case Logger.INFO:
+        console.log('💡', time, message);
+        break;
+      case Logger.ERROR:
+        console.log('❌', time, message);
+        break;
+    }
+  }
+
+  /**
+   * @returns {String}
+   * @constructor
+   */
+  static get LOG() {
+    return 'log';
+  }
+
+  /**
+   * @returns {String}
+   * @constructor
+   */
+  static get INFO() {
+    return 'info';
+  }
+
+  /**
+   * @returns {String}
+   * @constructor
+   */
+  static get ERROR() {
+    return 'error';
+  }
+}
+
+module.exports = Logger;

src/route.js

@@ -13,8 +13,8 @@ class Route {
   constructor(path, options) {
     this._path = path;
     this._view = options.view;
-    this._vars = options.vars || {};
     this._assets = options.assets || {};
+    this._vars = Object.assign({ routeName: path }, options.vars);
   }
 
   /**
@@ -80,9 +80,9 @@ class Route {
     });
 
     let promises = assetsList.map(assetPath => {
-      return AssetFactory.create(
-        new File(config.getPath('app.assets', assetPath))
-      );
+      const file = new File(config.getPath('app.assets', assetPath));
+
+      return AssetFactory.create(file);
     }).map(asset => {
       return asset.minify().then(content => Promise.resolve(Buffer.from(content, 'utf8')));
     });