Give every technology a page of its own

A technology's name appeared in nine places -- the chips on project,
call, service and member cards and detail pages, the landing's ring
cards, the radar -- and not one was clickable. Now each leads to
`/tecnologias/:slug`, with the logo, what it is, where the collective
places it on the radar and a link to its own site.

Two constraints from the API shaped this, both verified against it:

Its address is the site's own. Technologies carry no `path` and no
`alternates`, and `/slugs` cannot list them -- its type vocabulary is a
closed enum. `routes.ts` opens by stating the API decides every record's
address; this is the first type where that is not true, so `SECTIONS`
gains the one entry and the comment says why. The sitemap composes these
URLs locally for the same reason, and an unreachable technologies call
there is not fatal the way `/slugs` is: it costs a handful of URLs
rather than misrepresenting the site.

There is no detail endpoint. `GET /technologies/{slug}` answers "route
not found" -- the route does not exist. `pireonApi.technology` filters
the collection instead, passing `in_use: false` because the default
returns only technologies attached to a project, which today is none.
An outage and an unknown slug stay distinguishable so the first is not
reported as a 404.

`website` is the only link the payload has: the project's own home page,
where its documentation lives. There is no separate docs field, so the
label says what the link is.

The chip markup was identical in all nine places, so it becomes one
`app-technology-chip` rather than nine anchors. `project-card` and
`radar-page` gain a `locale` input, which is all they lacked to address
it.

Verified: lint, 54 unit tests, build and 11 e2e. Against the mock, the
three addresses answer 200 and an unknown slug 404; the switcher moves
between them; canonical and hreflang are right; the sitemap lists all
three per technology.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/src/app/ui/technology-detail.ts

@@ -0,0 +1,165 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import {
+  PiActionButtonComponent,
+  PiTextColorDirective,
+  PiTextLargeDirective,
+  PiTextWeightBoldDirective,
+} from '@pi/ui';
+
+import type { Locale } from '../core/api';
+import type { PublicTechnology } from '../core/api.types';
+import type { Copy } from '../core/copy';
+import { listingPath } from '../core/routes';
+import { ApiImage } from './api-image';
+import { ContactCta } from './contact-cta';
+
+/**
+ * One technology on its own address: what it is, where the collective places
+ * it on the radar, and where its own people document it.
+ *
+ * The logo sits on a light tile in both themes, as it does on the radar. A
+ * brand's own mark is not ours to recolour, and some — Rust's, black — would
+ * otherwise vanish against a dark page.
+ *
+ * `website` is the only link the API carries. It is the project's own home
+ * page, which is where its documentation lives; there is no separate field for
+ * the docs, so the label says what the link actually is.
+ */
+@Component({
+  selector: 'app-technology-detail',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ApiImage,
+    ContactCta,
+    PiActionButtonComponent,
+    PiTextColorDirective,
+    PiTextLargeDirective,
+    PiTextWeightBoldDirective,
+  ],
+  styleUrl: './technology-detail.scss',
+  template: `
+    <header class="content-hero">
+      <div class="landing-shell technology-hero">
+        <span
+          class="technology-logo"
+          [style.--brand]="technology().color || null"
+        >
+          @if (technology().logo; as logo) {
+            <app-api-image
+              [image]="logo"
+              sizes="72px"
+              loading="eager"
+              imgClass="technology-logo__image"
+            />
+          } @else {
+            <span class="technology-logo__initial" aria-hidden="true">{{
+              technology().name[0]
+            }}</span>
+          }
+        </span>
+
+        <div>
+          <p class="landing-eyebrow">{{ category() }}</p>
+          <h1 bold class="content-hero__title">{{ technology().name }}</h1>
+
+          @if (technology().description; as description) {
+            <p l pi-color color="grey" class="content-hero__lead">
+              {{ description }}
+            </p>
+          }
+
+          @if (technology().website; as website) {
+            <p class="content-hero__actions">
+              <a [href]="website" target="_blank" rel="noopener noreferrer">
+                <pi-action-button
+                  size="large"
+                  color="primary"
+                  [text]="copy().technology.website"
+                  [hasIcon]="true"
+                />
+              </a>
+            </p>
+          }
+        </div>
+      </div>
+    </header>
+
+    <div class="landing-shell content-page__layout">
+      <div>
+        @if (ring(); as ring) {
+          <section class="content-page__section">
+            <h2>{{ copy().technology.ringTitle }}: {{ ring.label }}</h2>
+            <p class="technology-text">{{ ring.lead }}</p>
+
+            @if (technology().radar_note; as note) {
+              <p class="technology-text technology-note">{{ note }}</p>
+            }
+          </section>
+        }
+
+        <p>
+          <a [href]="radarHref()">{{ copy().technology.back }} →</a>
+        </p>
+      </div>
+
+      <aside class="content-page__aside">
+        @if (facts().length > 0) {
+          <div class="landing-card content-page__panel">
+            <ul class="content-page__facts">
+              @for (fact of facts(); track fact) {
+                <li>{{ fact }}</li>
+              }
+            </ul>
+          </div>
+        }
+
+        <app-contact-cta [copy]="copy()" [locale]="locale()" />
+      </aside>
+    </div>
+  `,
+})
+export class TechnologyDetail {
+  readonly technology = input.required<PublicTechnology>();
+  readonly copy = input.required<Copy>();
+  readonly locale = input.required<Locale>();
+
+  protected readonly category = computed(
+    () => this.copy().radar.categories[this.technology().category],
+  );
+
+  protected readonly radarHref = computed(() =>
+    listingPath('radar', this.locale()),
+  );
+
+  /** Null for a technology the collective uses but has not placed. */
+  protected readonly ring = computed(() => {
+    const ring = this.technology().ring;
+
+    return ring
+      ? { label: this.copy().rings[ring], lead: this.copy().radar.ringLead[ring] }
+      : null;
+  });
+
+  /** Counts the API reports as zero say nothing, so they are not shown. */
+  protected readonly facts = computed(() => {
+    const { projects_count: projects, members_count: members } =
+      this.technology();
+    const copy = this.copy().technology;
+    const facts: string[] = [];
+
+    if (projects > 0) {
+      facts.push(`${projects} ${copy.usedIn}`);
+    }
+
+    if (members > 0) {
+      facts.push(`${members} ${copy.membersUsing}`);
+    }
+
+    return facts;
+  });
+}