From 5ea99145830149a3299e7eb387b2251b8e372641 Mon Sep 17 00:00:00 2001 From: pigui Date: Tue, 29 Sep 2026 20:13:05 +0200 Subject: [PATCH] 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 --- landing-e2e/src/landing.spec.ts | 9 + landing/src/app/core/api.ts | 33 ++++ landing/src/app/core/copy.ts | 32 ++++ landing/src/app/core/routed-page.ts | 5 + landing/src/app/core/routes.spec.ts | 44 +++++ landing/src/app/core/routes.ts | 33 +++- landing/src/app/core/sitemap.spec.ts | 26 ++- landing/src/app/core/sitemap.ts | 9 + landing/src/app/pages/(home).page.ts | 17 +- landing/src/app/ui/call-card.ts | 7 +- landing/src/app/ui/call-detail.ts | 9 +- landing/src/app/ui/member-detail.ts | 17 +- landing/src/app/ui/project-card.ts | 10 +- landing/src/app/ui/project-detail.ts | 9 +- landing/src/app/ui/radar-page.scss | 16 ++ landing/src/app/ui/radar-page.ts | 13 +- landing/src/app/ui/routed-page.ts | 42 ++++- landing/src/app/ui/service-detail.ts | 21 ++- landing/src/app/ui/technology-chip.scss | 22 +++ landing/src/app/ui/technology-chip.ts | 33 ++++ landing/src/app/ui/technology-detail.scss | 53 ++++++ landing/src/app/ui/technology-detail.ts | 165 +++++++++++++++++++ landing/src/server/routes/sitemap.xml.get.ts | 15 +- tools/mock-api.mjs | 16 ++ 24 files changed, 616 insertions(+), 40 deletions(-) create mode 100644 landing/src/app/ui/technology-chip.scss create mode 100644 landing/src/app/ui/technology-chip.ts create mode 100644 landing/src/app/ui/technology-detail.scss create mode 100644 landing/src/app/ui/technology-detail.ts diff --git a/landing-e2e/src/landing.spec.ts b/landing-e2e/src/landing.spec.ts index bc7f28b..0ceb2e6 100644 --- a/landing-e2e/src/landing.spec.ts +++ b/landing-e2e/src/landing.spec.ts @@ -108,6 +108,15 @@ test.describe('landing', () => { } }); + test('answers 404 for a technology it does not know', async ({ page }) => { + // Shaped like a technology address, so the middleware lets it through and + // the status comes from the page once the collection had no such slug. + const response = await page.goto('/tecnologias/no-such-technology'); + + expect(response?.status()).toBe(404); + await expect(page.locator('h1')).toContainText('no existe'); + }); + test('refuses an incomplete contact submission without calling the API', async ({ page, }) => { diff --git a/landing/src/app/core/api.ts b/landing/src/app/core/api.ts index 9feffc5..4c6820c 100644 --- a/landing/src/app/core/api.ts +++ b/landing/src/app/core/api.ts @@ -238,6 +238,39 @@ export const pireonApi = { technologies: (lang: Locale, query?: GetOptions['query']) => list('/technologies', { lang, query }), + /** + * One technology, by slug. + * + * The public API has no `/technologies/{slug}` — that route does not exist, + * so asking for one answers "route not found" rather than "no such record". + * This filters the collection instead: a couple of dozen records in a single + * request the route's `s-maxage` already caches. + * + * `in_use: false` because the parameter defaults to true, which returns only + * technologies attached to a project — none of them, today. + * + * A failed call and an unknown slug have to stay distinguishable: the first + * is an outage, the second is a 404. So the collection's `error` is passed + * through untouched and only a successful, complete answer can conclude that + * a technology does not exist. + */ + technology: async ( + lang: Locale, + slug: string + ): Promise> => { + const all = await list('/technologies', { + lang, + query: { in_use: false }, + }); + + return { + ...all, + data: all.error + ? null + : (all.data?.find((technology) => technology.slug === slug) ?? null), + }; + }, + goodFirstIssues: (query?: GetOptions['query']) => list('/good-first-issues', { query }), diff --git a/landing/src/app/core/copy.ts b/landing/src/app/core/copy.ts index 9cad5f3..dd9f896 100644 --- a/landing/src/app/core/copy.ts +++ b/landing/src/app/core/copy.ts @@ -143,6 +143,14 @@ export interface Copy { testimonials: string; technologies: string; }; + technology: { + eyebrow: string; + ringTitle: string; + website: string; + usedIn: string; + membersUsing: string; + back: string; + }; radar: { eyebrow: string; lead: string; @@ -325,6 +333,14 @@ const es: Copy = { testimonials: 'Qué dicen', technologies: 'Con qué lo hacemos', }, + technology: { + eyebrow: 'Tecnología', + ringTitle: 'En el radar', + website: 'Web oficial', + usedIn: 'proyectos la usan', + membersUsing: 'personas la usan', + back: 'Ver el radar completo', + }, radar: { eyebrow: 'Radar tecnológico', lead: 'Las herramientas con las que trabajamos y lo que opinamos de cada una: qué usamos sin dudar, qué estamos probando y qué preferimos evitar.', @@ -520,6 +536,14 @@ const en: Copy = { testimonials: 'What people say', technologies: 'What we use', }, + technology: { + eyebrow: 'Technology', + ringTitle: 'On the radar', + website: 'Official site', + usedIn: 'projects use it', + membersUsing: 'people use it', + back: 'See the whole radar', + }, radar: { eyebrow: 'Tech radar', lead: 'The tools we work with and what we think of each: what we use without a second thought, what we are trying out and what we would rather avoid.', @@ -715,6 +739,14 @@ const ca: Copy = { testimonials: 'Què en diuen', technologies: 'Amb què ho fem', }, + technology: { + eyebrow: 'Tecnologia', + ringTitle: 'Al radar', + website: 'Web oficial', + usedIn: 'projectes la fan servir', + membersUsing: 'persones la fan servir', + back: 'Veure el radar complet', + }, radar: { eyebrow: 'Radar tecnològic', lead: "Les eines amb què treballem i què en pensem de cadascuna: què fem servir sense dubtar, què estem provant i què preferim evitar.", diff --git a/landing/src/app/core/routed-page.ts b/landing/src/app/core/routed-page.ts index eaabf04..987309f 100644 --- a/landing/src/app/core/routed-page.ts +++ b/landing/src/app/core/routed-page.ts @@ -32,6 +32,7 @@ export type RoutedRecord = | { type: 'member'; record: PublicMember } | { type: 'call'; record: PublicCall } | { type: 'service'; record: PublicService } + | { type: 'technology'; record: PublicTechnology } | { type: 'radar'; record: PublicTechnology[] } | { type: 'blog'; record: PublicPage[] } | { @@ -94,6 +95,10 @@ async function fetchRecord(route: RouteMatch): Promise { const { data } = await pireonApi.service(locale, slug); return data ? { type: 'service', record: data } : null; } + case 'technology': { + const { data } = await pireonApi.technology(locale, slug); + return data ? { type: 'technology', record: data } : null; + } case 'blog': { const { data, error } = await pireonApi.pages(locale, { category: BLOG_CATEGORY[locale], diff --git a/landing/src/app/core/routes.spec.ts b/landing/src/app/core/routes.spec.ts index 396b39b..db71f98 100644 --- a/landing/src/app/core/routes.spec.ts +++ b/landing/src/app/core/routes.spec.ts @@ -7,6 +7,8 @@ import { listingPath, resolveRoute, SECTIONS, + technologyAlternates, + technologyPath, } from './routes'; describe('resolveRoute', () => { @@ -121,6 +123,48 @@ describe('listings', () => { }); }); +describe('technologies', () => { + it('reads one under its section, in each language', () => { + expect(resolveRoute('/tecnologias/angular')).toEqual({ + type: 'technology', + locale: 'es', + slug: 'angular', + }); + expect(resolveRoute('/en/technologies/angular')).toEqual({ + type: 'technology', + locale: 'en', + slug: 'angular', + }); + expect(resolveRoute('/ca/tecnologies/angular')).toEqual({ + type: 'technology', + locale: 'ca', + slug: 'angular', + }); + }); + + it('builds the address resolveRoute reads back', () => { + for (const locale of SUPPORTED_LOCALES) { + const path = technologyPath('angular', locale); + + expect(resolveRoute(path)).toEqual({ + type: 'technology', + locale, + slug: 'angular', + }); + } + }); + + // The slug is a proper noun the API does not translate, so the three + // addresses differ only by the prefix. + it('keeps the same slug in every language', () => { + expect(technologyAlternates('angular')).toEqual({ + es: '/tecnologias/angular', + en: '/en/technologies/angular', + ca: '/ca/tecnologies/angular', + }); + }); +}); + describe('homeHref', () => { it('answers on ?lang= for every language but the default', () => { expect(homeHref(DEFAULT_LOCALE)).toBe('/'); diff --git a/landing/src/app/core/routes.ts b/landing/src/app/core/routes.ts index 3cb7359..918daf8 100644 --- a/landing/src/app/core/routes.ts +++ b/landing/src/app/core/routes.ts @@ -13,7 +13,13 @@ */ import { DEFAULT_LOCALE, SUPPORTED_LOCALES, type Locale } from './api'; -export type RecordType = 'page' | 'project' | 'member' | 'call' | 'service'; +export type RecordType = + | 'page' + | 'project' + | 'member' + | 'call' + | 'service' + | 'technology'; /** Pages this site composes itself rather than one record's: no slug. */ export type ListingType = 'radar' | 'contribute' | 'blog'; @@ -31,6 +37,11 @@ export const SECTIONS: Record< member: { es: 'equipo', en: 'team', ca: 'equip' }, call: { es: 'colabora', en: 'contribute', ca: 'col-labora' }, service: { es: 'servicios', en: 'services', ca: 'serveis' }, + // The one section the API does not know about. It gives technologies no + // `path` and no `alternates`, and `/slugs` cannot carry them — its type + // vocabulary is a closed enum. So this address is the site's own. Should the + // API ever publish one, this is where the two have to be reconciled. + technology: { es: 'tecnologias', en: 'technologies', ca: 'tecnologies' }, }; /** @@ -100,6 +111,26 @@ export function listingAlternates( ); } +/** + * A technology's address in one language, as `resolveRoute` reads it back. + * + * Unlike every other record, the slug is the same in all three: a technology's + * name is a proper noun, so the API does not translate it and the addresses + * differ only by the prefix. + */ +export function technologyPath(slug: string, locale: Locale): string { + const prefix = locale === DEFAULT_LOCALE ? '' : `/${locale}`; + + return `${prefix}/${SECTIONS.technology[locale]}/${slug}`; +} + +/** The same technology in every language, for `hreflang`. */ +export function technologyAlternates(slug: string): Record { + return Object.fromEntries( + SUPPORTED_LOCALES.map((locale) => [locale, technologyPath(slug, locale)]), + ); +} + /** The landing itself in a given language. It answers on `?lang=`, not a prefix. */ export function homeHref(locale: Locale): string { return locale === DEFAULT_LOCALE ? '/' : `/?lang=${locale}`; diff --git a/landing/src/app/core/sitemap.spec.ts b/landing/src/app/core/sitemap.spec.ts index ecc5d60..4fd2e12 100644 --- a/landing/src/app/core/sitemap.spec.ts +++ b/landing/src/app/core/sitemap.spec.ts @@ -14,7 +14,16 @@ const xml = buildSitemap('https://pireon.dev', { }, }, ], -}); +}, [ + { + id: 1, + name: 'Angular', + slug: 'angular', + category: 'framework', + projects_count: 0, + members_count: 0, + }, +]); describe('buildSitemap', () => { it('lists every language of a record as its own url', () => { @@ -41,6 +50,21 @@ describe('buildSitemap', () => { expect(xml).toContain('https://pireon.dev/ca/col-labora'); }); + // The API gives technologies no address and `/slugs` cannot carry them, so + // these are composed here and have to be in the sitemap all the same. + it('includes the technology pages this site composes', () => { + expect(xml).toContain('https://pireon.dev/tecnologias/angular'); + expect(xml).toContain( + 'https://pireon.dev/en/technologies/angular', + ); + expect(xml).toContain( + 'https://pireon.dev/ca/tecnologies/angular', + ); + expect(xml).toContain( + 'hreflang="ca" href="https://pireon.dev/ca/tecnologies/angular"', + ); + }); + it('is a well-formed document', () => { const document = new DOMParser().parseFromString(xml, 'application/xml'); diff --git a/landing/src/app/core/sitemap.ts b/landing/src/app/core/sitemap.ts index 6396c79..0976068 100644 --- a/landing/src/app/core/sitemap.ts +++ b/landing/src/app/core/sitemap.ts @@ -7,10 +7,12 @@ * is not fetched first. */ import { DEFAULT_LOCALE, SUPPORTED_LOCALES, type SlugEntry } from './api'; +import type { PublicTechnology } from './api.types'; import { homeHref, listingAlternates, LISTINGS, + technologyAlternates, type ListingType, } from './routes'; @@ -22,6 +24,7 @@ interface SitemapEntry { export function buildSitemap( origin: string, slugs: Record, + technologies: PublicTechnology[] = [], ): string { const entries: SitemapEntry[] = [ // The landing answers on `?lang=`, not a prefix. @@ -34,6 +37,12 @@ export function buildSitemap( alternates: listingAlternates(listing), })), ...Object.values(slugs).flat(), + // Technologies are absent from `/slugs` — the API gives them no address, + // so this site composes theirs. No ``: the payload has no + // `updated_at` to report. + ...technologies.map((technology) => ({ + alternates: technologyAlternates(technology.slug), + })), ]; const urls = entries.flatMap((entry) => diff --git a/landing/src/app/pages/(home).page.ts b/landing/src/app/pages/(home).page.ts index 50a19b3..2caf943 100644 --- a/landing/src/app/pages/(home).page.ts +++ b/landing/src/app/pages/(home).page.ts @@ -22,6 +22,7 @@ import { listingPath } from '../core/routes'; import { copyFor } from '../core/copy'; import { absoluteUrl, setShareImage, setStructuredData } from '../core/head'; import { originFromHeaders } from '../core/origin'; +import { TechnologyChip } from '../ui/technology-chip'; import { CallCard } from '../ui/call-card'; import { ClientLogo } from '../ui/client-logo'; import { ContactForm } from '../ui/contact-form'; @@ -72,6 +73,7 @@ export const routeMeta: RouteMeta = { SiteHeader, TalkCard, TestimonialCarousel, + TechnologyChip, ], styleUrl: './home.page.scss', template: ` @@ -123,7 +125,11 @@ export const routeMeta: RouteMeta = { >
@for (project of data().projects; track project.id) { - + }
@@ -176,11 +182,10 @@ export const routeMeta: RouteMeta = {
    @for (technology of group.technologies; track technology.id) {
  • - +
    • }
diff --git a/landing/src/app/ui/call-card.ts b/landing/src/app/ui/call-card.ts index d4b3f11..104f4ae 100644 --- a/landing/src/app/ui/call-card.ts +++ b/landing/src/app/ui/call-card.ts @@ -15,6 +15,7 @@ import { import type { Copy } from '../core/copy'; import type { Locale } from '../core/api'; import type { PublicCall } from '../core/api.types'; +import { TechnologyChip } from './technology-chip'; @Component({ selector: 'app-call-card', @@ -30,6 +31,7 @@ import type { PublicCall } from '../core/api.types'; PiTextXSmallDirective, PiTextColorDirective, PiTextWeightBoldDirective, + TechnologyChip, ], template: ` @for (technology of call().technologies; track technology.id) {
  • - +
    • } diff --git a/landing/src/app/ui/call-detail.ts b/landing/src/app/ui/call-detail.ts index 9c9c3c3..4f04a3c 100644 --- a/landing/src/app/ui/call-detail.ts +++ b/landing/src/app/ui/call-detail.ts @@ -17,6 +17,7 @@ import type { PublicCall } from '../core/api.types'; import type { Copy } from '../core/copy'; import { homeHref } from '../core/routes'; import { ContactForm } from './contact-form'; +import { TechnologyChip } from './technology-chip'; /** * A call for help on its own address, with the form to answer it. @@ -36,6 +37,7 @@ import { ContactForm } from './contact-form'; PiTextColorDirective, PiTextLargeDirective, PiTextWeightBoldDirective, + TechnologyChip, ], styleUrl: './call-detail.scss', template: ` @@ -82,10 +84,9 @@ import { ContactForm } from './contact-form'; } @for (technology of call().technologies ?? []; track technology.id) {
  • -
    • } diff --git a/landing/src/app/ui/member-detail.ts b/landing/src/app/ui/member-detail.ts index 757dae0..253d39e 100644 --- a/landing/src/app/ui/member-detail.ts +++ b/landing/src/app/ui/member-detail.ts @@ -18,6 +18,7 @@ import type { Copy } from '../core/copy'; import { ContactCta } from './contact-cta'; import { memberLinks } from './member-card'; import { ProjectCard } from './project-card'; +import { TechnologyChip } from './technology-chip'; /** * Someone in the collective, on their own address: who they are, what they @@ -37,6 +38,7 @@ import { ProjectCard } from './project-card'; PiTextLargeDirective, PiTextWeightBoldDirective, ProjectCard, + TechnologyChip, ], styleUrl: './member-detail.scss', template: ` @@ -100,7 +102,11 @@ import { ProjectCard } from './project-card';

    {{ copy().member.projects }}

    @for (project of member().projects; track project.id) { - + }
    @@ -146,11 +152,10 @@ import { ProjectCard } from './project-card';
      @for (technology of member().technologies; track technology.id) {
    • - +
      • }
    diff --git a/landing/src/app/ui/project-card.ts b/landing/src/app/ui/project-card.ts index c7b1a9d..54855ba 100644 --- a/landing/src/app/ui/project-card.ts +++ b/landing/src/app/ui/project-card.ts @@ -12,8 +12,10 @@ import { PiTextWeightBoldDirective, } from '@pi/ui'; +import type { Locale } from '../core/api'; import type { Copy } from '../core/copy'; import type { PublicProject } from '../core/api.types'; +import { TechnologyChip } from './technology-chip'; import { ApiImage } from './api-image'; /** The API's five project states onto the status chip's five tones. */ @@ -43,6 +45,7 @@ export const PROJECT_STATUS_TONES: Record< PiTextSmallDirective, PiTextColorDirective, PiTextWeightBoldDirective, + TechnologyChip, ], template: ` @for (technology of technologies(); track technology.id) {
  • - +
    • } @@ -131,6 +137,8 @@ export const PROJECT_STATUS_TONES: Record< export class ProjectCard { readonly project = input.required(); readonly copy = input.required(); + /** Only to address the technology chips, which link to their own pages. */ + readonly locale = input.required(); /** Enough to read the stack at a glance; the rest is noise on a card. */ protected readonly technologies = computed(() => diff --git a/landing/src/app/ui/project-detail.ts b/landing/src/app/ui/project-detail.ts index ca0fb4b..20c2b2a 100644 --- a/landing/src/app/ui/project-detail.ts +++ b/landing/src/app/ui/project-detail.ts @@ -20,6 +20,7 @@ import type { Copy } from '../core/copy'; import { ApiImage } from './api-image'; import { ContactCta } from './contact-cta'; import { PROJECT_STATUS_TONES } from './project-card'; +import { TechnologyChip } from './technology-chip'; /** * A project on its own address: what it is, why it was built the way it was, @@ -41,6 +42,7 @@ import { PROJECT_STATUS_TONES } from './project-card'; PiTextColorDirective, PiTextLargeDirective, PiTextWeightBoldDirective, + TechnologyChip, ], styleUrl: './project-detail.scss', template: ` @@ -79,10 +81,9 @@ import { PROJECT_STATUS_TONES } from './project-card'; track technology.id ) {
  • -
    • } diff --git a/landing/src/app/ui/radar-page.scss b/landing/src/app/ui/radar-page.scss index 69211e9..532ac68 100644 --- a/landing/src/app/ui/radar-page.scss +++ b/landing/src/app/ui/radar-page.scss @@ -144,3 +144,19 @@ color: var(--pi-color-primary); } } + +// The card's logo and name lead to the technology's own page. +.radar-card__top { + text-decoration: none; + color: inherit; + + &:hover .radar-card__name { + text-decoration: underline; + } + + &:focus-visible { + outline: 2px solid var(--pi-color-primary); + outline-offset: 4px; + border-radius: 0.5rem; + } +} diff --git a/landing/src/app/ui/radar-page.ts b/landing/src/app/ui/radar-page.ts index 6a0e00c..e33ae4b 100644 --- a/landing/src/app/ui/radar-page.ts +++ b/landing/src/app/ui/radar-page.ts @@ -13,7 +13,9 @@ import { } from '@pi/ui'; import type { PublicTechnology } from '../core/api.types'; +import type { Locale } from '../core/api'; import type { Copy } from '../core/copy'; +import { technologyPath } from '../core/routes'; import { ApiImage } from './api-image'; type Ring = NonNullable; @@ -81,7 +83,7 @@ const RINGS: Ring[] = ['adopt', 'trial', 'assess', 'hold'];
      @for (technology of group.technologies; track technology.id) {
    • -
      +
      - + @if (technology.description; as description) {

      {{ description }}

      @@ -148,6 +150,13 @@ const RINGS: Ring[] = ['adopt', 'trial', 'assess', 'hold']; export class RadarPage { readonly technologies = input.required(); readonly copy = input.required(); + /** Only to address each technology's own page. */ + readonly locale = input.required(); + + /** Each card leads to the technology it names. */ + protected href(technology: PublicTechnology): string { + return technologyPath(technology.slug, this.locale()); + } /** The rings that have anything in them, in the radar's own order. */ protected readonly rings = computed(() => diff --git a/landing/src/app/ui/routed-page.ts b/landing/src/app/ui/routed-page.ts index 00a8bf6..a3441c0 100644 --- a/landing/src/app/ui/routed-page.ts +++ b/landing/src/app/ui/routed-page.ts @@ -6,12 +6,18 @@ import { } from '@angular/core'; import { copyFor, type Copy } from '../core/copy'; -import { listingAlternates, listingPath } from '../core/routes'; +import { + listingAlternates, + listingPath, + technologyAlternates, + technologyPath, +} from '../core/routes'; import { memberLinks } from './member-card'; import { isBlogPost } from '../core/blog'; import type { Locale } from '../core/api'; import { RadarPage } from './radar-page'; import { ServiceDetail } from './service-detail'; +import { TechnologyDetail } from './technology-detail'; import { BlogPage } from './blog-page'; import { CallDetail } from './call-detail'; import type { RoutedPageData, RoutedRecord } from '../core/routed-page'; @@ -38,6 +44,7 @@ import { ProjectDetail } from './project-detail'; ProjectDetail, RadarPage, ServiceDetail, + TechnologyDetail, ], template: ` @@ -88,7 +95,18 @@ import { ProjectDetail } from './project-detail'; /> } @case ('radar') { - + + } + @case ('technology') { + } @case ('member') { {{ copy().service.projects }}
      @for (project of service().projects; track project.id) { - + }
      @@ -100,11 +104,10 @@ import { TestimonialCard } from './testimonial-card';
        @for (technology of service().technologies; track technology.id) {
      • - +
        • }
      diff --git a/landing/src/app/ui/technology-chip.scss b/landing/src/app/ui/technology-chip.scss new file mode 100644 index 0000000..c1bfbb6 --- /dev/null +++ b/landing/src/app/ui/technology-chip.scss @@ -0,0 +1,22 @@ +:host { + display: inline-flex; +} + +.technology-chip { + display: inline-flex; + text-decoration: none; + border-radius: var(--pi-theme-chip-radius, 0.25rem); + + // The chip carries the visible border, so the focus ring goes on the anchor + // around it rather than being lost inside the component. + &:focus-visible { + outline: 2px solid var(--pi-color-primary); + outline-offset: 2px; + } + + &:hover ::ng-deep .pi-chip, + &:hover ::ng-deep span { + border-color: var(--pi-color-primary); + color: var(--pi-color-primary); + } +} diff --git a/landing/src/app/ui/technology-chip.ts b/landing/src/app/ui/technology-chip.ts new file mode 100644 index 0000000..6213651 --- /dev/null +++ b/landing/src/app/ui/technology-chip.ts @@ -0,0 +1,33 @@ +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { PiChipComponent } from '@pi/ui'; + +import type { Locale } from '../core/api'; +import type { PublicTechnology } from '../core/api.types'; +import { technologyPath } from '../core/routes'; + +/** + * A technology's name, leading to its page. + * + * The same chip was written out in nine places — every card and every detail + * page that names a technology — so the link lives here rather than nine + * times. `pi-chip` renders a ``, so the anchor goes around it. + */ +@Component({ + selector: 'app-technology-chip', + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [PiChipComponent], + styleUrl: './technology-chip.scss', + template: ` + + + + `, +}) +export class TechnologyChip { + readonly technology = input.required(); + readonly locale = input.required(); + + protected readonly href = computed(() => + technologyPath(this.technology().slug, this.locale()), + ); +} diff --git a/landing/src/app/ui/technology-detail.scss b/landing/src/app/ui/technology-detail.scss new file mode 100644 index 0000000..d103719 --- /dev/null +++ b/landing/src/app/ui/technology-detail.scss @@ -0,0 +1,53 @@ +@use './detail'; + +:host { + display: block; +} + +.technology-hero { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 1.5rem; +} + +// The same light tile the radar uses, for the same reason: a brand's mark is +// not ours to recolour, and a black one would disappear in dark mode. +.technology-logo { + display: grid; + flex: none; + place-items: center; + width: 4.5rem; + height: 4.5rem; + border-radius: 1.125rem; + background: #fff; + box-shadow: + 0 0 0 1px + color-mix(in srgb, var(--brand, var(--pi-color-primary)) 22%, transparent), + 0 8px 20px -10px + color-mix(in srgb, var(--brand, var(--pi-color-primary)) 55%, transparent); +} + +.technology-logo ::ng-deep img { + display: block; + width: 3rem; + height: 3rem; + object-fit: contain; +} + +.technology-logo__initial { + font-weight: 700; + font-size: 1.5rem; + color: var(--brand, var(--pi-color-primary)); +} + +.technology-text { + margin: 0; + font-size: 1.0625rem; + line-height: 1.7; +} + +.technology-note { + margin-top: 0.75rem; + color: var(--pi-color-grey); +} diff --git a/landing/src/app/ui/technology-detail.ts b/landing/src/app/ui/technology-detail.ts new file mode 100644 index 0000000..fcc7bb1 --- /dev/null +++ b/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: ` +
      +
      + + +
      +

      {{ category() }}

      +

      {{ technology().name }}

      + + @if (technology().description; as description) { +

      + {{ description }} +

      + } + + @if (technology().website; as website) { +

      + + + +

      + } +
      +
      +
      + +
      +
      + @if (ring(); as ring) { +
      +

      {{ copy().technology.ringTitle }}: {{ ring.label }}

      +

      {{ ring.lead }}

      + + @if (technology().radar_note; as note) { +

      {{ note }}

      + } +
      + } + +

      + {{ copy().technology.back }} → +

      +
      + + +
      + `, +}) +export class TechnologyDetail { + readonly technology = input.required(); + readonly copy = input.required(); + readonly locale = input.required(); + + 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; + }); +} diff --git a/landing/src/server/routes/sitemap.xml.get.ts b/landing/src/server/routes/sitemap.xml.get.ts index e09773b..0c24bd0 100644 --- a/landing/src/server/routes/sitemap.xml.get.ts +++ b/landing/src/server/routes/sitemap.xml.get.ts @@ -13,13 +13,18 @@ import { setResponseStatus, } from 'h3'; -import { pireonApi } from '../../app/core/api'; +import { DEFAULT_LOCALE, pireonApi } from '../../app/core/api'; import { originFromHeaders } from '../../app/core/origin'; import { buildSitemap } from '../../app/core/sitemap'; export default defineEventHandler(async (event) => { const origin = originFromHeaders(getRequestHeaders(event)) ?? ''; - const { data } = await pireonApi.slugs(); + // The technologies are fetched alongside, not instead: their addresses are + // this site's own and `/slugs` cannot carry them. + const [{ data }, technologies] = await Promise.all([ + pireonApi.slugs(), + pireonApi.technologies(DEFAULT_LOCALE, { in_use: false }), + ]); if (!data) { setResponseStatus(event, 503); @@ -30,5 +35,9 @@ export default defineEventHandler(async (event) => { setResponseHeader(event, 'Content-Type', 'application/xml; charset=utf-8'); - return buildSitemap(origin, data); + // A failed `/slugs` is a 503 above, because a sitemap missing most of the + // site is worse than none. A failed technologies call is not: they are an + // extra this site adds, and leaving them out costs a handful of URLs rather + // than misrepresenting the whole site. + return buildSitemap(origin, data, technologies.data ?? []); }); diff --git a/tools/mock-api.mjs b/tools/mock-api.mjs index b81df00..150fd88 100644 --- a/tools/mock-api.mjs +++ b/tools/mock-api.mjs @@ -17,6 +17,15 @@ import { createServer } from 'node:http'; const tech = (id, name, slug, category, color, ring) => ({ id, name, slug, category, color, ring, projects_count: 3, members_count: 2, + description: `${name} es una de las herramientas con las que trabajamos a diario. Esta descripción viene de la API, como en producción.`, + website: `https://example.com/${slug}`, + // An inline SVG so the mock needs no file server: the real API serves these + // from its own storage. + logo: { + url: `data:image/svg+xml;utf8,${encodeURIComponent(`${name[0]}`)}`, + alt: name, width: 64, height: 64, aspect_ratio: 1, + mime: 'image/svg+xml', placeholder: null, srcset: null, + }, }); const technologies = [ @@ -100,6 +109,7 @@ const data = { { id: 4, quote: 'Trabajar con el repositorio abierto desde el primer día nos quitó el miedo a depender de nadie.', original_locale: 'es', is_original: true, author: { name: 'Pau Ferrer', role: 'Dirección' }, client: { id: 3, name: 'Fundació Oberta', slug: 'oberta', projects_count: 3 } }, ], '/public/v1/radar': technologies, + '/public/v1/technologies': technologies, '/public/v1/members': [member(1, 'Ada Lovelace', 'ada', true), member(2, 'Linus T.', 'linus', false), member(3, 'Grace Hopper', 'grace', true), member(4, 'Alan Turing', 'alan', false)], '/public/v1/calls': [ { id: 1, locale: 'es', title: 'Frontend Angular', slug: 'frontend-angular', description: 'Ayúdanos con el catálogo público: componentes, accesibilidad y tests.', status: 'open', hours_per_week: 4, duration_weeks: 8, seniority: 'any', closes_at: '2026-10-01T00:00:00Z', project: project(1, 'Catálogo abierto', 'catalogo', 'active', true), technologies: technologies.slice(0, 2), alternates: {} }, @@ -201,6 +211,12 @@ createServer((req, res) => { let payload = data[path]; // The one filter the frontend relies on: pages by category slug. + if (path === '/public/v1/technologies') { + const inUse = url.searchParams.get('in_use'); + payload = + inUse === 'false' ? payload : payload.filter((t) => t.projects_count > 0); + } + if (path === '/public/v1/pages' && url.searchParams.get('category')) { payload = payload.filter((p) => p.category?.slug === url.searchParams.get('category')); }