Update tech radar README for composability
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/plugin-tech-radar': patch
|
||||
---
|
||||
|
||||
Update README for composability
|
||||
@@ -18,7 +18,7 @@ It serves and scales well for teams and companies of all sizes that want to have
|
||||
|
||||
The Tech Radar can be used in two ways:
|
||||
|
||||
- **Simple (Recommended)** - This gives you an out-of-the-box Tech Radar experience. It lives on the `/tech-radar` URL of your Backstage installation, and you can set a variety of configuration directly in your `apis.ts`.
|
||||
- **Simple (Recommended)** - This gives you an out-of-the-box Tech Radar experience. It lives on the `/tech-radar` URL of your Backstage installation.
|
||||
- **Advanced** - This gives you the React UI component directly. It enables you to insert the Radar on your own layout or page for a more customized feel.
|
||||
|
||||
### Install
|
||||
@@ -26,6 +26,7 @@ The Tech Radar can be used in two ways:
|
||||
For either simple or advanced installations, you'll need to add the dependency using Yarn:
|
||||
|
||||
```sh
|
||||
cd packages/app
|
||||
yarn add @backstage/plugin-tech-radar
|
||||
```
|
||||
|
||||
@@ -34,17 +35,16 @@ yarn add @backstage/plugin-tech-radar
|
||||
Modify your app routes to include the Router component exported from the tech radar, for example:
|
||||
|
||||
```tsx
|
||||
import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
|
||||
// in packages/app/src/App.tsx
|
||||
import { TechRadarPage } from '@backstage/plugin-tech-radar';
|
||||
|
||||
// Inside App component
|
||||
<Routes>
|
||||
{/* other routes ... */}
|
||||
<Route
|
||||
path="/tech-radar"
|
||||
element={<TechRadarRouter width={1500} height={800} />}
|
||||
/>
|
||||
{/* other routes ... */}
|
||||
</Routes>;
|
||||
const routes = (
|
||||
<FlatRoutes>
|
||||
{/* ... */}
|
||||
<Route
|
||||
path="/tech-radar"
|
||||
element={<TechRadarPage width={1500} height={800} />}
|
||||
/>
|
||||
```
|
||||
|
||||
If you'd like to configure it more, see the `TechRadarPageProps` and `TechRadarComponentProps` types for options:
|
||||
|
||||
Reference in New Issue
Block a user