refactor: split concepts.page into 6 sections, fix dead highlighting (RD-24)

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>
2026-09-04 23:44:01 +02:00
parent d5a7a25a78
commit 630d68045f
13 changed files with 908 additions and 488 deletions
@@ -0,0 +1,60 @@
+import { Component, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { parsePostcode } from '@registratie/domain/value-objects/postcode';
+import { ConceptCardComponent } from './concept-card.component';
+import { SNIPPETS } from './snippets.generated';
+import { highlightTs } from './highlight-ts';
+
+/** Section 3: parse, don't validate. After parsing, the TYPE remembers the value is valid.
+    Composition-only; owns its own postcode demo. */
+@Component({
+  selector: 'app-concepts-parse-section',
+  imports: [FormsModule, HeadingComponent, TextInputComponent, ConceptCardComponent],
+  template: `
+    <section class="app-section">
+      <app-heading [level]="2">3 · Parse, don't validate</app-heading>
+      <p class="app-lead">Na het parsen onthoudt het <em>type</em> dat de waarde geldig is.</p>
+      <div class="app-cols">
+        <app-concept-card
+          tag="Smart constructor → Result"
+          [code]="code['parse']"
+          [src]="src['parse']"
+        >
+          <app-text-input
+            inputId="pc"
+            [ngModel]="raw()"
+            (ngModelChange)="raw.set($event)"
+            name="pc"
+            placeholder="Typ een postcode, bijv. 1234 AB"
+          />
+        </app-concept-card>
+        @let r = parsed();
+        <app-concept-card [variant]="r.ok ? 'good' : 'bad'" [tag]="r.ok ? 'ok' : 'err'">
+          @if (r.ok) {
+            <div animate.enter="app-item-enter">
+              <pre class="app-code">Postcode ="{{ r.value }}"</pre>
+              <p class="app-note">
+                Een gevalideerde <code>Postcode</code> is een ander type dan een ruwe string.
+              </p>
+            </div>
+          } @else {
+            <div animate.enter="app-item-enter">
+              <pre class="app-code">{{ r.error }}</pre>
+            </div>
+          }
+        </app-concept-card>
+      </div>
+    </section>
+  `,
+})
+export class ParseSection {
+  raw = signal('');
+  parsed = computed(() => parsePostcode(this.raw()));
+
+  protected readonly code: Record<string, string> = { parse: highlightTs(SNIPPETS['parse']) };
+  protected readonly src: Record<string, string> = {
+    parse: 'registratie/domain/value-objects/postcode.ts',
+  };
+}