You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+26-25Lines changed: 26 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
**See live example of the API console in our [demo application].**
1
+
__See live example of the API console in our [demo application][].__
2
2
3
3
# The API Console
4
4
@@ -28,7 +28,7 @@ New documentation page focuses on presenting the information which is the API an
28
28
29
29
### Re-build
30
30
31
-
New [build tools](build tools) allows you to customize the bundle to your needs and possibly reduce size of the console even more than when using default settings. Check out "Building the console" section for more information.
31
+
New [build tools][] allows you to customize the bundle to your needs and possibly reduce size of the console even more than when using default settings. Check out "Building the console" section for more information.
Recommended way of using API console is to build a standalone application that can be served from your server. Generated sources with `api-console-cli` is production ready bundle of the console ready to be served to your users. The application supports [Deep linking][deep linking], which allows you to share a link to a particular part of your API documentation. You can find a basic example of the standalone application on our [demo application] web page.
61
+
Recommended way of using API console is to build a standalone application that can be served from your server. Generated sources with `api-console-cli` is production ready bundle of the console ready to be served to your users. The application supports [Deep linking][deep linking], which allows you to share a link to a particular part of your API documentation. You can find a basic example of the standalone application on our [demo application][] web page.
62
62
63
-
To build the API Console as a standalone application use our [build tools].
63
+
To build the API Console as a standalone application use our [build tools][].
64
64
65
65
### Using API components
66
66
@@ -70,7 +70,7 @@ API console is a web component. This mean it can be used in any web environments
70
70
71
71
This version of the console still works with `bower` as a dependency manager as it works with HTML imports. Next version will work with ES6 module imports which supports npm as a dependency management system.
72
72
73
-
First, use [Bower] to install the console and its dependencies:
73
+
First, use [Bower][] to install the console and its dependencies:
74
74
75
75
```bash
76
76
$ bower install --save mulesoft/api-console
@@ -90,13 +90,13 @@ Finally use the HTML tag:
90
90
</body>
91
91
```
92
92
93
-
See complete documentation about how to import sources into your web page in the [api console element docs]. Also, if you are a developer you can check out [demo application source code].
93
+
See complete documentation about how to import sources into your web page in the [api console element docs][]. Also, if you are a developer you can check out [demo application source code][].
94
94
95
-
You can also build API Console as a embeddable HTML element using one of our [build tools].
95
+
You can also build API Console as a embeddable HTML element using one of our [build tools][].
96
96
97
97
## API Console configuration options
98
98
99
-
Configuration options differ from the previous version. Because API Console is a (custom) HTML element its configuration is based on HTML attributes. You can pass values as an attribute value, or use a boolean option by simply setting the attribute. Configuration from JavaScript code is based on setting a JavaScript property as the attribute name on the element. If the attribute name contains dashes then make the property name [camel case].
99
+
Configuration options differ from the previous version. Because API Console is a (custom) HTML element its configuration is based on HTML attributes. You can pass values as an attribute value, or use a boolean option by simply setting the attribute. Configuration from JavaScript code is based on setting a JavaScript property as the attribute name on the element. If the attribute name contains dashes then make the property name [camel case][].
100
100
101
101
Example:
102
102
@@ -112,65 +112,66 @@ console.narrow = true;
112
112
console.appendHeaders='x-api-key: 1234';
113
113
```
114
114
115
-
See the full list of API Console configuration options in the [configuring the api console] document.
115
+
See the full list of API Console configuration options in the [configuring the api console][] document.
116
116
117
117
## Build tools
118
118
119
119
A set of build tools is included to help you create API Console from the RAML file. Build tools are configured to produce a production optimized version of API Console. The build tools can generate both standalone and embeddable version of the console. You can also configure data source strategy (RAML, JSON or inline JSON as a data source).
120
120
121
121
The following build tools are available:
122
122
123
-
* The `api-console` CLI
124
-
* Node modules
125
-
*`api-console-builder`
123
+
* The API console CLI
124
+
* Node modules
125
+
*`api-console-builder`
126
+
*`amf-client-js`
126
127
127
128
Depending on your needs you can choose whether you want to use a CLI tool or a node module.
128
129
129
-
Build tools can be helpful in the CI process to automate the documentation release cycle. See the [build tools] documentation for more information and build strategies.
130
+
Build tools can be helpful in the CI process to automate the documentation release cycle. See the [build tools][] documentation for more information and build strategies.
130
131
131
132
## Theming
132
133
API Console supports theming and comes with a default theme. You can create your own theme. For example, you can tweak the style of the console to match your corporate style guide.
133
134
134
-
Theming is based on CSS variables and CSS mixins. Basic concepts of using the variables and mixins are described in the [Polymer 2.0 styling] documentation. You can check the [api-console-styles.html](api-console-styles.html) file to see the current theme definition, and then read the [theming documentation] to learn how to create your own theme.
135
+
Theming is based on CSS variables and CSS mixins. Basic concepts of using the variables and mixins are described in the [Polymer 2.0 styling][] documentation. You can check the [api-console-styles.html](api-console-styles.html) file to see the current theme definition, and then read the [theming documentation][] to learn how to create your own theme.
135
136
136
137
## CORS
137
138
138
-
Cross-origin resource sharing (CORS) allows sharing resources from one domain to other domains. Browsers block all requests to other domains but with a special set of headers authors can allow other domains to request a resource. For more information, see the [CORS Wiki].
139
+
Cross-origin resource sharing (CORS) allows sharing resources from one domain to other domains. Browsers block all requests to other domains but with a special set of headers authors can allow other domains to request a resource. For more information, see the [CORS Wiki][].
139
140
140
141
If your API does not allow CORS and you hosting your API documentation in different domain then API Console won't be able to make a request to an endpoint. API Console currently supports 3 ways of dealing with this issue:
141
142
142
-
- by installing the **API Console Chrome extension**
143
-
- by setting up a **proxy server**
144
-
- by handling HTTP requests from the hosting application
143
+
-by installing the __API Console Chrome extension__
144
+
-by setting up a __proxy server__
145
+
-by handling HTTP requests from the hosting application
145
146
146
-
Read our [CORS guideline] for more information about each of these solutions.
147
+
Read our [CORS guideline][] for more information about each of these solutions.
147
148
148
149
## Preview and development
149
150
150
151
The API Console is a custom element that serves as a shell element for other custom web components. To develop the API Console most probably you'd have to develop one of over a hundred other web components that creates the console. All the elements are described in [the elements catalog][the elements catalogue].
@@ -187,7 +188,7 @@ See CONTRIBUTING.md for description of how to file issue report of feature reque
187
188
188
189
### Contributor's Agreement
189
190
190
-
To contribute source code to this repository, read our [contributor's agreement](http://www.mulesoft.org/legal/contributor-agreement.html), and then execute it by running this notebook and following these instructions: https://api-notebook.anypoint.mulesoft.com/notebooks/#380297ed0e474010ff43
191
+
To contribute source code to this repository, read our [contributor's agreement](http://www.mulesoft.org/legal/contributor-agreement.html), and then execute it by running this notebook and following these instructions: [api-notebook.anypoint.mulesoft.com/notebooks/#380297ed0e474010ff43](https://api-notebook.anypoint.mulesoft.com/notebooks/#380297ed0e474010ff43)
Copy file name to clipboardExpand all lines: docs/api-components.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,10 +5,10 @@ This documentation is for advanced use
5
5
API console is a shell application that puts web components together in a
6
6
single application. Three main UI regions of the API console are:
7
7
8
-
- Navigation (api-navigation)
9
-
- Documentation (api-documentation)
10
-
- Request panel (api-request-panel)
11
-
- Model propagation helper (raml-aware) as an optional dependency.
8
+
-Navigation (api-navigation)
9
+
-Documentation (api-documentation)
10
+
-Request panel (api-request-panel)
11
+
-Model propagation helper (raml-aware) as an optional dependency.
12
12
13
13
In some cases you may need to use the components separately to customize the
14
14
experience with your environment. This document describes how to use
@@ -148,10 +148,10 @@ Parts of the logic is optional for API console. Things like OAuth 1 and 2 author
148
148
If you application already support similar logic it's better to use your application's logic and reduce size of the final build.
149
149
This optional dependencies are:
150
150
151
-
- advanced-rest-client/xhr-simple-request - Uses XHR object to make a request
152
-
- advanced-rest-client/oauth-authorization - Support for OAuth authorization
153
-
- advanced-rest-client/cryptojs-lib - Crypto library that is used by authorization logic
154
-
- advanced-rest-client/web-animations-js - At the time of writing this article Web Animations API is not implemented in any browser and the app uses this API for dropdowns.
151
+
-advanced-rest-client/xhr-simple-request - Uses XHR object to make a request
152
+
-advanced-rest-client/oauth-authorization - Support for OAuth authorization
153
+
-advanced-rest-client/cryptojs-lib - Crypto library that is used by authorization logic
154
+
-advanced-rest-client/web-animations-js - At the time of writing this article Web Animations API is not implemented in any browser and the app uses this API for dropdowns.
155
155
156
156
If you having CORS problems or you already support logic for transporting the request handle `api-request` and `api-response` custom events as described in [api-request-editor](https://github.com/advanced-rest-client/api-request-editor/blob/stage/api-request-editor.html#L228) docs.
Copy file name to clipboardExpand all lines: docs/build-tools.md
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,8 +5,8 @@ API console comes with a set of tools to help you create documentation for your
5
5
**Learn more**
6
6
7
7
Check out our examples of how to use our build tools in CI pipeline with Travis:
8
-
-[Building API Console for GitHub pages on Travis](gh-pages.md)
9
-
-[Rebuilding the api.json file in the CI process](rebuilding-api-json.md)
8
+
-[Building API Console for GitHub pages on Travis](gh-pages.md)
9
+
-[Rebuilding the api.json file in the CI process](rebuilding-api-json.md)
10
10
11
11
## CLI
12
12
@@ -18,14 +18,16 @@ Install the CLI tool globally using `-g` if possible.
18
18
$ sudo npm install -g api-console-cli
19
19
```
20
20
21
+
Note, `sudo` is not required on Windows.
22
+
21
23
If you can't perform the global installation for some reason, then omit `-g` and run the command prefixing `api-console-cli` with `./node_modules/.bin/`.
22
24
23
25
### Features
24
26
25
-
- build - Builds the api console application optimized for production.
26
-
- generate-json - Regenerates the JSON file that can be used as a data source in the console.
27
+
-build - Builds the api console application optimized for production.
28
+
-generate-json - Regenerates the JSON file that can be used as a data source in the console.
27
29
28
-
For more information, see https://github.com/mulesoft-labs/api-console-cli.
30
+
For more information, see [api-console-cli](https://github.com/mulesoft-labs/api-console-cli) page.
29
31
30
32
### Examples
31
33
@@ -35,13 +37,13 @@ Build API Console from the latest released version and use `path/to/api.raml` fi
35
37
$ api-console -t "RAML 1.0" -a path/to/api.raml
36
38
```
37
39
38
-
Build API Console from local sources (`--local api-console-release.zip`) that is a zip file of a release.
40
+
Build API Console from local sources (`--local api-console-release.zip`) which is a zip file of a release.
39
41
40
42
```shell
41
43
$ api-console build -t "RAML 1.0" --local api-console-release.zip -a path/to/api.raml
42
44
```
43
45
44
-
Full documentation: https://github.com/mulesoft-labs/api-console-cli/blob/master/docs/api-console-build.md
46
+
Full documentation: [github.com/mulesoft-labs/api-console-cli/blob/master/docs/api-console-build.md](https://github.com/mulesoft-labs/api-console-cli/blob/master/docs/api-console-build.md)
Copy file name to clipboardExpand all lines: docs/configuring-api-console.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ apic.amfModel = model;
43
43
44
44
Type: **string**
45
45
46
-
Uses [raml-aware] element, with `scope` attribute set to the value of this attribute. See [Passing RAML data](passing-raml-data.md) documentation for more information.
46
+
Uses [raml-aware][] element, with `scope` attribute set to the value of this attribute. See [Passing RAML data](passing-raml-data.md) documentation for more information.
47
47
48
48
```html
49
49
<raml-awarescope="my-api"></raml-aware>
@@ -60,7 +60,7 @@ aware.raml = model;
60
60
61
61
Type: **String**
62
62
63
-
Currently selected object. See section [Controlling the view](#controlling-the-view) section below for more information.
63
+
Currently selected object. See section [Controlling the view](#controlling-the-view) section below for more information.
64
64
65
65
```javascript
66
66
constapic=document.querySelector('api-console');
@@ -75,14 +75,14 @@ Currently selected object type.
75
75
76
76
It can be one of:
77
77
78
-
-`summary` - API summary view
79
-
-`documentation` - RAML's documentation node
80
-
-`type` - Model documentation (type, schema)
81
-
-`security` - Security scheme documentation
82
-
-`endpoint` - Endpoint documentation
83
-
-`method` - Method documentation
78
+
-`summary` - API summary view
79
+
-`documentation` - RAML's documentation node
80
+
-`type` - Model documentation (type, schema)
81
+
-`security` - Security scheme documentation
82
+
-`endpoint` - Endpoint documentation
83
+
-`method` - Method documentation
84
84
85
-
See section [Controlling the view](#controlling-the-view) section below for more information.
85
+
See section [Controlling the view](#controlling-the-view) section below for more information.
86
86
87
87
```javascript
88
88
constapic=document.querySelector('api-console');
@@ -96,7 +96,7 @@ Type: **String**
96
96
Location of the file with gfenerated AMF model to automatically download when this value change.
97
97
This can be used to optimise startup time by not producing AMF model from your API spec each time the console is opened.
98
98
99
-
The [build tools] allows you to generate this file for you when building production ready console.
99
+
The [build tools][] allows you to generate this file for you when building production ready console.
When set it renders API console as a standalone application.
240
240
Setting this option adds automation like handling media queries and sets mobile friendly styles.
241
-
This attribute is set automatically when using our [build tools].
241
+
This attribute is set automatically when using our [build tools][].
242
242
243
243
```html
244
244
<api-consoleapp></api-console>
@@ -397,12 +397,12 @@ The `page` property displays top level pages as documentation or try it screen.
397
397
398
398
The `selectedShape` property can have the following values:
399
399
400
-
-`summary` - Summary of the API spec
401
-
-`docs` - Documentation included in the spec
402
-
-`type` - Type
403
-
-`resource` - Endpoint documentation
404
-
-`method` - Method
405
-
-`security` - Security scheme documentation
400
+
-`summary` - Summary of the API spec
401
+
-`docs` - Documentation included in the spec
402
+
-`type` - Type
403
+
-`resource` - Endpoint documentation
404
+
-`method` - Method
405
+
-`security` - Security scheme documentation
406
406
407
407
Normally API console passes `selectedShape` and `selectedShapeType` values from `api-navigation` to `api-documentation` and `api-request-panel` when navigation occurred. However it can be set programmatically to control the view.
Copy file name to clipboardExpand all lines: docs/cors.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,4 +43,4 @@ The proxy URL won't be visible by the user. The user can't do anything to change
43
43
When the user runs the request from the "try it" screen, API Console fires the `api-request`[custom event](https://developer.mozilla.org/en/docs/Web/API/CustomEvent). If your application can handle the transport (by providing a proxy, for example), listen for this event, and cancel it by calling `event.preventDefault()`. If the event is cancelled, API Console listens for the `api-response` custom
44
44
event that should contain response details. Otherwise, the console uses the build in fallback function to get the resource using Fetch API / XHR.
45
45
46
-
See https://github.com/advanced-rest-client/api-components-api/blob/master/docs/api-request-and-response.md for detailed documentation of the request events.
46
+
See [github.com/advanced-rest-client/api-components-api/blob/master/docs/api-request-and-response.md](https://github.com/advanced-rest-client/api-components-api/blob/master/docs/api-request-and-response.md) for detailed documentation of the request events.
0 commit comments