Add support for automatic generation of sass documentation via sasdoc

Frodigo · Apr 20, 2017 · cf67268 · cf67268
1 parent bd51aa0
commit cf67268
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 50 deletions.
diff --git a/Readme.md b/Readme.md
@@ -13,6 +13,7 @@
 - HTML linting via html-validator
 - Web accessibility linting via AccessSniff
 - Ability to unit test JavaScript code via Karma and Jasmine
+- Automatic generation of sass documentation via sassdoc
 
 ## Installation
 ```bash
@@ -75,3 +76,11 @@ If you want run only one kind of a test you can use one of these commands:
 ##### Web accessibility linting
 
 `$ npm start accessibility`
+
+#### Creating sass documentation
+
+`$ npm run sassdoc`
+
+#### Open server to preview documentation
+
+`$ npm run docsserver`
diff --git a/generators/app/index.js b/generators/app/index.js
@@ -49,6 +49,10 @@ module.exports = class extends Generator {
             this.templatePath('_webpack.config.js'),
             this.destinationPath('webpack.config.js')
         );
+        this.fs.copy(
+            this.templatePath('_webpack.docs.config.js'),
+            this.destinationPath('webpack.docs.config.js')
+        );
         this.fs.copy(
             this.templatePath('design/**'),
             this.destinationPath('design')
@@ -65,6 +69,10 @@ module.exports = class extends Generator {
             this.templatePath('test/**'),
             this.destinationPath('test')
         );
+        this.fs.copy(
+            this.templatePath('docs/**'),
+            this.destinationPath('docs')
+        );
     }
 
     install  () {

diff --git a/generators/app/templates/_package.json b/generators/app/templates/_package.json
@@ -5,13 +5,15 @@
   "main": "index.js",
   "scripts": {
     "prestart": "npm rebuild node-sass",
-    "start": "webpack-dev-server --inline --content-base dist/",
+    "start": "webpack-dev-server --inline --content-base dist/ --open",
     "eslint": "./node_modules/.bin/eslint src/*.js",
     "accessibility": "node ./dev/accessibility-validation.js",
     "htmllint": "node ./dev/html-validator.js",
     "sasslint": "node ./node_modules/sass-lint/bin/sass-lint.js -v -q",
     "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint && npm run sasslint",
-    "build": "rm -rf dist/ && webpack -p"
+    "build": "rm -rf dist/ && webpack -p",
+    "sassdoc": "node ./dev/sassdoc.js",
+    "docsserver": "npm run sassdoc && webpack-dev-server --port 8010 --config webpack.docs.config.js --content-base ./docs/ --open"
   },
   "keywords": [
     "frontend",
@@ -48,7 +50,8 @@
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.0.0-beta"
+    "webpack-dev-server": "^2.0.0-beta",
+    "sassdoc": "^2.2.2"
   },
   "dependencies": {}
 }
diff --git a/generators/app/templates/_webpack.docs.config.js b/generators/app/templates/_webpack.docs.config.js
@@ -0,0 +1,9 @@
+var path = require('path');
+module.exports = {
+    entry: {
+        app: ["./docs/main.js"]
+    },
+    output: {
+        path: path.resolve(__dirname, "docs")
+    }
+};
diff --git a/generators/app/templates/dev/sassdoc.js b/generators/app/templates/dev/sassdoc.js
@@ -0,0 +1,6 @@
+var sassdoc = require('sassdoc');
+var source = './src/**/*.scss';
+var config = {
+    dest: './docs/sass'
+};
+sassdoc(source, config);
diff --git a/generators/app/templates/docs/index.html b/generators/app/templates/docs/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Project documentation</title>
+</head>
+<body>
+    <h1>Project documentation:</h1>
+
+    <ul>
+        <li>
+            <a href="sass/">Sass cods</a>
+        </li>
+    </ul>
+</body>
+</html>
diff --git a/generators/app/templates/docs/main.js b/generators/app/templates/docs/main.js
diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore
@@ -2,4 +2,5 @@ node_modules/
 dist/
 .idea/
 dev/reports/
-npm-debug.log
+npm-debug.log
+docs/sass
diff --git a/generators/app/templates/src/assets/styles/base/_base.scss b/generators/app/templates/src/assets/styles/base/_base.scss
@@ -9,7 +9,7 @@ body {
 
 .container {
     width: 100%;
-    padding: 0 15px;
+    padding: 0 $indent-base;
 }
 
 .ui-section {

diff --git a/generators/app/templates/src/assets/styles/base/_variables.scss b/generators/app/templates/src/assets/styles/base/_variables.scss
@@ -1,43 +1,117 @@
-$font-family-base:              'Josefin Sans', sans-serif;
-
-$indent-xs:                     5px;
-$indent-s:                      10px;
-$indent-base:                   15px;
-$indent-l:                      20px;
-$indent-xl:                     30px;
-
-$font-size-s:                   12px;
-$font-size-base:                14px;
-$font-size-l:                   16px;
-$font-size-xl:                  18px;
-$font-size-xxl:                 20px;
-
-$line-height-xs:                14px;
-$line-height-s:                 16px;
-$line-height-base:              18px;
-$line-height-l:                 22px;
-
-
-$color-white:                   #fff;
-$color-dark:                    #303030;
-$color-primary:                 #E61FB6;
-$color-secondary:               #08E1DE;
-$color-secondary-dark:          #149493;
-$color-alternative:             #AE9518;
-$color-alternative-dark:        #947E0D;
-$color-typography:              $color-dark;
-
-$action-default-color:          $color-dark;
-$action-default-border-radius:  25px;
-$action-default-font-weight:    600;
-$action-default-hover-border:   $color-dark;
-$action-default-hover-color:    $color-dark;
-$action-default-hover-bg:       transparent;
-
-$action-primary-color:          $color-white;
-$action-primary-bg:             $color-primary;
-$action-primary-border:         $color-primary;
-
-$action-secondary-color:        $color-white;
-$action-secondary-bg:           $color-secondary;
-$action-secondary-border:       $color-secondary;
+/// Project variables
+/// @author Marcin Kwiatkowski <contact@frodigo.com>
+/// @group variables
+
+/// @prop {string} $font-family-base ['Josefin Sans', sans-serif] - base font family
+$font-family-base:              'Josefin Sans', sans-serif !default;
+
+/// @prop {string} $index-xs [5px] - extra small indent
+$indent-xs:                     5px !default;
+
+/// @prop {string} $index-s [10px] - small indent
+$indent-s:                      10px !default;
+
+/// @prop {string} $index-base [15px] - base indent
+$indent-base:                   15px !default;
+
+/// @prop {string} $index-l [20px] - large indent
+$indent-l:                      20px !default;
+
+/// @prop {string} $index-xl [30px] - extra large indent
+$indent-xl:                     30px !default;
+
+/// @prop {string} $font-size-xs [10px] - extra small font size
+$font-size-xs:                   10px !default;
+
+/// @prop {string} $font-size-s [12px] - small font size
+$font-size-s:                   12px !default;
+
+/// @prop {string} $font-size-base [14px] - base font size
+$font-size-base:                14px !default;
+
+/// @prop {string} $font-size-l [16px] - large font size
+$font-size-l:                   16px !default;
+
+/// @prop {string} $font-size-xl [18px] - extra large font size
+$font-size-xl:                  18px !default;
+
+/// @prop {string} $font-size-xxl [20px] - xxl font size
+$font-size-xxl:                 20px !default;
+
+/// @prop {string} $line-height-xs [10px] - extra small line-height
+$line-height-xs:                10px !default;
+
+/// @prop {string} $line-height-s [12px] - small line-height
+$line-height-s:                 12px !default;
+
+/// @prop {string} $line-height-base [14px] - base line-height
+$line-height-base:              14px !default;
+
+/// @prop {string} $line-height-l [16px] - large line-height
+$line-height-l:                 16px !default;
+
+/// @prop {string} $line-height-xl [18px] - extra large line-height
+$line-height-xl:                18px !default;
+
+/// @prop {string} $line-height-xxl [20px] - xxl line-height
+$line-height-xxl:               20px !default;
+
+/// @prop {string} $color-white [#fff] - white color
+$color-white:                   #fff !default;
+
+/// @prop {string} $color-dark [#303030] - dark color
+$color-dark:                    #303030 !default;
+
+/// @prop {string} $color-primary [#E61FB6] - primary color
+$color-primary:                 #E61FB6 !default;
+
+/// @prop {string} $color-secondary [#08E1DE] - secondary color
+$color-secondary:               #08E1DE !default;
+
+/// @prop {string} $color-secondary-dark [#149493] - secondary dark color
+$color-secondary-dark:          #149493 !default;
+
+/// @prop {string} $color-alternative [#AE9518] - alternative color
+$color-alternative:             #AE9518 !default;
+
+/// @prop {string} $color-alternative-dark [#947E0D] - alternative dark color
+$color-alternative-dark:        #947E0D !default;
+
+/// @prop {string} $color-typography [$color-dark] - default typography color
+$color-typography:              $color-dark !default;
+
+/// @prop {string} $action-default-color [$color-dark] - default action font color
+$action-default-color:          $color-dark !default;
+
+/// @prop {string} $action-default-border-radius [25px] - default action border radius
+$action-default-border-radius:  25px !default;
+
+/// @prop {number} $action-default-font-weight [600] - default action font weight
+$action-default-font-weight:    600 !default;
+
+/// @prop {string} $action-default-hover-border [$color-dark] - default action border color on hover
+$action-default-hover-border:   $color-dark !default;
+
+/// @prop {string} $action-default-hover-color [$color-dark] - default action font color on hover
+$action-default-hover-color:    $color-dark !default;
+
+/// @prop {string} $action-default-hover-bg [transparent] - default action background color on hover
+$action-default-hover-bg:       transparent !default;
+
+/// @prop {string} $action-primary-color [$color-white] - primary action font color
+$action-primary-color:          $color-white !default;
+
+/// @prop {string} $action-primary-bg [$color-primary] - primary action background color
+$action-primary-bg:             $color-primary !default;
+
+/// @prop {string} $action-primary-border [$action-primary-border] - primary action border color
+$action-primary-border:         $color-primary !default;
+
+/// @prop {string} $action-secondary-color [$color-white] - secondary action font color
+$action-secondary-color:        $color-white !default;
+
+/// @prop {string} $action-secondary-bg [$color-secondary] - secondary action background color
+$action-secondary-bg:           $color-secondary !default;
+
+/// @prop {string} $action-secondary-border [$color-secondary] - secondary action border color
+$action-secondary-border:       $color-secondary !default;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "generator-front-webpack",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Generator for modern front end apps",
   "license": "MIT",
   "files": [
@@ -16,7 +16,8 @@
     "es2015",
     "webpack",
     "karma",
-    "jasmime"
+    "jasmime",
+    "sassdoc"
   ],
   "repository": {
     "type": "git",