@dirsigler/techradar 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -189
- package/package.json +1 -1
- package/src/layouts/Base.astro +1 -5
- package/src/pages/index.astro +17 -19
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @dirsigler/techradar
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@dirsigler/techradar)
|
|
3
4
|
[](https://astro.build)
|
|
4
5
|
[](LICENSE)
|
|
5
|
-
[](https://demo.techradar.irsigler.dev)
|
|
6
6
|
|
|
7
|
-
An
|
|
7
|
+
An [Astro](https://astro.build) integration that adds a complete, interactive technology radar to your site. Track technology adoption decisions across your organization with a visual radar chart, categorized segments, and detailed technology pages — all driven by simple Markdown files.
|
|
8
8
|
|
|
9
9
|
**[View Live Demo](https://demo.techradar.irsigler.dev)**
|
|
10
10
|
|
|
@@ -19,80 +19,70 @@ An interactive, fully static technology radar built with [Astro](https://astro.b
|
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
22
|
-
##
|
|
22
|
+
## Features
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
- **Interactive SVG Radar** — Technologies plotted across four rings (Adopt, Trial, Assess, Hold) with hover tooltips and click-through navigation
|
|
25
|
+
- **Markdown-Driven** — Add technologies by dropping `.md` files into `segments/`. No code changes needed
|
|
26
|
+
- **Theming & Dark Mode** — Ships with a default theme and [Catppuccin Mocha](https://catppuccin.com). Create your own with CSS custom properties
|
|
27
|
+
- **Fully Static & Fast** — Builds to plain HTML/CSS/JS. Deploy anywhere
|
|
28
|
+
- **Movement Indicators** — Mark technologies as moved in/out to highlight recent changes
|
|
29
|
+
- **SEO Ready** — Open Graph, Twitter Cards, canonical URLs, and custom 404 page
|
|
27
30
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Technologies plotted across four rings — **Adopt**, **Trial**, **Assess**, **Hold** — with hover tooltips and click-through to detail pages.
|
|
31
|
-
|
|
32
|
-
</td>
|
|
33
|
-
<td width="50%">
|
|
34
|
-
|
|
35
|
-
### Markdown-Driven Content
|
|
36
|
-
|
|
37
|
-
Add technologies by dropping `.md` files into `segments/`. No code changes needed — just write frontmatter and prose.
|
|
38
|
-
|
|
39
|
-
</td>
|
|
40
|
-
</tr>
|
|
41
|
-
<tr>
|
|
42
|
-
<td width="50%">
|
|
43
|
-
|
|
44
|
-
### Theming & Dark Mode
|
|
45
|
-
|
|
46
|
-
Swappable CSS themes with automatic light/dark mode support. Ships with a default theme and [Catppuccin Mocha](https://catppuccin.com). Create your own by defining CSS custom properties.
|
|
47
|
-
|
|
48
|
-
</td>
|
|
49
|
-
<td width="50%">
|
|
31
|
+
---
|
|
50
32
|
|
|
51
|
-
|
|
33
|
+
## Quick Start
|
|
52
34
|
|
|
53
|
-
|
|
35
|
+
### 1. Install
|
|
54
36
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<td width="50%">
|
|
37
|
+
```bash
|
|
38
|
+
npm install @dirsigler/techradar astro
|
|
39
|
+
```
|
|
59
40
|
|
|
60
|
-
###
|
|
41
|
+
### 2. Add the integration
|
|
61
42
|
|
|
62
|
-
|
|
43
|
+
```js
|
|
44
|
+
// astro.config.mjs
|
|
45
|
+
import { defineConfig } from "astro/config";
|
|
46
|
+
import techradar from "@dirsigler/techradar";
|
|
63
47
|
|
|
64
|
-
|
|
65
|
-
|
|
48
|
+
export default defineConfig({
|
|
49
|
+
site: "https://your-site.example.com",
|
|
50
|
+
integrations: [
|
|
51
|
+
techradar({
|
|
52
|
+
title: "Tech Radar",
|
|
53
|
+
}),
|
|
54
|
+
],
|
|
55
|
+
});
|
|
56
|
+
```
|
|
66
57
|
|
|
67
|
-
###
|
|
58
|
+
### 3. Define the content collections
|
|
68
59
|
|
|
69
|
-
|
|
60
|
+
Create `src/content.config.ts`:
|
|
70
61
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
62
|
+
```ts
|
|
63
|
+
import { defineCollection } from "astro:content";
|
|
64
|
+
import { glob } from "astro/loaders";
|
|
65
|
+
import { segmentSchema, technologySchema } from "@dirsigler/techradar/schemas";
|
|
74
66
|
|
|
75
|
-
|
|
67
|
+
const segments = defineCollection({
|
|
68
|
+
loader: glob({ pattern: "*/index.md", base: "./segments" }),
|
|
69
|
+
schema: segmentSchema,
|
|
70
|
+
});
|
|
76
71
|
|
|
77
|
-
|
|
72
|
+
const technologies = defineCollection({
|
|
73
|
+
loader: glob({ pattern: "*/!(index).md", base: "./segments" }),
|
|
74
|
+
schema: technologySchema,
|
|
75
|
+
});
|
|
78
76
|
|
|
79
|
-
|
|
80
|
-
git clone https://github.com/dirsigler/techradar.git
|
|
81
|
-
cd techradar
|
|
82
|
-
npm install
|
|
83
|
-
npm run dev
|
|
77
|
+
export const collections = { segments, technologies };
|
|
84
78
|
```
|
|
85
79
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
## Adding Technologies
|
|
89
|
-
|
|
90
|
-
Create a Markdown file in the appropriate segment directory under `segments/`:
|
|
80
|
+
### 4. Add your content
|
|
91
81
|
|
|
92
82
|
```text
|
|
93
83
|
segments/
|
|
94
84
|
├── cloud/
|
|
95
|
-
│ ├── index.md # Segment metadata
|
|
85
|
+
│ ├── index.md # Segment metadata
|
|
96
86
|
│ ├── kubernetes.md
|
|
97
87
|
│ └── terraform.md
|
|
98
88
|
├── frameworks/
|
|
@@ -102,175 +92,104 @@ segments/
|
|
|
102
92
|
└── ...
|
|
103
93
|
```
|
|
104
94
|
|
|
105
|
-
Each
|
|
95
|
+
Each segment needs an `index.md`:
|
|
106
96
|
|
|
107
97
|
```markdown
|
|
108
98
|
---
|
|
109
|
-
title:
|
|
110
|
-
|
|
111
|
-
|
|
99
|
+
title: Cloud
|
|
100
|
+
color: "#3b82f6"
|
|
101
|
+
order: 1
|
|
112
102
|
---
|
|
113
|
-
|
|
114
|
-
Your description in Markdown. Explain why this technology is in this ring,
|
|
115
|
-
what your experience has been, and any recommendations.
|
|
116
103
|
```
|
|
117
104
|
|
|
118
|
-
Each
|
|
105
|
+
Each technology file:
|
|
119
106
|
|
|
120
107
|
```markdown
|
|
121
108
|
---
|
|
122
|
-
title:
|
|
123
|
-
|
|
124
|
-
|
|
109
|
+
title: Kubernetes
|
|
110
|
+
ring: adopt
|
|
111
|
+
moved: 0
|
|
125
112
|
---
|
|
126
|
-
```
|
|
127
113
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
Edit [`src/config.ts`](src/config.ts) to customize:
|
|
131
|
-
|
|
132
|
-
```typescript
|
|
133
|
-
const config: SiteConfig = {
|
|
134
|
-
title: "Tech Radar", // Navbar title
|
|
135
|
-
// logo: '/logo.svg', // Optional logo in public/
|
|
136
|
-
footerText: "Built with Astro", // Footer text (supports HTML)
|
|
137
|
-
editBaseUrl: "https://github.com/...", // "Edit on GitHub" link base
|
|
138
|
-
// theme: 'catppuccin-mocha', // Theme name (see below)
|
|
139
|
-
socialLinks: [{ label: "GitHub", href: "...", icon: "..." }],
|
|
140
|
-
};
|
|
114
|
+
Your description in Markdown. Explain why this technology is in this ring
|
|
115
|
+
and what your experience has been.
|
|
141
116
|
```
|
|
142
117
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
Themes live in `src/themes/` as CSS files defining `--radar-*` custom properties.
|
|
146
|
-
|
|
147
|
-
| Theme | Description |
|
|
148
|
-
| :----------------- | :---------------------------------------------------- |
|
|
149
|
-
| `default` | Clean light/dark theme (follows system preference) |
|
|
150
|
-
| `catppuccin-mocha` | [Catppuccin Mocha](https://catppuccin.com) dark theme |
|
|
118
|
+
### 5. Run
|
|
151
119
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
## Project Structure
|
|
155
|
-
|
|
156
|
-
```text
|
|
157
|
-
├── segments/ # Technology content (Markdown)
|
|
158
|
-
│ ├── cloud/
|
|
159
|
-
│ ├── dev-languages/
|
|
160
|
-
│ ├── frameworks/
|
|
161
|
-
│ └── processes/
|
|
162
|
-
├── src/
|
|
163
|
-
│ ├── components/ # Astro components (Radar, Legend, Cards, ...)
|
|
164
|
-
│ ├── layouts/ # Base HTML layout
|
|
165
|
-
│ ├── lib/ # Radar positioning algorithm
|
|
166
|
-
│ ├── pages/ # Route pages (index, segments, technology)
|
|
167
|
-
│ ├── styles/ # Global styles
|
|
168
|
-
│ ├── themes/ # Swappable CSS themes
|
|
169
|
-
│ └── config.ts # Site configuration
|
|
170
|
-
├── public/ # Static assets (favicon, robots.txt)
|
|
171
|
-
├── wrangler.json # Cloudflare Workers configuration
|
|
172
|
-
└── astro.config.mjs # Astro configuration
|
|
120
|
+
```bash
|
|
121
|
+
npx astro dev
|
|
173
122
|
```
|
|
174
123
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
| Command | Action |
|
|
178
|
-
| :---------------- | :----------------------------------- |
|
|
179
|
-
| `npm install` | Install dependencies |
|
|
180
|
-
| `npm run dev` | Start dev server at `localhost:4321` |
|
|
181
|
-
| `npm run build` | Build production site to `./dist/` |
|
|
182
|
-
| `npm run preview` | Preview the production build locally |
|
|
124
|
+
---
|
|
183
125
|
|
|
184
|
-
##
|
|
126
|
+
## Configuration
|
|
185
127
|
|
|
186
|
-
|
|
128
|
+
All options are passed to the `techradar()` integration in `astro.config.mjs`:
|
|
187
129
|
|
|
188
|
-
|
|
130
|
+
```js
|
|
131
|
+
techradar({
|
|
132
|
+
// Required
|
|
133
|
+
title: "Tech Radar",
|
|
189
134
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
135
|
+
// Optional
|
|
136
|
+
logo: "/logo.svg", // Path to logo in public/
|
|
137
|
+
footerText: "Built by the Platform Team", // Supports HTML
|
|
138
|
+
repositoryUrl: "https://github.com/your-org/your-radar",
|
|
139
|
+
editBaseUrl: "https://github.com/your-org/your-radar/edit/main/segments",
|
|
140
|
+
theme: "default", // 'default' | 'catppuccin-mocha' | path to custom CSS
|
|
141
|
+
socialLinks: [
|
|
142
|
+
{
|
|
143
|
+
label: "GitHub",
|
|
144
|
+
href: "https://github.com/your-org/your-radar",
|
|
145
|
+
icon: "M12 .297c-6.63 0-12 5.373-12 12...", // SVG path data (24x24 viewBox)
|
|
146
|
+
},
|
|
147
|
+
],
|
|
148
|
+
});
|
|
195
149
|
```
|
|
196
150
|
|
|
197
|
-
###
|
|
151
|
+
### Technology Frontmatter
|
|
198
152
|
|
|
199
|
-
|
|
153
|
+
| Field | Type | Description |
|
|
154
|
+
| :------ | :----------------------------------------- | :---------------------------------------------- |
|
|
155
|
+
| `title` | `string` | Display name |
|
|
156
|
+
| `ring` | `'adopt' \| 'trial' \| 'assess' \| 'hold'` | Which ring the technology belongs to |
|
|
157
|
+
| `moved` | `-1 \| 0 \| 1` | Movement indicator (-1 = out, 0 = none, 1 = in) |
|
|
200
158
|
|
|
201
|
-
|
|
202
|
-
# Remove example technologies (keep index.md files — they define segments)
|
|
203
|
-
find segments -name "*.md" ! -name "index.md" -delete
|
|
204
|
-
```
|
|
159
|
+
### Segment Frontmatter
|
|
205
160
|
|
|
206
|
-
|
|
161
|
+
| Field | Type | Description |
|
|
162
|
+
| :------ | :------- | :--------------------------- |
|
|
163
|
+
| `title` | `string` | Segment display name |
|
|
164
|
+
| `color` | `string` | Hex color (e.g. `"#3b82f6"`) |
|
|
165
|
+
| `order` | `number` | Quadrant position (1-4) |
|
|
207
166
|
|
|
208
|
-
```markdown
|
|
209
167
|
---
|
|
210
|
-
title: Your Technology
|
|
211
|
-
ring: adopt # adopt | trial | assess | hold
|
|
212
|
-
moved: 0 # 1 = moved in, -1 = moved out, 0 = unchanged
|
|
213
|
-
---
|
|
214
|
-
|
|
215
|
-
Why this technology is in this ring and what your team's experience has been.
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### 3. Customize Segments
|
|
219
168
|
|
|
220
|
-
|
|
169
|
+
## Theming
|
|
221
170
|
|
|
222
|
-
|
|
223
|
-
---
|
|
224
|
-
title: Infrastructure
|
|
225
|
-
color: "#3b82f6"
|
|
226
|
-
order: 1
|
|
227
|
-
---
|
|
228
|
-
```
|
|
171
|
+
Themes are CSS files defining `--radar-*` custom properties.
|
|
229
172
|
|
|
230
|
-
|
|
173
|
+
| Theme | Description |
|
|
174
|
+
| :----------------- | :---------------------------------------------------- |
|
|
175
|
+
| `default` | Clean light/dark theme (follows system preference) |
|
|
176
|
+
| `catppuccin-mocha` | [Catppuccin Mocha](https://catppuccin.com) dark theme |
|
|
231
177
|
|
|
232
|
-
|
|
178
|
+
To create a custom theme, copy the [default theme](src/themes/default.css), save it in your project, and point to it:
|
|
233
179
|
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
repositoryUrl: "https://gitlab.example.com/your-group/techradar",
|
|
239
|
-
editBaseUrl:
|
|
240
|
-
"https://gitlab.example.com/your-group/techradar/-/edit/main/segments",
|
|
241
|
-
socialLinks: [
|
|
242
|
-
{
|
|
243
|
-
label: "GitLab",
|
|
244
|
-
href: "https://gitlab.example.com/your-group/techradar",
|
|
245
|
-
// GitLab SVG icon path (24x24 viewBox)
|
|
246
|
-
icon: "M23.955 13.587l-1.342-4.135-2.664-8.189a.455.455 0 00-.867 0L16.418 9.45H7.582L4.918 1.263a.455.455 0 00-.867 0L1.387 9.452.045 13.587a.924.924 0 00.331 1.023L12 23.054l11.624-8.443a.92.92 0 00.331-1.024",
|
|
247
|
-
},
|
|
248
|
-
],
|
|
249
|
-
};
|
|
180
|
+
```js
|
|
181
|
+
techradar({
|
|
182
|
+
theme: "./src/my-theme.css",
|
|
183
|
+
});
|
|
250
184
|
```
|
|
251
185
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
### 5. Deploy
|
|
255
|
-
|
|
256
|
-
The radar builds to fully static HTML — deploy it anywhere:
|
|
186
|
+
---
|
|
257
187
|
|
|
258
|
-
|
|
259
|
-
| :--------------------- | :------------------------------------------------------------------------------------------- |
|
|
260
|
-
| **Cloudflare Workers** | Connect your repo in the Cloudflare dashboard, build command `npm run build`, output `dist/` |
|
|
261
|
-
| **GitLab Pages** | Add a `.gitlab-ci.yml` with `npm run build` and publish the `dist/` directory |
|
|
262
|
-
| **Netlify / Vercel** | Connect your repo, build command `npm run build`, publish directory `dist/` |
|
|
263
|
-
| **GitHub Pages** | Use `actions/upload-pages-artifact` with `path: dist/` in a workflow |
|
|
264
|
-
| **Any static host** | Run `npm run build` and upload the `dist/` folder |
|
|
188
|
+
## Example
|
|
265
189
|
|
|
266
|
-
|
|
190
|
+
See the [techradar-demo](https://github.com/dirsigler/techradar-demo) repository for a complete working example.
|
|
267
191
|
|
|
268
|
-
|
|
269
|
-
| :---------------- | :----------------------------------- |
|
|
270
|
-
| `npm install` | Install dependencies |
|
|
271
|
-
| `npm run dev` | Start dev server at `localhost:4321` |
|
|
272
|
-
| `npm run build` | Build production site to `./dist/` |
|
|
273
|
-
| `npm run preview` | Preview the production build locally |
|
|
192
|
+
---
|
|
274
193
|
|
|
275
194
|
## License
|
|
276
195
|
|
package/package.json
CHANGED
package/src/layouts/Base.astro
CHANGED
|
@@ -75,11 +75,7 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
|
|
|
75
75
|
<span class="footer-text">
|
|
76
76
|
© <a href="https://github.com/dirsigler/techradar" target="_blank" rel="noopener noreferrer" class="footer-link">Dennis Irsigler</a>
|
|
77
77
|
·
|
|
78
|
-
|
|
79
|
-
<a href={config.repositoryUrl} target="_blank" rel="noopener noreferrer" class="footer-link">MIT License</a>
|
|
80
|
-
) : (
|
|
81
|
-
<Fragment>MIT License</Fragment>
|
|
82
|
-
)}
|
|
78
|
+
<a href="https://github.com/dirsigler/techradar/blob/main/LICENSE" target="_blank" rel="noopener noreferrer" class="footer-link">MIT License</a>
|
|
83
79
|
{config.footerText && <Fragment> · <span set:html={config.footerText} /></Fragment>}
|
|
84
80
|
</span>
|
|
85
81
|
|
package/src/pages/index.astro
CHANGED
|
@@ -61,25 +61,23 @@ const ringEntries = Object.entries(RING_LABELS) as [string, string][];
|
|
|
61
61
|
</div>
|
|
62
62
|
|
|
63
63
|
<!-- Filter bar -->
|
|
64
|
-
<div id="filter-bar" class="mb-8 flex flex-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</button>
|
|
82
|
-
))}
|
|
64
|
+
<div id="filter-bar" class="mb-8 flex flex-col items-center gap-3">
|
|
65
|
+
<div class="flex flex-wrap items-center justify-center gap-2">
|
|
66
|
+
<button data-filter="all" data-type="all" class="filter-btn active">All</button>
|
|
67
|
+
{segments.map((seg) => (
|
|
68
|
+
<button data-filter={seg.slug} data-type="segment" class="filter-btn">
|
|
69
|
+
<span class="inline-block h-2.5 w-2.5 rounded-full mr-1" style={`background-color: ${seg.color}`}></span>
|
|
70
|
+
{seg.title}
|
|
71
|
+
</button>
|
|
72
|
+
))}
|
|
73
|
+
</div>
|
|
74
|
+
<div class="flex flex-wrap items-center justify-center gap-2">
|
|
75
|
+
{ringEntries.map(([key, label]) => (
|
|
76
|
+
<button data-filter={key} data-type="ring" class="filter-btn">
|
|
77
|
+
{label}
|
|
78
|
+
</button>
|
|
79
|
+
))}
|
|
80
|
+
</div>
|
|
83
81
|
</div>
|
|
84
82
|
|
|
85
83
|
<Radar technologies={technologies} segments={segments} />
|