Skip to content

Commit

Permalink
docs: Remove the old quickstart, update HTML as the preferred onboard…
Browse files Browse the repository at this point in the history 
…ing method and improve docs/examples on that page
  • Loading branch information
@lornajane
lornajane committed Sep 18, 2023
1 parent e97da28 commit 9658ad4
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 130 deletions.
173 changes: 97 additions & 76 deletions docs/deployment/html.md
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,144 @@
---
title: Use the Redoc HTML element
title: Use Redoc in HTML
redirectFrom:
- /docs/redoc/quickstart/html/
- /docs/redoc/quickstart/
---

# How to use the Redoc HTML element
# Use Redoc in HTML

## Step 1 - Install Redoc
To render API documentation in an HTML page, start with the template below and
replace the `spec-url` value with the local file path or URL of your API
description.

You can install Redoc using one of the following package managers:
```html
<!DOCTYPE html>
<html>
<head>
<title>Redoc</title>
<!-- needed for adaptive design -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

<!--
Redoc doesn't change outer page styles
-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
</body>
</html>
```

- [npm](https://docs.npmjs.com/about-npm)
- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)
:::Success URL or local file

:::attention Initialize your package manager
If you do not have a `package.json` file in your project directory,
you need to add one by initializing npm or yarn in your project. Use the command `npm init` for npm,
or `yarn init` for yarn. These initialization commands lead you through the process
of creating a `package.json` file in your project.
Set `spec-url` to a relative path if the file is local, e.g. `spec-url=my-api.yaml`. Use a full URL like the example above if it's hosted elsewhere.

For more information, see
[Creating a package.json file](https://docs.npmjs.com/creating-a-package-json-file)
in the npm documentation or [Yarn init](https://classic.yarnpkg.com/en/docs/cli/init/)
in the yarn documentation.
:::

### Install Redoc with yarn
Open the HTML file in your browser to see the HTML documentation rendering. You may want to read the next section and add some configuration to make your documentation your own.

After navigating to your project directory in your terminal, use the following command:
## Configure Redoc

```bash
yarn add redoc
```
Redoc is highly configurable, find a [full list of configuration options](../config.md) on the dedicated page.

### Install Redoc with npm
To configure Redoc in HTML, add the property names to the HTML tag. Here's an example that makes all the required properties display first in the list:

After navigating to your project directory in your terminal, use the following command:

```bash
npm i redoc
```html
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json' required-props-first=true></redoc>
```

## Step 2 - Reference the Redoc script
Any of the individual properties can be added to the tag, as many as you need to get your API docs set up as you like them.

You can reference the Redoc script using either a link to the files hosted on a CDN
or the files located in your `node modules` folder.

### CDN link
### Theme configuration

To reference the Redoc script with a CDN link:
The `theme` configuration setting is more complex since it represents many nested options, you can supply these as a JSON string to the `theme` attribute. For example, to change the sidebar color you would use a tag like this:

```html
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'
required-props-first=true
theme='{
"sidebar": {
"backgroundColor": "lightblue"
}
}'
></redoc>
```

### Node modules link
Check out the [list of options for theme configuration](../config.md#theme-settings) and build up the configuration that suits your API needs.

To reference the Redoc script with a node modules link:
## Advanced options

```html
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>
```

## Step 3 - Add the <redoc> element

You can add the <redoc> element to your HTML page and reference your OpenAPI
definition using the `spec-url` attribute, or you can initialize Redoc using
a globally exposed Redoc object.
### The Redoc object

### The `spec-url` attribute
As an alternative to the HTML tag, you can also initialise Redoc in a web page using the Redoc object and invoking it from JavaScript. This is useful for situations where you want to create dynamic content in a page, and also provides a simple way to attach the Redoc element to an existing container.

To add the <redoc> element with the `spec-url` attribute:
The Redoc object offers an `init` function:

```html
<redoc spec-url="url/to/your/spec"></redoc>
```js
Redoc.init(specOrSpecUrl, options, element, callback)
```
- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a file name/URL to the
definition in JSON or YAML format.
- `options`: See the [configuration reference](../config.md).
- `element`: DOM element Redoc is inserted into.
- `callback`(optional): Callback to be called after Redoc has been fully rendered.
It is also called on errors with `error` as the first argument.

#### Examples
Call `Redoc.init()` from the JavaScript on a web page to add the element to the named container. Below is an example of an HTML page with a `<div>` tag, and the JavaScript to add the Redoc object to it.

```html
<redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
<!DOCTYPE html>
<html>
<head />
<body>
<H1>Redoc in action</H1>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
<div id="redoc-container"></div>

<script>
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
"expandResponses": "200,400"
}, document.getElementById('redoc-container'))
</script>
</body>
</html>
```

You can also use a local file (JSON or YAML) in your project, for instance:
This example also sets the configuration for `expandResponses` so all 200 and 400 status responses are shown unfolded and with their details visible when the page loads.

```html
<redoc spec-url="dist.json"></redoc>
```
### Self-host dependencies

### The Redoc object
You can reference the Redoc script using either a link to the files hosted on a CDN
or install to your `node-modules` folder. Using the CDN is the simplest option, but
if you need to host in a closed environment or have requirements around external
dependencies, it may be useful to self-host.

To add the <redoc> element with a globally exposed Redoc object:
The main example shows using the CDN:

```js
Redoc.init(specOrSpecUrl, options, element, callback)
```html
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
```
- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a URL to the
definition in JSON or YAML format.
- `options`: See [`theme.openapi` object](/docs/api-reference-docs/configuration/functionality.mdx) reference.
- `element`: DOM element Redoc is inserted into.
- `callback`(optional): Callback to be called after Redoc has been fully rendered.
It is also called on errors with `error` as the first argument.

#### Examples
If you would instead prefer to host the depdencies yourself, first install `redoc` using `npm`:

```html
<script>
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
scrollYOffset: 50
}, document.getElementById('redoc-container'))
</script>
```
npm install redoc
```

_(Yarn users can install the `redoc` package with `yarn`)_.

You can also use a local file (JSON or YAML) in your project, for instance:
You can then reference the Redoc script with a node modules link:

```html
<script>
Redoc.init('dist.yaml', {
scrollYOffset: 50
}, document.getElementById('redoc-container'))
</script>
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>
```

54 changes: 0 additions & 54 deletions docs/quickstart.md
View file

This file was deleted.

0 comments on commit 9658ad4

Please sign in to comment.