Update tech radar README for composability

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2021-04-29 15:43:53 +02:00
parent bacba8cbcc
commit b2e2ec7533
2 changed files with 16 additions and 11 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-tech-radar': patch
---
Update README for composability
+11 -11
View File
@@ -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: