Write the doc

example/app.tsx

@@ -1,56 +1,71 @@
 import 'react-app-polyfill/ie11';
 import '@patternfly/react-core/dist/styles/base.css';
 import * as React from 'react';
-import { Redirect, useHistory } from 'react-router-dom';
+import { Route, useHistory } from 'react-router-dom';
 import { LastLocationProvider } from 'react-router-last-location';
 import { AppLayout, LazyRoute, SwitchWith404 } from 'use-patternfly';
 import './app.css';
+import OverviewPage from './pages/OverviewPage';
 
 export const App = () => {
   const history = useHistory();
-
   return (
-
     <AppLayout
-      logo={'Patternfly Seed'}
+      logo={'use-patternfly'}
       logoProps={{
         onClick: () => history.push('/')
       }}
       navVariant={'vertical'}
       navItems={[
         {
-          title: 'Dashboard',
-          to: '/dashboard',
+          title: 'Overview',
+          to: '/',
+        },
+        {
+          title: 'Getting Started',
+          to: '/getting-started',
+          items: [
+            { to: '/getting-started/installation', title: 'Installation' },
+            { to: '/getting-started/usage', title: 'Usage' },
+          ]
+        },
+        {
+          title: 'API',
+          to: '/api',
           items: [
-            { to: '/dashboard/simple', title: 'Simple' },
-            {},
-            { to: '/dashboard/params', title: 'Params: empty', exact: true },
-            { to: '/dashboard/params/hello', title: 'Params: hello', exact: true },
+            { to: '/api/AppLayout', title: 'AppLayout' },
+          ],
+        }, {
+          title: 'Examples',
+          to: '/examples',
+          items: [
+            { to: '/examples/async-data-list', title: 'Async Data List' }
           ],
         },
-        { to: '/support', title: 'Support' },
-        {},
-        { to: '/broken', title: 'Broken link' },
       ]}
-      navGroupsStyle={'expandable'}
+      navGroupsStyle={'grouped'}
     >
       <LastLocationProvider>
         <SwitchWith404>
-          <Redirect from={'/'} to={'/dashboard'} exact={true} />
+          <Route
+            path='/'
+          >
+              <OverviewPage />
+          </Route>
           <LazyRoute
-            path='/dashboard'
-            getComponent={() => import(/* webpackChunkName: 'dashboard-page' */ './pages/DashboardPage')}
+            path='/getting-started'
+            getComponent={() => import(/* webpackChunkName: 'getting-started-page' */ './pages/GettingStartedPage')}
           >
-            {({ component: DashboardPage }) =>
-              <DashboardPage />
+            {({ component: GettingStartedPage }) =>
+              <GettingStartedPage />
             }
           </LazyRoute>
           <LazyRoute
-            path='/support'
-            getComponent={() => import(/* webpackChunkName: 'support-page' */ './pages/SupportPage')}
+            path='/api'
+            getComponent={() => import(/* webpackChunkName: 'api-page' */ './pages/ApiPage')}
           >
-            {({ component: SupportPage }) =>
-              <SupportPage />
+            {({ component: ApiPage }) =>
+              <ApiPage />
             }
           </LazyRoute>
         </SwitchWith404>

example/components/Support.tsx → example/components/GettingStarted.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PageSection, Title, EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Button, EmptyStateSecondaryActions } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
-export const Support: React.FunctionComponent<any> = ({ children, ...props }) => {
+export const GettingStarted: React.FunctionComponent<any> = ({ children, ...props }) => {
   return (
     <PageSection {...props}>
       <EmptyState variant={EmptyStateVariant.full}>

example/components/Overview.tsx

@@ -0,0 +1,45 @@
+import { PageSection, TextContent, Title, Text, FlexItem, Flex, Button } from '@patternfly/react-core';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+export const Overview: React.FunctionComponent<any> = ({ children, ...props }) => {
+  return (
+    <PageSection variant={'light'} {...props}>
+      <TextContent>
+        <Title size={'3xl'}>Overview</Title>
+        <Text>
+          use-patternfly is an opinionated set of hooks and components useful when building a React app with PatternFly.
+        </Text>
+        <Text>
+          This project aims to encourage code reuse between all projects using PatternFly and to showcase how to implement features like fetching from an API and showing the data in a DataList or Table component.
+        </Text>
+
+        <Title size={'2xl'} headingLevel={'h2'}>Motivation</Title>
+        <Text>
+          Since I (<a href={'https://twitter.com/riccardoforina'}>@riccardoforina</a>) started
+          building apps using PatternFly, I found myself writing solutions to the same problem
+          many times. But how many ways can there be to <Link to={'/api/useDocumentTitle'}>set the document title</Link> or <Link to={'/api/AppLayout'}>wrap an app in a PatternFly chrome</Link>? I felt the need
+          to finalize these solutions in something reusable and well-tested, to finally
+          be able to focus on the app needs instead of re-learning how to wire PatternFly's
+          components once again.
+        </Text>
+      </TextContent>
+
+      <Title size={'2xl'} headingLevel={'h2'}>Dependencies</Title>
+      <Text>The only real dependency-other than PatternFly itself-is <a href={'https://github.com/ReactTraining/react-router'}>react-router</a>,
+        although it's listed as a peer dependency to avoid clashing with whatever
+        version you are running on your project. Other utilities might have extra
+        dependencies, but if you don't plan on using that specific utility you
+        don't need to install them.
+      </Text>
+
+      <TextContent>
+        <Flex>
+          <FlexItem breakpointMods={[{modifier: 'align-right', breakpoint: 'sm'}]}>
+            <Link to={'/getting-started/installation'}><Button as={'div'}>Installation</Button></Link>
+          </FlexItem>
+        </Flex>
+      </TextContent>
+    </PageSection>
+  );
+}

example/components/index.ts

@@ -1,4 +1,5 @@
-export * from './Support';
 export * from './DashboardLayout';
 export * from './DashboardParams';
 export * from './DashboardSimple';
+export * from './GettingStarted';
+export * from './Overview';

example/pages/DashboardPage.tsx → example/pages/ApiPage.tsx

@@ -5,7 +5,7 @@ import { DashboardLayout } from '../components';
 import DashboardSimplePage from './DashboardSimplePage';
 import DashboardParamsPage from './DashboardParamsPage';
 
-export default function DashboardPage() {
+export default function ApiPage() {
   const { path } = useRouteMatch()!;
   const a11yContainerProps = useA11yRouteContainer();
   useDocumentTitle('Dashboard');

example/pages/SupportPage.tsx → example/pages/GettingStartedPage.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useA11yRouteContainer, useDocumentTitle } from 'use-patternfly';
-import { Support } from '../components';
+import { GettingStarted } from '../components';
 
-export default function SupportPage() {
+export default function GettingStartedPage() {
   const a11yContainerProps = useA11yRouteContainer();
   useDocumentTitle('Support');
   return (
-    <Support {...a11yContainerProps} />
+    <GettingStarted {...a11yContainerProps} />
   );
 }

example/pages/OverviewPage.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useA11yRouteContainer, useDocumentTitle } from 'use-patternfly';
+import { Overview } from '../components';
+
+export default function OverviewPage() {
+  const a11yContainerProps = useA11yRouteContainer();
+  useDocumentTitle('Overview');
+  return (
+    <Overview {...a11yContainerProps} />
+  );
+}