jlengrand/open-wc
1
0
Fork 0
mirror of https://github.com/jlengrand/open-wc.git synced 2026-03-10 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: restructure menu and improve docu

Browse Source
This commit is contained in:
Pascal Schilp
2019-01-19 12:51:15 +00:00
committed by Thomas Allmer
parent d082873266
commit dd37e2252b
18 changed files with 150 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/.vuepress/config.js
View File

@@ -1,4 +1,55 @@
// .vuepress/config.js
const sidebar = [
['/', 'Home'],
['/guide/', 'Introduction'],
{
title: 'IDE',
collapsable: true,
children: [['/ide/', 'Getting started']],
},
{
title: 'Developing',
collapsable: true,
children: [['/developing/', 'Getting started'], ['/developing/generator', 'Generators']],
},
{
title: 'Linting',
collapsable: true,
children: [
['/linting/', 'Getting started'],
'/linting/linting-eslint',
'/linting/linting-prettier',
],
},
{
title: 'Testing',
collapsable: true,
children: [
['/testing/', 'Getting started'],
'/testing/testing-helpers',
'/testing/testing-chai-dom-equals',
'/testing/testing-karma',
'/testing/testing-karma-bs',
'/testing/testing-wallaby',
],
},
{
title: 'Demoing',
collapsable: true,
children: [['/demoing/', 'Getting started']],
},
{
title: 'Publishing',
collapsable: true,
children: [['/publishing/', 'Getting started']],
},
{
title: 'Automating',
collapsable: true,
children: [['/automating/', 'Getting started']],
},
];
module.exports = {
title: 'open-wc',
description: 'Open Web Component Recommendations',
@@ -7,33 +58,14 @@ module.exports = {
displayAllHeaders: false,
sidebarDepth: 2,
sidebar: {
'/guide/': [
'/',
'',
'ide',
'developing',
'linting',
'testing',
['demoing', 'Demoing'],
'publishing',
'automating',
'next-steps',
],
'/linting/': [
['/guide/linting', '⇐ back to Guide'],
'',
'linting-eslint',
'linting-prettier',
],
'/testing/': [
['/guide/testing', '⇐ back to Guide'],
'',
'testing-helpers',
'testing-chai-dom-equals',
'testing-karma',
'testing-karma-bs',
'testing-wallaby',
],
'/guide/': sidebar,
'/ide/': sidebar,
'/developing/': sidebar,
'/linting/': sidebar,
'/testing/': sidebar,
'/demoing/': sidebar,
'/publishing/': sidebar,
'/automating/': sidebar,
'/setup/': [['/guide/', '⇐ back to Guide'], '', 'generator'],
'/faq/': ['', 'rerender'],
'/about/': ['', 'contact'],

0
docs/guide/automating.md → docs/automating/README.md
View File

0
docs/guide/demoing.md → docs/demoing/README.md
View File

0
docs/guide/developing.md → docs/developing/README.md
View File

0
docs/setup/generator.md → docs/developing/generator.md
View File

83
docs/guide/linting.md
View File

@@ -1,83 +0,0 @@
# Linting
Linting can help you write consistent code, and easily prevent mistakes. Open-wc recommends the following tools:
We recommend
- [ESLint](https://eslint.org/) to lint your es6 code
- [Prettier](https://prettier.io/) to auto format your code
- [lint-staged](https://www.npmjs.com/package/lint-staged) to apply linting fixed only to changed files
- [commitlint](https://www.npmjs.com/package/@commitlint/cli) so commit messages follow a certain flow
## Setup
```bash
npx -p yo -p generator-open-wc -c 'yo open-wc:lint'
```
::: tip Info
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
### Manual
- `yarn add --dev @open-wc/eslint-config @open-wc/prettier-config lint-staged husky @commitlint/cli @commitlint/config-conventional`
- Copy [.eslintignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintignore) to `.eslintignore`
- Copy [.eslintrc.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.eslintrc.js) to `.eslintrc.js`
- Copy [.prettierignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.prettierignore) to `.prettierignore`
- Copy [prettier.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/_prettier.config.js) to `prettier.config.js`
- Copy [husky.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint/templates/static/husky.config.js) to `husky.config.js`
- Copy [commitlint.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-commitlint/templates/static/commitlint.config.js) to `commitlint.config.js`
- Add these scripts to your package.json
```js
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
"scripts": {
"lint": "npm run lint:eslint && npm run lint:prettier",
"lint:eslint": "eslint --ext .js,.html .",
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",
"format:prettier": "prettier '**/*.js' --write"
},
```
## What you get
- Linting and auto formatting using eslint & prettier
- Full automatic linting for changed files on commit
- Linting commit message
## Usage
Run:
- `npm run lint` to check if any file is correctly formatted
- `npm run format` to auto format your files
Whenever you create a commit the update files will be auto formatted and the commit message will be linted for you.
## Linting Error Examples
```bash
$ npm run lint:prettier
test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑
```
Simply run `npm run format:prettier` to format those files automatically.
```bash
$ npm run lint:eslint
/.../example-vanilla-set-game/set-card.js
14:11 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
```
If you're using eslint and prettier together most eslint errors will not be auto fixable.
This means usually you will need to pick up an editor and actually fix the problem in code.

1
docs/guide/testing.md
View File

@@ -1 +0,0 @@
../../packages/testing/README.md

2
docs/guide/ide.md → docs/ide/README.md
View File

@@ -6,7 +6,7 @@ Your IDE is your primary tool while working with code, we recommend the followin
We recommend [VSCode](https://code.visualstudio.com/).
For setup please visit the instructions on the Visual Stdio Code [homepage](https://code.visualstudio.com/).
For setup please visit the instructions on the Visual Studio Code [homepage](https://code.visualstudio.com/).
## Configuration

82
docs/linting/README.md
View File

@@ -1,5 +1,83 @@
# Linting
Please make sure to finish [The Linting Guide](/guide/linting.html) before continuing.
Linting can help you write consistent code, and easily prevent mistakes. Open-wc recommends the following tools:
These are some more in depth resources about linting.
We recommend
- [ESLint](https://eslint.org/) to lint your es6 code
- [Prettier](https://prettier.io/) to auto format your code
- [lint-staged](https://www.npmjs.com/package/lint-staged) to apply linting fixed only to changed files
- [commitlint](https://www.npmjs.com/package/@commitlint/cli) so commit messages follow a certain flow
## Setup
```bash
npx -p yo -p generator-open-wc -c 'yo open-wc:lint'
```
::: tip Info
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
### Manual
- `yarn add --dev @open-wc/eslint-config @open-wc/prettier-config lint-staged husky @commitlint/cli @commitlint/config-conventional`
- Copy [.eslintignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintignore) to `.eslintignore`
- Copy [.eslintrc.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.eslintrc.js) to `.eslintrc.js`
- Copy [.prettierignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/static/.prettierignore) to `.prettierignore`
- Copy [prettier.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-prettier/templates/_prettier.config.js) to `prettier.config.js`
- Copy [husky.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint/templates/static/husky.config.js) to `husky.config.js`
- Copy [commitlint.config.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-commitlint/templates/static/commitlint.config.js) to `commitlint.config.js`
- Add these scripts to your package.json
```js
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
"scripts": {
"lint": "npm run lint:eslint && npm run lint:prettier",
"lint:eslint": "eslint --ext .js,.html .",
"lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
"format": "npm run format:eslint && npm run format:prettier",
"format:eslint": "eslint --ext .js,.html . --fix",
"format:prettier": "prettier '**/*.js' --write"
},
```
## What you get
- Linting and auto formatting using eslint & prettier
- Full automatic linting for changed files on commit
- Linting commit message
## Usage
Run:
- `npm run lint` to check if any file is correctly formatted
- `npm run format` to auto format your files
Whenever you create a commit the update files will be auto formatted and the commit message will be linted for you.
## Linting Error Examples
```bash
$ npm run lint:prettier
test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑
```
Simply run `npm run format:prettier` to format those files automatically.
```bash
$ npm run lint:eslint
/.../example-vanilla-set-game/set-card.js
14:11 error 'foo' is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
```
If you're using eslint and prettier together most eslint errors will not be auto fixable.
This means usually you will need to pick up an editor and actually fix the problem in code.

0
docs/guide/publishing.md → docs/publishing/README.md
View File

3
docs/setup/README.md
View File

@@ -1,3 +0,0 @@
# Setup
In this section you can find more information about open-wc features.

5
docs/testing/README.md
View File

@@ -1,5 +0,0 @@
# Testing
Please make sure to finish [The Testing Guide](/guide/testing.html) before continuing.
These are some more in depth resources for testing.

1
docs/testing/README.md Symbolic link
View File

@@ -0,0 +1 @@
../../packages/testing/README.md

2
packages/chai-dom-equals/README.md
View File

@@ -1,6 +1,6 @@
# Testing Chai Dom Equals
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/) Recommendation [open-wc](https://github.com/open-wc/open-wc/)
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

4
packages/eslint-config/README.md
View File

@@ -1,6 +1,6 @@
# Linting ESLint
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/) Recommendations [open-wc](https://open-wc.org/)
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.
@@ -19,7 +19,7 @@ npx -p yo -p generator-open-wc -c 'yo open-wc:lint-eslint'
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::
### Manual
## Manual
- `yarn add --dev @open-wc/eslint-config`
- Copy [.eslintignore](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintignore) to `.eslintignore`
- Copy [.eslintrc.js](https://github.com/open-wc/open-wc/blob/master/packages/generator-open-wc/generators/lint-eslint/templates/static/.eslintrc.js) to `.eslintrc.js`

8
packages/generator-open-wc/README.md
View File

@@ -1,6 +1,6 @@
# Generator Open WC
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/) Recommendation [open-wc](https://github.com/open-wc/open-wc/)
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.
@@ -26,14 +26,14 @@ npx -p yo -p generator-open-wc -c 'yo open-wc:{generator-name}'
## Available generators
### Primary entry points
### Generators
- open-wc:vanilla
- open-wc:lint
- open-wc:testing
- open-wc:testing-upgrade
- open-wc:publish-storybook
### Optional entry points
### Optional generators
- open-wc:testing-wallaby
### Sub generators
@@ -45,5 +45,3 @@ npx -p yo -p generator-open-wc -c 'yo open-wc:{generator-name}'
- open-wc:testing-karma
- open-wc:testing-karma-bs
- open-wc:tools-circleci
For more information on these generators, please see [open-wc](https://open-wc.org/).

2
packages/prettier-config/README.md
View File

@@ -1,6 +1,6 @@
# Linting Prettier
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/) Recommendations [open-wc](https://open-wc.org/)
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

2
packages/testing-karma/README.md
View File

@@ -1,4 +1,4 @@
# Testing with karma
# Testing with Karma
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)

2
packages/testing-wallaby/README.md
View File

@@ -1,4 +1,4 @@
# Testing in IDE via wallaby
# Testing in IDE via Wallaby
> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)