Skip to content

Commit 7a6a163

Browse files
committed
Content review and edits for quick starts and in app documentation.
1 parent e7ddc87 commit 7a6a163

File tree

3 files changed

+39
-31
lines changed

3 files changed

+39
-31
lines changed

packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,80 @@
44
section: extensions
55
# Sidenav secondary level section
66
# should be the same for all markdown files for each extension
7-
id: Quick Starts
7+
id: Quick starts
88
# Tab
99
source: about
1010
---
1111
# About
12-
The **@patternfly/quickstarts** extension is made up of two parts: `Quick starts` and `in-app documentation` product documentation tools.
12+
The **@patternfly/quickstarts** extension is made up of two product documentation tools: **quick starts** and **in-app documentation**.
1313

1414
## Full live demo application
15-
A live demo of **quick starts and in-app Documentation** can be found [here](https://quickstarts.netlify.app/), or view the [demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
16-
17-
A few key concepts are outlined below.
15+
To learn more about quick starts and in-app documentation, you may [view examples in a live demo](https://quickstarts.netlify.app/), explore the [demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev), or continue reading below.
1816

1917
## Quick starts
20-
A `Quick start` is a set of step-by-step instructions and tasks presented in a side panel embedded in a product’s UI. Quick starts can help users get started with a product, and they often guide installation and setup.
18+
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.
2119

22-
Each task in a quick start has multiple steps, and each quick start has multiple tasks. The outcome of the quick start includes the artifacts or state needed to successfully use the product, specific features, or add-ons.
20+
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.
2321

2422
<img src="./img/side-panel.png" alt="Side panel elements" width="449"/>
2523

26-
For more detailed design guidelines and visuals see [here.](/extensions/quick-starts/design-guidelines#quickstarts)
24+
For more quick start details and visuals, [view the design guidelines.](/extensions/quick-starts/design-guidelines)
2725

2826
### Quick start format
2927

3028
#### For developers
31-
A detailed breakdown of the Quick start format in code can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts).
29+
To learn more about quick starts:
3230

33-
Quickly preview a [basic example](/extensions/quick-starts/Basic-Quick-Starts), and remember there is a [live demo](https://quickstarts.netlify.app/) with [full demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
31+
- [View a breakdown of the quick start code format](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/quick-start-types.ts).
32+
- [View a basic example](/extensions/quick-starts/Basic-Quick-Starts).
33+
- [View the live demo](https://quickstarts.netlify.app/) and [view the live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
3434

3535
#### For content authors
36-
Quick starts can be written in `yaml` with markdown support, `asciidoc`, or just `json`. For examples of each of these formats see [here](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev/src/quickstarts-data)
36+
Quick starts can be written in `yaml` with markdown support, `asciidoc`, or `json`. To learn more about each of these formats, [view example files](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev/src/quickstarts-data).
3737

3838
### Opening and closing the side panel
3939

4040
#### Custom handler
41-
Open the side panel by calling the `setActiveQuickStart` or `setActiveQuickstartID` methods. These methods are provided by the `QuickStartContext` and can be accessed in your React components:
41+
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:
4242
```typescript
4343
const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
4444
QuickStartContext,
4545
);
4646
```
4747

4848
#### Quick start catalog
49-
By providing a set of quick starts to the `QuickStartContainer`, a full-page catalog view will be generated. Clicking on a catalog card will open its respective `quick start` in the side panel.
49+
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.
5050

5151
<img src="./img/catalog.png" alt="Quick start catalog" width="1680"/>
5252

5353
## In-app documentation
54-
In-app documentation is used to provide definitions for a set of topics relevant to your product. A single unit of in-app documentation can be called a `HelpTopic`, which is also the name used in code. `HelpTopic`'s essential sections are a **content** section that contains a definition of the term or topic, and an optional list of **links** to provide the user with other relevant information.
54+
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.
5555

56-
`HelpTopics` are displayed in a side panel just like `quick starts`:
56+
`HelpTopics` are displayed in a side panel just like quick starts:
5757

5858
<img src="./img/help-topic.png" alt="quick start catalog" width="449"/>
5959

60-
### Help Topic format
60+
### HelpTopic format
6161

6262
#### For developers
63-
A detailed breakdown of the `HelpTopic` format in code can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/help-topic-types.ts).
63+
To learn more about `HelpTopic`s:
6464

65-
Quickly preview a [basic example](/extensions/quick-starts/In-App-Documentation), and remember there is a [live demo](https://quickstarts.netlify.app/in-context-help) with [full demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
65+
- [View a breakdown of the HelpTopic code format](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/utils/help-topic-types.ts).
66+
- [View a basic example](/extensions/quick-starts/In-App-Documentation).
67+
- [View the live demo](https://quickstarts.netlify.app/in-context-help) and [view the live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
6668

6769
#### For content authors
68-
HelpTopics are written in `yaml` with markdown support. An example can be seen [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/in-context-help/example-topics.yaml)
70+
A `HelpTopic` is written in `yaml` with markdown support. [View an example yaml file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/quickstarts-data/yaml/in-app-documentation/example-topics.yaml).
6971

7072
### Opening and closing the side panel
71-
Open the side panel by calling `setActiveHelpTopicByName` (available from `HelpTopicContext`) with a `HelpTopic`'s name value.
73+
To open a side panel, call the `setActiveHelpTopicByName` method(available from `HelpTopicContext`) and include the name of a `HelpTopic`.
7274

7375
```typescript
7476
const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
7577
```
7678

77-
Close it by calling `setActiveHelpTopicByName` with an empty string. There is no prebuilt `HelpTopic` catalog. simply attach a handler with `setActiveHelpTopicByName` to the appropriate DOM element. See the [basic example](/extensions/quick-starts/In-App-Documentation) or [live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev) for more details.
79+
To close a side panel, call the `setActiveHelpTopicByName` method and pass in an empty string.
80+
81+
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](/extensions/quick-starts/In-App-Documentation) or the [live demo code](https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/dev).
82+
83+

packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
section: extensions
55
# Sidenav secondary level section
66
# should be the same for all markdown files
7-
id: Quick Starts
7+
id: Quick starts
88
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
9-
source: Basic-Quick-Starts
9+
source: Basic-quick-starts
1010
# If you use typescript, the name of the interface to display props for
1111
# These are found through the sourceProps function provided in patternfly-docs.source.js
1212
propComponents: ['QuickStartContainer']
@@ -16,12 +16,13 @@ import { quickStarts as exampleQuickStarts } from './example-data';
1616
import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts';
1717
import '@patternfly/quickstarts/dist/quickstarts.css';
1818

19-
## Basic Quick Starts Usage
19+
## Basic quick starts examples
2020

21-
### With Catalog Page
21+
### Quick starts catalog
2222
```js file="./Basic.jsx"
2323
```
2424

25-
### Fullscreen example
25+
### Fullscreen catalog page
26+
To view a fullscreen example, click the image below.
2627
```js file="./Basic.jsx" isFullscreen
2728
```

packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@
44
section: extensions
55
# Sidenav secondary level section
66
# should be the same for all markdown files for each extension
7-
id: Quick Starts
7+
id: Quick starts
88
# Tab
9-
source: In-App-Documentation
9+
source: In\-app-documentation
1010
propComponents: ['HelpTopicContainer']
1111
---
1212

1313
import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
1414
import { helpTopics as exampleHelpTopics } from './example-data';
1515
import '@patternfly/quickstarts/dist/quickstarts.css';
1616

17-
## In-app documentation
17+
## In-app documentation examples
1818

19-
### Basic Example
19+
### Basic help topic
2020
```js file="./HelpTopic.jsx"
2121
```
2222

23-
### Basic Example Fullscreen
23+
### Fullscreen help topic
24+
To view a fullscreen example, click the image below.
2425
```js file="./HelpTopic.jsx" isFullscreen
2526
```

0 commit comments

Comments
 (0)