@patternfly/quickstarts 2.2.3 → 2.2.4

package/dist/patternfly-docs/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.
+
+<img src="./img/card-elements.png" alt="Elements of a card" width="370"/>
+
+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.
+
+<img src="./img/prerequisites.png" alt="Example of prerequisites" width="395"/>
+
+### Catalog
+Multiple quick starts are often presented to users in a catalog.
+
+<img src="./img/catalog-elements.png" alt="Quick start catalog" width="1680"/>
+
+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.
+
+<img src="./img/mixed-catalog.png" alt="Mixed resource catalog" width="1062"/>
+
+### 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.
+
+<img src="./img/side-panel-elements.png" alt="Side panel elements" width="449"/>
+
+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.
+
+<img src="./img/side-panel.png" alt="Side panel" width="1680"/>
+
+<img src="./img/side-panel-resized.png" alt="Resized side panel" width="1680"/>
+
+#### Introduction screen
+The first screen of any quick start is the introductory screen, which includes most of the information from the quick start card.
+
+<img src="./img/introduction-screen.png" alt="Introduction screen" width="449"/>
+
+#### Tasks
+Tasks consist of 2-10 steps, which walk the user through the UI to complete the goal of the task.
+
+<img src="./img/task.png" alt="Example task" width="449"/>
+
+#### 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.
+
+<img src="./img/check-your-work.png" alt="Check your work module" width="431"/>
+
+If a user selects **Yes**, the check your work module and associated task header turn green. The task header icon becomes a checkmark.
+
+<img src="./img/task-yes.png" alt="Check your work module with Yes selected" width="449"/>
+
+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.
+
+<img src="./img/task-no.png" alt="Check your work module with No selected" width="449"/>
+
+## 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
+
+<img src="./img/qs-context.png" alt="A quick start in context of a UI" width="1680"/>

package/dist/patternfly-docs/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 (
+    <React.Suspense fallback={<LoadingBox />}>
+      <QuickStartContainer {...drawerProps}>
+        <QuickStartCatalogPage
+          title="Quick starts"
+          hint={
+            'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
+          }
+        />
+      </QuickStartContainer>
+    </React.Suspense>
+  );
+};

package/dist/patternfly-docs/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 (
+    <Stack hasGutter>
+      {helpTopics.map((topic) => {
+        return (
+          <StackItem key={topic.name}>
+            <a onClick={() => handleSetTopic(topic.name)}>Open Help {topic.title}</a>
+          </StackItem>
+        );
+      })}
+    </Stack>
+  );
+};
+
+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 (
+    <React.Suspense fallback={<LoadingBox />}>
+      <HelpTopicContainer {...inContextHelpProps}>
+        <TinyMockConsole />
+      </HelpTopicContainer>
+    </React.Suspense>
+  );
+};

package/dist/patternfly-docs/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.
+
+<img src="./img/side-panel.png" alt="Side panel elements" width="449"/>
+
+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<QuickStartContextValues>(
+    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. 
+
+<img src="./img/catalog.png" alt="Quick start catalog" width="1680"/>
+
+## 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`:
+
+<img src="./img/help-topic.png" alt="Quick start catalog" width="449"/>
+
+### 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<HelpTopicContextValues>(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.

package/dist/patternfly-docs/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
+```

package/dist/patternfly-docs/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',
+      },
+    ],
+  },
+];