@dirsigler/techradar 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dennis Irsigler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,277 @@
+# Tech Radar
+
+[![Built with Astro](https://img.shields.io/badge/Built%20with-Astro-BC52EE?logo=astro&logoColor=white)](https://astro.build)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Deploy](https://img.shields.io/badge/Deployed%20on-Cloudflare%20Workers-F38020?logo=cloudflare&logoColor=white)](https://demo.techradar.irsigler.dev)
+
+An interactive, fully static technology radar built with [Astro](https://astro.build). Track technology adoption decisions across your organization with a visual radar chart, categorized segments, and detailed technology pages — all driven by simple Markdown files.
+
+**[View Live Demo](https://demo.techradar.irsigler.dev)**
+
+---
+
+## Preview
+
+|                  Radar Overview                  |                     Technology Detail                      |
+| :----------------------------------------------: | :--------------------------------------------------------: |
+| ![Radar Light](docs/screenshots/radar-light.png) | ![Technology Page](docs/screenshots/technology-detail.png) |
+|  ![Radar Dark](docs/screenshots/radar-dark.png)  |     ![Segment Page](docs/screenshots/segment-page.png)     |
+
+---
+
+## Key Features
+
+<table>
+<tr>
+<td width="50%">
+
+### Interactive SVG Radar
+
+Technologies plotted across four rings — **Adopt**, **Trial**, **Assess**, **Hold** — with hover tooltips and click-through to detail pages.
+
+</td>
+<td width="50%">
+
+### Markdown-Driven Content
+
+Add technologies by dropping `.md` files into `segments/`. No code changes needed — just write frontmatter and prose.
+
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+### Theming & Dark Mode
+
+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.
+
+</td>
+<td width="50%">
+
+### Fully Static & Fast
+
+Builds to plain HTML/CSS/JS — 60+ pages in ~1 second. Deploy anywhere: Cloudflare Workers, Netlify, Vercel, S3, or any static host.
+
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+### Segments & Movement
+
+Group technologies into color-coded categories. Mark technologies as moved in/out to highlight recent adoption changes.
+
+</td>
+<td width="50%">
+
+### SEO & Production Ready
+
+Sitemap, robots.txt, Open Graph, Twitter Cards, canonical URLs, custom 404 page — all out of the box.
+
+</td>
+</tr>
+</table>
+
+---
+
+## Quick Start
+
+```bash
+git clone https://github.com/dirsigler/techradar.git
+cd techradar
+npm install
+npm run dev
+```
+
+Open [http://localhost:4321](http://localhost:4321) to see the radar.
+
+## Adding Technologies
+
+Create a Markdown file in the appropriate segment directory under `segments/`:
+
+```text
+segments/
+├── cloud/
+│   ├── index.md          # Segment metadata (title, color, order)
+│   ├── kubernetes.md
+│   └── terraform.md
+├── frameworks/
+│   ├── index.md
+│   ├── astro.md
+│   └── react.md
+└── ...
+```
+
+Each technology file uses this frontmatter:
+
+```markdown
+---
+title: Kubernetes
+ring: adopt # adopt | trial | assess | hold
+moved: 0 # 1 = moved in, -1 = moved out, 0 = unchanged
+---
+
+Your description in Markdown. Explain why this technology is in this ring,
+what your experience has been, and any recommendations.
+```
+
+Each segment needs an `index.md`:
+
+```markdown
+---
+title: Cloud
+color: "#3b82f6"
+order: 1 # Determines quadrant position (1-4)
+---
+```
+
+## Configuration
+
+Edit [`src/config.ts`](src/config.ts) to customize:
+
+```typescript
+const config: SiteConfig = {
+  title: "Tech Radar", // Navbar title
+  // logo: '/logo.svg',              // Optional logo in public/
+  footerText: "Built with Astro", // Footer text (supports HTML)
+  editBaseUrl: "https://github.com/...", // "Edit on GitHub" link base
+  // theme: 'catppuccin-mocha',      // Theme name (see below)
+  socialLinks: [{ label: "GitHub", href: "...", icon: "..." }],
+};
+```
+
+## Theming
+
+Themes live in `src/themes/` as CSS files defining `--radar-*` custom properties.
+
+| Theme              | Description                                           |
+| :----------------- | :---------------------------------------------------- |
+| `default`          | Clean light/dark theme (follows system preference)    |
+| `catppuccin-mocha` | [Catppuccin Mocha](https://catppuccin.com) dark theme |
+
+To create a custom theme, copy `src/themes/default.css`, rename it, adjust the CSS variables, and set `theme: 'your-theme'` in `src/config.ts`.
+
+## Project Structure
+
+```text
+├── segments/              # Technology content (Markdown)
+│   ├── cloud/
+│   ├── dev-languages/
+│   ├── frameworks/
+│   └── processes/
+├── src/
+│   ├── components/        # Astro components (Radar, Legend, Cards, ...)
+│   ├── layouts/           # Base HTML layout
+│   ├── lib/               # Radar positioning algorithm
+│   ├── pages/             # Route pages (index, segments, technology)
+│   ├── styles/            # Global styles
+│   ├── themes/            # Swappable CSS themes
+│   └── config.ts          # Site configuration
+├── public/                # Static assets (favicon, robots.txt)
+├── wrangler.json          # Cloudflare Workers configuration
+└── astro.config.mjs       # Astro configuration
+```
+
+## Commands
+
+| Command           | Action                               |
+| :---------------- | :----------------------------------- |
+| `npm install`     | Install dependencies                 |
+| `npm run dev`     | Start dev server at `localhost:4321` |
+| `npm run build`   | Build production site to `./dist/`   |
+| `npm run preview` | Preview the production build locally |
+
+## Adopt This Radar
+
+This project is designed to be forked and customized for your own team or organization.
+
+### 1. Fork & Clone
+
+```bash
+# GitLab or other hosts
+git clone https://github.com/dirsigler/techradar.git my-techradar
+cd my-techradar
+git remote set-url origin https://gitlab.example.com/your-group/techradar.git
+```
+
+### 2. Replace Technologies
+
+Delete the example content and add your own:
+
+```bash
+# Remove example technologies (keep index.md files — they define segments)
+find segments -name "*.md" ! -name "index.md" -delete
+```
+
+Create technology files with this frontmatter:
+
+```markdown
+---
+title: Your Technology
+ring: adopt # adopt | trial | assess | hold
+moved: 0 # 1 = moved in, -1 = moved out, 0 = unchanged
+---
+
+Why this technology is in this ring and what your team's experience has been.
+```
+
+### 3. Customize Segments
+
+Edit the `index.md` in each segment directory. You can rename, recolor, or replace segments entirely — just keep up to 4 directories under `segments/`:
+
+```markdown
+---
+title: Infrastructure
+color: "#3b82f6"
+order: 1
+---
+```
+
+### 4. Configure
+
+Update `src/config.ts` — all GitHub-specific values are in this single file:
+
+```typescript
+const config: SiteConfig = {
+  title: "ACME Tech Radar",
+  footerText: "Built by the ACME Platform Team",
+  repositoryUrl: "https://gitlab.example.com/your-group/techradar",
+  editBaseUrl:
+    "https://gitlab.example.com/your-group/techradar/-/edit/main/segments",
+  socialLinks: [
+    {
+      label: "GitLab",
+      href: "https://gitlab.example.com/your-group/techradar",
+      // GitLab SVG icon path (24x24 viewBox)
+      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",
+    },
+  ],
+};
+```
+
+> **Note:** The `repositoryUrl` is used for the license link in the footer. The `editBaseUrl` powers the "Edit this page" links on technology pages. Both are optional.
+
+### 5. Deploy
+
+The radar builds to fully static HTML — deploy it anywhere:
+
+| Platform               | Setup                                                                                        |
+| :--------------------- | :------------------------------------------------------------------------------------------- |
+| **Cloudflare Workers** | Connect your repo in the Cloudflare dashboard, build command `npm run build`, output `dist/` |
+| **GitLab Pages**       | Add a `.gitlab-ci.yml` with `npm run build` and publish the `dist/` directory                |
+| **Netlify / Vercel**   | Connect your repo, build command `npm run build`, publish directory `dist/`                  |
+| **GitHub Pages**       | Use `actions/upload-pages-artifact` with `path: dist/` in a workflow                         |
+| **Any static host**    | Run `npm run build` and upload the `dist/` folder                                            |
+
+## Commands
+
+| Command           | Action                               |
+| :---------------- | :----------------------------------- |
+| `npm install`     | Install dependencies                 |
+| `npm run dev`     | Start dev server at `localhost:4321` |
+| `npm run build`   | Build production site to `./dist/`   |
+| `npm run preview` | Preview the production build locally |
+
+## License
+
+[MIT](LICENSE) — Dennis Irsigler

package/config.ts

@@ -0,0 +1,54 @@
+export interface SocialLink {
+  label: string;
+  href: string;
+  icon?: string; // optional SVG path data (24x24 viewBox)
+}
+
+export interface TechRadarUserConfig {
+  /** Navbar title text */
+  title: string;
+
+  /** Path to a logo image in the public/ directory (e.g. "/logo.svg"). Omit to show title only. */
+  logo?: string;
+
+  /** Footer text. Supports simple HTML. */
+  footerText?: string;
+
+  /** Base URL of the repository. Used for license link and edit URLs. */
+  repositoryUrl?: string;
+
+  /** Base URL for "Edit" links on technology pages. If omitted, derived from repositoryUrl. */
+  editBaseUrl?: string;
+
+  /** Social links shown in the footer. */
+  socialLinks?: SocialLink[];
+
+  /** Theme name — matches a built-in CSS file ('default' | 'catppuccin-mocha') or a path to a custom CSS file. Default: 'default' */
+  theme?: string;
+}
+
+export interface ResolvedConfig {
+  title: string;
+  logo?: string;
+  footerText: string;
+  repositoryUrl?: string;
+  editBaseUrl?: string;
+  socialLinks: SocialLink[];
+  theme: string;
+}
+
+export function resolveConfig(user: TechRadarUserConfig): ResolvedConfig {
+  return {
+    title: user.title,
+    logo: user.logo,
+    footerText: user.footerText ?? '',
+    repositoryUrl: user.repositoryUrl,
+    editBaseUrl:
+      user.editBaseUrl ??
+      (user.repositoryUrl
+        ? `${user.repositoryUrl}/edit/main/segments`
+        : undefined),
+    socialLinks: user.socialLinks ?? [],
+    theme: user.theme ?? 'default',
+  };
+}

package/index.ts

@@ -0,0 +1,11 @@
+import type { AstroIntegration } from 'astro';
+import type { TechRadarUserConfig } from './config';
+import { createIntegration } from './integration';
+
+export default function techradar(
+  userConfig: TechRadarUserConfig,
+): AstroIntegration {
+  return createIntegration(userConfig);
+}
+
+export type { TechRadarUserConfig, ResolvedConfig, SocialLink } from './config';

package/integration.ts

@@ -0,0 +1,85 @@
+import type { AstroIntegration } from 'astro';
+import type { TechRadarUserConfig } from './config';
+import { resolveConfig } from './config';
+import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath } from 'node:url';
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'node:path';
+
+const PKG_DIR = path.dirname(fileURLToPath(import.meta.url));
+
+export function createIntegration(
+  userConfig: TechRadarUserConfig,
+): AstroIntegration {
+  const config = resolveConfig(userConfig);
+
+  return {
+    name: '@dirsigler/techradar',
+    hooks: {
+      'astro:config:setup'({ injectRoute, updateConfig }) {
+        // Inject all routes
+        injectRoute({
+          pattern: '/',
+          entrypoint: path.join(PKG_DIR, 'src/pages/index.astro'),
+        });
+        injectRoute({
+          pattern: '/404',
+          entrypoint: path.join(PKG_DIR, 'src/pages/404.astro'),
+        });
+        injectRoute({
+          pattern: '/segments/[segment]',
+          entrypoint: path.join(PKG_DIR, 'src/pages/segments/[segment].astro'),
+        });
+        injectRoute({
+          pattern: '/technology/[...slug]',
+          entrypoint: path.join(
+            PKG_DIR,
+            'src/pages/technology/[...slug].astro',
+          ),
+        });
+
+        // Resolve theme CSS
+        let themeCSS = '';
+        const builtinPath = path.join(
+          PKG_DIR,
+          `src/themes/${config.theme}.css`,
+        );
+        if (existsSync(builtinPath)) {
+          themeCSS = readFileSync(builtinPath, 'utf-8');
+        } else if (existsSync(config.theme)) {
+          // User provided an absolute or relative path to a custom theme
+          themeCSS = readFileSync(config.theme, 'utf-8');
+        }
+
+        // Virtual modules for config and theme
+        const VIRTUAL_CONFIG = 'virtual:techradar/config';
+        const RESOLVED_CONFIG = '\0' + VIRTUAL_CONFIG;
+        const VIRTUAL_THEME = 'virtual:techradar/theme';
+        const RESOLVED_THEME = '\0' + VIRTUAL_THEME;
+
+        updateConfig({
+          vite: {
+            plugins: [
+              tailwindcss(),
+              {
+                name: 'techradar-virtual-modules',
+                resolveId(id: string) {
+                  if (id === VIRTUAL_CONFIG) return RESOLVED_CONFIG;
+                  if (id === VIRTUAL_THEME) return RESOLVED_THEME;
+                },
+                load(id: string) {
+                  if (id === RESOLVED_CONFIG) {
+                    return `export default ${JSON.stringify(config)}`;
+                  }
+                  if (id === RESOLVED_THEME) {
+                    return `export default ${JSON.stringify(themeCSS)}`;
+                  }
+                },
+              },
+            ],
+          },
+        });
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@dirsigler/techradar",
+  "version": "1.0.4",
+  "type": "module",
+  "description": "An interactive technology radar Astro integration — track technology adoption across your organization",
+  "license": "MIT",
+  "author": "Dennis Irsigler <dennis@irsigler.dev>",
+  "homepage": "https://github.com/dirsigler/techradar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dirsigler/techradar.git"
+  },
+  "keywords": [
+    "astro-integration",
+    "techradar",
+    "technology-radar",
+    "radar",
+    "engineering"
+  ],
+  "exports": {
+    ".": "./index.ts",
+    "./schemas": "./schemas.ts"
+  },
+  "files": [
+    "index.ts",
+    "integration.ts",
+    "config.ts",
+    "schemas.ts",
+    "virtual.d.ts",
+    "src/**/*"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "peerDependencies": {
+    "astro": "^6.0.0"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.2.1",
+    "tailwindcss": "^4.2.1"
+  }
+}

package/schemas.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content';
+
+export const segmentSchema = z.object({
+  title: z.string(),
+  order: z.number().int().min(1).max(4),
+  color: z.string().regex(/^#[0-9a-fA-F]{6}$/),
+});
+
+export const technologySchema = z.object({
+  title: z.string(),
+  ring: z.enum(['adopt', 'trial', 'assess', 'hold']),
+  moved: z.number().int().min(-1).max(1).default(0),
+});

package/src/components/MovedIndicator.astro

@@ -0,0 +1,10 @@
+---
+interface Props {
+  moved: number;
+}
+
+const { moved } = Astro.props;
+---
+
+{moved === 1 && <span style="color: var(--radar-moved-in);" title="Moved in">&#9650;</span>}
+{moved === -1 && <span style="color: var(--radar-moved-out);" title="Moved out">&#9660;</span>}