docs(*): Add further context and the instructions for Backstage

This commit is contained in:
Josh Creek
2024-09-27 21:26:52 +01:00
parent 2162f6d3e6
commit a2b646ab0e
+53 -16
View File
@@ -3,35 +3,47 @@
![NPM Version](https://img.shields.io/npm/v/tech-radar-editor)
![NPM Downloads](https://img.shields.io/npm/dy/tech-radar-editor)
A web component that allows users to easily create and edit a Tech Radar.
A web component providing an easy-to-use UI that allows users to easily create and edit a Tech Radar without having to directly modify a JSON file. It also adds validation to ensure that your Tech Radar is always in a valid state.
## Who created the Tech Radar?
[ThoughtWorks](https://thoughtworks.com/radar) created the Tech Radar concept, and [Zalando created the visualization](https://opensource.zalando.com/tech-radar/) that is popular today.
## Building the Component
### Purpose
To build the component, you need to have Node.js installed. Clone the repository and run the following commands:
Zalando has a fantastic description [on their website](https://opensource.zalando.com/tech-radar/):
> The Tech Radar is a tool to inspire and support engineering teams at Zalando to pick the best technologies for new projects; it provides a platform to share knowledge and experience in technologies, to reflect on technology decisions and continuously evolve our technology landscape. Based on the pioneering work of ThoughtWorks, our Tech Radar sets out the changes in technologies that are interesting in software development — changes that we think our engineering teams should pay attention to and consider using in their projects.
It serves and scales well for teams and companies of all sizes that want to have alignment across dozens of technologies and visualize it in a simple way.
## Include the Component in Spotify Backstage
### Install
For either simple or advanced installations, you'll need to add the dependency using Yarn:
From your Backstage root directory:
```bash
pnpm install
pnpm build
yarn --cwd packages/app add tech-radar-editor
```
To get it ready to add to NPM or a CDN, run:
### Configuration
```bash
pnpm build
pnpm pack
```
Modify your app routes to include the Router component exported from the tech radar, for example:
You can then test the package locally.
```tsx
// In packages/app/src/App.tsx
import 'tech-radar-editor';
To publish the component to NPM, run:
```bash
npm login
npm publish
const routes = (
<FlatRoutes>
{/* ...other routes */}
<Route
path="/tech-radar-editor"
element={<tech-radar-editor></tech-radar-editor>}
/>
```
## Consume the Component in Plain JavaScript
@@ -88,3 +100,28 @@ declare namespace JSX {
}
}
```
## Building the Component
To build the component, you need to have Node.js installed. Clone the repository and run the following commands:
```bash
pnpm install
pnpm build
```
To get it ready to add to NPM or a CDN, run:
```bash
pnpm build
pnpm pack
```
You can then test the package locally.
To publish the component to NPM, run:
```bash
npm login
npm publish
```