diff --git a/.eslintignore b/.eslintignore
index baebb7e3..3b19bb0b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,4 +6,7 @@ dist
node_modules
public
bin
-build
\ No newline at end of file
+build
+
+# paternfly-docs
+**/generated/**/*.js
diff --git a/.github/workflows/a11y.yml b/.github/workflows/a11y.yml
index 2830c734..0a7a30fd 100644
--- a/.github/workflows/a11y.yml
+++ b/.github/workflows/a11y.yml
@@ -13,10 +13,10 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v2
- - name: Use Node.js 15
+ - name: Use Node.js 16
uses: actions/setup-node@v2
with:
- node-version: 15
+ node-version: 16
- name: Install
run: yarn install
- name: Build
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index cec8c2ec..d22f817f 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -16,7 +16,7 @@ jobs:
strategy:
matrix:
- node-version: [12.x, 14.x]
+ node-version: [14.x, 16.x]
steps:
- uses: actions/checkout@v2
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index 28460a41..18a28d16 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -14,7 +14,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
- node-version: 12
+ node-version: 16
- run: yarn install
- run: yarn build
@@ -25,7 +25,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
- node-version: 12
+ node-version: 16
registry-url: https://registry.npmjs.org/
- run: yarn install
- run: yarn build
@@ -40,7 +40,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
- node-version: 12
+ node-version: 16
registry-url: https://npm.pkg.github.com/
- run: yarn install
- run: yarn build
diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml
index c98cc879..de67140b 100644
--- a/.github/workflows/visual-testing.yml
+++ b/.github/workflows/visual-testing.yml
@@ -5,7 +5,7 @@ on:
branches: [ main ]
pull_request:
branches: [ main ]
-
+
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
@@ -16,10 +16,10 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v2
- - name: Use Node.js 15
+ - name: Use Node.js 16
uses: actions/setup-node@v2
with:
- node-version: 15
+ node-version: 16
- name: Install
run: yarn install
- name: Build
@@ -29,4 +29,4 @@ jobs:
yarn start &
sleep 60 &&
yarn visual
-
+
diff --git a/.gitignore b/.gitignore
index 5376a6a3..83301d90 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ storybook-static
.idea
.env
stats.html
+
+.cache
diff --git a/packages/dev/src/Nav.ts b/packages/dev/src/Nav.ts
index ef0d2511..1ed057ff 100644
--- a/packages/dev/src/Nav.ts
+++ b/packages/dev/src/Nav.ts
@@ -31,9 +31,9 @@ export const Nav: NavInterface[] = [
to: '/quickstarts-context',
},
{
- id: 'in-context-help',
- name: 'In Context Help',
- to: '/in-context-help',
+ id: 'in-app-documentation',
+ name: 'In-app documentation',
+ to: '/in-app-documentation',
},
];
diff --git a/packages/dev/src/index.tsx b/packages/dev/src/index.tsx
index 3e290ac2..3628aa64 100755
--- a/packages/dev/src/index.tsx
+++ b/packages/dev/src/index.tsx
@@ -48,7 +48,7 @@ ReactDOM.render(
-
+
diff --git a/packages/dev/src/quickstarts-data/quick-start-test-data.ts b/packages/dev/src/quickstarts-data/quick-start-test-data.ts
index 00ebdfe4..35a7897a 100644
--- a/packages/dev/src/quickstarts-data/quick-start-test-data.ts
+++ b/packages/dev/src/quickstarts-data/quick-start-test-data.ts
@@ -21,8 +21,8 @@ import sampleApplicationQuickstart from './yaml/sample-application-quickstart.ya
import serverlessApplicationQuickstart from './yaml/serverless-application-quickstart.yaml';
import springWithS2i from './yaml/spring-with-s2i.yaml';
-// in-context help examples
-import exampleHelpTopics from './yaml/in-context-help/example-topics.yaml';
+// In-app documentation examples
+import exampleHelpTopics from './yaml/in-app-documentation/example-topics.yaml';
export const allQuickStarts: QuickStart[] = [
template,
diff --git a/packages/dev/src/quickstarts-data/yaml/in-context-help/example-topics.yaml b/packages/dev/src/quickstarts-data/yaml/in-app-documentation/example-topics.yaml
similarity index 100%
rename from packages/dev/src/quickstarts-data/yaml/in-context-help/example-topics.yaml
rename to packages/dev/src/quickstarts-data/yaml/in-app-documentation/example-topics.yaml
diff --git a/packages/module/.eslintignore b/packages/module/.eslintignore
new file mode 100644
index 00000000..54311a0c
--- /dev/null
+++ b/packages/module/.eslintignore
@@ -0,0 +1 @@
+**/generated/**/*.js
diff --git a/packages/module/.gitignore b/packages/module/.gitignore
new file mode 100644
index 00000000..8cb63023
--- /dev/null
+++ b/packages/module/.gitignore
@@ -0,0 +1,4 @@
+# Docs
+.cache
+**/generated/**/*.js
+public
diff --git a/packages/module/package.json b/packages/module/package.json
index 649d9628..c85af84e 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -3,6 +3,7 @@
"version": "2.2.3",
"description": "PatternFly quick starts",
"files": [
+ "src",
"dist"
],
"main": "dist/index.js",
@@ -20,7 +21,7 @@
"scripts": {
"clean": "rm -rf dist",
"prebuild": "yarn clean",
- "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone",
+ "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone && yarn docs:copy",
"watch": "rollup -w --config rollup-quick.config.js",
"quick": "rollup --config rollup-quick.config.js",
"combine": "node ./combineCss.js",
@@ -32,7 +33,12 @@
"post-css": "yarn purge-css && yarn min-css && yarn min-css-standalone",
"purge-css": "purgecss --config ./purgecss.config.js",
"min-css": "cleancss dist/quickstarts.css -o dist/quickstarts.min.css",
- "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css"
+ "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css",
+ "docs:develop": "pf-docs-framework start",
+ "docs:build": "pf-docs-framework build all --output public",
+ "docs:serve": "pf-docs-framework serve public --port 5000",
+ "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+ "docs:copy": "mkdir -p dist/patternfly-docs && cp -R patternfly-docs/content/extensions/quick-starts dist/patternfly-docs"
},
"peerDependencies": {
"@patternfly/react-core": ">=4.115.2",
@@ -86,6 +92,7 @@
"rollup-plugin-typescript2": "^0.29.0",
"rollup-plugin-visualizer": "^5.5.0",
"sass": "^1.35.2",
- "tslib": "^2.0.3"
+ "tslib": "^2.0.3",
+ "@patternfly/documentation-framework": "1.0.2"
}
}
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md
new file mode 100644
index 00000000..8aa51785
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md
@@ -0,0 +1,105 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files for each extension
+section: extensions
+# Sidenav secondary level section
+# should be the same for all markdown files for each extension
+id: Quick Starts
+# Tab
+source: design-guidelines
+---
+
+# Quick starts
+## Elements
+### Card
+
+Quick starts are usually surfaced within a [catalog](https://www.patternfly.org/v4/components/card/design-guidelines/#cards-in-catalog-views) as clickable cards.
+
+
+
+1. **Icon:** An icon associated with the quick start topic can be included on the card. If no specific icon exists, use the rocket icon.
+2. **Title:** The title briefly communicates what the quick start covers.
+3. **Labels:** [Filled labels](https://www.patternfly.org/v4/components/label) communicate the estimated completion time and status. If the quick start is presented in a mixed catalog of resources, a label can indicate the type of resource.
+4. **Description:** The description summarizes the quick start outcome in four lines or fewer.
+5. **Prerequisites (optional):** Prerequisites communicate user requirements prior to starting the quick start. They’re displayed in a popover, and they’re organized into a bulleted list. The total number of prerequisites is listed in parentheses on the quick start card.
+
+
+
+### Catalog
+Multiple quick starts are often presented to users in a catalog.
+
+
+
+Catalogs with 14 or fewer quick starts should include a simple toolbar with the following elements:
+1. Keyword filter
+2. Status filter
+3. Item count
+
+Catalogs with 15 or more quick starts should include filtering functionality presented as vertical filters on the left side of the page instead of a simple toolbar.
+
+For quick starts in a mixed catalog of resources, we recommend including an action link on the card so that users can easily recognize how to interact with it:
+
+* **Start:** Use if the quick start hasn't been started yet
+* **Continue:** Use if the quick start is in progress
+* **Restart:** Use if the quick start has already been completed
+
+There should only be one action displayed on a card at a time.
+
+
+
+### Side panel
+Quick starts use the [drawer component](https://www.patternfly.org/v4/components/drawer), which contains all the step-by-step instructions and tasks.
+
+
+
+1. **Quick start title:** The quick start title that is shown on the card.
+2. **Duration:** The estimated amount of time the quick start will take to complete.
+3. **Close:** The close button allows the user to close the quick start at any time.
+4. **Button bar:** The button bar allows the user to advance between quick start tasks. For task screens, the buttons are **Next**, **Back**, and **Restart**. For the intro screen, the only button is the **Start** button. On the completion screen, the buttons are **Close**, **Back**, and **Restart**.
+
+
+
+Everything is contained in the drawer and remains anchored to the right, allowing the user to follow the steps without blocking any parts of the UI. The drawer does not overlay the UI and instead pushes it to the left, including the masthead. This prevents any modals or side panels within the UI from covering the quick start instructions. The side panel is also resizable.
+
+
+
+
+
+#### Introduction screen
+The first screen of any quick start is the introductory screen, which includes most of the information from the quick start card.
+
+
+
+#### Tasks
+Tasks consist of 2-10 steps, which walk the user through the UI to complete the goal of the task.
+
+
+
+#### Check your work
+The check your work module is shown at the bottom of the side panel for each task and helps the user validate that they have successfully completed the task. You can choose to make the check your work module required or optional. Validation questions should be yes/no questions, allowing the user to select the radio button with the appropriate response.
+
+
+
+If a user selects **Yes**, the check your work module and associated task header turn green. The task header icon becomes a checkmark.
+
+
+
+If a user selects **No**, the check your work module and associated task header turn red. The task header icon becomes an **X**. When possible, explain what a user must do to complete the task, or link to relevant documentation.
+
+
+
+## Content guidelines
+Here are some general guidelines to follow when authoring quick start content:
+* Clearly state the outcome at the beginning of the quick start and provide brief context to explain why the user is completing the tasks.
+* Avoid screen captures. They require regular maintenance and can potentially lead to issues around accessibility and page loading.
+* Keep content minimal to avoid a wall of text that can overwhelm users and prevent easy skimming.
+* (Optional) As needed, provide a carefully curated set of links at specific points in the quick start:
+ * Provide links within a quick start task if the user is likely to need or want more conceptual or reference information.
+ * Provide links at the end of quick starts if the user is likely to need or want additional technical information upon completion.
+ * Provide links in the check your work module when a user answers **No** if more robust information can help the user understand what actions they must take to complete the task.
+
+For more specific quick start content guidelines, refer to the [Red Hat OpenShift documentation](https://docs.openshift.com/container-platform/4.7/web_console/creating-quick-start-tutorials.html). While these guidelines are geared towards Red Hat OpenShift, they can apply to quick starts in any products.
+
+## Quick starts in context
+
+
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements copy.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements copy.png
new file mode 100644
index 00000000..5a3af08e
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements copy.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements.png
new file mode 100644
index 00000000..5a3af08e
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/card-elements.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/catalog-elements.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/catalog-elements.png
new file mode 100644
index 00000000..2183114f
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/catalog-elements.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/check-your-work.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/check-your-work.png
new file mode 100644
index 00000000..fc28d621
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/check-your-work.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/introduction-screen.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/introduction-screen.png
new file mode 100644
index 00000000..0d01a5d5
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/introduction-screen.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/mixed-catalog.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/mixed-catalog.png
new file mode 100644
index 00000000..e55daeee
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/mixed-catalog.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/prerequisites.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/prerequisites.png
new file mode 100644
index 00000000..ed5393d5
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/prerequisites.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/qs-context.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/qs-context.png
new file mode 100644
index 00000000..3892f382
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/qs-context.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-elements.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-elements.png
new file mode 100644
index 00000000..0c676df6
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-elements.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-resized.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-resized.png
new file mode 100644
index 00000000..38742723
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel-resized.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel.png
new file mode 100644
index 00000000..5184f970
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/side-panel.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-no.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-no.png
new file mode 100644
index 00000000..cf800e16
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-no.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-yes.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-yes.png
new file mode 100644
index 00000000..88d735b9
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task-yes.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task.png b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task.png
new file mode 100644
index 00000000..26121f4f
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/img/task.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/Basic.jsx b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/Basic.jsx
new file mode 100644
index 00000000..ae14506f
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/Basic.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+ LoadingBox,
+ QuickStartContainer,
+ useLocalStorage,
+ QuickStartCatalogPage,
+} from '@patternfly/quickstarts';
+import { quickStarts as exampleQuickStarts } from './example-data';
+
+export const App = ({ showCardFooters }) => {
+ const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+ const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+ const language = localStorage.getItem('bridge/language') || 'en';
+
+ // eslint-disable-next-line no-console
+ React.useEffect(() => console.log(activeQuickStartID), [activeQuickStartID]);
+ React.useEffect(() => {
+ // callback on state change
+ // eslint-disable-next-line no-console
+ console.log(allQuickStartStates);
+ }, [allQuickStartStates]);
+
+ const [loading, setLoading] = React.useState(true);
+ const [quickStarts, setQuickStarts] = React.useState([]);
+ React.useEffect(() => {
+ const load = async () => {
+ setQuickStarts(exampleQuickStarts);
+ setLoading(false);
+ };
+ setTimeout(() => {
+ load();
+ }, 500);
+ }, []);
+
+ const drawerProps = {
+ quickStarts,
+ activeQuickStartID,
+ allQuickStartStates,
+ setActiveQuickStartID,
+ setAllQuickStartStates,
+ showCardFooters,
+ language,
+ loading,
+ alwaysShowTaskReview: true,
+ markdown: {
+ extensions: [
+ // variable substitution
+ {
+ type: 'output',
+ filter: function(html) {
+ html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+ html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+ return html;
+ },
+ },
+ ],
+ },
+ };
+
+ return (
+ }>
+
+
+
+
+ );
+};
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/HelpTopic.jsx b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/HelpTopic.jsx
new file mode 100644
index 00000000..a167497d
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/HelpTopic.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
+import { helpTopics as exampleHelpTopics } from './example-data';
+
+const TinyMockConsole = () => {
+ const { setActiveHelpTopicByName, helpTopics } = React.useContext(HelpTopicContext);
+
+ const handleSetTopic = (name) => {
+ setActiveHelpTopicByName(name);
+ };
+
+ return (
+
+ {helpTopics.map((topic) => {
+ return (
+
+ handleSetTopic(topic.name)}>Open Help {topic.title}
+
+ );
+ })}
+
+ );
+};
+
+export const AppHelpTopicDemo = () => {
+ const language = localStorage.getItem('bridge/language') || 'en';
+
+ const [loading, setLoading] = React.useState(true);
+
+ React.useEffect(() => {
+ const load = async () => {
+ setLoading(false);
+ };
+ setTimeout(() => {
+ load();
+ }, 500);
+ }, []);
+
+ const inContextHelpProps = {
+ helpTopics: exampleHelpTopics,
+ language,
+ loading,
+ };
+
+ return (
+ }>
+
+
+
+
+ );
+};
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md
new file mode 100644
index 00000000..d15a55c4
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/about.md
@@ -0,0 +1,77 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files for each extension
+section: extensions
+# Sidenav secondary level section
+# should be the same for all markdown files for each extension
+id: Quick Starts
+# Tab
+source: about
+---
+# About
+The **@patternfly/quickstarts** extension is made up of two parts: `Quick starts` and `In App Documentation` product documentation tools.
+
+## Full live demo application
+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).
+
+A few key concepts are outlined below.
+
+## Quick starts
+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 provide guidance around installation and setup.
+
+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.
+
+
+
+For more detailed design guidelines and visuals see [here.](/extensions/quick-starts/design-guidelines#quickstarts)
+
+### Quick start format
+
+#### For developers
+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).
+
+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).
+
+#### For content authors
+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)
+
+### Opening and closing the side panel
+
+#### Custom handler
+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:
+```typescript
+const { setActiveQuickStart } = React.useContext(
+ QuickStartContext,
+ );
+```
+
+#### Quick start catalog
+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.
+
+
+
+## In-app documentation
+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.
+
+`HelpTopics` are displayed in a side panel just like `Quick starts`:
+
+
+
+### Help Topic format
+
+#### For developers
+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).
+
+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).
+
+#### For content authors
+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)
+
+### Opening and closing the side panel
+Open the side panel by calling `setActiveHelpTopicByName` (available from `HelpTopicContext`) with a `HelpTopic`'s name value.
+
+```typescript
+const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+```
+
+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.
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md
new file mode 100644
index 00000000..1cece359
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md
@@ -0,0 +1,27 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Quick Starts
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: Basic-Quick-Starts
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['QuickStartContainer']
+---
+
+import { quickStarts as exampleQuickStarts } from './example-data';
+import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts';
+import '@patternfly/quickstarts/dist/quickstarts.css';
+
+## Basic Quick Starts Usage
+
+### With Catalog Page
+```js file="./Basic.jsx"
+```
+
+### Fullscreen example
+```js file="./Basic.jsx" isFullscreen
+```
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-help-topics.js b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-help-topics.js
new file mode 100644
index 00000000..48f241a9
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-help-topics.js
@@ -0,0 +1,173 @@
+export const exampleHelpTopics = [
+ {
+ name: 'auto-deploy',
+ tags: ['page-1'],
+ title: 'Automatic Deployment',
+ content:
+ '**An Automatic Deployment** is...\n\nEtiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.',
+ links: [
+ {
+ text: 'Creating quick starts (external)',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ isExternal: true,
+ },
+ {
+ text: 'Redhat Console (opens in new tab)',
+ href: 'https://console.redhat.com',
+ newTab: true,
+ },
+ ],
+ },
+ {
+ name: 'workspace',
+ tags: ['page-1', 'page-2', 'page-3'],
+ title: 'Workspace (no links)',
+ content:
+ '**A Workspace** is...\n\nFusce nunc risus, vehicula feugiat pellentesque sit amet, pretium non urna. Phasellus nibh mi, ornare quis euismod a, iaculis et eros. Vivamus auctor nunc odio, quis porttitor diam pellentesque nec. In et varius tellus, eget porta urna. Etiam bibendum, est eget mollis lobortis, velit risus efficitur lacus, sed pulvinar sem est vel libero. In sodales placerat tincidunt. Proin vitae risus elit. Ut lobortis ligula est, cursus rhoncus enim scelerisque ac. Donec lacus nisl, tempor porta hendrerit nec, volutpat vitae arcu. Curabitur ornare ullamcorper mi in tincidunt. Aenean efficitur posuere auctor. Pellentesque accumsan mauris vel arcu congue, nec sagittis nisl condimentum. Suspendisse mauris nulla, dignissim at viverra sed, fringilla eu purus.',
+ },
+ {
+ name: 'code-sample',
+ tags: ['page-1'],
+ title: 'Code Sample',
+ content:
+ '**A Code Sample** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit.\n```\nconsole.log("hello world")\n```\nEtiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'manual-deployment',
+ tags: ['page-2', 'page-1'],
+ title: 'Manual Deployment',
+ content:
+ '**A Manual Deployment** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit.\n```\nconsole.log("hello world")\n```\nEtiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'target-port',
+ tags: ['page-2'],
+ title: 'Target Port',
+ content:
+ '**A Target Port** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'build-configuration',
+ tags: ['page-2'],
+ title: 'Build Configuration',
+ content:
+ '**A Build Configuration** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'run-time',
+ tags: ['page-3'],
+ title: 'Runtime',
+ content:
+ '**A Runtime** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'deploy-configuration',
+ tags: ['page-3'],
+ title: 'Deploy Configuration',
+ content:
+ '**A Deploy Configuration** is...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'environment-variables',
+ tags: ['page-3'],
+ title: 'Environment Variables',
+ content:
+ '**Environment Variable** are...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+ {
+ name: 'health-checks',
+ tags: ['page-3'],
+ title: 'Health Checks',
+ content:
+ '**Health Checks** are...\n\nVivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.',
+ links: [
+ {
+ text: 'Creating quick starts',
+ href:
+ 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+ },
+ {
+ text: 'Redhat Console',
+ href: 'https://console.redhat.com',
+ },
+ ],
+ },
+];
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-quickstarts.js b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-quickstarts.js
new file mode 100644
index 00000000..3ad4fa43
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/example-quickstarts.js
@@ -0,0 +1,215 @@
+export const explorePipelinesQuickStart = {
+ apiVersion: 'console.openshift.io/v1',
+ kind: 'QuickStarts',
+ metadata: {
+ name: 'explore-pipelines',
+ },
+ spec: {
+ version: 4.7,
+ displayName: `Installing the Pipelines Operator`,
+ durationMinutes: 10,
+ // icon: pipelineIcon,
+ description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
+ introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
+* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
+* They are designed for decentralized teams that work on a microservice-based architecture.
+* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
+* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
+* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.
+To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
+ tasks: [
+ {
+ title: `Installing the OpenShift Pipelines Operator`,
+ description: `### To install the OpenShift Pipelines Operator:
+1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**.
+2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`.
+3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline.
+4. Click the **tile** to open the Operator details.
+5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**.
+6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**.
+7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `,
+ review: {
+ instructions: `#### To verify that the OpenShift Pipelines Operator is installed:
+1. From the **Operators** section of the navigation, go to the **Installed Operators** page.
+2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators.
+In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`,
+ failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.`,
+ },
+ summary: {
+ success: `You have installed the Pipelines Operator!`,
+ failed: `Try the steps again.`,
+ },
+ },
+ ],
+ conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`,
+ nextQuickStart: [`install-app-and-associate-pipeline`],
+ accessReviewResources: [
+ {
+ group: 'operators.coreos.com',
+ resource: 'operatorgroups',
+ verb: 'list',
+ },
+ {
+ group: 'packages.operators.coreos.com',
+ resource: 'packagemanifests',
+ verb: 'list',
+ },
+ ],
+ },
+};
+
+export const exploreServerlessQuickStart = {
+ apiVersion: 'console.openshift.io/v1',
+ kind: 'ConsoleQuickStarts',
+ metadata: {
+ name: 'explore-serverless',
+ },
+ spec: {
+ version: 4.7,
+ displayName: `Setting up Serverless`,
+ durationMinutes: 10,
+ description: `Install the OpenShift Serverless Operator to deploy stateless, event-trigger-based applications.`,
+ introduction: `Red Hat® OpenShift® Serverless lets you run stateless, serverless workloads on a single multi-cloud container platform.
+Serverless reduces the need to manage infrastructure or perform back-end development. Scaling is automated, and applications can run on any cloud, hybrid, or on-premises environment. Choosing Serverless means simplicity, portability, and efficiency.
+Adding OpenShift Serverless to your OpenShift Container Platform cluster is quick and easy. This quick start walks you through the process.`,
+ tasks: [
+ {
+ title: `Install the OpenShift Serverless Operator`,
+ description: `### To install the Serverless Operator:
+1. From the **Administrator** perspective, go to the **OperatorHub** from the **Operators** section of the navigation.
+2. In the **Filter by keyword** field, type \`Serverless\`.
+3. If the tile has an **Installed** label on it, the Operator is already installed. Proceed to task two.
+4. Click the **OpenShift Serverless Operator** tile.
+5. At the top of the OpenShift Serverless Operator panel, click **Install**.
+6. Verify that the **OpenShift Serverless Operator Update Channel** is set to the latest version, then click **Install**.
+7. Wait for the OpenShift Serverless Operator's status to change from **Installing operator** to **Operator installed - Ready for use**.
+`,
+
+ review: {
+ instructions: `#### To verify that the OpenShift Serverless Operator is installed:
+In the Status column of the **Installed Operators** page, is the OpenShift Serverless Operator’s status **Succeeded?**`,
+ failedTaskHelp: `This task is incomplete. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/installing_serverless/installing-openshift-serverless.html) about this topic.`,
+ },
+
+ summary: {
+ success: `You just installed the OpenShift Serverless Operator! Next, we'll install the required Knative Eventing and Knative Serving Custom Resource components for this Operator to run.`,
+ failed: `This task is incomplete. Try the task again, or read more about this topic.`,
+ },
+ },
+ {
+ title: `Create the Knative Serving and Knative Eventing APIs`,
+ description: `Now let’s install the Knative application programming interfaces (APIs) needed to deploy applications and container workloads.
+**To create the Knative Serving and Knative Eventing APIs:**
+1. Go to the **Installed Operators** page.
+2. Click **OpenShift Serverless Operator**.
+3. If it does not already exist, create a project called “knative-serving” under the Project list at the top of the page. If it does exist, select the project from the list.
+4. Click the Knative Serving link under Provided APIs or, from Knative Serving tile, click **Create Instance**.
+5. Click **Create** to create the custom resource.
+6. If it does not already exist, create a project called “knative-eventing” under the Project list at the top of the page. If it does exist, select the project from the list.
+7. Click the Knative Eventing link under Provided APIs or, from Knative Eventing tile, click **Create Instance**.
+8. Click **Create** to create the custom resource.
+`,
+ review: {
+ instructions: `#### To verify that the Knative Serving and Knative Eventing APIs were installed successfully:
+Go to the **All Instances** tab of the OpenShift Serverless Operator.
+Are the Knative Serving and Knative Eventing resources in the list of instances?
+`,
+ failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/installing_serverless/installing-knative-serving.html#serverless-create-serving-project-web-console_installing-knative-serving) about this topic.`,
+ },
+ summary: {
+ success: `You just created instances of the Knative Service and Knative Eventing resources.`,
+ failed: `Check your work to make sure that the Knative Service and Knative Eventing resources were created.`,
+ },
+ },
+ ],
+ conclusion: `Your Serverless Operator is ready! If you want to learn how to deploy a serverless application, take the **Exploring Serverless applications** quick start.`,
+ nextQuickStart: [`serverless-application`],
+ accessReviewResources: [
+ {
+ group: 'operators.coreos.com',
+ resource: 'operatorgroups',
+ verb: 'list',
+ },
+ {
+ group: 'packages.operators.coreos.com',
+ resource: 'packagemanifests',
+ verb: 'list',
+ },
+ ],
+ },
+};
+
+export const monitorSampleAppQuickStart = {
+ apiVersion: 'console.openshift.io/v1',
+ kind: 'QuickStarts',
+ metadata: {
+ name: 'monitor-sampleapp',
+ },
+ spec: {
+ version: 4.7,
+ displayName: 'Monitoring your sample application',
+ durationMinutes: 10,
+ description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+ prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+ introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+ tasks: [
+ {
+ title: `Viewing the monitoring details of your sample application`,
+ description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+ review: {
+ instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+ failedTaskHelp: `This task isn’t verified yet. Try the task again.`,
+ },
+ summary: {
+ success: `You have learned how you can monitor your sample app!`,
+ failed: `Try the steps again.`,
+ },
+ },
+ {
+ title: `Viewing your project monitoring dashboard`,
+ description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+ review: {
+ instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+ failedTaskHelp: `This task isn’t verified yet. Try the task again.`,
+ },
+ summary: {
+ success: `You have learned how to view the dashboard in the context of your sample app!`,
+ failed: `Try the steps again.`,
+ },
+ },
+ {
+ title: `Viewing custom metrics`,
+ description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+ review: {
+ instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project? Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+ failedTaskHelp: `This task isn’t verified yet. Try the task again.`,
+ },
+ summary: {
+ success: `You have learned how to run a query!`,
+ failed: `Try the steps again.`,
+ },
+ },
+ ],
+ conclusion: `You have learned how to access workload monitoring and metrics!`,
+
+ nextQuickStart: [``],
+ },
+};
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/index.js b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/index.js
new file mode 100644
index 00000000..77a4dbed
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/example-data/index.js
@@ -0,0 +1,15 @@
+import {
+ explorePipelinesQuickStart,
+ exploreServerlessQuickStart,
+ monitorSampleAppQuickStart,
+} from './example-quickstarts';
+
+export const quickStarts = [
+ explorePipelinesQuickStart,
+ exploreServerlessQuickStart,
+ monitorSampleAppQuickStart,
+];
+
+import { exampleHelpTopics } from './example-help-topics';
+
+export const helpTopics = exampleHelpTopics;
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md
new file mode 100644
index 00000000..6a719ad4
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md
@@ -0,0 +1,25 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files for each extension
+section: extensions
+# Sidenav secondary level section
+# should be the same for all markdown files for each extension
+id: Quick Starts
+# Tab
+source: In-App-Documentation
+propComponents: ['HelpTopicContainer']
+---
+
+import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
+import { helpTopics as exampleHelpTopics } from './example-data';
+import '@patternfly/quickstarts/dist/quickstarts.css';
+
+## In-app documentation
+
+### Basic Example
+```js file="./HelpTopic.jsx"
+```
+
+### Basic Example Fullscreen
+```js file="./HelpTopic.jsx" isFullscreen
+```
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/catalog.png b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/catalog.png
new file mode 100644
index 00000000..b04831da
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/catalog.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/help-topic.png b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/help-topic.png
new file mode 100644
index 00000000..5a1827eb
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/help-topic.png differ
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/side-panel.png b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/side-panel.png
new file mode 100644
index 00000000..1d8c756f
Binary files /dev/null and b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/img/side-panel.png differ
diff --git a/packages/module/patternfly-docs/generated/extensions/quick-starts/Basic-Quick-Starts/fullscreen-example.png b/packages/module/patternfly-docs/generated/extensions/quick-starts/Basic-Quick-Starts/fullscreen-example.png
new file mode 100644
index 00000000..d588ae90
Binary files /dev/null and b/packages/module/patternfly-docs/generated/extensions/quick-starts/Basic-Quick-Starts/fullscreen-example.png differ
diff --git a/packages/module/patternfly-docs/generated/extensions/quick-starts/In-App-Documentation/fullscreen.png b/packages/module/patternfly-docs/generated/extensions/quick-starts/In-App-Documentation/fullscreen.png
new file mode 100644
index 00000000..2d5bbd99
Binary files /dev/null and b/packages/module/patternfly-docs/generated/extensions/quick-starts/In-App-Documentation/fullscreen.png differ
diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js
new file mode 100644
index 00000000..1d0bf437
--- /dev/null
+++ b/packages/module/patternfly-docs/pages/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Title, PageSection } from '@patternfly/react-core';
+
+const centerStyle = {
+ flexGrow: 1,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+};
+
+const IndexPage = () => {
+ return (
+
+