tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

Documentation and linting updates

Browse Source
This commit is contained in:
Damian Mooyman 2017-03-10 11:59:38 +13:00
parent dcaef006bd
commit 23b92c8187
No known key found for this signature in database
GPG Key ID: 78B823A10DE27D1A
6 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.sass-lint.yml
View File

@ -4,7 +4,7 @@ files:
ignore: ignore:
- 'client/src/styles/legacy/*' - 'client/src/styles/legacy/*'
- 'admin/client/src/styles/legacy/*' - 'admin/client/src/styles/legacy/*'
- 'src/Dev/**/*' - 'src/**/*'
options: options:
formatter: stylish formatter: stylish
merge-default-rules: false merge-default-rules: false

4
admin/client/src/sprites/README.md
View File

@ -5,9 +5,9 @@ but there's no way to add new sprites to the system.
*Original Instructions (no longer valid)* *Original Instructions (no longer valid)*
We use sprites to handle various icons and images throughout the CMS. These are automatically generated We use sprites to handle various icons and images throughout the CMS. These are automatically generated
by running `npm run build` and can be found at `/admin/client/src/sprites/dist`. To add new by running `yarn run build` and can be found at `/admin/client/src/sprites/dist`. To add new
images to the sprites, simply add the image to the folder matching the image's size in images to the sprites, simply add the image to the folder matching the image's size in
`/admin/client/sprites` then run `npm run sprites` to generate the sprite containing your image. `/admin/client/sprites` then run `yarn run build` to generate the sprite containing your image.
Along with the new sprite containing your image, there will also be a new variable in Along with the new sprite containing your image, there will also be a new variable in
`/admin/client/styles/legacy/_sprites.scss` which you can use in your .scss file by first extending the class matching `/admin/client/styles/legacy/_sprites.scss` which you can use in your .scss file by first extending the class matching
the sprite (eg `@extend .icon-sprites-32x32;`), and then including your image using the variable the sprite (eg `@extend .icon-sprites-32x32;`), and then including your image using the variable

4
docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md
View File

@ -41,7 +41,7 @@ Check our [build tooling](/contributing/build_tooling) docs for more details.
``` ```
(cd framework && npm run build && npm run css) (cd framework && yarn run build && yarn run css)
``` ```
## Coding Conventions ## Coding Conventions
@ -504,7 +504,7 @@ to all elements with the class `.ss-ui-button`. We've extended the jQuery UI wid
to support defining icons via HTML5 data attributes (see `ssui.core.js`). to support defining icons via HTML5 data attributes (see `ssui.core.js`).
These icon identifiers relate to icon files in `framework/admin/images/sprites/src/btn-icons`, These icon identifiers relate to icon files in `framework/admin/images/sprites/src/btn-icons`,
and are sprited into a single file through SCSS and [sprity](https://www.npmjs.com/package/sprity) and are sprited into a single file through SCSS and [sprity](https://www.npmjs.com/package/sprity)
(sprites are compiled with `npm run sprites`). There are classes set up to show the correct sprite via (sprites are compiled with `yarn run build`). There are classes set up to show the correct sprite via
background images (see `framework/admin/scss/_sprites.scss`). background images (see `framework/admin/scss/_sprites.scss`).
Input: `<a href="..." class="ss-ui-button" data-icon="add" />Button text</a>` Input: `<a href="..." class="ss-ui-button" data-icon="add" />Button text</a>`

41
docs/en/05_Contributing/02_Build_Tooling.md
View File

@ -23,7 +23,10 @@ for instructions on how to get a compiler running on your platform.
[yarn](https://yarnpkg.com/) is the package manager we use for JavaScript dependencies. [yarn](https://yarnpkg.com/) is the package manager we use for JavaScript dependencies.
The configuration for an npm package goes in `package.json`. The configuration for an npm package goes in `package.json`.
You'll need to install after [Node.js is installed](https://yarnpkg.com/en/docs/install), we recommend using `npm` which comes with Node.js to install it globally. You'll need to install yarn after Node.js is installed.
See [yarn installation docs](https://yarnpkg.com/en/docs/install).
We recommend using `npm` which comes with Node.js to install it globally.
``` ```
npm install -g yarn npm install -g yarn
``` ```
@ -62,13 +65,13 @@ developers to install these tools globally. This means builds are much more cons
across development environments. across development environments.
To run an npm script, open up your terminal, change to the directory where `package.json` To run an npm script, open up your terminal, change to the directory where `package.json`
is located, and run `$ npm run <SCRIPT_NAME>`. Where `<SCRIPT_NAME>` is the name of the is located, and run `$ yarn run <SCRIPT_NAME>`. Where `<SCRIPT_NAME>` is the name of the
script you wish to run. script you wish to run.
### build ### build
``` ```
$ npm run build $ yarn run build
``` ```
Runs [Webpack](https://webpack.github.io/) to builds the core JavaScript files. Runs [Webpack](https://webpack.github.io/) to builds the core JavaScript files.
@ -78,20 +81,22 @@ Run this script with `-- --watch` to automatically rebuild on file changes.
The first `--` separator is required to separate arguments from NPM's own ones. The first `--` separator is required to separate arguments from NPM's own ones.
``` ```
$ npm run build -- --watch $ yarn run build -- --watch
``` ```
*For development only*: *For development only*:
Run this to keep webpack automatically rebuilding your file changes, this will also include *.map files for easier debugging. Run this to keep webpack automatically rebuilding your file changes, this will also include *.map files
It is important to note that this should not be used for pushing up changes, and you should run `npm run build` after you're done. for easier debugging. It is important to note that this should not be used for pushing up changes,
and you should run `yarn run build` after you're done.
``` ```
$ npm run watch $ yarn run watch
``` ```
### css ### css
``` ```
$ npm run css $ yarn run css
``` ```
Compiles all of the `.scss` files into minified `.css` files. Compiles all of the `.scss` files into minified `.css` files.
@ -100,13 +105,13 @@ Run this script with `-- --watch` to automatically rebuild on file changes.
The first `--` separator is required to separate arguments from NPM's own ones. The first `--` separator is required to separate arguments from NPM's own ones.
``` ```
$ npm run css -- --watch $ yarn run css -- --watch
``` ```
### lint ### lint
``` ```
$ npm run lint $ yarn run lint
``` ```
Run linters (`eslint` and `sass-lint`) linters to enforce Run linters (`eslint` and `sass-lint`) linters to enforce
@ -116,7 +121,7 @@ our [JavaScript](/contributing/javascript_coding_conventions) and
### test ### test
``` ```
$ npm run test $ yarn run test
``` ```
Runs the JavaScript unit tests. Runs the JavaScript unit tests.
@ -124,24 +129,12 @@ Runs the JavaScript unit tests.
### coverage ### coverage
``` ```
$ npm run coverage $ yarn run coverage
``` ```
Generates a coverage report for the JavaScript unit tests. The report is generated Generates a coverage report for the JavaScript unit tests. The report is generated
in the `coverage` directory. in the `coverage` directory.
### lock
```
$ npm run lock
```
Generates a "shrinkwrap" file containing all npm package versions and writes it to
`npm-shrinkwrap.json`. Run this command whenever a new package is added to `package.json`,
or when updating packages. Commit the resulting `npm-shrinkwrap.json`. This uses a third party
[npm-shrinkwrap](https://github.com/uber/npm-shrinkwrap) library
since the built-in `npm shrinkwrap` (without a dash) has proven unreliable.
## Requiring SilverStripe ES6 Modules in your own CMS customisation ## Requiring SilverStripe ES6 Modules in your own CMS customisation
SilverStripe creates bundles which contain many dependencies you might also SilverStripe creates bundles which contain many dependencies you might also

2
docs/en/05_Contributing/12_JavaScript_Coding_Conventions.md
View File

@ -19,7 +19,7 @@ Check our [requirements](/getting_started/server_requirements) documentation.
We follow the [AirBnB JavaScript Conventions](https://github.com/airbnb/javascript), We follow the [AirBnB JavaScript Conventions](https://github.com/airbnb/javascript),
as well as the [AirBnB React Conventions](https://github.com/airbnb/javascript/tree/master/react). as well as the [AirBnB React Conventions](https://github.com/airbnb/javascript/tree/master/react).
A lot of their rules can be validated via [ESLint](http://eslint.org/), A lot of their rules can be validated via [ESLint](http://eslint.org/),
and can be checked locally via `npm run lint`. and can be checked locally via `yarn run lint`.
## Spelling ## Spelling

2
docs/en/05_Contributing/13_CSS_Coding_Conventions.md
View File

@ -34,7 +34,7 @@ which highlight any linting errors right in your code.
We strongly recommend installing one of these into the editor of your choice, to We strongly recommend installing one of these into the editor of your choice, to
avoid the frustration of failed pull requests. You can run the checks on console avoid the frustration of failed pull requests. You can run the checks on console
via `npm run lint`. via `yarn run lint`.
## File and Folder Naming ## File and Folder Naming