Skip to content
This repository was archived by the owner on Apr 22, 2025. It is now read-only.

Commit cf67268

Browse files
RetroModernDevRetroModernDev
committed
Add support for automatic generation of sass documentation via sasdoc
1 parent bd51aa0 commit cf67268

File tree

11 files changed

+177
-50
lines changed

11 files changed

+177
-50
lines changed

‎Readme.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- HTML linting via html-validator
1414
- Web accessibility linting via AccessSniff
1515
- Ability to unit test JavaScript code via Karma and Jasmine
16+
- Automatic generation of sass documentation via sassdoc
1617

1718
## Installation
1819
```bash
@@ -75,3 +76,11 @@ If you want run only one kind of a test you can use one of these commands:
7576
##### Web accessibility linting
7677

7778
`$ npm start accessibility`
79+
80+
#### Creating sass documentation
81+
82+
`$ npm run sassdoc`
83+
84+
#### Open server to preview documentation
85+
86+
`$ npm run docsserver`

‎generators/app/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ module.exports = class extends Generator {
4949
this.templatePath('_webpack.config.js'),
5050
this.destinationPath('webpack.config.js')
5151
);
52+
this.fs.copy(
53+
this.templatePath('_webpack.docs.config.js'),
54+
this.destinationPath('webpack.docs.config.js')
55+
);
5256
this.fs.copy(
5357
this.templatePath('design/**'),
5458
this.destinationPath('design')
@@ -65,6 +69,10 @@ module.exports = class extends Generator {
6569
this.templatePath('test/**'),
6670
this.destinationPath('test')
6771
);
72+
this.fs.copy(
73+
this.templatePath('docs/**'),
74+
this.destinationPath('docs')
75+
);
6876
}
6977

7078
install () {

‎generators/app/templates/_package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
"main": "index.js",
66
"scripts": {
77
"prestart": "npm rebuild node-sass",
8-
"start": "webpack-dev-server --inline --content-base dist/",
8+
"start": "webpack-dev-server --inline --content-base dist/ --open",
99
"eslint": "./node_modules/.bin/eslint src/*.js",
1010
"accessibility": "node ./dev/accessibility-validation.js",
1111
"htmllint": "node ./dev/html-validator.js",
1212
"sasslint": "node ./node_modules/sass-lint/bin/sass-lint.js -v -q",
1313
"test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint && npm run sasslint",
14-
"build": "rm -rf dist/ && webpack -p"
14+
"build": "rm -rf dist/ && webpack -p",
15+
"sassdoc": "node ./dev/sassdoc.js",
16+
"docsserver": "npm run sassdoc && webpack-dev-server --port 8010 --config webpack.docs.config.js --content-base ./docs/ --open"
1517
},
1618
"keywords": [
1719
"frontend",
@@ -48,7 +50,8 @@
4850
"style-loader": "^0.13.2",
4951
"url-loader": "^0.5.8",
5052
"webpack": "^2.2.1",
51-
"webpack-dev-server": "^2.0.0-beta"
53+
"webpack-dev-server": "^2.0.0-beta",
54+
"sassdoc": "^2.2.2"
5255
},
5356
"dependencies": {}
5457
}

‎generators/app/templates/_webpack.docs.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var path = require('path');
2+
module.exports = {
3+
entry: {
4+
app: ["./docs/main.js"]
5+
},
6+
output: {
7+
path: path.resolve(__dirname, "docs")
8+
}
9+
};

‎generators/app/templates/dev/sassdoc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var sassdoc = require('sassdoc');
2+
var source = './src/**/*.scss';
3+
var config = {
4+
dest: './docs/sass'
5+
};
6+
sassdoc(source, config);

‎generators/app/templates/docs/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Project documentation</title>
6+
</head>
7+
<body>
8+
<h1>Project documentation:</h1>
9+
10+
<ul>
11+
<li>
12+
<a href="sass/">Sass cods</a>
13+
</li>
14+
</ul>
15+
</body>
16+
</html>

‎generators/app/templates/docs/main.js‎

Whitespace-only changes.

‎generators/app/templates/gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules/
22
dist/
33
.idea/
44
dev/reports/
5-
npm-debug.log
5+
npm-debug.log
6+
docs/sass

‎generators/app/templates/src/assets/styles/base/_base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body {
99

1010
.container {
1111
width: 100%;
12-
padding: 0 15px;
12+
padding: 0 $indent-base;
1313
}
1414

1515
.ui-section {

‎generators/app/templates/src/assets/styles/base/_variables.scss‎

Lines changed: 117 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,117 @@
1-
$font-family-base: 'Josefin Sans', sans-serif;
2-
3-
$indent-xs: 5px;
4-
$indent-s: 10px;
5-
$indent-base: 15px;
6-
$indent-l: 20px;
7-
$indent-xl: 30px;
8-
9-
$font-size-s: 12px;
10-
$font-size-base: 14px;
11-
$font-size-l: 16px;
12-
$font-size-xl: 18px;
13-
$font-size-xxl: 20px;
14-
15-
$line-height-xs: 14px;
16-
$line-height-s: 16px;
17-
$line-height-base: 18px;
18-
$line-height-l: 22px;
19-
20-
21-
$color-white: #fff;
22-
$color-dark: #303030;
23-
$color-primary: #E61FB6;
24-
$color-secondary: #08E1DE;
25-
$color-secondary-dark: #149493;
26-
$color-alternative: #AE9518;
27-
$color-alternative-dark: #947E0D;
28-
$color-typography: $color-dark;
29-
30-
$action-default-color: $color-dark;
31-
$action-default-border-radius: 25px;
32-
$action-default-font-weight: 600;
33-
$action-default-hover-border: $color-dark;
34-
$action-default-hover-color: $color-dark;
35-
$action-default-hover-bg: transparent;
36-
37-
$action-primary-color: $color-white;
38-
$action-primary-bg: $color-primary;
39-
$action-primary-border: $color-primary;
40-
41-
$action-secondary-color: $color-white;
42-
$action-secondary-bg: $color-secondary;
43-
$action-secondary-border: $color-secondary;
1+
/// Project variables
2+
/// @author Marcin Kwiatkowski <contact@frodigo.com>
3+
/// @group variables
4+
5+
/// @prop {string} $font-family-base ['Josefin Sans', sans-serif] - base font family
6+
$font-family-base: 'Josefin Sans', sans-serif !default;
7+
8+
/// @prop {string} $index-xs [5px] - extra small indent
9+
$indent-xs: 5px !default;
10+
11+
/// @prop {string} $index-s [10px] - small indent
12+
$indent-s: 10px !default;
13+
14+
/// @prop {string} $index-base [15px] - base indent
15+
$indent-base: 15px !default;
16+
17+
/// @prop {string} $index-l [20px] - large indent
18+
$indent-l: 20px !default;
19+
20+
/// @prop {string} $index-xl [30px] - extra large indent
21+
$indent-xl: 30px !default;
22+
23+
/// @prop {string} $font-size-xs [10px] - extra small font size
24+
$font-size-xs: 10px !default;
25+
26+
/// @prop {string} $font-size-s [12px] - small font size
27+
$font-size-s: 12px !default;
28+
29+
/// @prop {string} $font-size-base [14px] - base font size
30+
$font-size-base: 14px !default;
31+
32+
/// @prop {string} $font-size-l [16px] - large font size
33+
$font-size-l: 16px !default;
34+
35+
/// @prop {string} $font-size-xl [18px] - extra large font size
36+
$font-size-xl: 18px !default;
37+
38+
/// @prop {string} $font-size-xxl [20px] - xxl font size
39+
$font-size-xxl: 20px !default;
40+
41+
/// @prop {string} $line-height-xs [10px] - extra small line-height
42+
$line-height-xs: 10px !default;
43+
44+
/// @prop {string} $line-height-s [12px] - small line-height
45+
$line-height-s: 12px !default;
46+
47+
/// @prop {string} $line-height-base [14px] - base line-height
48+
$line-height-base: 14px !default;
49+
50+
/// @prop {string} $line-height-l [16px] - large line-height
51+
$line-height-l: 16px !default;
52+
53+
/// @prop {string} $line-height-xl [18px] - extra large line-height
54+
$line-height-xl: 18px !default;
55+
56+
/// @prop {string} $line-height-xxl [20px] - xxl line-height
57+
$line-height-xxl: 20px !default;
58+
59+
/// @prop {string} $color-white [#fff] - white color
60+
$color-white: #fff !default;
61+
62+
/// @prop {string} $color-dark [#303030] - dark color
63+
$color-dark: #303030 !default;
64+
65+
/// @prop {string} $color-primary [#E61FB6] - primary color
66+
$color-primary: #E61FB6 !default;
67+
68+
/// @prop {string} $color-secondary [#08E1DE] - secondary color
69+
$color-secondary: #08E1DE !default;
70+
71+
/// @prop {string} $color-secondary-dark [#149493] - secondary dark color
72+
$color-secondary-dark: #149493 !default;
73+
74+
/// @prop {string} $color-alternative [#AE9518] - alternative color
75+
$color-alternative: #AE9518 !default;
76+
77+
/// @prop {string} $color-alternative-dark [#947E0D] - alternative dark color
78+
$color-alternative-dark: #947E0D !default;
79+
80+
/// @prop {string} $color-typography [$color-dark] - default typography color
81+
$color-typography: $color-dark !default;
82+
83+
/// @prop {string} $action-default-color [$color-dark] - default action font color
84+
$action-default-color: $color-dark !default;
85+
86+
/// @prop {string} $action-default-border-radius [25px] - default action border radius
87+
$action-default-border-radius: 25px !default;
88+
89+
/// @prop {number} $action-default-font-weight [600] - default action font weight
90+
$action-default-font-weight: 600 !default;
91+
92+
/// @prop {string} $action-default-hover-border [$color-dark] - default action border color on hover
93+
$action-default-hover-border: $color-dark !default;
94+
95+
/// @prop {string} $action-default-hover-color [$color-dark] - default action font color on hover
96+
$action-default-hover-color: $color-dark !default;
97+
98+
/// @prop {string} $action-default-hover-bg [transparent] - default action background color on hover
99+
$action-default-hover-bg: transparent !default;
100+
101+
/// @prop {string} $action-primary-color [$color-white] - primary action font color
102+
$action-primary-color: $color-white !default;
103+
104+
/// @prop {string} $action-primary-bg [$color-primary] - primary action background color
105+
$action-primary-bg: $color-primary !default;
106+
107+
/// @prop {string} $action-primary-border [$action-primary-border] - primary action border color
108+
$action-primary-border: $color-primary !default;
109+
110+
/// @prop {string} $action-secondary-color [$color-white] - secondary action font color
111+
$action-secondary-color: $color-white !default;
112+
113+
/// @prop {string} $action-secondary-bg [$color-secondary] - secondary action background color
114+
$action-secondary-bg: $color-secondary !default;
115+
116+
/// @prop {string} $action-secondary-border [$color-secondary] - secondary action border color
117+
$action-secondary-border: $color-secondary !default;

0 commit comments

Comments
 (0)