@dirsigler/astro-techradar 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 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,257 @@
+# @dirsigler/astro-techradar
+
+[![npm version](https://img.shields.io/npm/v/@dirsigler/astro-techradar)](https://www.npmjs.com/package/@dirsigler/astro-techradar)
+[![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)
+
+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.
+
+**[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)     |
+
+---
+
+## Features
+
+- **Interactive SVG Radar** — Technologies plotted across four rings (Adopt, Trial, Assess, Hold) with hover tooltips and click-through navigation
+- **Markdown-Driven** — Add technologies by dropping `.md` files into `segments/`. No code changes needed
+- **Theming & Color Mode** — Ships with a default theme and [Catppuccin Mocha](https://catppuccin.com). Light/dark toggle, lockable color mode, or create your own theme with CSS custom properties
+- **Fully Static & Fast** — Builds to plain HTML/CSS/JS. Deploy anywhere
+- **Movement Indicators** — Mark technologies as moved in/out to highlight recent changes
+- **SEO Ready** — Open Graph, Twitter Cards, canonical URLs, and custom 404 page
+
+---
+
+## Quick Start
+
+### 1. Install
+
+```bash
+npm install @dirsigler/astro-techradar astro
+```
+
+### 2. Add the integration
+
+```js
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+import techradar from "@dirsigler/astro-techradar";
+
+export default defineConfig({
+  site: "https://your-site.example.com",
+  integrations: [
+    techradar({
+      title: "Tech Radar",
+    }),
+  ],
+});
+```
+
+### 3. Define the content collections
+
+Create `src/content.config.ts`:
+
+```ts
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
+import { segmentSchema, technologySchema } from "@dirsigler/astro-techradar/schemas";
+
+const segments = defineCollection({
+  loader: glob({ pattern: "*/index.md", base: "./segments" }),
+  schema: segmentSchema,
+});
+
+const technologies = defineCollection({
+  loader: glob({ pattern: "*/!(index).md", base: "./segments" }),
+  schema: technologySchema,
+});
+
+export const collections = { segments, technologies };
+```
+
+### 4. Add your content
+
+```text
+segments/
+├── cloud/
+│   ├── index.md          # Segment metadata
+│   ├── kubernetes.md
+│   └── terraform.md
+├── frameworks/
+│   ├── index.md
+│   ├── astro.md
+│   └── react.md
+└── ...
+```
+
+Each segment needs an `index.md`:
+
+```markdown
+---
+title: Cloud
+color: "#3b82f6"
+order: 1
+---
+```
+
+Each technology file:
+
+```markdown
+---
+title: Kubernetes
+ring: adopt
+moved: 0
+---
+
+Your description in Markdown. Explain why this technology is in this ring
+and what your experience has been.
+```
+
+### 5. Run
+
+```bash
+npx astro dev
+```
+
+---
+
+## Configuration
+
+All options are passed to the `techradar()` integration in `astro.config.mjs`:
+
+```js
+techradar({
+  // Required
+  title: "Tech Radar",
+
+  // Optional
+  basePath: "/techradar", // Mount under a sub-path (e.g. acme.com/techradar/)
+  logo: "/logo.svg", // Path to logo in public/
+  footerText: "Built by the Platform Team", // Supports HTML
+  repositoryUrl: "https://github.com/your-org/your-radar",
+  editBaseUrl: "https://github.com/your-org/your-radar/edit/main/segments",
+  theme: "default", // 'default' | 'catppuccin-mocha' | path to custom CSS
+  color: {
+    toggle: true, // Show the light/dark mode toggle (default: true)
+    mode: "system", // 'light' | 'dark' | 'system' (default: 'system')
+  },
+  socialLinks: [
+    {
+      label: "GitHub",
+      href: "https://github.com/your-org/your-radar",
+      icon: "github", // Lucide icon name (requires @iconify-json/lucide)
+    },
+  ],
+});
+```
+
+### Social Link Icons
+
+Social links can optionally display [Lucide](https://lucide.dev) icons. If you use the `icon` field, install the icon set:
+
+```bash
+npm install @iconify-json/lucide
+```
+
+```js
+socialLinks: [
+  { label: "GitHub", href: "https://github.com/your-org", icon: "github" },
+],
+```
+
+### Technology Frontmatter
+
+| Field   | Type                                       | Description                                     |
+| :------ | :----------------------------------------- | :---------------------------------------------- |
+| `title` | `string`                                   | Display name                                    |
+| `ring`  | `'adopt' \| 'trial' \| 'assess' \| 'hold'` | Which ring the technology belongs to            |
+| `moved` | `-1 \| 0 \| 1`                             | Movement indicator (-1 = out, 0 = none, 1 = in) |
+
+### Segment Frontmatter
+
+| Field   | Type     | Description                  |
+| :------ | :------- | :--------------------------- |
+| `title` | `string` | Segment display name         |
+| `color` | `string` | Hex color (e.g. `"#3b82f6"`) |
+| `order` | `number` | Quadrant position (1-4)      |
+
+---
+
+## Theming
+
+Themes are 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 the [default theme](src/themes/default.css), save it in your project, and point to it:
+
+```js
+techradar({
+  theme: "./src/my-theme.css",
+});
+```
+
+### Color Mode
+
+Control the light/dark mode behavior with the `color` option:
+
+```js
+// Default — toggle visible, follows system preference
+techradar({ title: "Tech Radar" });
+
+// Lock to dark mode, no toggle
+techradar({
+  title: "Tech Radar",
+  color: { toggle: false, mode: "dark" },
+});
+
+// Lock to light mode, no toggle
+techradar({
+  title: "Tech Radar",
+  color: { toggle: false, mode: "light" },
+});
+```
+
+| Field    | Type                            | Default    | Description                                          |
+| :------- | :------------------------------ | :--------- | :--------------------------------------------------- |
+| `toggle` | `boolean`                       | `true`     | Show the light/dark mode toggle in the header        |
+| `mode`   | `'light' \| 'dark' \| 'system'` | `'system'` | Color mode — locks the mode when `toggle` is `false` |
+
+---
+
+## Base Path
+
+Mount the radar under a sub-path when embedding it into a larger Astro site:
+
+```js
+// Serves the radar at acme.com/techradar/
+techradar({
+  title: "ACME Tech Radar",
+  basePath: "/techradar",
+});
+```
+
+All routes and internal links are automatically prefixed. This works alongside Astro's own `base` config for full flexibility.
+
+---
+
+## Example
+
+See the [techradar-demo](https://github.com/dirsigler/techradar-demo) repository for a complete working example.
+
+---
+
+## License
+
+[MIT](LICENSE) — Dennis Irsigler

package/config.ts

@@ -0,0 +1,95 @@
+export interface SocialLink {
+  label: string;
+  href: string;
+  /** Lucide icon name (e.g. "github", "twitter", "globe"). Falls back to label text if unrecognized. */
+  icon?: string;
+}
+
+export interface ColorModeConfig {
+  /** Show the light/dark mode toggle in the header. Default: true */
+  toggle?: boolean;
+  /** Color mode preference. When toggle is false this locks the mode. Default: 'system' */
+  mode?: 'light' | 'dark' | 'system';
+}
+
+export interface ResolvedColorMode {
+  toggle: boolean;
+  mode: 'light' | 'dark' | 'system';
+}
+
+export interface TechRadarUserConfig {
+  /** Navbar title text */
+  title: string;
+
+  /** Main page headline. Falls back to title if not set. */
+  headline?: string;
+
+  /**
+   * URL path prefix where the tech radar is mounted (e.g. "/techradar").
+   * Useful when embedding the radar into a larger Astro site.
+   * Default: "" (root)
+   */
+  basePath?: string;
+
+  /** Logo image — either a path in public/ (e.g. "/logo.svg") or an external HTTPS URL. Omit to show title only. */
+  logo?: string;
+
+  /** Footer text. Supports simple HTML. */
+  footerText?: string;
+
+  /** Show "Edit this page" links on technology pages. Default: true */
+  allowEditing?: boolean;
+
+  /** Base URL for "Edit" links on technology pages (e.g. "https://github.com/org/repo/edit/main/segments"). */
+  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;
+
+  /** Color mode configuration. */
+  color?: ColorModeConfig;
+}
+
+export interface ResolvedConfig {
+  title: string;
+  headline: string;
+  /** Normalized base path with leading slash, no trailing slash. Empty string when mounted at root. */
+  basePath: string;
+  logo?: string;
+  footerText: string;
+  editBaseUrl?: string;
+  socialLinks: SocialLink[];
+  theme: string;
+  color: ResolvedColorMode;
+}
+
+/** Normalize a user-supplied path: ensure leading slash, strip trailing slash. Returns "" for root. */
+function normalizeBasePath(raw?: string): string {
+  if (!raw) return '';
+  // Strip leading/trailing slashes, then re-add leading slash
+  const trimmed = raw.replace(/^\/+|\/+$/g, '');
+  return trimmed ? `/${trimmed}` : '';
+}
+
+export function resolveConfig(user: TechRadarUserConfig): ResolvedConfig {
+  return {
+    title: user.title,
+    headline: user.headline ?? user.title,
+    basePath: normalizeBasePath(user.basePath),
+    logo: user.logo,
+    footerText: user.footerText ?? '',
+    editBaseUrl:
+      (user.allowEditing ?? true) === false
+        ? undefined
+        : user.editBaseUrl,
+    socialLinks: user.socialLinks ?? [],
+    theme: user.theme ?? 'default',
+    color: {
+      toggle: user.color?.toggle ?? true,
+      mode: user.color?.mode ?? 'system',
+    },
+  };
+}

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,103 @@
+import type { AstroIntegration } from 'astro';
+import type { TechRadarUserConfig } from './config';
+import { resolveConfig } from './config';
+import icon from 'astro-icon';
+import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath } from 'node:url';
+import { copyFileSync, mkdirSync, 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/astro-techradar',
+    hooks: {
+      'astro:config:setup'({ injectRoute, updateConfig, config: astroConfig }) {
+        const bp = config.basePath; // e.g. "" or "/techradar"
+
+        // Inject all routes (prefixed with basePath)
+        injectRoute({
+          pattern: `${bp}/`,
+          entrypoint: path.join(PKG_DIR, 'src/pages/index.astro'),
+        });
+        injectRoute({
+          pattern: `${bp}/404`,
+          entrypoint: path.join(PKG_DIR, 'src/pages/404.astro'),
+        });
+        injectRoute({
+          pattern: `${bp}/segments/[segment]`,
+          entrypoint: path.join(PKG_DIR, 'src/pages/segments/[segment].astro'),
+        });
+        injectRoute({
+          pattern: `${bp}/technology/[...slug]`,
+          entrypoint: path.join(
+            PKG_DIR,
+            'src/pages/technology/[...slug].astro',
+          ),
+        });
+        // Copy static assets into the consumer's public directory
+        const publicDir = fileURLToPath(astroConfig.publicDir);
+        mkdirSync(publicDir, { recursive: true });
+        for (const file of ['favicon.svg', 'og-image.png']) {
+          copyFileSync(
+            path.join(PKG_DIR, 'src/assets', file),
+            path.join(publicDir, file),
+          );
+        }
+
+        // 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;
+
+        // Register astro-icon if not already added by the user
+        const hasIcon = astroConfig.integrations.some((i) => i.name === 'astro-icon');
+        if (!hasIcon) {
+          updateConfig({ integrations: [icon()] });
+        }
+
+        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,52 @@
+{
+  "name": "@dirsigler/astro-techradar",
+  "version": "0.0.0",
+  "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": [
+    "LICENSE",
+    "README.md",
+    "index.ts",
+    "integration.ts",
+    "config.ts",
+    "schemas.ts",
+    "virtual.d.ts",
+    "src/**/*"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "peerDependencies": {
+    "@iconify-json/lucide": "^1.2.98",
+    "astro": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@iconify-json/lucide": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.2.1",
+    "astro-icon": "^1.1.5",
+    "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/assets/favicon.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Concentric rings -->
+  <circle cx="16" cy="16" r="15" fill="none" stroke="#cbd5e1" stroke-width="0.75" opacity="0.4"/>
+  <circle cx="16" cy="16" r="11" fill="none" stroke="#cbd5e1" stroke-width="0.75" opacity="0.5"/>
+  <circle cx="16" cy="16" r="7" fill="none" stroke="#cbd5e1" stroke-width="0.75" opacity="0.6"/>
+  <circle cx="16" cy="16" r="3" fill="none" stroke="#cbd5e1" stroke-width="0.75" opacity="0.7"/>
+
+  <!-- Hold ring (outer) — red dots -->
+  <circle cx="5" cy="10" r="1.4" fill="#dc2626"/>
+  <circle cx="26" cy="20" r="1.2" fill="#dc2626"/>
+  <circle cx="10" cy="27" r="1.1" fill="#dc2626"/>
+
+  <!-- Assess ring — yellow dots -->
+  <circle cx="22" cy="9" r="1.3" fill="#ca8a04"/>
+  <circle cx="8" cy="19" r="1.2" fill="#ca8a04"/>
+  <circle cx="20" cy="25" r="1.0" fill="#ca8a04"/>
+
+  <!-- Trial ring — blue dots -->
+  <circle cx="12" cy="10" r="1.3" fill="#2563eb"/>
+  <circle cx="22" cy="15" r="1.1" fill="#2563eb"/>
+  <circle cx="11" cy="22" r="1.2" fill="#2563eb"/>
+
+  <!-- Adopt ring (inner) — green dots -->
+  <circle cx="16" cy="13" r="1.4" fill="#16a34a"/>
+  <circle cx="14" cy="18" r="1.2" fill="#16a34a"/>
+  <circle cx="19" cy="17" r="1.1" fill="#16a34a"/>
+</svg>

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>}