@dirsigler/astro-techradar 0.3.0 → 0.6.0

package/README.md

@@ -27,6 +27,12 @@ An [Astro](https://astro.build) integration that adds a complete, interactive te
 - **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
+- **RSS Feed** — Auto-generated feed at `{basePath}/feed.xml` for subscribers
+- **Owner Attribution** — Assign teams or individuals to technologies
+- **External Links** — Link technologies to docs, repos, communities with typed icons
+- **Tags & Filtering** — Cross-cutting tags for discovery, filterable on the main radar page
+- **Related Technologies** — Manual and auto-suggested related technologies on detail pages
+- **Keyboard Navigation** — Arrow keys to cycle radar dots, focus indicators, screen reader friendly
 
 ---
 
@@ -109,6 +115,25 @@ Each technology file:
 title: Kubernetes
 ring: adopt
 moved: 0
+owner:
+  name: Platform Engineering
+  url: https://github.com/orgs/example/teams/platform
+tags:
+  - cloud-native
+  - containers
+related:
+  - cloud/helm
+  - cloud/argocd
+links:
+  - label: Documentation
+    url: https://kubernetes.io/docs/
+    type: docs
+  - label: GitHub
+    url: https://github.com/kubernetes/kubernetes
+    type: repo
+  - label: Kubernetes Slack
+    url: https://kubernetes.slack.com
+    type: community
 history:
   - date: "2025-03"
     ring: adopt
@@ -124,7 +149,36 @@ 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:
+#### `owner` (optional)
+
+Displays a team or person responsible for this technology on the detail page.
+
+| Field | Required | Description |
+| ----- | -------- | ----------- |
+| `name` | yes | Owner name (e.g. team, guild, or person) |
+| `url` | no | Link to an external resource (GitHub team, Slack channel, wiki page) |
+
+#### `links` (optional)
+
+External resource links displayed inline on the detail page. Links are automatically sorted by type in a consistent order: docs, repo, website, community.
+
+| Field | Required | Description |
+| ----- | -------- | ----------- |
+| `label` | yes | Display text for the link |
+| `url` | yes | Full URL |
+| `type` | no | Link type — determines the icon. One of `docs`, `repo`, `website`, `community`. Defaults to `website` |
+
+#### `tags` (optional)
+
+Free-text tags for cross-cutting concerns (e.g. `cloud-native`, `security`, `iac`). Tags appear as `#tag` pills on the detail page and enable tag-based filtering on the main radar page. Clicking a tag pill navigates to the radar filtered by that tag.
+
+#### `related` (optional)
+
+A list of technology slugs (matching entry IDs like `cloud/helm`) to display as related technologies on the detail page. In addition to these manual entries, the radar automatically suggests technologies that share 2 or more tags with the current entry.
+
+#### `history` (optional)
+
+When present, a timeline is rendered on the technology detail page showing how its ring classification changed over time.
 
 | Field | Required | Description |
 | ----- | -------- | ----------- |
@@ -152,13 +206,21 @@ techradar({
   // 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
-  editBaseUrl: "https://github.com/your-org/your-radar/edit/main/segments",
+  footer: "Built by the Platform Team", // Supports HTML
+  editing: {
+    enabled: true, // Show "Edit this page" links (default: true)
+    baseUrl: "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')
   },
+  search: {
+    enabled: true, // Show the search input in the navbar (default: true)
+    placeholder: "Search technologies...", // Placeholder text
+  },
+  feed: true, // Enable RSS feed at {basePath}/feed.xml (default: true)
   socialLinks: [
     {
       label: "GitHub",
@@ -185,11 +247,16 @@ socialLinks: [
 
 ### 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) |
+| 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) |
+| `owner` | `{ name, url? }` | Optional team/person responsible (see [owner](#owner-optional)) |
+| `links` | `Array<{ label, url, type? }>` | Optional external links (see [links](#links-optional)) |
+| `tags` | `string[]` | Optional free-text tags for filtering (see [tags](#tags-optional)) |
+| `related` | `string[]` | Optional technology slugs for related (see [related](#related-optional)) |
+| `history` | `Array<{ date, ring, description? }>` | Optional ring change timeline (see [history](#history-optional)) |
 
 ### Segment Frontmatter
 

package/config.ts

@@ -5,6 +5,30 @@ export interface SocialLink {
   icon?: string;
 }
 
+export interface EditConfig {
+  /** Show "Edit this page" links on technology pages. Default: true */
+  enabled?: boolean;
+  /** Base URL for edit links (e.g. "https://github.com/org/repo/edit/main/segments"). */
+  baseUrl?: string;
+}
+
+export interface ResolvedEdit {
+  enabled: boolean;
+  baseUrl?: string;
+}
+
+export interface SearchConfig {
+  /** Enable the search input in the navbar. Default: true */
+  enabled?: boolean;
+  /** Placeholder text for the search input. Default: 'Search technologies...' */
+  placeholder?: string;
+}
+
+export interface ResolvedSearch {
+  enabled: boolean;
+  placeholder: string;
+}
+
 export interface ColorModeConfig {
   /** Show the light/dark mode toggle in the header. Default: true */
   toggle?: boolean;
@@ -18,11 +42,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").
@@ -35,13 +62,10 @@ export interface TechRadarUserConfig {
   logo?: string;
 
   /** Footer text. Supports simple HTML. */
-  footerText?: string;
-
-  /** Show "Edit this page" links on technology pages. Default: true */
-  allowEditing?: boolean;
+  footer?: string;
 
-  /** Base URL for "Edit" links on technology pages (e.g. "https://github.com/org/repo/edit/main/segments"). */
-  editBaseUrl?: string;
+  /** Edit page configuration. */
+  editing?: EditConfig;
 
   /** Social links shown in the footer. */
   socialLinks?: SocialLink[];
@@ -51,19 +75,28 @@ export interface TechRadarUserConfig {
 
   /** Color mode configuration. */
   color?: ColorModeConfig;
+
+  /** Enable RSS feed at {basePath}/feed.xml. Default: true */
+  feed?: boolean;
+
+  /** Search configuration. */
+  search?: SearchConfig;
 }
 
 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;
-  footerText: string;
-  editBaseUrl?: string;
+  footer: string;
+  editing: ResolvedEdit;
   socialLinks: SocialLink[];
   theme: string;
   color: ResolvedColorMode;
+  feed: boolean;
+  search: ResolvedSearch;
 }
 
 /** Normalize a user-supplied path: ensure leading slash, strip trailing slash. Returns "" for root. */
@@ -76,20 +109,26 @@ 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 ?? '',
-    editBaseUrl:
-      (user.allowEditing ?? true) === false
-        ? undefined
-        : user.editBaseUrl,
+    footer: user.footer ?? '',
+    editing: {
+      enabled: user.editing?.enabled ?? true,
+      baseUrl: (user.editing?.enabled ?? true) ? user.editing?.baseUrl : undefined,
+    },
     socialLinks: user.socialLinks ?? [],
     theme: user.theme ?? 'default',
     color: {
       toggle: user.color?.toggle ?? true,
       mode: user.color?.mode ?? 'system',
     },
+    feed: user.feed ?? true,
+    search: {
+      enabled: user.search?.enabled ?? true,
+      placeholder: user.search?.placeholder ?? 'Search technologies...',
+    },
   };
 }

package/integration.ts

@@ -40,6 +40,12 @@ export function createIntegration(
             'src/pages/technology/[...slug].astro',
           ),
         });
+        if (config.feed) {
+          injectRoute({
+            pattern: `${bp}/feed.xml`,
+            entrypoint: path.join(PKG_DIR, 'src/pages/feed.xml.ts'),
+          });
+        }
         // Resolve theme CSS
         let themeCSS = '';
         const builtinPath = path.join(

package/package.json

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

package/schemas.ts

@@ -22,4 +22,21 @@ export const technologySchema = z.object({
       }),
     )
     .optional(),
+  owner: z
+    .object({
+      name: z.string(),
+      url: z.string().url().optional(),
+    })
+    .optional(),
+  links: z
+    .array(
+      z.object({
+        label: z.string(),
+        url: z.string().url(),
+        type: z.enum(['docs', 'repo', 'website', 'community']).default('website'),
+      }),
+    )
+    .optional(),
+  tags: z.array(z.string()).optional(),
+  related: z.array(z.string()).optional(),
 });

package/src/components/Radar.astro

@@ -9,6 +9,7 @@ interface Technology {
   segment: string;
   color: string;
   order: number;
+  tags: string[];
 }
 
 interface Segment {
@@ -172,6 +173,7 @@ const segmentLabels = segments.map((seg) => {
           data-title={dot.title}
           data-ring={dot.ring}
           data-segment={dot.segment}
+          data-tags={technologies.find((t) => t.slug === dot.slug)?.tags.join(',') ?? ''}
         />
         {dot.moved === 1 && (
           <polygon
@@ -197,26 +199,83 @@ const segmentLabels = segments.map((seg) => {
   const svg = document.querySelector('.radar-container svg');
   const tooltip = document.getElementById('radar-tooltip');
   if (svg && tooltip) {
+    const container = svg.closest('.radar-container') as HTMLElement;
+
+    function showTooltip(dot: SVGCircleElement) {
+      const title = dot.getAttribute('data-title') ?? '';
+      const ring = dot.getAttribute('data-ring') ?? '';
+      tooltip!.textContent = `${title} (${ring})`;
+      tooltip!.classList.remove('hidden');
+    }
+
+    function positionTooltipAtDot(dot: SVGCircleElement) {
+      const containerRect = container.getBoundingClientRect();
+      const dotRect = dot.getBoundingClientRect();
+      tooltip!.style.left = `${dotRect.left - containerRect.left + dotRect.width / 2 + 12}px`;
+      tooltip!.style.top = `${dotRect.top - containerRect.top - 10}px`;
+    }
+
+    function hideTooltip() {
+      tooltip!.classList.add('hidden');
+    }
+
+    // Collect all radar links for arrow key navigation
+    const allLinks = Array.from(svg.querySelectorAll<SVGAElement>('.radar-link'));
+
+    function getVisibleLinks(): SVGAElement[] {
+      return allLinks.filter((link) => link.style.opacity !== '0.1');
+    }
+
     svg.querySelectorAll('.radar-dot').forEach((dot) => {
-      dot.addEventListener('mouseenter', (e) => {
-        const target = e.target as SVGCircleElement;
-        const title = target.getAttribute('data-title') ?? '';
-        const ring = target.getAttribute('data-ring') ?? '';
-        tooltip.textContent = `${title} (${ring})`;
-        tooltip.classList.remove('hidden');
-      });
+      const link = dot.closest('.radar-link') as SVGAElement | null;
+
+      dot.addEventListener('mouseenter', () => showTooltip(dot as SVGCircleElement));
 
       dot.addEventListener('mousemove', (e) => {
-        const container = svg.closest('.radar-container') as HTMLElement;
         const rect = container.getBoundingClientRect();
         const me = e as MouseEvent;
-        tooltip.style.left = `${me.clientX - rect.left + 12}px`;
-        tooltip.style.top = `${me.clientY - rect.top - 10}px`;
+        tooltip!.style.left = `${me.clientX - rect.left + 12}px`;
+        tooltip!.style.top = `${me.clientY - rect.top - 10}px`;
       });
 
-      dot.addEventListener('mouseleave', () => {
-        tooltip.classList.add('hidden');
-      });
+      dot.addEventListener('mouseleave', hideTooltip);
+
+      // Show tooltip on keyboard focus
+      if (link) {
+        link.addEventListener('focus', () => {
+          showTooltip(dot as SVGCircleElement);
+          positionTooltipAtDot(dot as SVGCircleElement);
+        });
+        link.addEventListener('blur', hideTooltip);
+      }
+    });
+
+    // Arrow key navigation within the radar
+    svg.addEventListener('keydown', (e) => {
+      const ke = e as KeyboardEvent;
+      if (ke.key === 'Escape') {
+        (document.activeElement as HTMLElement)?.blur();
+        hideTooltip();
+        return;
+      }
+
+      if (ke.key !== 'ArrowLeft' && ke.key !== 'ArrowRight') return;
+
+      const visible = getVisibleLinks();
+      if (visible.length === 0) return;
+
+      const focused = document.activeElement?.closest('.radar-link') as SVGAElement | null;
+      const currentIndex = focused ? visible.indexOf(focused) : -1;
+
+      let nextIndex: number;
+      if (ke.key === 'ArrowRight') {
+        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % visible.length;
+      } else {
+        nextIndex = currentIndex < 0 ? visible.length - 1 : (currentIndex - 1 + visible.length) % visible.length;
+      }
+
+      ke.preventDefault();
+      visible[nextIndex].focus();
     });
   }
 </script>
@@ -250,14 +309,17 @@ const segmentLabels = segments.map((seg) => {
   .radar-link:active {
     color: inherit;
   }
-  .radar-link:focus,
-  .radar-link:focus-visible {
+  .radar-link:focus {
     outline: none;
   }
   .radar-link:hover .radar-dot,
   .radar-link:focus .radar-dot {
     r: 13;
   }
+  .radar-link:focus-visible .radar-dot {
+    r: 13;
+    filter: brightness(1.3) drop-shadow(0 0 10px rgba(205, 214, 244, 0.6));
+  }
 
   .radar-dot {
     cursor: pointer;

package/src/components/RadarLegend.astro

@@ -10,6 +10,7 @@ interface Technology {
   href: string;
   segment: string;
   color: string;
+  tags: string[];
 }
 
 interface Segment {
@@ -45,6 +46,7 @@ const { technologies, segments } = Astro.props;
                   class="legend-row"
                   data-segment={tech.segment}
                   data-ring={tech.ring}
+                  data-tags={tech.tags.join(',')}
                 >
                   <span class="legend-indicator"><MovedIndicator moved={tech.moved} /></span>
                   <span class="legend-title">{tech.title}</span>
@@ -97,10 +99,18 @@ const { technologies, segments } = Astro.props;
     transition: background-color 0.15s, color 0.15s, opacity 0.3s ease;
   }
 
-  .legend-row:hover {
+  .legend-row:hover,
+  .legend-row:focus-visible {
     background-color: var(--radar-hover-bg);
     color: var(--radar-text);
   }
+  .legend-row:focus-visible {
+    outline: 2px solid var(--radar-link);
+    outline-offset: -2px;
+  }
+  .legend-row:focus:not(:focus-visible) {
+    outline: none;
+  }
 
   .legend-indicator {
     display: flex;

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);
@@ -34,6 +34,14 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
+    {config.feed && (
+      <link
+        rel="alternate"
+        type="application/rss+xml"
+        title={config.title}
+        href={`${base}feed.xml`}
+      />
+    )}
     <title>{title}</title>
     <style set:html={themeCSS}></style>
     <script is:inline define:vars={{ toggle: config.color.toggle, colorMode: config.color.mode }}>
@@ -61,13 +69,16 @@ 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 />}
+        <div class="flex items-center gap-3">
+          <slot name="nav-end" />
+          {config.color.toggle && <ThemeToggle />}
+        </div>
       </nav>
     </header>
 
@@ -82,7 +93,7 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
             &copy; <a href="https://github.com/dirsigler/techradar" target="_blank" rel="noopener noreferrer" class="footer-link">Dennis Irsigler</a>
             &nbsp;&middot;&nbsp;
             <a href="https://github.com/dirsigler/techradar/blob/main/LICENSE" target="_blank" rel="noopener noreferrer" class="footer-link">MIT License</a>
-            {config.footerText && <Fragment>&nbsp;&middot;&nbsp;<span set:html={config.footerText} /></Fragment>}
+            {config.footer && <Fragment>&nbsp;&middot;&nbsp;<span set:html={config.footer} /></Fragment>}
           </span>
 
           {config.socialLinks && config.socialLinks.length > 0 && (
@@ -146,4 +157,23 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
   .social-link:hover {
     color: var(--radar-text);
   }
+
+  :global(.search-input) {
+    width: 12rem;
+    height: calc(1.25rem + 1rem + 2px); /* match toggle: icon 1.25rem + padding 0.5rem*2 + border 1px*2 */
+    padding: 0 0.625rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--radar-border);
+    background-color: transparent;
+    color: var(--radar-text);
+    font-size: 0.8125rem;
+    outline: none;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  :global(.search-input)::placeholder {
+    color: var(--radar-text-faint);
+  }
+  :global(.search-input):focus {
+    border-color: var(--radar-active-bg);
+  }
 </style>

package/src/pages/feed.xml.ts

@@ -0,0 +1,64 @@
+import type { APIContext } from 'astro';
+import { getCollection } from 'astro:content';
+import config from 'virtual:techradar/config';
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+export async function GET(context: APIContext) {
+  const site = context.site?.toString().replace(/\/+$/, '') ?? 'https://example.com';
+  const technologies = await getCollection('technologies');
+
+  const items = technologies.map((entry) => {
+    const ring = entry.data.ring.charAt(0).toUpperCase() + entry.data.ring.slice(1);
+
+    let pubDate = '';
+    if (entry.data.history && entry.data.history.length > 0) {
+      const sorted = [...entry.data.history].sort((a, b) =>
+        b.date.localeCompare(a.date),
+      );
+      const parsed = new Date(sorted[0].date);
+      if (!isNaN(parsed.getTime())) {
+        pubDate = `<pubDate>${parsed.toUTCString()}</pubDate>`;
+      }
+    }
+
+    const link = `${site}${config.basePath}/technology/${entry.id}/`;
+
+    return `    <item>
+      <title>${escapeXml(`${entry.data.title} — ${ring}`)}</title>
+      <link>${escapeXml(link)}</link>
+      <guid>${escapeXml(link)}</guid>
+      <description>${escapeXml(`${entry.data.title} is in the ${ring} ring of the technology radar.`)}</description>
+      ${pubDate}
+    </item>`;
+  });
+
+  const channelTitle = escapeXml(config.title);
+  const channelDescription = escapeXml(
+    config.subtitle ?? `${config.name} — tracking technology adoption`,
+  );
+  const channelLink = `${site}${config.basePath}/`;
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>${channelTitle}</title>
+    <description>${channelDescription}</description>
+    <link>${escapeXml(channelLink)}</link>
+    <atom:link href="${escapeXml(`${channelLink}feed.xml`)}" rel="self" type="application/rss+xml" />
+    <lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
+${items.join('\n')}
+  </channel>
+</rss>`;
+
+  return new Response(xml, {
+    headers: { 'Content-Type': 'application/rss+xml; charset=utf-8' },
+  });
+}

package/src/pages/index.astro

@@ -40,6 +40,7 @@ const technologies = technologyEntries
       color: seg?.color ?? '#6b7280',
       order: seg?.order ?? 1,
       href: `${base}technology/${entry.id}/`,
+      tags: (entry.data.tags ?? []) as string[],
     };
   })
   .sort((a, b) => a.title.localeCompare(b.title));
@@ -51,16 +52,30 @@ 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>
 
+  {config.search.enabled && (
+    <input
+      type="search"
+      id="radar-search"
+      placeholder={config.search.placeholder}
+      autocomplete="off"
+      class="search-input"
+      slot="nav-end"
+    />
+  )}
+
   <!-- Filter bar -->
   <div id="filter-bar" class="mb-8 flex flex-col items-center gap-3">
     <div class="flex flex-wrap items-center justify-center gap-2">
@@ -114,7 +129,7 @@ const ringEntries = Object.entries(RING_LABELS) as [string, string][];
     border-color: var(--radar-border-subtle);
     color: var(--radar-text);
   }
-  .filter-btn.active {
+.filter-btn.active {
     background-color: var(--radar-active-bg);
     border-color: var(--radar-active-bg);
     color: var(--radar-active-text);
@@ -162,44 +177,111 @@ const ringEntries = Object.entries(RING_LABELS) as [string, string][];
   const dots = document.querySelectorAll<SVGCircleElement>('.radar-dot');
   const legendRows = document.querySelectorAll<HTMLElement>('.legend-row');
 
+  const searchInput = document.getElementById('radar-search') as HTMLInputElement | null;
+
+  function filterDot(dot: SVGCircleElement, visible: boolean) {
+    const link = dot.closest('a') as SVGAElement | null;
+    if (!link) return;
+    link.style.opacity = visible ? '1' : '0.1';
+    link.style.pointerEvents = visible ? 'auto' : 'none';
+    link.setAttribute('tabindex', visible ? '0' : '-1');
+  }
+
+  function filterRow(row: HTMLElement, visible: boolean) {
+    row.style.opacity = visible ? '1' : '0.15';
+    row.style.pointerEvents = visible ? 'auto' : 'none';
+    row.setAttribute('tabindex', visible ? '0' : '-1');
+  }
+
+  function applySearch(query: string) {
+    const q = query.toLowerCase().trim();
+
+    buttons.forEach((b) => b.classList.remove('active'));
+    document.querySelector('[data-filter="all"]')?.classList.add('active');
+
+    dots.forEach((dot) => {
+      const title = (dot.getAttribute('data-title') ?? '').toLowerCase();
+      const segment = (dot.getAttribute('data-segment') ?? '').toLowerCase();
+      const ring = (dot.getAttribute('data-ring') ?? '').toLowerCase();
+      const tags = (dot.getAttribute('data-tags') ?? '').toLowerCase();
+      filterDot(dot, !q || title.includes(q) || segment.includes(q) || ring.includes(q) || tags.includes(q));
+    });
+
+    legendRows.forEach((row) => {
+      const title = (row.querySelector('.legend-title')?.textContent ?? '').toLowerCase();
+      const segment = (row.dataset.segment ?? '').toLowerCase();
+      const ring = (row.dataset.ring ?? '').toLowerCase();
+      const tags = (row.dataset.tags ?? '').toLowerCase();
+      filterRow(row, !q || title.includes(q) || segment.includes(q) || ring.includes(q) || tags.includes(q));
+    });
+  }
+
+  searchInput?.addEventListener('input', () => applySearch(searchInput!.value));
+
+  const allBtn = document.querySelector<HTMLButtonElement>('[data-filter="all"]')!;
+
+  function resetAll() {
+    buttons.forEach((b) => b.classList.remove('active'));
+    allBtn.classList.add('active');
+    dots.forEach((dot) => filterDot(dot, true));
+    legendRows.forEach((row) => filterRow(row, true));
+  }
+
   buttons.forEach((btn) => {
     btn.addEventListener('click', () => {
-      // Update active state
+      if (searchInput) searchInput.value = '';
+
+      // Toggle off if already active (unless it's the "All" button)
+      if (btn.classList.contains('active') && btn.dataset.filter !== 'all') {
+        resetAll();
+        return;
+      }
+
       buttons.forEach((b) => b.classList.remove('active'));
       btn.classList.add('active');
 
       const filter = btn.dataset.filter!;
       const type = btn.dataset.type!;
 
-      // Filter radar dots
       dots.forEach((dot) => {
-        const link = dot.closest('a') as SVGAElement | null;
-        if (!link) return;
-
         const segment = dot.getAttribute('data-segment') ?? '';
         const ring = dot.getAttribute('data-ring') ?? '';
+        const tags = (dot.getAttribute('data-tags') ?? '').split(',').filter(Boolean);
 
         let visible = true;
         if (type === 'segment') visible = segment === filter;
         else if (type === 'ring') visible = ring === filter;
+        else if (type === 'tag') visible = tags.includes(filter);
 
-        // Fade non-matching dots instead of hiding
-        link.style.opacity = visible ? '1' : '0.1';
-        link.style.pointerEvents = visible ? 'auto' : 'none';
+        filterDot(dot, visible);
       });
 
-      // Filter legend rows
       legendRows.forEach((row) => {
         const segment = row.dataset.segment ?? '';
         const ring = row.dataset.ring ?? '';
+        const tags = (row.dataset.tags ?? '').split(',').filter(Boolean);
 
         let visible = true;
         if (type === 'segment') visible = segment === filter;
         else if (type === 'ring') visible = ring === filter;
+        else if (type === 'tag') visible = tags.includes(filter);
 
-        row.style.opacity = visible ? '1' : '0.15';
-        row.style.pointerEvents = visible ? 'auto' : 'none';
+        filterRow(row, visible);
       });
     });
   });
+
+  // Activate filter from URL query parameters
+  const params = new URLSearchParams(window.location.search);
+  const urlQuery = params.get('q');
+  const urlTag = params.get('tag');
+  if (urlQuery && searchInput) {
+    searchInput.value = urlQuery;
+    applySearch(urlQuery);
+  } else if (urlTag) {
+    const tagBtn = Array.from(buttons).find(
+      (b) => b.dataset.type === 'tag' && b.dataset.filter === urlTag,
+    );
+    if (tagBtn) tagBtn.click();
+  }
 </script>

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

@@ -3,6 +3,7 @@ import { getCollection, render, type CollectionEntry } from 'astro:content';
 import Base from '../../layouts/Base.astro';
 import RingBadge from '../../components/RingBadge.astro';
 import MovedIndicator from '../../components/MovedIndicator.astro';
+import { Icon } from 'astro-icon/components';
 import config from 'virtual:techradar/config';
 import type { GetStaticPaths } from 'astro';
 
@@ -35,9 +36,48 @@ const segmentColor = segmentEntry?.data.color ?? '#6c7086';
 
 // Build "Edit on GitHub" URL from the entry's file path
 const techFileName = entry.id.split('/').pop();
-const editUrl = config.editBaseUrl
-  ? `${config.editBaseUrl}/${segmentSlug}/${techFileName}.md`
+const editUrl = config.editing.enabled && config.editing.baseUrl
+  ? `${config.editing.baseUrl}/${segmentSlug}/${techFileName}.md`
   : null;
+
+const linkIconMap: Record<string, string> = {
+  docs: 'lucide:book-open',
+  repo: 'lucide:git-fork',
+  website: 'lucide:globe',
+  community: 'lucide:messages-square',
+};
+const linkOrder: Record<string, number> = { docs: 0, repo: 1, website: 2, community: 3 };
+const links = (entry.data.links ?? [])
+  .map((link: { label: string; url: string; type: string }) => ({
+    ...link,
+    icon: linkIconMap[link.type] ?? 'lucide:globe',
+    order: linkOrder[link.type] ?? 99,
+  }))
+  .sort((a, b) => a.order - b.order);
+
+const tags = (entry.data.tags ?? []) as string[];
+const manualRelatedSlugs = (entry.data.related ?? []) as string[];
+
+// Build related technologies: manual + auto (2+ shared tags)
+const allTechnologies = await getCollection('technologies');
+const manualRelated = manualRelatedSlugs
+  .map((slug) => allTechnologies.find((t) => t.id === slug))
+  .filter(Boolean);
+
+const manualIds = new Set(manualRelatedSlugs);
+manualIds.add(entry.id); // exclude self
+
+let autoRelated: typeof manualRelated = [];
+if (tags.length > 0) {
+  autoRelated = allTechnologies.filter((t) => {
+    if (manualIds.has(t.id)) return false;
+    const otherTags = (t.data.tags ?? []) as string[];
+    const shared = tags.filter((tag) => otherTags.includes(tag));
+    return shared.length >= 2;
+  });
+}
+
+const relatedTechnologies = [...manualRelated, ...autoRelated];
 ---
 
 <Base title={`${entry.data.title} — Tech Radar`}>
@@ -57,13 +97,50 @@ const editUrl = config.editBaseUrl
         {entry.data.title}
         <MovedIndicator moved={entry.data.moved} />
       </h1>
-      <div class="mt-3 flex items-center gap-3">
+      <div class="mt-3 flex items-center gap-3 flex-wrap">
         <RingBadge ring={entry.data.ring} />
         <span class="flex items-center gap-1.5 text-sm" style="color: var(--radar-text-muted);">
           <span class="inline-block h-2.5 w-2.5 rounded-full" style={`background-color: ${segmentColor}`}></span>
           {segmentTitle}
         </span>
+        {entry.data.owner && (
+          <span class="flex items-center gap-1.5 text-sm" style="color: var(--radar-text-muted);">
+            <Icon name="lucide:users-round" class="h-3.5 w-3.5" />
+            {entry.data.owner.url ? (
+              <a href={entry.data.owner.url} target="_blank" rel="noopener noreferrer" class="owner-link">
+                {entry.data.owner.name}
+              </a>
+            ) : (
+              entry.data.owner.name
+            )}
+          </span>
+        )}
+        {links.length > 0 && (
+          <>
+            <span class="meta-divider" />
+            {links.map((link) => (
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="tech-link"
+              >
+                <Icon name={link.icon} class="h-3.5 w-3.5" />
+                {link.label}
+              </a>
+            ))}
+          </>
+        )}
       </div>
+      {tags.length > 0 && (
+        <div class="mt-3 flex items-center gap-2 flex-wrap">
+          {tags.map((tag) => (
+            <a href={`${base}?tag=${encodeURIComponent(tag)}`} class="tag-pill">
+              #{tag}
+            </a>
+          ))}
+        </div>
+      )}
     </header>
 
     <div class="prose max-w-none">
@@ -95,6 +172,18 @@ const editUrl = config.editBaseUrl
       </section>
     )}
 
+    {relatedTechnologies.length > 0 && (
+      <div class="mt-8 text-sm" style="color: var(--radar-text-muted);">
+        <span class="font-medium" style="color: var(--radar-text-secondary);">Related</span>
+        {relatedTechnologies.map((tech, i) => (
+          <>
+            <span class="mx-1.5">{i > 0 ? '·' : ''}</span>
+            <a href={`${base}technology/${tech.id}/`} class="related-link">{tech.data.title}</a>
+          </>
+        ))}
+      </div>
+    )}
+
     {editUrl && (
       <div class="mt-8 pt-6" style="border-top: 1px solid var(--radar-border);">
         <a
@@ -136,6 +225,58 @@ const editUrl = config.editBaseUrl
     color: var(--radar-link);
   }
 
+  .owner-link {
+    color: var(--radar-text-muted);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .owner-link:hover {
+    color: var(--radar-link);
+  }
+
+  .meta-divider {
+    width: 1px;
+    height: 1rem;
+    background-color: var(--radar-border);
+  }
+
+  .tech-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--radar-text-muted);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .tech-link:hover {
+    color: var(--radar-link);
+  }
+
+  .tag-pill {
+    display: inline-block;
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--radar-border-subtle);
+    font-size: 0.75rem;
+    color: var(--radar-text-muted);
+    text-decoration: none;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .tag-pill:hover {
+    color: var(--radar-link);
+    border-color: var(--radar-link);
+  }
+
+  .related-link {
+    color: var(--radar-text-muted);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .related-link:hover {
+    color: var(--radar-link);
+  }
+
   .history-timeline {
     list-style: none;
     padding: 0;

package/src/themes/default.css

@@ -7,8 +7,8 @@
   --radar-bg-secondary: #f8fafc;
   --radar-text: #0f172a;
   --radar-text-secondary: #334155;
-  --radar-text-muted: #64748b;
-  --radar-text-faint: #94a3b8;
+  --radar-text-muted: #475569;     /* slate-600, ~7.4:1 on white */
+  --radar-text-faint: #64748b;     /* slate-500, ~4.8:1 on white */
   --radar-border: #e2e8f0;
   --radar-border-subtle: #cbd5e1;
 
@@ -24,7 +24,7 @@
   --radar-chart-edge: #f8fafc;
   --radar-chart-ring: #cbd5e1;
   --radar-chart-divider: #cbd5e1;
-  --radar-chart-label: #64748b;
+  --radar-chart-label: #475569;
   --radar-chart-band: 15, 23, 42;
   --radar-dot-stroke: #ffffff;
 
@@ -64,16 +64,16 @@
     --radar-bg-secondary: #1e293b;
     --radar-text: #e2e8f0;
     --radar-text-secondary: #cbd5e1;
-    --radar-text-muted: #94a3b8;
-    --radar-text-faint: #94a3b8;
+    --radar-text-muted: #a3b1c1;   /* ~8.3:1 on #0f172a */
+    --radar-text-faint: #94a3b8;   /* ~5.6:1 on #0f172a */
     --radar-border: #334155;
-    --radar-border-subtle: #475569;
+    --radar-border-subtle: #566375; /* brighter for visibility, ~3.5:1 */
 
     /* Interactive */
     --radar-hover-bg: #334155;
     --radar-link: #60a5fa;
-    --radar-active-bg: #3b82f6;
-    --radar-active-text: #0f172a;
+    --radar-active-bg: #2563eb;     /* deeper blue, 5.6:1 with white text */
+    --radar-active-text: #ffffff;
 
     /* Radar SVG */
     --radar-chart-center: #334155;
@@ -81,7 +81,7 @@
     --radar-chart-edge: #0f172a;
     --radar-chart-ring: #475569;
     --radar-chart-divider: #475569;
-    --radar-chart-label: #94a3b8;
+    --radar-chart-label: #a3b1c1;
     --radar-chart-band: 226, 232, 240;
     --radar-dot-stroke: #0f172a;
 
@@ -109,7 +109,7 @@
     --radar-prose-links: #60a5fa;
     --radar-prose-bold: #e2e8f0;
     --radar-prose-code: #a78bfa;
-    --radar-prose-quotes: #94a3b8;
+    --radar-prose-quotes: #a3b1c1;
     --radar-prose-hr: #475569;
   }
 }
@@ -121,16 +121,16 @@
   --radar-bg-secondary: #1e293b;
   --radar-text: #e2e8f0;
   --radar-text-secondary: #cbd5e1;
-  --radar-text-muted: #94a3b8;
+  --radar-text-muted: #a3b1c1;
   --radar-text-faint: #94a3b8;
   --radar-border: #334155;
-  --radar-border-subtle: #475569;
+  --radar-border-subtle: #566375;
 
   /* Interactive */
   --radar-hover-bg: #334155;
   --radar-link: #60a5fa;
-  --radar-active-bg: #3b82f6;
-  --radar-active-text: #0f172a;
+  --radar-active-bg: #2563eb;
+  --radar-active-text: #ffffff;
 
   /* Radar SVG */
   --radar-chart-center: #334155;
@@ -138,7 +138,7 @@
   --radar-chart-edge: #0f172a;
   --radar-chart-ring: #475569;
   --radar-chart-divider: #475569;
-  --radar-chart-label: #94a3b8;
+  --radar-chart-label: #a3b1c1;
   --radar-chart-band: 226, 232, 240;
   --radar-dot-stroke: #0f172a;
 
@@ -166,6 +166,6 @@
   --radar-prose-links: #60a5fa;
   --radar-prose-bold: #e2e8f0;
   --radar-prose-code: #a78bfa;
-  --radar-prose-quotes: #94a3b8;
+  --radar-prose-quotes: #a3b1c1;
   --radar-prose-hr: #475569;
 }