- About
- Basic quick starts
- In-app documentation
- Design guidelines

# About

The @patternfly/quickstarts extension is made up of two product documentation tools: quick starts and in-app documentation.

## Full live demo application

To learn more about quick starts and in-app documentation, you may view examples in a live demo, explore the demo code, or continue reading below.

## Quick starts

A quick start is a set of step-by-step instructions and tasks presented in a side panel embedded within a product’s UI. Quick starts can help users get started with a product by providing installation and setup guidance.

A quick start has multiple tasks, each with multiple steps. On completion, a quick start gives users the artifacts or state needed to successfully use a product, specific features, or add-ons.

For more quick start details and visuals, view the design guidelines.

### Quick start format

#### For developers

To learn more about quick starts:

- View a breakdown of the quick start code format.
- View a basic example.
- View the live demo and view the live demo code.

#### For content authors

Quick starts can be written in `yaml` with markdown support, `asciidoc`, or `json`. To learn more about each of these formats, view example files.

### Opening and closing the side panel

#### Custom handler

To open the side panel of a quick start, call the `setActiveQuickStart` or `setActiveQuickstartID` methods. These methods are provided by `QuickStartContext` and can be accessed in your React components:

    const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
        QuickStartContext,
      );

#### Quick start catalog

To generate a full-page catalog view, add a set of quick starts to a `QuickStartContainer`. Clicking on a catalog card will open its respective quick start in a side panel.

## In-app documentation

In-app documentation defines topics that are relevant to a product. A `HelpTopic` is a single unit of in-app documentation that contains a content section, which defines the term or topic, and an optional list of links to provide the user with other relevant information.

`HelpTopics` are displayed in a side panel just like quick starts:

### HelpTopic format

#### For developers

To learn more about `HelpTopic`s:

- View a breakdown of the HelpTopic code format.
- View a basic example.
- View the live demo and view the live demo code.

#### For content authors

A `HelpTopic` is written in `yaml` with markdown support. View an example yaml file.

### Opening and closing the side panel

To open a side panel, call the `setActiveHelpTopicByName` method(available from `HelpTopicContext`) and include the name of a `HelpTopic`.

    const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);

To close a side panel, call the `setActiveHelpTopicByName` method and pass in an empty string.

There is no prebuilt `HelpTopic` catalog: to build one, attach a handler to the appropriate DOM element using the `setActiveHelpTopicByName` method. For more details, see the basic example or the live demo code.