@dirsigler/techradar 1.0.4

package/src/components/Radar.astro

@@ -0,0 +1,266 @@
+---
+import { RING_RADII, RING_LABELS, RINGS, quadrantAngles, positionDots } from '../lib/radar';
+
+interface Technology {
+  title: string;
+  ring: 'adopt' | 'trial' | 'assess' | 'hold';
+  moved: number;
+  slug: string;
+  segment: string;
+  color: string;
+  order: number;
+}
+
+interface Segment {
+  title: string;
+  slug: string;
+  color: string;
+  order: number;
+}
+
+interface Props {
+  technologies: Technology[];
+  segments: Segment[];
+}
+
+const { technologies, segments } = Astro.props;
+const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+
+const dots = positionDots(technologies);
+
+const CENTER = 400;
+const OUTER_RADIUS = 400;
+
+const ringRadii = [100, 200, 300, 400];
+
+const quadrantLines = [
+  { x1: CENTER, y1: 0, x2: CENTER, y2: CENTER * 2 },
+  { x1: 0, y1: CENTER, x2: CENTER * 2, y2: CENTER },
+];
+
+const segmentLabels = segments.map((seg) => {
+  const angles = quadrantAngles(seg.order);
+  const midAngle = (angles.start + angles.end) / 2;
+  const labelR = OUTER_RADIUS - 30;
+  return {
+    x: CENTER + labelR * Math.cos(midAngle),
+    y: CENTER + labelR * Math.sin(midAngle),
+    title: seg.title,
+    color: seg.color,
+  };
+});
+---
+
+<div class="radar-container relative mx-auto w-full max-w-4xl">
+  <svg
+    viewBox="0 0 800 800"
+    class="w-full"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <radialGradient id="radar-bg" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" style="stop-color: var(--radar-chart-center)" />
+        <stop offset="50%" style="stop-color: var(--radar-chart-mid)" />
+        <stop offset="100%" style="stop-color: var(--radar-chart-edge)" />
+      </radialGradient>
+    </defs>
+
+    <!-- Background with radial gradient -->
+    <circle cx={CENTER} cy={CENTER} r={OUTER_RADIUS} fill="url(#radar-bg)" />
+
+    <!-- Ring fill bands -->
+    {RINGS.map((_ring, i) => {
+      const { outer } = RING_RADII[_ring];
+      const opacities = [0.06, 0.04, 0.03, 0.02];
+      return (
+        <circle
+          cx={CENTER}
+          cy={CENTER}
+          r={outer}
+          style={`fill: rgba(var(--radar-chart-band), ${opacities[i]})`}
+          stroke="none"
+        />
+      );
+    }).reverse()}
+
+    <!-- Ring circles -->
+    {ringRadii.map((r) => (
+      <circle
+        cx={CENTER}
+        cy={CENTER}
+        r={r}
+        fill="none"
+        style="stroke: var(--radar-chart-ring)"
+        stroke-width="1"
+      />
+    ))}
+
+    <!-- Quadrant divider lines -->
+    {quadrantLines.map((line) => (
+      <line
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        style="stroke: var(--radar-chart-divider)"
+        stroke-width="1"
+        opacity="0.6"
+      />
+    ))}
+
+    <!-- Ring labels -->
+    {RINGS.map((ring) => {
+      const { inner, outer } = RING_RADII[ring];
+      const midR = (inner + outer) / 2;
+      return (
+        <text
+          x={CENTER + midR}
+          y={CENTER - 6}
+          style="fill: var(--radar-chart-label)"
+          font-size="14"
+          text-anchor="middle"
+          font-family="system-ui, sans-serif"
+        >
+          {RING_LABELS[ring]}
+        </text>
+      );
+    })}
+
+    <!-- Segment labels (multiline for long names) -->
+    {segmentLabels.map((label) => {
+      const words = label.title.split(' ');
+      const mid = Math.ceil(words.length / 2);
+      const lines = words.length > 1
+        ? [words.slice(0, mid).join(' '), words.slice(mid).join(' ')]
+        : [label.title];
+      const lineHeight = 20;
+      const startY = label.y - ((lines.length - 1) * lineHeight) / 2;
+      return (
+        <text
+          x={label.x}
+          y={startY}
+          fill={label.color}
+          font-size="15"
+          font-weight="700"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          font-family="system-ui, sans-serif"
+        >
+          {lines.map((line, i) => (
+            <tspan x={label.x} dy={i === 0 ? 0 : lineHeight}>
+              {line}
+            </tspan>
+          ))}
+        </text>
+      );
+    })}
+
+    <!-- Technology dots -->
+    {dots.map((dot) => (
+      <a href={`${base}technology/${dot.slug}/`} class="radar-link">
+        <circle
+          cx={dot.x}
+          cy={dot.y}
+          r="9"
+          fill={dot.color}
+          style="stroke: var(--radar-dot-stroke)"
+          stroke-width="2"
+          class="radar-dot"
+          data-title={dot.title}
+          data-ring={dot.ring}
+          data-segment={dot.segment}
+        />
+        {dot.moved === 1 && (
+          <polygon
+            points={`${dot.x},${dot.y - 16} ${dot.x - 5},${dot.y - 11} ${dot.x + 5},${dot.y - 11}`}
+            style="fill: var(--radar-moved-in)"
+          />
+        )}
+        {dot.moved === -1 && (
+          <polygon
+            points={`${dot.x},${dot.y + 16} ${dot.x - 5},${dot.y + 11} ${dot.x + 5},${dot.y + 11}`}
+            style="fill: var(--radar-moved-out)"
+          />
+        )}
+      </a>
+    ))}
+  </svg>
+
+  <!-- Tooltip -->
+  <div id="radar-tooltip" class="radar-tooltip hidden"></div>
+</div>
+
+<script>
+  const svg = document.querySelector('.radar-container svg');
+  const tooltip = document.getElementById('radar-tooltip');
+  if (svg && tooltip) {
+    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');
+      });
+
+      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`;
+      });
+
+      dot.addEventListener('mouseleave', () => {
+        tooltip.classList.add('hidden');
+      });
+    });
+  }
+</script>
+
+<style>
+  .radar-tooltip {
+    position: absolute;
+    display: none;
+    pointer-events: none;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    background-color: var(--radar-hover-bg);
+    color: var(--radar-text);
+    border: 1px solid var(--radar-border-subtle);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+  .radar-tooltip:not(.hidden) {
+    display: block;
+  }
+
+  .radar-link {
+    outline: none;
+    color: inherit;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .radar-link:visited,
+  .radar-link:link,
+  .radar-link:active {
+    color: inherit;
+  }
+  .radar-link:focus,
+  .radar-link:focus-visible {
+    outline: none;
+  }
+  .radar-link:hover .radar-dot,
+  .radar-link:focus .radar-dot {
+    r: 13;
+  }
+
+  .radar-dot {
+    cursor: pointer;
+    transition: r 0.15s ease, filter 0.15s ease;
+  }
+  .radar-dot:hover {
+    filter: brightness(1.3) drop-shadow(0 0 8px rgba(205, 214, 244, 0.4));
+  }
+</style>

package/src/components/RadarLegend.astro

@@ -0,0 +1,120 @@
+---
+import RingBadge from './RingBadge.astro';
+import MovedIndicator from './MovedIndicator.astro';
+import { RINGS } from '../lib/radar';
+
+interface Technology {
+  title: string;
+  ring: 'adopt' | 'trial' | 'assess' | 'hold';
+  moved: number;
+  href: string;
+  segment: string;
+  color: string;
+}
+
+interface Segment {
+  title: string;
+  slug: string;
+  color: string;
+}
+
+interface Props {
+  technologies: Technology[];
+  segments: Segment[];
+}
+
+const { technologies, segments } = Astro.props;
+---
+
+<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+  {segments.map((segment) => {
+    const segTechs = technologies.filter((t) => t.segment === segment.slug);
+    return (
+      <div>
+        <h3 class="legend-heading">
+          <span class="inline-block h-3.5 w-3.5 rounded-full" style={`background-color: ${segment.color}`} />
+          {segment.title}
+        </h3>
+        <ul class="legend-grid">
+          {RINGS.map((ring) => {
+            const ringTechs = segTechs.filter((t) => t.ring === ring);
+            return ringTechs.map((tech) => (
+              <li class="contents">
+                <a
+                  href={tech.href}
+                  class="legend-row"
+                  data-segment={tech.segment}
+                  data-ring={tech.ring}
+                >
+                  <span class="legend-indicator"><MovedIndicator moved={tech.moved} /></span>
+                  <span class="legend-title">{tech.title}</span>
+                  <span class="legend-badge"><RingBadge ring={tech.ring} /></span>
+                </a>
+              </li>
+            ));
+          })}
+        </ul>
+      </div>
+    );
+  })}
+</div>
+
+<style>
+  .legend-heading {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--radar-border);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--radar-text-secondary);
+    white-space: nowrap;
+  }
+
+  .legend-grid {
+    display: grid;
+    grid-template-columns: 1.25rem 1fr auto;
+    column-gap: 0.75rem;
+    row-gap: 0.375rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .legend-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+    column-gap: 0.75rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    color: var(--radar-text-muted);
+    text-decoration: none;
+    transition: background-color 0.15s, color 0.15s, opacity 0.3s ease;
+  }
+
+  .legend-row:hover {
+    background-color: var(--radar-hover-bg);
+    color: var(--radar-text);
+  }
+
+  .legend-indicator {
+    display: flex;
+    justify-content: center;
+    width: 1.25rem;
+  }
+
+  .legend-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .legend-badge {
+    justify-self: end;
+  }
+</style>

package/src/components/RingBadge.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  ring: 'adopt' | 'trial' | 'assess' | 'hold';
+}
+
+const { ring } = Astro.props;
+
+const labels: Record<string, string> = {
+  adopt: 'Adopt',
+  trial: 'Trial',
+  assess: 'Assess',
+  hold: 'Hold',
+};
+---
+
+<span class={`ring-badge ring-${ring}`}>
+  {labels[ring]}
+</span>
+
+<style>
+  .ring-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    border: 1px solid;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  .ring-adopt {
+    background-color: var(--radar-ring-adopt-bg);
+    color: var(--radar-ring-adopt);
+    border-color: var(--radar-ring-adopt-border);
+  }
+  .ring-trial {
+    background-color: var(--radar-ring-trial-bg);
+    color: var(--radar-ring-trial);
+    border-color: var(--radar-ring-trial-border);
+  }
+  .ring-assess {
+    background-color: var(--radar-ring-assess-bg);
+    color: var(--radar-ring-assess);
+    border-color: var(--radar-ring-assess-border);
+  }
+  .ring-hold {
+    background-color: var(--radar-ring-hold-bg);
+    color: var(--radar-ring-hold);
+    border-color: var(--radar-ring-hold-border);
+  }
+</style>

package/src/components/TechnologyCard.astro

@@ -0,0 +1,46 @@
+---
+import RingBadge from './RingBadge.astro';
+import MovedIndicator from './MovedIndicator.astro';
+
+interface Props {
+  title: string;
+  ring: 'adopt' | 'trial' | 'assess' | 'hold';
+  moved: number;
+  href: string;
+}
+
+const { title, ring, moved, href } = Astro.props;
+---
+
+<a href={href} class="tech-card">
+  <span class="tech-card-title">
+    <span>{title}</span>
+    <MovedIndicator moved={moved} />
+  </span>
+  <RingBadge ring={ring} />
+</a>
+
+<style>
+  .tech-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--radar-border);
+    background-color: var(--radar-bg-secondary);
+    text-decoration: none;
+    transition: border-color 0.15s, background-color 0.15s;
+  }
+  .tech-card:hover {
+    border-color: var(--radar-border-subtle);
+    background-color: var(--radar-hover-bg);
+  }
+  .tech-card-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    color: var(--radar-text);
+  }
+</style>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,115 @@
+---
+// Theme toggle — sun/moon button that cycles: system → light → dark → system
+---
+
+<button
+  id="theme-toggle"
+  type="button"
+  class="theme-toggle"
+  title="Toggle theme"
+  aria-label="Toggle theme"
+>
+  <!-- Sun icon (shown in dark mode) -->
+  <svg class="theme-icon sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+  <!-- Moon icon (shown in light mode) -->
+  <svg class="theme-icon moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+</button>
+
+<script>
+  const toggle = document.getElementById('theme-toggle');
+
+  function getEffectiveTheme(): 'light' | 'dark' {
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark') return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function applyTheme() {
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark') {
+      document.documentElement.setAttribute('data-theme', stored);
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+    updateIcon();
+  }
+
+  function updateIcon() {
+    const effective = getEffectiveTheme();
+    document.documentElement.classList.toggle('is-dark', effective === 'dark');
+  }
+
+  toggle?.addEventListener('click', () => {
+    const current = localStorage.getItem('theme');
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    let next: string | null;
+    if (!current) {
+      // system → explicit opposite
+      next = systemDark ? 'light' : 'dark';
+    } else {
+      // explicit → back to system
+      next = null;
+    }
+
+    if (next) {
+      localStorage.setItem('theme', next);
+    } else {
+      localStorage.removeItem('theme');
+    }
+    applyTheme();
+  });
+
+  // Listen for system preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (!localStorage.getItem('theme')) {
+      updateIcon();
+    }
+  });
+
+  // Initial apply
+  applyTheme();
+</script>
+
+<style>
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--radar-border);
+    background: transparent;
+    color: var(--radar-text-muted);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .theme-toggle:hover {
+    color: var(--radar-text);
+    border-color: var(--radar-border-subtle);
+  }
+
+  .theme-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* Show moon by default (light mode), sun when dark */
+  .sun { display: none; }
+  .moon { display: block; }
+
+  :global(.is-dark) .sun { display: block; }
+  :global(.is-dark) .moon { display: none; }
+</style>