From cf67268388b2a3495044ee15172530b33c68b177 Mon Sep 17 00:00:00 2001 From: Marcin Kwiatkowski Date: Thu, 20 Apr 2017 19:37:30 +0200 Subject: [PATCH] Add support for automatic generation of sass documentation via sasdoc --- Readme.md | 9 + generators/app/index.js | 8 + generators/app/templates/_package.json | 9 +- .../app/templates/_webpack.docs.config.js | 9 + generators/app/templates/dev/sassdoc.js | 6 + generators/app/templates/docs/index.html | 16 ++ generators/app/templates/docs/main.js | 0 generators/app/templates/gitignore | 3 +- .../src/assets/styles/base/_base.scss | 2 +- .../src/assets/styles/base/_variables.scss | 160 +++++++++++++----- package.json | 5 +- 11 files changed, 177 insertions(+), 50 deletions(-) create mode 100644 generators/app/templates/_webpack.docs.config.js create mode 100644 generators/app/templates/dev/sassdoc.js create mode 100644 generators/app/templates/docs/index.html create mode 100644 generators/app/templates/docs/main.js diff --git a/Readme.md b/Readme.md index 16131ee..d9ac5b9 100644 --- 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 index 46051a7..c55cb3d 100644 --- 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 index cb5e6b7..6543a47 100644 --- 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 new file mode 100644 index 0000000..c03b50d --- /dev/null +++ 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 new file mode 100644 index 0000000..e87ce8f --- /dev/null +++ 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 new file mode 100644 index 0000000..fd77b43 --- /dev/null +++ b/generators/app/templates/docs/index.html @@ -0,0 +1,16 @@ + + + + + Project documentation + + +

Project documentation:

+ + + + diff --git a/generators/app/templates/docs/main.js b/generators/app/templates/docs/main.js new file mode 100644 index 0000000..e69de29 diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore index 746f6f0..f1a93f0 100644 --- a/generators/app/templates/gitignore +++ b/generators/app/templates/gitignore @@ -2,4 +2,5 @@ node_modules/ dist/ .idea/ dev/reports/ -npm-debug.log \ No newline at end of file +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 index 8ac9b88..2271e91 100644 --- 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 index 90765ef..832e697 100644 --- 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 +/// @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 index f1891d9..8918535 100644 --- 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",