paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 15 Packages Projects Releases Wiki Activity

update how to customize reader page documentation

Browse Source 
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
This commit is contained in:
Emma Indal
2022-04-14 10:37:21 +02:00
parent 1af8e20f53
commit 290ef5d8ff
1 changed files with 15 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/features/techdocs/how-to-guides.md
+15 -36
View File
@@ -162,20 +162,11 @@ The `techDocsPage` is a default techdocs reader page which lives in
having to set anything up.
```tsx
<TechDocsPage>
{({ techdocsMetadataValue, entityMetadataValue, entityRef, onReady }) => (
<>
<TechDocsPageHeader
techDocsMetadata={techdocsMetadataValue}
entityMetadata={entityMetadataValue}
entityRef={entityRef}
/>
<Content data-testid="techdocs-content">
<Reader onReady={onReady} entityRef={entityRef} />
</Content>
</>
)}
</TechDocsPage>
<TechDocsReaderPage>
<TechDocsReaderPageHeader />
<TechDocsReaderPageSubheader />
<TechDocsReaderPageContent />
</TechDocsReaderPage>
```
If you would like to compose your own `techDocsPage`, you can do so by replacing
@@ -183,42 +174,30 @@ the children of TechDocsPage with something else. Maybe you are _just_
interested in replacing the Header:
```tsx
<TechDocsPage>
{({ entityRef, onReady }) => (
<>
<Header type="documentation" title="Custom Header" />
<Content data-testid="techdocs-content">
<Reader onReady={onReady} entityRef={entityRef} />
</Content>
</>
)}
</TechDocsPage>
<TechDocsReaderPage>
<Header type="documentation" title="Custom Header" />
<TechDocsReaderPageContent />
</TechDocsReaderPage>
```
Or maybe you want to disable the in-context search
```tsx
<TechDocsPage>
{({ entityRef, onReady }) => (
<>
<Header type="documentation" title="Custom Header" />
<Content data-testid="techdocs-content">
<Reader onReady={onReady} entityRef={entityRef} withSearch={false} />
</Content>
</>
)}
</TechDocsPage>
<TechDocsReaderPage>
<Header type="documentation" title="Custom Header" />
<TechDocsReaderPageContent withSearch={false} />
</TechDocsReaderPage>
```
Or maybe you want to replace the entire TechDocs Page.
```tsx
<TechDocsPage>
<TechDocsReaderPage>
<Header type="documentation" title="Custom Header" />
<Content data-testid="techdocs-content">
<p>my own content</p>
</Content>
</TechDocsPage>
</TechDocsReaderPage>
```
## How to migrate from TechDocs Alpha to Beta