@patternfly/documentation-framework 1.0.0

package/templates/mdx.css

@@ -0,0 +1,308 @@
+#ws-page-content-router {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ws-release-notes-toc {
+  margin-bottom: var(--pf-global--spacer--lg);
+}
+
+.ws-release-notes-toc .pf-c-card {
+  height: 100%;
+}
+
+.ws-release-notes-toc .pf-c-card__title {
+  padding-bottom: var(--pf-global--spacer--xs);
+}
+
+.ws-release-notes-toc .pf-c-card__title .pf-c-title {
+  display: inline;
+}
+
+.ws-release-notes-toc .pf-c-card__title a {
+  margin-right: var(--pf-global--spacer--sm);
+}
+
+.ws-release-notes-toc .pf-c-card__title .pf-c-badge {
+  vertical-align: text-top;
+}
+
+.ws-release-notes-toc .pf-c-card__body {
+  color: #72767B;
+  font-family: RedHatText;
+  font-size: var(--pf-global--FontSize--md);
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.ws-code {
+  display: inline-block;
+  background-color: var(--pf-global--BackgroundColor--100);
+  padding: 1px var(--pf-global--spacer--sm);
+  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--300);
+  white-space: pre-wrap;
+  font-size: var(--pf-global--FontSize--sm);
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
+.ws-p + .ws-code {
+  margin-bottom: var(--pf-c-content--MarginBottom);
+}
+
+/* Table styles */
+/* Undo patternfly reset to respect MD table styles */
+.ws-table td[align="center"],
+.ws-table th[align="center"] {
+  text-align: center;
+}
+.ws-table td[align="left"],
+.ws-table th[align="left"] {
+  text-align: left;
+}
+.ws-table td[align="right"],
+.ws-table th[align="right"] {
+  text-align: right;
+}
+.ws-content-table > .ws-table {
+  table-layout: fixed;
+  width: 100%;
+}
+.ws-table td > code,
+.ws-table th > code,
+.ws-table tr > code {
+  white-space: normal;
+}
+.ws-table tbody > tr > td {
+  vertical-align: top;
+}
+
+/*
+ * Copied from pf-c-content.
+ */
+:root {
+  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--Color: var(--pf-global--Color--100);
+  --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
+  --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-content--small--Color: var(--pf-global--Color--200);
+  --pf-c-content--small--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--a--Color: var(--pf-global--link--Color);
+  --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
+  --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
+  --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--light);
+  --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
+  --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
+  --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ol--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ul--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
+  --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
+  --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
+  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--dt--sm--MarginTop: 0;
+  --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
+  --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
+  font-size: var(--pf-c-content--FontSize);
+  line-height: var(--pf-c-content--LineHeight);
+  color: var(--pf-c-content--Color); }
+.ws-li + li {
+  margin-top: var(--pf-c-content--li--MarginTop); }
+.ws-p:not(:last-child),
+.ws-dl:not(:last-child),
+.ws-ol:not(:last-child),
+.ws-ul:not(:last-child),
+.ws-blockquote:not(:last-child),
+.ws-small:not(:last-child),
+.ws-pre:not(:last-child),
+.ws-hr:not(:last-child),
+.ws-table:not(:last-child),
+.ws-content-table:not(:last-child) {
+  margin-bottom: var(--pf-c-content--MarginBottom); }
+.ws-h1,
+.ws-h2,
+.ws-h3,
+.ws-h4,
+.ws-h5,
+.ws-h6 {
+  margin: 0;
+  font-family: var(--pf-c-content--heading--FontFamily); }
+.ws-ol,
+.ws-ul {
+  margin: 0; }
+.ws-h1 {
+  margin-bottom: var(--pf-c-content--h1--MarginBottom);
+  font-size: var(--pf-c-content--h1--FontSize);
+  font-weight: var(--pf-c-content--h1--FontWeight);
+  line-height: var(--pf-c-content--h1--LineHeight); }
+  .ws-h1:not(:first-child) {
+    margin-top: var(--pf-c-content--h1--MarginTop); }
+.ws-h2 {
+  margin-bottom: var(--pf-c-content--h2--MarginBottom);
+  font-size: var(--pf-c-content--h2--FontSize);
+  font-weight: var(--pf-c-content--h2--FontWeight);
+  line-height: var(--pf-c-content--h2--LineHeight); }
+  .ws-h2:not(:first-child) {
+    margin-top: var(--pf-c-content--h2--MarginTop); }
+.ws-h3 {
+  margin-bottom: var(--pf-c-content--h3--MarginBottom);
+  font-size: var(--pf-c-content--h3--FontSize);
+  font-weight: var(--pf-c-content--h3--FontWeight);
+  line-height: var(--pf-c-content--h3--LineHeight); }
+  .ws-h3:not(:first-child) {
+    margin-top: var(--pf-c-content--h3--MarginTop); }
+.ws-h4 {
+  margin-bottom: var(--pf-c-content--h4--MarginBottom);
+  font-size: var(--pf-c-content--h4--FontSize);
+  font-weight: var(--pf-c-content--h4--FontWeight);
+  line-height: var(--pf-c-content--h4--LineHeight); }
+  .ws-h4:not(:first-child) {
+    margin-top: var(--pf-c-content--h4--MarginTop); }
+.ws-h5 {
+  margin-bottom: var(--pf-c-content--h5--MarginBottom);
+  font-size: var(--pf-c-content--h5--FontSize);
+  font-weight: var(--pf-c-content--h5--FontWeight);
+  line-height: var(--pf-c-content--h5--LineHeight); }
+  .ws-h5:not(:first-child) {
+    margin-top: var(--pf-c-content--h5--MarginTop); }
+.ws-h6 {
+  margin-bottom: var(--pf-c-content--h6--MarginBottom);
+  font-size: var(--pf-c-content--h6--FontSize);
+  font-weight: var(--pf-c-content--h6--FontWeight);
+  line-height: var(--pf-c-content--h6--LineHeight); }
+  .ws-h6:not(:first-child) {
+    margin-top: var(--pf-c-content--h6--MarginTop); }
+.ws-small {
+  display: block;
+  font-size: var(--pf-c-content--small--FontSize);
+  line-height: var(--pf-c-content--small--LineHeight);
+  color: var(--pf-c-content--small--Color); }
+  .ws-small:not(:last-child) {
+    margin-bottom: var(--pf-c-content--small--MarginBottom); }
+.ws-blockquote {
+  padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
+  font-weight: var(--pf-c-content--blockquote--FontWeight);
+  color: var(--pf-c-content--blockquote--Color);
+  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor); }
+.ws-hr {
+  height: var(--pf-c-content--hr--Height);
+  background-color: var(--pf-c-content--hr--BackgroundColor);
+  border: none; }
+.ws-ol {
+  padding-left: var(--pf-c-content--ol--PaddingLeft);
+  margin-top: var(--pf-c-content--ol--MarginTop);
+  margin-left: var(--pf-c-content--ol--MarginLeft); }
+  .ws-ol ul {
+    --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft); }
+  .ws-ol ol {
+    --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft); }
+.ws-ul {
+  padding-left: var(--pf-c-content--ul--PaddingLeft);
+  margin-top: var(--pf-c-content--ul--MarginTop);
+  margin-left: var(--pf-c-content--ul--MarginLeft);
+  list-style: var(--pf-c-content--ul--ListStyle); }
+  .ws-ul ul {
+    --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft); }
+  .ws-ul ol {
+    --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft); }
+.ws-dl {
+  display: grid;
+  grid-template-columns: 1fr; }
+  @media screen and (min-width: 576px) {
+    .ws-dl {
+      grid-template: auto / auto 1fr;
+      grid-column-gap: var(--pf-c-content--dl--ColumnGap);
+      grid-row-gap: var(--pf-c-content--dl--RowGap); } }
+.ws-dt {
+  font-weight: var(--pf-c-content--dt--FontWeight); }
+  .ws-dt:not(:first-child) {
+    margin-top: var(--pf-c-content--dt--MarginTop); }
+    @media screen and (min-width: 576px) {
+      .ws-dt:not(:first-child) {
+        --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop); } }
+  @media screen and (min-width: 576px) {
+    .ws-dt {
+      grid-column: 1; } }
+@media screen and (min-width: 576px) {
+  .ws-dd {
+    grid-column: 2; } }
+
+@media screen and (max-width: 1450px) {
+  .ws-mdx-child-template {
+    flex-direction: column;
+  }
+}
+
+.ws-mdx-content {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+/* Design asked for this. A nice side effect is that the TOC doesn't "jump" between pages */
+.ws-mdx-content-content {
+  max-width: 832px;
+}
+
+.ws-mdx-content-katacoda {
+  flex-grow: 1;
+  padding: 0;
+}
+
+/* Overlay the footer */
+.ws-back-to-top {
+  z-index: 2;
+}

package/templates/mdx.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import { PageSection, Title, PageSectionVariants, BackToTop } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { Router, useLocation } from '@reach/router';
+import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
+import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
+import './mdx.css';
+
+const MDXChildTemplate = ({
+  Component,
+  source,
+  toc = [],
+  index = 0
+}) => {
+  const {
+    propComponents = [],
+    sourceLink,
+    cssPrefix = [],
+    optIn,
+    beta,
+    katacodaBroken,
+    katacodaLayout
+  } = Component.getPageData();
+  const cssVarsTitle = cssPrefix.length > 0 && 'CSS variables';
+  const propsTitle = propComponents.length > 0 && 'Props';
+  if (propsTitle && !toc.find(item => item.text === propsTitle)) {
+    toc.push({ text: propsTitle });
+    toc.push(propComponents.map(propComponent => ({ text: propComponent.name })));
+  }
+  if (cssVarsTitle && !toc.find(item => item.text === cssVarsTitle)) {
+    toc.push({ text: cssVarsTitle });
+  }
+  // We don't add `id`s in anchor-header.js for items where id === slugger(text)
+  // in order to save ~10KB bandwidth.
+  if (toc.length > 1) {
+    const ensureID = tocItem => {
+      if (Array.isArray(tocItem)) {
+        tocItem.forEach(ensureID);
+      }
+      else if (!tocItem.id) {
+        tocItem.id = slugger(tocItem.text)
+      }
+    }
+    ensureID(toc);
+  }
+  const InlineAlerts = (
+    <React.Fragment>
+      {optIn && (
+        <InlineAlert title="Opt-in feature">
+          {optIn}
+        </InlineAlert>
+      )}
+      {beta && (
+        <InlineAlert title="Beta feature">
+          This Beta component is currently under review and is still open for further evolution. It is available for use in product.
+          Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the <a href="https://forum.patternfly.org/">PatternFly forum</a> or via <a href="//slack.patternfly.org/" target="_blank" rel="noopener noreferrer">Slack</a>.
+          To learn more go to our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
+        </InlineAlert>
+      )}
+      {katacodaBroken && (
+        <InlineAlert variant="warning" title="Down for maintenance">
+          The embedded version of our tutorials are broken, but you can still access our tutorials on <a href="https://www.katacoda.com/patternfly">Katacoda.com <ExternalLinkAltIcon /></a>.
+        </InlineAlert>
+      )}
+    </React.Fragment>
+  );
+  // Create dynamic component for @reach/router
+  const ChildComponent = () => (
+    <div className="pf-u-display-flex ws-mdx-child-template">
+      {toc.length > 1 && (
+        <TableOfContents items={toc} />
+      )}
+      <div className={katacodaLayout? "ws-mdx-content-katacoda" : "ws-mdx-content"}>
+        <div className={katacodaLayout ? "" : "ws-mdx-content-content"}>
+          {InlineAlerts}
+          <Component />
+          {propsTitle && (
+            <React.Fragment>
+              <AutoLinkHeader size="h2" className="ws-h2" id="props">
+                {propsTitle}
+              </AutoLinkHeader>
+              {propComponents.map(component => (
+                <PropsTable
+                  key={component.name}
+                  title={component.name}
+                  rows={component.props}
+                  allPropComponents={propComponents}
+                />
+              ))}
+            </React.Fragment>
+          )}
+          {cssVarsTitle && (
+            <React.Fragment>
+              <AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
+                {cssVarsTitle}
+              </AutoLinkHeader>
+              <CSSVariables prefix={cssPrefix} />
+            </React.Fragment>
+          )}
+          {!katacodaLayout && sourceLink && (
+            <React.Fragment>
+              <br />
+              <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
+            </React.Fragment>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+  ChildComponent.displayName = `MDXChildTemplate${Component.displayName}`;
+  return <ChildComponent key={source} path={source} default={index === 0} />;
+}
+
+export const MDXTemplate = ({
+  title,
+  sources = [],
+  path
+}) => {
+  const sourceKeys = sources.map(v => v.source);
+  const isSinglePage = sourceKeys.length === 1;
+  const { pathname } = useLocation();
+  const { katacodaLayout } = sources[0].Component.getPageData();
+  let activeSource = pathname.replace(/\/$/, '').split('/').pop();
+  if (!sourceKeys.includes(activeSource)) {
+    activeSource = sourceKeys[0];
+  }
+
+  if (typeof document !== 'undefined') {
+    document.title = getTitle(title);
+  }
+
+  return (
+    <React.Fragment>
+      <PageSection
+        className={isSinglePage ? "pf-m-light-100" : ""}
+        variant={!isSinglePage ? PageSectionVariants.light : ""}
+      >
+        {!katacodaLayout && <Title size="4xl" headingLevel="h1" id="ws-page-title">
+          {title}
+        </Title>}
+      </PageSection>
+      {!isSinglePage && (
+        <PageSection type="tabs">
+          <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+            <ul className="pf-c-tabs__list">
+              {sourceKeys.map((source, index) => (
+                <li
+                  key={source}
+                  className={css(
+                    'pf-c-tabs__item',
+                    activeSource === source && 'pf-m-current'
+                  )}
+                  // Send clicked tab name for analytics
+                  onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
+                >
+                  <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
+                    {capitalize(source.replace('html', 'HTML').replace(/-/g, ' '))}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </PageSection>
+      )}
+      <PageSection id="main-content" isFilled className="pf-m-light-100">
+        {isSinglePage && (
+            <MDXChildTemplate {...sources[0]} />
+        )}
+        {!isSinglePage && (
+          <Router className="pf-u-h-100" primary={false}>
+            {sources
+              .map((source, index) => {
+                source.index = index;
+                return source;
+              })
+              .map(MDXChildTemplate)
+            }
+          </Router>
+        )}
+      </PageSection>
+      <BackToTop className="ws-back-to-top" scrollableSelector="#ws-page-main" />
+    </React.Fragment>
+  );
+}

package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.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: My extension
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: design-guidelines
+---
+
+Design guidelines intro
+
+## Header
+
+### Sub-header
+
+Referencing an image:
+
+<img src="./img/card-elements.png" alt="Elements of a card" width="370"/>
+
+1. A
+1. list
+1. using
+1. markdown

package/templates/patternfly-docs/content/extensions/extension/examples/Basic.jsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { Button } from "@patternfly/react-core";
+
+const BasicExample = () => <Button variant="primary">My button</Button>;

package/templates/patternfly-docs/content/extensions/extension/examples/basic.md

@@ -0,0 +1,25 @@
+---
+# 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: My extension
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provdided in patternfly-docs.source.js
+propComponents: ['Button']
+---
+
+import { Button } from "@patternfly/react-core";
+
+## Basic usage
+
+### Example
+```js file="./Basic.jsx"
+```
+
+### Fullscreen example
+```js file="./Basic.jsx" isFullscreen
+```

package/templates/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 (
+    <PageSection variant="light" style={centerStyle}>
+      <div style={{ flex: 'none', textAlign: 'center' }}>
+        <Title size="4xl" headingLevel="h1">
+          My extension docs
+        </Title>
+        <Title size="2xl" headingLevel="h2">
+          {'Hi people!'}
+        </Title>
+        <p>Welcome to my extension docs.</p>
+      </div>
+    </PageSection>
+  );
+};
+
+export default IndexPage;

package/templates/patternfly-docs/patternfly-docs.config.js

@@ -0,0 +1,6 @@
+// This module is shared between NodeJS and babelled ES5
+module.exports = {
+  sideNavItems: [{ section: 'extensions' }],
+  topNavItems: [],
+  port: 8006,
+};

package/templates/patternfly-docs/patternfly-docs.css.js

@@ -0,0 +1,8 @@
+// Patternfly
+import '@patternfly/patternfly/patternfly.css';
+// Patternfly utilities
+import '@patternfly/patternfly/patternfly-addons.css';
+// Global theme CSS
+import '@patternfly/documentation-framework/global.css';
+
+// Add your extension CSS below

package/templates/patternfly-docs/patternfly-docs.routes.js

@@ -0,0 +1,12 @@
+// This module is shared between NodeJS and babelled ES5
+const isClient = Boolean(process.env.NODE_ENV);
+
+module.exports = {
+  '/': {
+    SyncComponent: isClient && require('./pages/index').default
+  },
+  '/404': {
+    SyncComponent: isClient && require('@patternfly/documentation-framework/pages/404/index').default,
+    title: '404 Error'
+  }
+};

package/templates/patternfly-docs/patternfly-docs.source.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = (sourceMD, sourceProps) => {
+  // Parse source content for props so that we can display them
+  const propsIgnore = ['**/*.test.tsx', '**/examples/*.tsx'];
+  const extensionPath = path.join(__dirname, '../src');
+  sourceProps(path.join(extensionPath, '/**/*.tsx'), propsIgnore);
+
+  // Parse md files 
+  const contentBase = path.join(__dirname, './content');
+  sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'extensions');
+
+  /**
+    If you want to parse content from node_modules instead of providing a relative/absolute path, 
+    you can do something similar to this:
+    const extensionPath = require
+      .resolve('@patternfly/react-log-viewer/package.json')
+      .replace('package.json', 'src');
+    sourceProps(path.join(extensionPath, '/**\/*.tsx'), propsIgnore);
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/examples/*.md'), 'react');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/demos/*.md'), 'react-demos');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/design-guidelines/*.md'), 'design-guidelines');
+  */
+}

package/templates/sitemap.ejs

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <% urls.forEach(url => {%>
+  <url>
+    <loc>https://www.patternfly.org/v4<%=url%></loc>
+    <changefreq>daily</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <% }); %>
+</urlset>