@dirsigler/astro-techradar 0.2.2 → 0.4.0

package/README.md

@@ -109,12 +109,29 @@ Each technology file:
 title: Kubernetes
 ring: adopt
 moved: 0
+history:
+  - date: "2025-03"
+    ring: adopt
+    description: "Promoted after 2 years of successful production use."
+  - date: "2023-01"
+    ring: trial
+    description: "Started evaluating for container orchestration."
+  - date: "2022-06"
+    ring: assess
 ---
 
 Your description in Markdown. Explain why this technology is in this ring
 and what your experience has been.
 ```
 
+The `history` field is optional. When present, a timeline is rendered on the technology detail page showing how its ring classification changed over time. Each entry has:
+
+| Field | Required | Description |
+| ----- | -------- | ----------- |
+| `date` | yes | Free-text date string (e.g. `"2025-03"`, `"Q1 2025"`) |
+| `ring` | yes | The ring at that point in time (`adopt`, `trial`, `assess`, `hold`) |
+| `description` | no | Short rationale for the change |
+
 ### 5. Run
 
 ```bash

package/config.ts

@@ -18,11 +18,14 @@ export interface ResolvedColorMode {
 }
 
 export interface TechRadarUserConfig {
-  /** Navbar title text */
-  title: string;
+  /** Brand name shown in the navbar. */
+  name: string;
+
+  /** Main page title shown as the h1 heading. Falls back to name if not set. */
+  title?: string;
 
-  /** Main page headline. Falls back to title if not set. */
-  headline?: string;
+  /** Subtitle shown below the title on the main page. */
+  subtitle?: string;
 
   /**
    * URL path prefix where the tech radar is mounted (e.g. "/techradar").
@@ -54,8 +57,9 @@ export interface TechRadarUserConfig {
 }
 
 export interface ResolvedConfig {
+  name: string;
   title: string;
-  headline: string;
+  subtitle?: string;
   /** Normalized base path with leading slash, no trailing slash. Empty string when mounted at root. */
   basePath: string;
   logo?: string;
@@ -76,8 +80,9 @@ function normalizeBasePath(raw?: string): string {
 
 export function resolveConfig(user: TechRadarUserConfig): ResolvedConfig {
   return {
-    title: user.title,
-    headline: user.headline ?? user.title,
+    name: user.name,
+    title: user.title ?? user.name,
+    subtitle: user.subtitle,
     basePath: normalizeBasePath(user.basePath),
     logo: user.logo,
     footerText: user.footerText ?? '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dirsigler/astro-techradar",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "type": "module",
   "description": "An interactive technology radar Astro integration — track technology adoption across your organization",
   "license": "MIT",

package/schemas.ts

@@ -1,4 +1,7 @@
 import { z } from 'astro/zod';
+import { RINGS } from './src/lib/radar';
+
+const ringEnum = z.enum(RINGS);
 
 export const segmentSchema = z.object({
   title: z.string(),
@@ -8,6 +11,15 @@ export const segmentSchema = z.object({
 
 export const technologySchema = z.object({
   title: z.string(),
-  ring: z.enum(['adopt', 'trial', 'assess', 'hold']),
+  ring: ringEnum,
   moved: z.number().int().min(-1).max(1).default(0),
+  history: z
+    .array(
+      z.object({
+        date: z.string(),
+        ring: ringEnum,
+        description: z.string().optional(),
+      }),
+    )
+    .optional(),
 });

package/src/layouts/Base.astro

@@ -10,7 +10,7 @@ interface Props {
   description?: string;
 }
 
-const { title = config.title, description = 'Technology Radar — tracking technology adoption across our organization' } = Astro.props;
+const { title = config.name, description = 'Technology Radar — tracking technology adoption across our organization' } = Astro.props;
 const siteBase = import.meta.env.BASE_URL.replace(/\/+$/, '');
 const base = `${siteBase}${config.basePath}/`;
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
@@ -61,11 +61,11 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
           {config.logo && (
             <img
               src={config.logo.startsWith('https://') ? config.logo : `${base}${config.logo.replace(/^\//, '')}`}
-              alt={config.title}
+              alt={config.name}
               class="h-8 w-auto"
             />
           )}
-          {config.title}
+          {config.name}
         </a>
         {config.color.toggle && <ThemeToggle />}
       </nav>

package/src/pages/index.astro

@@ -53,12 +53,14 @@ const legendSegments = segments.map((s) => ({
 const ringEntries = Object.entries(RING_LABELS) as [string, string][];
 ---
 
-<Base title={config.title}>
+<Base title={config.name}>
   <div class="text-center mb-10">
-    <h1 class="text-4xl font-bold" style="color: var(--radar-text);">{config.headline}</h1>
-    <p class="mt-3 text-lg" style="color: var(--radar-text-muted);">
-      An overview of the technologies, frameworks, processes, and languages we use and evaluate.
-    </p>
+    <h1 class="text-4xl font-bold" style="color: var(--radar-text);">{config.title}</h1>
+    {config.subtitle && (
+      <p class="mt-3 text-lg" style="color: var(--radar-text-muted);">
+        {config.subtitle}
+      </p>
+    )}
   </div>
 
   <!-- Filter bar -->

package/src/pages/technology/[...slug].astro

@@ -70,6 +70,31 @@ const editUrl = config.editBaseUrl
       <Content />
     </div>
 
+    {entry.data.history && entry.data.history.length > 0 && (
+      <section class="mt-10">
+        <h2 class="text-xl font-semibold mb-4" style="color: var(--radar-text);">History</h2>
+        <ol class="history-timeline">
+          {[...entry.data.history].sort((a, b) => b.date.localeCompare(a.date)).map((h) => (
+            <li class="history-entry">
+              <div class="history-marker">
+                <span class={`history-dot ring-${h.ring}`} />
+                <span class="history-line" />
+              </div>
+              <div class="history-content">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <RingBadge ring={h.ring} />
+                  <time class="text-sm" style="color: var(--radar-text-faint);">{h.date}</time>
+                </div>
+                {h.description && (
+                  <p class="mt-1 text-sm" style="color: var(--radar-text-muted);">{h.description}</p>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+    )}
+
     {editUrl && (
       <div class="mt-8 pt-6" style="border-top: 1px solid var(--radar-border);">
         <a
@@ -110,4 +135,57 @@ const editUrl = config.editBaseUrl
   .edit-link:hover {
     color: var(--radar-link);
   }
+
+  .history-timeline {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .history-entry {
+    display: flex;
+    gap: 0.75rem;
+    position: relative;
+  }
+
+  .history-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1rem;
+  }
+
+  .history-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 9999px;
+    flex-shrink: 0;
+    margin-top: 0.375rem;
+  }
+
+  .history-dot.ring-adopt { background-color: var(--radar-ring-adopt); }
+  .history-dot.ring-trial { background-color: var(--radar-ring-trial); }
+  .history-dot.ring-assess { background-color: var(--radar-ring-assess); }
+  .history-dot.ring-hold { background-color: var(--radar-ring-hold); }
+
+  .history-line {
+    flex: 1;
+    width: 2px;
+    background-color: var(--radar-border, #e2e8f0);
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .history-entry:last-child .history-line {
+    display: none;
+  }
+
+  .history-content {
+    padding-bottom: 1.25rem;
+  }
+
+  .history-entry:last-child .history-content {
+    padding-bottom: 0;
+  }
 </style>