The PatternFly documentation framework lets you develop component examples in markdown format, so that they can be added to patternfly.org.
We publish this theme on npm. Install it as a devDependency with your package manager.
-
@patternfly/documentation-framework
npm i --save-dev @patternfly/documentation-framework
or
yarn add -D @patternfly/documentation-framework
-
Provide or install the following either as dependencies if you want to use them in your own project, or as devDependencies:
"@patternfly/patternfly": "6.0.0-alpha.205", "@patternfly/react-core": "6.0.0-alpha.94", "@patternfly/react-table": "6.0.0-alpha.95", "@patternfly/react-code-editor": "6.0.0-alpha.94",
yarn add -D @patternfly/patternfly @patternfly/react-core @patternfly/react-table @patternfly/react-code-editor
To get started, you can scaffold out a sample extension docs setup:
npx pf-docs-framework init --name "My extension"
If you also want to add relevant script targets to package.json, pass in --scripts
as well:
npx pf-docs-framework init --name "My extension" --scripts
For all CLI options, run npx pf-docs-framework --help
For individual CLI commands, you can also display more information by running npx pf-docs-framework <COMMAND> --help
npx pf-docs-framework start
npx pf-docs-framework build all --output public
NOTE: If you have
sideEffects: false
in your package.json, that will prevent the CSS from loading in the documentation production build. Set it to true or remove it to enable the CSS from being loaded.
-
Include the
patternfly-docs/content
andpatternfly-docs/generated
folders as part of your npm published module -
Create a PR at patternfly-org to bundle in the package's examples so that they're part of the patternfly.org documentation.