feat(demo): code and config views on every example, and drop picsum

examples/stackblitz/src/main.ts

@@ -22,11 +22,36 @@ interface Photo {
 /** Deterministic sizes, so the grid looks the same every time it boots. */
 const HEIGHTS = [300, 520, 260, 440, 310, 580, 350, 420, 280, 500, 330, 460];
 
+/**
+ * A generated image, as a data URI.
+ *
+ * Deliberately not a photo service. An external image host makes the example
+ * depend on someone else's uptime, rate limits and CORS policy — and when it is
+ * slow, the very first thing a visitor sees is an empty grid. These render
+ * instantly, work offline, and still exercise the decode path the grid waits on.
+ */
+function artwork(id: number, width: number, height: number): string {
+  const hue = (id * 47) % 360;
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">` +
+    `<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">` +
+    `<stop offset="0" stop-color="hsl(${hue} 70% 62%)"/>` +
+    `<stop offset="1" stop-color="hsl(${(hue + 60) % 360} 70% 44%)"/>` +
+    `</linearGradient></defs>` +
+    `<rect width="${width}" height="${height}" fill="url(#g)"/>` +
+    `<circle cx="${width * 0.75}" cy="${height * 0.27}" r="${width * 0.12}" ` +
+    `fill="hsl(${hue} 90% 88%)" opacity="0.45"/>` +
+    `<circle cx="${width * 0.22}" cy="${height * 0.75}" r="${width * 0.08}" ` +
+    `fill="hsl(${(hue + 180) % 360} 90% 90%)" opacity="0.35"/>` +
+    `</svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
 function makePhoto(id: number): Photo {
   const height = HEIGHTS[id % HEIGHTS.length];
   return {
     id,
-    url: `https://picsum.photos/seed/masonry-${id}/400/${height}`,
+    url: artwork(id, 400, height),
     title: `Photo ${id}`,
     width: 400,
     height,

projects/demo/src/app/app.css

@@ -1,19 +1,12 @@
-:host {
-  display: block;
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 32px 24px 96px;
-}
-
 .masthead {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
-  padding-bottom: 18px;
   margin-bottom: 26px;
   border-bottom: 1px solid var(--line);
+  padding: 10px 10px;
 }
 
 .masthead h1 {
@@ -52,3 +45,7 @@ nav a.active {
   color: var(--accent);
   font-weight: 600;
 }
+
+main {
+  padding: 20px 10px;
+}

projects/demo/src/app/example-frame.ts

@@ -0,0 +1,149 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+
+type Panel = 'none' | 'config' | 'code';
+
+/**
+ * The shell every example sits in: a description, a toggle for the controls, a
+ * toggle for the source, and a copy button.
+ *
+ * The preview is never hidden. Tabs that swap the grid out would take it to
+ * `display: none`, where it measures zero and has to lay out again on the way
+ * back — a flicker caused entirely by the demo, in the one place a visitor is
+ * judging whether the layout is steady. So the panels open *above* a preview
+ * that stays mounted, which also lets you read the code and watch the result at
+ * the same time.
+ */
+@Component({
+  selector: 'demo-example',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="lede-slot">
+      <ng-content select="[lede]" />
+    </div>
+
+    <div class="toolbar" role="group" aria-label="example views">
+      <button
+        type="button"
+        [class.on]="panel() === 'config'"
+        [attr.aria-pressed]="panel() === 'config'"
+        (click)="toggle('config')"
+      >
+        Config
+      </button>
+      <button
+        type="button"
+        [class.on]="panel() === 'code'"
+        [attr.aria-pressed]="panel() === 'code'"
+        (click)="toggle('code')"
+      >
+        Code
+      </button>
+
+      @if (panel() === 'code') {
+        <button type="button" class="copy" (click)="copy()">
+          {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+      }
+    </div>
+
+    <!-- The example supplies its own controls section, so it keeps the styling
+         it already had; this only decides whether it is shown. -->
+    <div [hidden]="panel() !== 'config'">
+      <ng-content select="[config]" />
+    </div>
+
+    @if (panel() === 'code') {
+      <pre class="code"><code>{{ code() }}</code></pre>
+    }
+
+    <ng-content select="[preview]" />
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+
+    .toolbar {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      margin: 0 0 14px;
+    }
+
+    .toolbar button {
+      padding: 5px 12px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      color: var(--muted);
+      font: inherit;
+      font-size: 0.82rem;
+      cursor: pointer;
+    }
+
+    .toolbar button:hover {
+      color: var(--text);
+    }
+
+    .toolbar button.on {
+      border-color: var(--accent);
+      color: var(--accent);
+      font-weight: 600;
+    }
+
+    .toolbar .copy {
+      margin-left: auto;
+    }
+
+    .code {
+      margin: 0 0 18px;
+      padding: 14px 16px;
+      max-height: 420px;
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: var(--panel);
+      font-size: 0.8rem;
+      line-height: 1.55;
+      tab-size: 2;
+    }
+
+    .controls {
+      margin-bottom: 18px;
+    }
+  `,
+})
+export class DemoExample {
+  /** The snippet shown under "Code", and what the copy button puts on the clipboard. */
+  readonly code = input.required<string>();
+
+  readonly panel = signal<Panel>('none');
+  readonly copied = signal(false);
+
+  toggle(which: Panel): void {
+    this.panel.update((current) => (current === which ? 'none' : which));
+  }
+
+  async copy(): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(this.code());
+    } catch {
+      // Clipboard access is refused in some embedded contexts (an iframe
+      // without permission, or plain http). Fall back to a selection the
+      // visitor can copy with the keyboard rather than failing silently.
+      const area = document.createElement('textarea');
+      area.value = this.code();
+      area.style.position = 'fixed';
+      area.style.opacity = '0';
+      document.body.append(area);
+      area.select();
+      try {
+        document.execCommand('copy');
+      } finally {
+        area.remove();
+      }
+    }
+    this.copied.set(true);
+    setTimeout(() => this.copied.set(false), 1600);
+  }
+}