npm - @dirsigler/techradar - Versions diffs - 1.0.4 - Mend

@dirsigler/techradar 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/LICENSE +21 -0
package/README.md +277 -0
package/config.ts +54 -0
package/index.ts +11 -0
package/integration.ts +85 -0
package/package.json +43 -0
package/schemas.ts +13 -0
package/src/components/MovedIndicator.astro +10 -0
package/src/components/Radar.astro +266 -0
package/src/components/RadarLegend.astro +120 -0
package/src/components/RingBadge.astro +49 -0
package/src/components/TechnologyCard.astro +46 -0
package/src/components/ThemeToggle.astro +115 -0
package/src/layouts/Base.astro +149 -0
package/src/lib/radar.ts +124 -0
package/src/pages/404.astro +34 -0
package/src/pages/index.astro +206 -0
package/src/pages/segments/[segment].astro +83 -0
package/src/pages/technology/[...slug].astro +112 -0
package/src/styles/global.css +37 -0
package/src/themes/catppuccin-mocha.css +55 -0
package/src/themes/default.css +171 -0
package/virtual.d.ts +9 -0

package/src/layouts/Base.astro ADDED Viewed

@@ -0,0 +1,149 @@
+---
+import config from 'virtual:techradar/config';
+import themeCSS from 'virtual:techradar/theme';
+import ThemeToggle from '../components/ThemeToggle.astro';
+import '../styles/global.css';
+interface Props {
+  title?: string;
+  description?: string;
+}
+const { title = config.title, description = 'Technology Radar — tracking technology adoption across our organization' } = Astro.props;
+const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonicalUrl} />
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:image" content={new URL(`${base}og-image.png`, Astro.site)} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={new URL(`${base}og-image.png`, Astro.site)} />
+    <link rel="icon" type="image/svg+xml" href={`${base}favicon.svg`} />
+    <title>{title}</title>
+    <style set:html={themeCSS}></style>
+    <script is:inline>
+      // Prevent flash of wrong theme — runs before paint
+      (function() {
+        var t = localStorage.getItem('theme');
+        if (t === 'light' || t === 'dark') {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var isDark = t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) document.documentElement.classList.add('is-dark');
+      })();
+    </script>
+  </head>
+  <body class="flex min-h-screen flex-col">
+    <header style="border-bottom: 1px solid var(--radar-border);">
+      <nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
+        <a href={base} class="nav-link flex items-center gap-3 text-xl font-bold tracking-tight">
+          {config.logo && (
+            <img src={`${base}${config.logo.replace(/^\//, '')}`} alt={config.title} class="h-8 w-auto" />
+          )}
+          {config.title}
+        </a>
+        <ThemeToggle />
+      </nav>
+    </header>
+    <main class="mx-auto max-w-6xl px-6 py-10 w-full">
+      <slot />
+    </main>
+    <footer class="footer mt-auto" style="border-top: 1px solid var(--radar-border);">
+      <div class="mx-auto max-w-6xl px-6 py-6">
+        <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
+          <span class="footer-text">
+            &copy; <a href="https://github.com/dirsigler/techradar" target="_blank" rel="noopener noreferrer" class="footer-link">Dennis Irsigler</a>
+            &nbsp;&middot;&nbsp;
+            {config.repositoryUrl ? (
+              <a href={config.repositoryUrl} target="_blank" rel="noopener noreferrer" class="footer-link">MIT License</a>
+            ) : (
+              <Fragment>MIT License</Fragment>
+            )}
+            {config.footerText && <Fragment>&nbsp;&middot;&nbsp;<span set:html={config.footerText} /></Fragment>}
+          </span>
+          {config.socialLinks && config.socialLinks.length > 0 && (
+            <div class="flex items-center gap-4">
+              {config.socialLinks.map((link) => (
+                <a
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="social-link"
+                  aria-label={link.label}
+                >
+                  {link.icon ? (
+                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="currentColor" aria-hidden="true">
+                      <path d={link.icon} />
+                    </svg>
+                  ) : (
+                    <span>{link.label}</span>
+                  )}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
+<style>
+  .nav-link {
+    color: var(--radar-text);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .nav-link:hover {
+    color: var(--radar-link);
+  }
+  .footer {
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--radar-text-faint);
+  }
+  .footer-text {
+    color: var(--radar-text-faint);
+  }
+  .footer-link {
+    color: var(--radar-text-faint);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .footer-link:hover {
+    color: var(--radar-text-muted);
+  }
+  .social-link {
+    color: var(--radar-text-muted);
+    transition: color 0.15s;
+  }
+  .social-link:hover {
+    color: var(--radar-text);
+  }
+</style>

package/src/lib/radar.ts ADDED Viewed

@@ -0,0 +1,124 @@
+export const RINGS = ['adopt', 'trial', 'assess', 'hold'] as const;
+export type Ring = (typeof RINGS)[number];
+export const RING_RADII: Record<Ring, { inner: number; outer: number }> = {
+  adopt: { inner: 0, outer: 100 },
+  trial: { inner: 100, outer: 200 },
+  assess: { inner: 200, outer: 300 },
+  hold: { inner: 300, outer: 400 },
+};
+export const RING_LABELS: Record<Ring, string> = {
+  adopt: 'Adopt',
+  trial: 'Trial',
+  assess: 'Assess',
+  hold: 'Hold',
+};
+export const RING_DESCRIPTIONS: Record<Ring, string> = {
+  adopt: 'Technologies we have high confidence in and recommend for broad use across projects.',
+  trial: 'Technologies worth pursuing. We see potential and recommend trying them on projects that can handle the risk.',
+  assess: 'Technologies worth exploring to understand how they might affect our work. Not yet ready for trial.',
+  hold: 'Technologies we have reservations about. They should not be used for new projects but may exist in legacy systems.',
+};
+const CENTER = 400;
+const PADDING = 12;
+/** Simple deterministic hash from a string to a number in [0, 1). */
+function hash(str: string): number {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+  }
+  return (Math.abs(h) % 10000) / 10000;
+}
+/** Returns the angular range (in radians) for a given quadrant order (1-4). */
+export function quadrantAngles(order: number): { start: number; end: number } {
+  const mapping: Record<number, { start: number; end: number }> = {
+    1: { start: (3 * Math.PI) / 2, end: 2 * Math.PI },
+    2: { start: 0, end: Math.PI / 2 },
+    3: { start: Math.PI / 2, end: Math.PI },
+    4: { start: Math.PI, end: (3 * Math.PI) / 2 },
+  };
+  return mapping[order] ?? mapping[1];
+}
+export interface DotPosition {
+  x: number;
+  y: number;
+  title: string;
+  ring: Ring;
+  color: string;
+  moved: number;
+  slug: string;
+  segment: string;
+}
+/**
+ * Position all technology dots on the radar, avoiding collisions.
+ */
+export function positionDots(
+  technologies: Array<{
+    title: string;
+    ring: Ring;
+    moved: number;
+    slug: string;
+    segment: string;
+    color: string;
+    order: number;
+  }>,
+): DotPosition[] {
+  const placed: DotPosition[] = [];
+  for (const tech of technologies) {
+    const { inner, outer } = RING_RADII[tech.ring];
+    const angles = quadrantAngles(tech.order);
+    const anglePadding = 0.08;
+    const radiusPadding = PADDING;
+    let bestX = CENTER;
+    let bestY = CENTER;
+    let bestDist = -1;
+    for (let attempt = 0; attempt < 30; attempt++) {
+      const h1 = hash(tech.title + attempt);
+      const h2 = hash(attempt + tech.title + 'y');
+      const r =
+        inner + radiusPadding + h1 * (outer - inner - 2 * radiusPadding);
+      const a =
+        angles.start + anglePadding + h2 * (angles.end - angles.start - 2 * anglePadding);
+      const cx = CENTER + r * Math.cos(a);
+      const cy = CENTER + r * Math.sin(a);
+      let minDist = Infinity;
+      for (const p of placed) {
+        const dx = cx - p.x;
+        const dy = cy - p.y;
+        minDist = Math.min(minDist, Math.sqrt(dx * dx + dy * dy));
+      }
+      if (minDist > bestDist) {
+        bestDist = minDist;
+        bestX = cx;
+        bestY = cy;
+      }
+    }
+    placed.push({
+      x: bestX,
+      y: bestY,
+      title: tech.title,
+      ring: tech.ring,
+      color: tech.color,
+      moved: tech.moved,
+      slug: tech.slug,
+      segment: tech.segment,
+    });
+  }
+  return placed;
+}

package/src/pages/404.astro ADDED Viewed

@@ -0,0 +1,34 @@
+---
+import Base from '../layouts/Base.astro';
+const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+---
+<Base title="Page Not Found — Tech Radar" description="The page you're looking for doesn't exist.">
+  <div class="flex flex-col items-center justify-center py-20 text-center">
+    <h1 class="text-6xl font-bold" style="color: var(--radar-text);">404</h1>
+    <p class="mt-4 text-lg" style="color: var(--radar-text-muted);">
+      The page you're looking for doesn't exist.
+    </p>
+    <a href={base} class="back-link mt-8">
+      Back to Tech Radar
+    </a>
+  </div>
+</Base>
+<style>
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.625rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    background-color: var(--radar-active-bg);
+    color: var(--radar-active-text);
+    text-decoration: none;
+    transition: opacity 0.15s;
+  }
+  .back-link:hover {
+    opacity: 0.9;
+  }
+</style>

package/src/pages/index.astro ADDED Viewed

@@ -0,0 +1,206 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '../layouts/Base.astro';
+import Radar from '../components/Radar.astro';
+import RadarLegend from '../components/RadarLegend.astro';
+import { RINGS, RING_LABELS, RING_DESCRIPTIONS } from '../lib/radar';
+import config from 'virtual:techradar/config';
+const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+const segmentEntries = await getCollection('segments');
+const technologyEntries = await getCollection('technologies');
+// Build segment data sorted by order
+const segments = segmentEntries
+  .map((entry) => ({
+    title: entry.data.title,
+    slug: entry.id.replace(/\/index$/, '').replace(/^index$/, entry.id),
+    color: entry.data.color,
+    order: entry.data.order,
+  }))
+  .sort((a, b) => a.order - b.order);
+// Build a lookup from segment slug to segment data
+const segmentMap = new Map(segments.map((s) => [s.slug, s]));
+// Build technology data with segment info
+const technologies = technologyEntries
+  .map((entry) => {
+    const parts = entry.id.split('/');
+    const segmentSlug = parts.slice(0, -1).join('/');
+    const seg = segmentMap.get(segmentSlug);
+    return {
+      title: entry.data.title,
+      ring: entry.data.ring,
+      moved: entry.data.moved,
+      slug: entry.id,
+      segment: segmentSlug,
+      color: seg?.color ?? '#6b7280',
+      order: seg?.order ?? 1,
+      href: `${base}technology/${entry.id}/`,
+    };
+  })
+  .sort((a, b) => a.title.localeCompare(b.title));
+const legendSegments = segments.map((s) => ({
+  title: s.title,
+  slug: s.slug,
+  color: s.color,
+}));
+const ringEntries = Object.entries(RING_LABELS) as [string, string][];
+---
+<Base title={config.title}>
+  <div class="text-center mb-10">
+    <h1 class="text-4xl font-bold" style="color: var(--radar-text);">{config.title}</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>
+  </div>
+  <!-- Filter bar -->
+  <div id="filter-bar" class="mb-8 flex flex-wrap items-center justify-center gap-2">
+    <span class="text-sm font-medium mr-1" style="color: var(--radar-text-faint);">Filter:</span>
+    <button data-filter="all" data-type="all" class="filter-btn active">All</button>
+    {segments.map((seg) => (
+      <button data-filter={seg.slug} data-type="segment" class="filter-btn">
+        <span class="inline-block h-2.5 w-2.5 rounded-full mr-1" style={`background-color: ${seg.color}`}></span>
+        {seg.title}
+      </button>
+    ))}
+    <span style="color: var(--radar-border-subtle);" class="mx-1">|</span>
+    {ringEntries.map(([key, label]) => (
+      <button data-filter={key} data-type="ring" class="filter-btn">
+        {label}
+      </button>
+    ))}
+  </div>
+  <Radar technologies={technologies} segments={segments} />
+  <!-- Ring descriptions -->
+  <div class="ring-descriptions">
+    {RINGS.map((ring) => (
+      <div class="ring-desc">
+        <span class="ring-desc-label">{RING_LABELS[ring]}</span>
+        <span class="ring-desc-text">{RING_DESCRIPTIONS[ring]}</span>
+      </div>
+    ))}
+  </div>
+  <RadarLegend technologies={technologies} segments={legendSegments} />
+</Base>
+<style>
+  .filter-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.375rem 0.875rem;
+    border-radius: 9999px;
+    border: 1px solid var(--radar-border-subtle);
+    background-color: transparent;
+    color: var(--radar-text-muted);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .filter-btn:hover {
+    border-color: var(--radar-border-subtle);
+    color: var(--radar-text);
+  }
+  .filter-btn.active {
+    background-color: var(--radar-active-bg);
+    border-color: var(--radar-active-bg);
+    color: var(--radar-active-text);
+  }
+  .ring-descriptions {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1rem;
+    margin-top: 2.5rem;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--radar-border);
+    background-color: var(--radar-bg-secondary);
+  }
+  @media (min-width: 640px) {
+    .ring-descriptions {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (min-width: 1024px) {
+    .ring-descriptions {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+  .ring-desc {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .ring-desc-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--radar-text);
+  }
+  .ring-desc-text {
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--radar-text-muted);
+  }
+</style>
+<script>
+  const buttons = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
+  const dots = document.querySelectorAll<SVGCircleElement>('.radar-dot');
+  const legendRows = document.querySelectorAll<HTMLElement>('.legend-row');
+  buttons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      // Update active state
+      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') ?? '';
+        let visible = true;
+        if (type === 'segment') visible = segment === filter;
+        else if (type === 'ring') visible = ring === filter;
+        // Fade non-matching dots instead of hiding
+        link.style.opacity = visible ? '1' : '0.1';
+        link.style.pointerEvents = visible ? 'auto' : 'none';
+      });
+      // Filter legend rows
+      legendRows.forEach((row) => {
+        const segment = row.dataset.segment ?? '';
+        const ring = row.dataset.ring ?? '';
+        let visible = true;
+        if (type === 'segment') visible = segment === filter;
+        else if (type === 'ring') visible = ring === filter;
+        row.style.opacity = visible ? '1' : '0.15';
+        row.style.pointerEvents = visible ? 'auto' : 'none';
+      });
+    });
+  });
+</script>

package/src/pages/segments/[segment].astro ADDED Viewed

@@ -0,0 +1,83 @@
+---
+import { getCollection, render, type CollectionEntry } from 'astro:content';
+import Base from '../../layouts/Base.astro';
+import TechnologyCard from '../../components/TechnologyCard.astro';
+import { RINGS, RING_LABELS } from '../../lib/radar';
+import type { GetStaticPaths } from 'astro';
+const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
+export const getStaticPaths: GetStaticPaths = async () => {
+  const segmentEntries = await getCollection('segments');
+  return segmentEntries.map((entry) => {
+    const slug = entry.id.replace(/\/index$/, '').replace(/^index$/, entry.id);
+    return {
+      params: { segment: slug },
+      props: { entry },
+    };
+  });
+};
+const { entry } = Astro.props as { entry: CollectionEntry<'segments'> };
+const segmentSlug = Astro.params.segment;
+const { Content } = await render(entry);
+const technologyEntries = await getCollection('technologies');
+const segTechnologies = technologyEntries
+  .filter((t) => t.id.startsWith(`${segmentSlug}/`))
+  .map((t) => ({
+    title: t.data.title,
+    ring: t.data.ring,
+    moved: t.data.moved,
+    href: `${base}technology/${t.id}/`,
+  }));
+---
+<Base title={`${entry.data.title} — Tech Radar`}>
+  <nav class="mb-6 text-sm" style="color: var(--radar-text-faint);">
+    <a href={base} class="breadcrumb-link">Tech Radar</a>
+    <span class="mx-2">/</span>
+    <span style="color: var(--radar-text-secondary);">{entry.data.title}</span>
+  </nav>
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold flex items-center gap-3" style="color: var(--radar-text);">
+      <span class="inline-block h-4 w-4 rounded-full" style={`background-color: ${entry.data.color}`}></span>
+      {entry.data.title}
+    </h1>
+    <div class="prose mt-4 max-w-none">
+      <Content />
+    </div>
+  </div>
+  {RINGS.map((ring) => {
+    const ringTechs = segTechnologies.filter((t) => t.ring === ring);
+    if (ringTechs.length === 0) return null;
+    return (
+      <section class="mb-6">
+        <h2 class="mb-3 text-lg font-semibold" style="color: var(--radar-text-secondary);">{RING_LABELS[ring]}</h2>
+        <div class="grid gap-2 sm:grid-cols-2">
+          {ringTechs.map((tech) => (
+            <TechnologyCard
+              title={tech.title}
+              ring={tech.ring}
+              moved={tech.moved}
+              href={tech.href}
+            />
+          ))}
+        </div>
+      </section>
+    );
+  })}
+</Base>
+<style>
+  .breadcrumb-link {
+    color: var(--radar-text-faint);
+    transition: color 0.15s;
+  }
+  .breadcrumb-link:hover {
+    color: var(--radar-text-secondary);
+  }
+</style>