Give projects and members their own pages

The API has always served a project's and a member's detail, with
`path` and `alternates` in three languages, and the site had nowhere to
show it. A project now has its page — tagline, status, technologies,
description, technical decisions, what was learned, gallery, client,
dates, lead, team, repositories and open calls — and so does a member:
headline, bio, links, technologies and projects. Cards on the landing
link to both.

Addresses follow the API's rule read backwards (core/routes.ts):
pages at the root, records under a section named in their language,
the default language unprefixed. One catch-all route serves them all.
Not a route per shape: Analog registers each loader as an internal
Nitro route, and Nitro's router cannot hold `/:prefix/:slug` beside
`/:prefix/:section/:slug` — the first became unreachable.

The frame around a record (header, footer, lights, 404/503, title,
description, canonical, hreflang) is one component now, PageShell, and
each type only brings its body, all sharing one layout partial.

Also fixes chips that stepped down one row after the first, on the
landing's cards too: @pi/ui's reset gives every `li + li` a top margin,
right for prose and wrong for a row spaced by `gap`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
pigui
2026-09-29 14:57:13 +02:00
parent 9af6b5aff9
commit 439f951f2e
33 changed files with 2001 additions and 745 deletions

View File

@@ -0,0 +1,66 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
PiActionButtonComponent,
PiIconComponent,
PiTextColorDirective,
PiTextMediumDirective,
PiTextSmallDirective,
PiTextWeightBoldDirective,
PiTextXLargeDirective,
} from '@pi/ui';
/**
* What an address with nothing at it shows. Rendered by `PageShell`, which
* also sets the 404 status, the title and `noindex` — the middleware answers
* 404 up front for addresses no record could ever live at.
*
* Composed from the library's parts rather than from `pi-empty-state`, which
* would have been the obvious fit: it renders its title as an `<h4>`, and a
* page whose only heading is an `h4` has no `h1` at all. `pi-not-found`, the
* library's own version of this page, is unusable here for a different reason
* — it renders a `pi-headline` pointing at an illustration on the collective's
* CDN and translates its text through an HTTP loader.
*/
@Component({
selector: 'app-not-found',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
PiIconComponent,
PiActionButtonComponent,
PiTextXLargeDirective,
PiTextMediumDirective,
PiTextSmallDirective,
PiTextColorDirective,
PiTextWeightBoldDirective,
],
styleUrl: './not-found.scss',
template: `
<main class="not-found">
<div class="landing-shell not-found__inner">
<p class="landing-eyebrow">404</p>
<pi-icon icon="search" size="x-large" color="grey" />
<h1 xl bold class="not-found__title">Esta página no existe</h1>
<p m pi-color color="grey" class="not-found__lead">
La dirección puede haber cambiado. Vuelve al inicio y sigue desde ahí.
</p>
<a class="not-found__home" href="/">
<pi-action-button
size="large"
color="primary"
text="Ir al inicio"
[hasIcon]="true"
/>
</a>
<p s pi-color color="grey" class="not-found__note">
Si has llegado desde un enlace nuestro, cuéntanoslo.
</p>
</div>
</main>
`,
})
export class NotFound {}