ehoandClaude Sonnet 5
630d68045f
The page held six teaching sections and a 142-line `styles:` block, at 471 effective lines against a limit of 250. It is now 36 lines of composition. Angular scopes a component's CSS to markup that component rendered, so the split had to move each rule to its owner. `concept-card` owns the card vocabulary and renders it. `.app-code`, `.app-lead`, `.app-cols` and `.app-note` become globals, because their targets are projected or arrive through `[innerHTML]`. That constraint exposed a live bug. The syntax-highlighting rules compiled to `pre[_ngcontent-%COMP%] .k[_ngcontent-%COMP%]`, but `highlight-ts` injects the `.k`/`.s`/`.c` spans through `[innerHTML]`, so they carry no scope attribute and the rule never matched. Keywords, strings and comments have always rendered in the plain foreground colour. The rules are global now, on five new `--app-code-*` tokens. Widen the colour guard while here: it scanned only `*.component.ts`, so every `*.page.ts`, `*.section.ts` and `*.step.ts` was invisible to it. That is how this page collected 21 hardcoded colours. One other file needed a fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
|
|
import { UnionsSection } from './unions.section';
|
|
import { RemoteDataSection } from './remote-data.section';
|
|
import { ParseSection } from './parse.section';
|
|
import { FormMachineSection } from './form-machine.section';
|
|
import { VragenlijstSection } from './vragenlijst.section';
|
|
import { PiiSection } from './pii.section';
|
|
|
|
/** Teaching showcase: each section pairs the impossible-state-permitting "before"
|
|
with the "after" where the type system rules it out. Composition-only. */
|
|
@Component({
|
|
selector: 'app-concepts-page',
|
|
imports: [
|
|
PageShellComponent,
|
|
UnionsSection,
|
|
RemoteDataSection,
|
|
ParseSection,
|
|
FormMachineSection,
|
|
VragenlijstSection,
|
|
PiiSection,
|
|
],
|
|
template: `
|
|
<app-page-shell heading="Onmogelijke toestanden onmogelijk maken" backLink="/dashboard">
|
|
<p class="app-lead">
|
|
Vijf functionele patronen die atomic design makkelijker maakt om te tonen — telkens "fout"
|
|
(de oude vorm liet het toe) naast"goed" (het type maakt het onmogelijk).
|
|
</p>
|
|
<app-concepts-unions-section />
|
|
<app-concepts-remote-data-section />
|
|
<app-concepts-parse-section />
|
|
<app-concepts-form-machine-section />
|
|
<app-concepts-vragenlijst-section />
|
|
<app-concepts-pii-section />
|
|
</app-page-shell>
|
|
`,
|
|
})
|
|
export class ConceptsPage {}
|