@patternfly/documentation-framework 2.0.0-alpha.7 → 2.0.0-alpha.70

package/layouts/sideNavLayout/sideNavLayout.js

@@ -3,17 +3,19 @@ import {
   Button,
   Page,
   PageSidebar,
+  PageSidebarBody,
   Brand,
   Dropdown,
-  DropdownToggle,
   DropdownItem,
   DropdownGroup,
+  DropdownList,
   Divider,
   Masthead,
   MastheadToggle,
   MastheadMain,
   MastheadContent,
   MastheadBrand,
+  MenuToggle,
   PageToggleButton,
   Toolbar,
   ToolbarGroup,
@@ -23,7 +25,6 @@ import {
   Switch,
   SearchInput
 } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
@@ -37,8 +38,7 @@ const HeaderTools = ({
   hasVersionSwitcher,
   algolia,
   hasDarkThemeSwitcher,
-  topNavItems,
-  pathPrefix
+  topNavItems
 }) => {
   const initialVersion = staticVersions.Releases.find(release => release.latest);
   const latestVersion = versions.Releases.find(version => version.latest);
@@ -48,14 +48,9 @@ const HeaderTools = ({
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
-    <DropdownItem
-      key={version.name}
-      component={
-        <a href={isLatest ? '/' : `/${version.name}`}>
-          {`Release ${version.name}`}
-        </a>
-      }
-    />
+    <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
+      {`Release ${version.name}`}
+    </DropdownItem>
   );
 
   const onChange = (_evt, value) => {
@@ -69,7 +64,7 @@ const HeaderTools = ({
   useEffect(() => {
     // reattach algolia to input each time search is expanded
     if (hasSearch && isSearchExpanded) {
-      attachDocSearch(algolia, '.ws-global-search .pf-c-text-input-group__text-input', 1000);
+      attachDocSearch(algolia, '.ws-global-search .pf-v5-c-text-input-group__text-input', 1000);
     }
   }, [isSearchExpanded])
 
@@ -82,13 +77,13 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           {hasDarkThemeSwitcher && (
             <ToolbarItem>
               <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-                document.querySelector('html').classList.toggle('pf-theme-dark')} />
+                document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
             </ToolbarItem>
           )}
           {hasSearch && (
@@ -117,42 +112,60 @@ const HeaderTools = ({
           {hasVersionSwitcher && (
             <ToolbarItem>
               <Dropdown
-                isFullHeight
                 onSelect={() => setDropdownOpen(!isDropdownOpen)}
+                onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
                 isOpen={isDropdownOpen}
-                toggle={(
-                  <DropdownToggle
-                    onToggle={() => setDropdownOpen(!isDropdownOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    isFullHeight
+                    ref={toggleRef}
+                    onClick={() => setDropdownOpen(!isDropdownOpen)}
+                    isExpanded={isDropdownOpen}
                   >
                     Release {initialVersion.name}
-                  </DropdownToggle>
+                  </MenuToggle>
                 )}
-                dropdownItems={[
-                  <DropdownGroup key="latest" label="Latest">
+              >
+                <DropdownGroup key="Latest" label="Latest">
+                  <DropdownList>
                     {getDropdownItem(latestVersion, true)}
-                  </DropdownGroup>,
-                  <DropdownGroup key="Previous" label="Previous releases">
+                  </DropdownList>
+                </DropdownGroup>
+                <DropdownGroup key="Previous releases" label="Previous releases">
+                  <DropdownList>
                     {Object.values(versions.Releases)
                       .filter(version => !version.hidden && !version.latest)
                       .slice(0,3)
                       .map(version => getDropdownItem(version))}
-                  </DropdownGroup>,
-                  <Divider key="divider" className="ws-switcher-divider"/>,
-                  <DropdownItem
-                    key="PatternFly 3"
-                    className="ws-patternfly-3"
-                    target="_blank"
-                    href="https://pf3.patternfly.org/"
-                  >
-                    PatternFly 3
-                    <ExternalLinkAltIcon />
-                  </DropdownItem>
-                ]}
-              />
+                  </DropdownList>
+                </DropdownGroup>
+                <Divider key="divider" className="ws-switcher-divider"/>
+                <DropdownGroup key="Previous versions" label="Previous versions">
+                  <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 4"
+                      className="ws-patternfly-3"
+                      isExternalLink
+                      to="http://v4-archive.patternfly.org/v4/"
+                      itemId="patternfly-4"
+                    >
+                      PatternFly 4
+                    </DropdownItem>
+                    <DropdownItem
+                      key="PatternFly 3"
+                      className="ws-patternfly-3"
+                      isExternalLink
+                      to="https://pf3.patternfly.org/"
+                      itemId="patternfly-3"
+                    >
+                      PatternFly 3
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+              </Dropdown>
             </ToolbarItem>
           )}
-        </ToolbarGroup>
-      </ToolbarContent>
+        </ToolbarGroup></ToolbarContent>
     </Toolbar>
   );
 }
@@ -164,7 +177,7 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
       inputSelector,
       autocompleteOptions: {
         hint: false,
-        appendTo: `.ws-global-search .pf-c-text-input-group`,
+        appendTo: `.ws-global-search .pf-v5-c-text-input-group`,
       },
       debug: process.env.NODE_ENV !== 'production',
       ...algolia
@@ -176,7 +189,6 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
 }
 
 export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
-  const pathPrefix = process.env.pathPrefix;
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
   const hasVersionSwitcher = process.env.hasVersionSwitcher;
@@ -205,8 +217,11 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
     <PageSidebar
       className="ws-page-sidebar"
       theme="light"
-      nav={<SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />}
-    />
+    >
+      <PageSidebarBody>
+        <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
+      </PageSidebarBody>
+    </PageSidebar>
   );
 
   const Header = (
@@ -217,7 +232,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         </PageToggleButton>
       </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand href={prurl || pathPrefix || '/'}>
+        <MastheadBrand href={prurl || '/'}>
           {prnum ? `PR #${prnum}` : (
             <Brand src={logoBase} alt="PatternFly logo" widths={{ default: '180px', '2xl': '220px' }}>
               <source media="(min-width: 768px)" srcSet={logoMd} />
@@ -233,7 +248,6 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             algolia={algolia}
             hasVersionSwitcher={hasVersionSwitcher}
             hasDarkThemeSwitcher={hasDarkThemeSwitcher}
-            pathPrefix={pathPrefix}
             topNavItems={topNavItems}
           />
         )}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.70",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -22,19 +22,19 @@
     "@babel/preset-env": "7.18.2",
     "@mdx-js/util": "1.6.16",
     "@patternfly/ast-helpers": "^0.4.57",
-    "@reach/router": "1.3.4",
+    "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
-    "babel-loader": "8.2.5",
+    "babel-loader": "9.1.2",
     "camelcase-css": "2.0.1",
     "chokidar": "3.5.3",
-    "clean-webpack-plugin": "3.0.0",
+    "clean-webpack-plugin": "4.0.0",
     "codesandbox": "2.2.0",
     "commander": "4.1.1",
-    "copy-webpack-plugin": "6.1.0",
-    "css-loader": "4.3.0",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.3",
     "detab": "2.0.3",
     "express": "4.18.1",
-    "file-loader": "6.1.0",
+    "file-loader": "6.2.0",
     "file-saver": "1.3.8",
     "fs-extra": "9.0.1",
     "glob": "8.0.3",
@@ -42,51 +42,54 @@
     "hast-to-hyperscript": "9.0.0",
     "hast-util-to-text": "2.0.0",
     "html-formatter": "0.1.9",
-    "html-webpack-plugin": "4.4.1",
+    "html-webpack-plugin": "5.5.0",
     "js-yaml": "3.14.0",
     "mdast-util-to-hast": "9.1.1",
     "mdurl": "1.0.1",
-    "mini-css-extract-plugin": "1.3.9",
-    "monaco-editor": "0.21.3",
-    "monaco-editor-webpack-plugin": "2.1.0",
-    "null-loader": "4.0.0",
+    "mini-css-extract-plugin": "2.7.5",
+    "monaco-editor": "0.34.1",
+    "monaco-editor-webpack-plugin": "7.0.1",
+    "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
+    "path-browserify": "1.0.1",
     "postcss": "7.0.32",
-    "postcss-loader": "4.2.0",
+    "postcss-loader": "7.1.0",
+    "process": "^0.11.10",
     "puppeteer": "14.3.0",
     "puppeteer-cluster": "0.23.0",
     "react-docgen": "5.3.1",
-    "react-monaco-editor": "0.48.0",
-    "react-ssr-prepass": "1.2.1",
+    "react-monaco-editor": "^0.51.0",
+    "react-ssr-prepass": "1.5.0",
     "remark-footnotes": "1.0.0",
     "remark-frontmatter": "2.0.0",
     "remark-mdx": "2.0.0-next.8",
     "remark-mdxjs": "2.0.0-next.8",
     "remark-parse": "8.0.3",
     "remark-squeeze-paragraphs": "4.0.0",
-    "responsive-loader": "2.1.1",
+    "responsive-loader": "3.1.2",
     "sharp": "0.30.6",
     "style-to-object": "0.3.0",
     "to-vfile": "6.1.0",
+    "typedoc": "0.22.X",
     "typescript": "4.3.5",
     "unified": "9.1.0",
     "unist-util-remove": "2.0.0",
     "unist-util-visit": "2.0.3",
     "url-loader": "4.1.0",
     "vfile-reporter": "6.0.1",
-    "webpack": "4.44.1",
-    "webpack-bundle-analyzer": "3.8.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.0",
+    "webpack": "5.76.3",
+    "webpack-bundle-analyzer": "4.8.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.13.1",
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^5.0.0-alpha.13",
-    "@patternfly/react-code-editor": "^5.0.0-alpha.7",
-    "@patternfly/react-core": "^5.0.0-alpha.7",
-    "@patternfly/react-table": "^5.0.0-alpha.7",
+    "@patternfly/patternfly": "^5.0.0-alpha.64",
+    "@patternfly/react-code-editor": "^5.0.0-alpha.116",
+    "@patternfly/react-core": "^5.0.0-alpha.115",
+    "@patternfly/react-table": "^5.0.0-alpha.117",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "89d7bd50f35edff6bd17a95536652ea0566cc346"
+  "gitHead": "2d4e4a47ffbbfdb3f24b6e4a6491020be0fb79c5"
 }

package/pages/404/404.css

@@ -5,12 +5,12 @@
 }
 
 .ws-404-card-header {
-  padding: var(--pf-global--spacer--lg);
+  padding: var(--pf-v5-global--spacer--lg);
 }
 
 div.ws-404-button-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
-  padding: var(--pf-global--spacer--xl);
+  padding: var(--pf-v5-global--spacer--xl);
 }

package/pages/404/index.js

@@ -73,7 +73,7 @@ const Page404 = () => {
         <Title headingLevel="h1" size="2xl">
           404: That page no longer exists
         </Title>
-        <p style={{ marginTop: 'var(--pf-global--spacer--sm)' }}>
+        <p style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
           Another page might have the information you need, so try searching PatternFly.
         </p>
         <EmptyStateBody>

package/pages/global-css-variables.md

@@ -16,7 +16,7 @@ Global variables define and enforce global style elements (like values for color
 
 Global variables follow this formula:
 
-`--pf-global--concept--PropertyCamelCase--modifier--state`
+`--pf-v5-global--concept--PropertyCamelCase--modifier--state`
 
 Where...
 
@@ -30,8 +30,8 @@ Example:
   ```css
   :root {
     /* Default & hovered link colors */
-    --pf-global--link--Color: #06c;
-    --pf-global--link--Color--hover: #004080;
+    --pf-v5-global--link--Color: #06c;
+    --pf-v5-global--link--Color--hover: #004080;
   }
   ```
 
@@ -44,33 +44,33 @@ Component variables are used to define custom properties at the component-level.
 
 Component variables follow this formula:
 
-`--pf-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
+`--pf-v5-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
 
 Where...
 
-- `pf-c-block` refers to the block, usually the component or layout name, like `pf-c-alert`.
+- `pf-v5-c-block` refers to the block, usually the component or layout name, like `pf-v5-c-alert`.
 - `__element` refers to the element inside of the block, like `__title`.
 - `modifier` is prefixed with`-m` and refers to a modifier class such as `.pf-m-danger`.
 - `state` is something like `hover` or `active`.
-- `breakpoint` is a media query breakpoint such as `sm` for `$pf-global--breakpoint--xs`.
+- `breakpoint` is a media query breakpoint such as `sm` for `$pf-v5-global--breakpoint--xs`.
 - `pseudo-element` is either `before` or `after`.
 - `child`, `tag`, or `c-component` refers to a child element. It could be a tag or component name, like `svg` or `c-menu`, or it could use `child` to refer to any child element. If any modifiers, states, breakpoints, or pseudo-elements are on the child, include those after this portion of the name.
 
 Example:
 - Note: component variables are scoped to the top-level component selector
   ```css
-  .pf-c-button {
+  .pf-v5-c-button {
     /* Default, primary, and primary hovered button background colors */
-    --pf-c-button--BackgroundColor: transparent;
-    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
-    --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+    --pf-v5-c-button--BackgroundColor: transparent;
+    --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
+    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
   }
   ```
 
 <br/>
 Component variables are listed at the bottom of each component page (for example, [button css variables](/components/button#css-variables)).
 
-Note that all component variables are declared at the top component level (for example, `.pf-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
+Note that all component variables are declared at the top component level (for example, `.pf-v5-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
 
 ![Component variable mapping](./img/component-variable-mapping.png)
 
@@ -78,25 +78,25 @@ Note that all component variables are declared at the top component level (for e
 
 PatternFly defines a number of standard breakpoints. These are always used as a `min-width` breakpoint; i.e. using the `-md` breakpoint would apply to everything at the `-md` width and wider. (There is one exception to this, which is in the responsive behavior of the [table component](/components/table).)
 
-Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-global—breakpoint—[breakpoint]`.
+Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-v5-global—breakpoint—[breakpoint]`.
 
 ### Using the variable system
 
 PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.
 
-Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-c-button`), as these overrides will cascade down to children elements accordingly.
+Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-v5-c-button`), as these overrides will cascade down to children elements accordingly.
 
 Example:
 - Change the global primary color to red, but keep the original primary blue color as the background for primary buttons.
   ```css
   /* Override global primary color 100 to red */
   :root {
-    --pf-global--primary-color--100: var(--pf-global--palette--red-400);
+    --pf-v5-global--primary-color--100: var(--pf-v5-global--palette--red-400);
   }
 
   /* Override the above override for only the primary button background color */
-  .pf-c-button {
-    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--palette--blue-400);
+  .pf-v5-c-button {
+    --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--palette--blue-400);
   }
   ```
 

package/routes.js

@@ -9,6 +9,8 @@ const routes = {
   ...generatedRoutes
 };
 
+const defaultOrder = 50;
+
 for (let route in routes) {
   const pageData = routes[route];
   if (pageData.SyncComponent) {
@@ -28,7 +30,7 @@ const isNull = o => o === null || o === undefined;
 const groupedRoutes = Object.entries(routes)
   .filter(([_slug, { id, section }]) => !isNull(id) && !isNull(section))
   .reduce((accum, [slug, pageData]) => {
-    const { section, subsection = null, id, title, source, katacodaLayout, hideNavItem, relPath } = pageData;
+    const { section, subsection = null, id, title, source, hideNavItem, relPath, sortValue = null, subsectionSortValue = null } = pageData;
     pageData.slug = slug;
     // add section to groupedRoutes obj if not yet created
     accum[section] = accum[section] || {};
@@ -40,9 +42,10 @@ const groupedRoutes = Object.entries(routes)
       title,
       slug: makeSlug(source, section, id, true, subsection),
       sources: [],
-      katacodaLayout,
       hideNavItem,
-      relPath
+      relPath,
+      ...(sortValue && { sortValue }),
+      ...(subsectionSortValue && { subsectionSortValue })
     }
     // add page to groupedRoutes obj section or subsection
     if (subsection) {
@@ -52,10 +55,21 @@ const groupedRoutes = Object.entries(routes)
       // add page to subsection
       accum[section][subsection][id] = accum[section][subsection][id] || data;
       accum[section][subsection][id].sources.push(pageData);
+      // nav item ordering
+      if (sortValue) {
+        accum[section][subsection].sortValue = sortValue;
+      }
+      if (subsectionSortValue) {
+        accum[section][subsection].subsectionSortValue = subsectionSortValue;
+      }
     } else {
       // add page to section
       accum[section][id] = accum[section][id] || data;
       accum[section][id].sources.push(pageData);
+      // nav item ordering
+      if (sortValue) {
+        accum[section][id].sortValue = sortValue;
+      }
     }
 
     return accum;
@@ -64,16 +78,13 @@ const groupedRoutes = Object.entries(routes)
 const sourceOrder = {
   react: 1,
   'react-next': 1.1,
-  'react-composable': 1.2,
-  'react-deprecated': 1.3,
-  'react-legacy': 1.4,
   'react-demos': 2,
+  'react-deprecated': 2.1,
   html: 3,
   'html-demos': 4,
   'design-guidelines': 99,
   'accessibility': 100
 };
-const defaultOrder = 50;
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {
   const s1Index = sourceOrder[s1] || defaultOrder;
@@ -108,7 +119,8 @@ Object.entries(groupedRoutes)
       // Loop through each page in expandable subsection
       if (pageData.isSubsection) {
         Object.entries(pageData).map(([section, ids]) => {
-          if (section !== 'isSubsection') {
+          // only push nested page objects
+          if (ids && ids?.id) {
             pageDataArr.push(ids);
           }
         })
@@ -133,8 +145,6 @@ function getAsyncComponent(url) {
   if (!url && typeof window !== 'undefined') {
     url = window.location.pathname.replace(/\/$/, '') || '/';
   }
-  // Normalize path for matching
-  url = url.replace(process.env.pathPrefix, '');
   let res;
 
   if (allRoutes[url]) {

package/scripts/cli/build.js

@@ -50,6 +50,11 @@ async function execFile(file, args) {
     const child_execArgv = [
       '--max-old-space-size=4096'
     ];
+
+    if (args.legacySSL) {
+      child_execArgv.push('--openssl-legacy-provider')
+    }
+
     const child = fork(path.join(__dirname, file), child_argv, { execArgv: child_execArgv });
     function errorHandler(err) {
       console.error(err);
@@ -78,9 +83,9 @@ async function build(cmd, options) {
   const config = getConfig(options);
   config.analyze = options.analyze;
   config.output = options.output;
+  config.legacySSL = options.legacySSL
 
   // These get passed to `fork`ed builds
-  process.env.pathPrefix = config.pathPrefix;
   process.env.hasDesignGuidelines = config.hasDesignGuidelines;
   // console.log('build', cmd, options.parent.cssconfig);
   if (toBuild.includes('server')) {

package/scripts/cli/cli.js

@@ -26,6 +26,7 @@ program
   .command('build <server|client|all>')
   .option('-a, --analyze', 'use webpack-bundle-analyzer', false)
   .option('-o, --output <folder>', 'output folder', 'public')
+  .option('--legacySSL', 'use legacy version of openssl, needed to support Node 18 until we upgrade webpack to v5', false)
   .description('generates source files and runs webpack')
   .action((cmd, options) => {
     const { build } = require('./build');
@@ -43,7 +44,8 @@ program
 
 program
   .command('screenshots')
-  .option('-u, --urlPrefix <prefix>', 'where fullscreen pages are hosted', 'http://localhost:5000/v4')
+  .option('-u, --urlPrefix <prefix>', 'where fullscreen pages are hosted', 'http://localhost:5000')
+  .option('-a, --allRoutes', 'true if screenshots of all examples - not just full screen', false)
   .description('updates screenshots for generated components')
   .action(options => {
     const { writeScreenshots } = require('../writeScreenshots');

package/scripts/cli/generate.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const { sourceMD, sourceProps, writeIndex } = require('../md/parseMD');
+const { sourceMD, sourceProps, sourceFunctionDocs, writeIndex } = require('../md/parseMD');
 
 function getSource(options) {
   return require(path.join(process.cwd(), options.parent.source));
@@ -9,7 +9,7 @@ function generate(options) {
   const start = new Date();
   console.log('write source files to patternfly-docs/generated');
   const sourceMDWithOptions = (glob, source, ignore) => sourceMD(glob, source, ignore, options._name);
-  getSource(options)(sourceMDWithOptions, sourceProps);
+  getSource(options)(sourceMDWithOptions, sourceProps, sourceFunctionDocs);
   const exitCode = writeIndex();
   if (exitCode !== 0) {
     process.exit(exitCode);

package/scripts/cli/start.js

@@ -6,17 +6,15 @@ const { getConfig } = require('./helpers');
 const { watchMD } = require('../md/parseMD');
 
 function startWebpackDevServer(webpackConfig) {
-  webpackConfig.devServer.filename = webpackConfig.output.filename;
-  webpackConfig.devServer.publicPath = webpackConfig.output.publicPath;
+  webpackConfig.devServer.static = false;
   const { port } = webpackConfig.devServer;
   const compiler = webpack(webpackConfig);
-  const server = new WebpackDevServer(compiler, webpackConfig.devServer);
+  const server = new WebpackDevServer(webpackConfig.devServer, compiler);
 
-  server.listen(port, 'localhost', err => {
-    if (err) {
-      console.log(err);
-    }
-  });
+  (async () => {
+    await server.start();
+    console.log(`Dev server is listening on port ${port}`);
+  })();
 }
 
 async function start(options) {