<OpenApiPage> Component

The <OpenApiPage /> component, and related server utilities, are used to render documentation pages for a provided Swagger OpenAPI 2.0 specification.

Share
Code Editor
<OpenApiPage
siteName="Boundary by HashiCorp"
productSlug="boundary"
info={boundaryFixture.info}
navData={boundaryFixture.navData}
operationCategory={boundaryFixture.operationCategory}
isSingleService={boundaryFixture.isSingleService}
currentPath={boundaryFixture.currentPath}
baseRoute="/api-docs"
/>
Share
Code Editor
<OpenApiPage
siteName="HCP Packer by HashiCorp"
productSlug="packer"
info={packerFixture.info}
navData={packerFixture.navData}
operationCategory={packerFixture.operationCategory}
isSingleService={packerFixture.isSingleService}
currentPath={packerFixture.currentPath}
baseRoute="/api-docs/packer"
massageOperationPathFn={(path) =>
path.replace(
'/packer/2021-04-30/organizations/{location.organization_id}/projects/{location.project_id}',
''
)
}
renderOperationIntro={({ data }) => <p><strong>Note:</strong> Operation paths have been truncated for clarity. The full path to this operation is <code>{data.__path}</code>.</p>}
/>

Option with Dev Dot opt in optInBannerSlot

Share
Code Editor
<OpenApiPage
siteName="Boundary by HashiCorp"
productSlug="boundary"
info={boundaryFixture.info}
navData={boundaryFixture.navData}
operationCategory={boundaryFixture.operationCategory}
isSingleService={boundaryFixture.isSingleService}
currentPath={boundaryFixture.currentPath}
baseRoute="/api-docs"
optInBannerSlot={<h1>Opt in to dev dot</h1>}
/>

Props

NameDescription
siteName*
string
Optional siteName suffix for the page meta <title />. Should generally match the siteName value in the consuming project's _app.jsx file.
productSlug
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
className
function
Optional className to add to the root element.
info*
object
Generated using this component's server.js utilities. Object with properties { title, description }. info.title is used as the page title, both visibly and in the meta <title /> on the index page. info.description is used for page meta <description />.
navData*
array
Generated using this component's server.js utilities. Data to be passed to the DocsSidenav component that this page renders.
operationCategory
object
Generated using this component's server.js utilities. Optional object with properties { name, operations }, provided where the page will display operations. name is a pretty name to display as the page and meta <title /> on the category page. operations is an array of OperationObjects to render on the category's page.
isSingleService
boolean
Generated using this component's server.js utilities. If the OpenAPI specification contains only a single service (aka operation category), this flag will be set to true, and only a single index route will be rendered, showing the single service.
currentPath*
string
Generated using this component's server.js utilities. Path for the current page starting from the dynamic route where the OpenAPI page is being rendered, joined by a / character.
baseRoute*
string
Path to the dynamic route where the OpenAPI page is being rendered. Passed to DocsSidenav's basePath prop.
massageOperationPathFn
function
An optional function to modify each operation's path for more convenient display. One use case is in the HCP Packer OpenAPI docs, where each path is extremely long, and truncating a common prefix off each path makes them much clearer to display.
renderOperationIntro
function
An optional render function to display introductory content at the start of each operation detail section. This render function is call with an argument ({ data }), where data is the specific Operation Object data. One use case is in the HCP Packer OpenAPI docs, where we want to clarify that operation paths have been truncated, and show the full, non-truncated paths in an information box at the top of each operation detail section.
optInBannerSlot
React Element
An optional rendered react component to accommodate the Dev Dot opt in messaging and redirect.

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...