Fill the remaining image placeholders

Start with the listed Markdown files and review each placeholder alongside the feature or guide it documents. Use the described local stack, playground, terminal runs, and existing Diagram components where specified; check each result against its placeholder description. Done means every remaining placeholder has a suitable screenshot, diagram, or video, or a documented decision to drop it.

71 image placeholders remain after filling two with the template README's edit-mode screenshot (/images/docs/edit-mode.png, in installation and Core Concepts › The Admin Panel). Each needs a screenshot, a diagram or a short video, or a decision to drop it.

Most screenshots can come from the template's local stack (bin/up, then sign in as admin/admin) or the preview.cwa.rocks playground. The terminal ones (create-cwa prompts, bin/up, deploy logs) need a real run. Diagrams can use the site's existing Diagram/ components.

content/1.getting-started/2.installation.md (3)

• L49 (image): The create-cwa prompts in a terminal, ending with the Docker check reporting port 5432 in use by another Compose project and the command to stop it
• L89 (image): A terminal at the end of bin/up, with each step's done in …s line and the Site, Sign in, Admin and Emails lines
• L144 (image): The freshly scaffolded site at https://localhost with the fixture content loaded — the first thing a reader should see working

content/1.getting-started/3.key-ideas.md (1)

• L8 (image): One page in edit mode, labelled: the layout around the edge, the page inside it, two component groups outlined, and a component selected with the manager panel open below

content/2.core-concepts/1.architecture.md (1)

• L35 (diagram): A sequence diagram of the steps below, with lanes for the browser, the Nuxt module and the API: the route and manifest requests going out in parallel, the Route resolving to a Page or PageData record, then the layout, pa

content/2.core-concepts/3.layouts-and-pages.md (1)

• L103 (image): The /_cwa/layouts admin listing with several layouts, and a page's settings showing which layout it is assigned

content/2.core-concepts/4.dynamic-pages.md (1)

• L93 (image): /_cwa/data listing the available PageData types, and a type's record list beneath it (e.g. every blog article)

content/2.core-concepts/6.draft-and-publish.md (2)

• L8 (diagram): The draft and published twins of one component: an editor's changes going to the draft, visitors reading the published version, and Publish copying the draft over the published version
• L26 (image): A component in the manager panel showing an unpublished draft state alongside the Publish action

content/2.core-concepts/7.admin-panel.md (13)

• L23 (image): The admin bar across the top of a live page — Edit/Done toggle, the admin menu open on its Layouts, Pages, Data, Routes, Users and Settings links, the current page's name with its settings cog, and the API loading indica
• L38 (image): The right-click context menu over a nested component, listing the resource stack under the cursor (component → position → group) so a parent can be selected
• L50 (image): The "Add Component" dialog listing the available component types for a group, with one highlighted
• L86 (image): Clone mode on a live page: the "Cloning: Call to action — “Book a demo”" bar with its hint and Cancel button under the admin bar, the Enable Navigation toggle in the admin bar, one instance of the component with a solid
• L125 (image): The Clone Here dialog over a group inside the component being cloned: Add before and Add after greyed out, "This is inside the component being cloned" listed once above them, and the layout scope message at the top
• L157 (image): The Move dialog on another page, titled "Move next to “Our services”", with the yellow "This takes it out of the layout: it will no longer appear on other pages" warning above Add before and Add after
• L181 (image): A selected shared component with the "Shared · 3 places" badge open beside the publish button, listing "Layout: primary on every page using it" and two linked pages, one marked "This page", and the component's other inst
• L191 (image): The manager panel with several admin tabs along the top, one tab's form fields visible, and the Publish button
• L212 (image): The Publish tab for a scheduled draft: the "Scheduled" state, the Schedule toggle switched on, the date picker with a date and time, and the Schedule and Cancel schedule buttons
• L245 (image): The "Delete this component?" dialog: "This component is used in 3 locations." with the Remove from this location only button focused, the red Delete from all 3 locations button, and Cancel
• L259 (image): The route path editor showing the read-only parent prefix beside the editable suffix field, with the SEO path recommendation below it
• L285 (image): The route editor's Visibility select set to "Scheduled", with the "Goes live" date and time field and its calendar button
• L299 (image): A route entry showing both redirect sections — "Forward visitors to" with a target selected, and the "Incoming redirects" list beneath it

content/2.core-concepts/8.caching.md (1)

• L31 (diagram): Diagram placeholder: a layer diagram in the style of DiagramCiPipeline. Left to right: browser and service worker, Cloudflare (dashed, optional), Caddy with Souin, then Nuxt SSR and the API side by side. Arrows for

content/3.guides/0.index.md (1)

• L12 (image): the finished guide site in edit mode: the landing layout's banner, a two-column page template, a Quote component selected, and a news article page.

content/3.guides/1.your-first-layout.md (2)

• L24 (image): The finished /landing page in edit mode, with the landing layout's banner component group outlined and its + hotspot visible
• L119 (image): Admin create layout form with the reference landing and Landing Layout chosen as the Layout UI

content/3.guides/2.your-first-page-template.md (2)

• L10 (image): The two-column page template in edit mode, with the main and aside component groups outlined, each with a + hotspot
• L83 (image): Admin create page form with Two Column Page as the Page UI and the landing layout selected

content/3.guides/3.your-first-component.md (3)

• L8 (image): The /landing page with a Quote in its main group: the quote text in italics with the author below it
• L31 (image): The npx cwa make:component prompts in a terminal — name, type and API behaviour questions — ending with the generated file path and the php bin/console make:api-component Quote --publishable command it prints
• L115 (image): The manager panel open on a Quote component, showing the "Quote" admin tab with its text and author inputs

content/3.guides/4.alternative-ui-variants.md (2)

• L53 (image): The manager panel's UI tab showing the style picker — the named options from styles.classes as a single-select list, with one applied
• L157 (image): The same component rendered twice side by side — the default template and its ui/ variant — to show how far a UI template can diverge from a style class

content/3.guides/5.your-first-dynamic-page.md (2)

• L14 (image): Two news article pages side by side, /news/first-article and /news/second-article, with the same landing layout and two-column structure but a different quote in each main group
• L93 (image): The Add Component dialog on the template page, with Dynamic selected, News Articles as the Data type and Article Quote as the Field

content/4.api/08.data-fixtures/2.writing-a-scaffold.md (1)

• L101 (image): Image: a generated scaffold open in an editor beside the admin's page list, with each method matching a layout or page.

content/4.api/08.data-fixtures/4.seeding-content.md (1)

• L130 (image): Image/video: screen recording of doctrine:fixtures:load seeding an image component, then that image rendering in the admin.

content/4.api/08.data-fixtures/5.appending.md (1)

• L56 (image): Image/video: terminal output of doctrine:fixtures:load --append run twice, the first run showing created … and the second with no created part.

content/4.api/11.orphaned-data.md (1)

• L8 (image): Image: the admin's /_cwa/orphaned page, showing the orphaned resources report above the orphaned files report.

content/5.nuxt-module/03.building-your-ui/2.creating-page-templates.md (1)

• L136 (video): a client-side navigation between two CWA pages, with the loading bar filling as the page's components load and finishing as the new page appears

content/5.nuxt-module/04.component-helpers/1.images-and-uploads.md (1)

• L113 (image): The browser's network panel on a high-density screen, showing the image request for the large variant rather than the original upload

content/5.nuxt-module/04.component-helpers/4.rich-text-editor.md (1)

• L80 (image): Image placeholder: the editor's selection menu for a field with config set to bold, italic and link only, next to the full menu with all seven buttons.

content/5.nuxt-module/05.cwa-components/1.cwa-component-group.md (1)

• L293 (image): The manager panel's Group tab for a full group: Add to start and Add to end disabled, with the "This group holds at most 1 component" hover text showing

content/5.nuxt-module/9.cwa-layer/5.date-pickers.md (1)

• L33 (image): CwaUiDatePicker with its calendar popover open: the date and time segments and the calendar button inside the field, and the month grid below with the month and year controls

content/5.nuxt-module/9.cwa-layer/6.maintenance.md (5)

• L60 (image): The admin bar with the orange warning icon and its count beside the Edit button, and the Stranded component groups modal open: one group listed by its old reference with its components, the "Merge into…" select, and the
• L80 (image): Site settings with the "Orphaned resources discovered" notice and its Review now button at the top, and the Orphaned resources section showing the Components and Files last scan times, Scan now, Scan files and Review orp
• L97 (image): The /_cwa/orphaned page: the last scan time with Scan again and Delete everything, then the Components section with a row expanded by View to show its JSON, and the Delete all button beside the section heading
• L123 (image): The /_cwa/orphaned page after a delete: "Deleted 1 component and 1 component position, including anything they contained." above the buttons, with one IRI listed as "Kept: it is in use again, or it is a draft."
• L149 (image): The Files report on /_cwa/orphaned: its last scan time with Scan files and Delete everything, the Orphaned files section with path and adapter rows and Delete buttons, the Unknown files section with its explanation, a Mi

content/5.nuxt-module/91.pwa.md (2)

• L174 (diagram): Diagram: request flow through the three tiers — browser → SW (cacheWillUpdate gate) → shared edge cache (Souin) → API — showing where a private, no-store response is dropped.
• L265 (image): Screenshot: the app loaded offline (DevTools → Network → Offline) showing last-known content and an offline indicator.

content/5.nuxt-module/92.page-caching.md (3)

• L42 (image): Screenshot: DevTools → Network showing a page response's Cache-Control and Surrogate-Key headers.
• L101 (image): Screenshot: site settings with the Purge all cached data button and its confirmation dialog.
• L132 (image): The page settings modal's Info tab with the "Purge this page's cache" button and the success message beside it

content/6.deployment/0.index.md (2)

• L21 (diagram): a diagram of the first deploy: a cluster with ingress-nginx and cert-manager, a push to main deploying staging, DNS pointing at the ingress, then the manual production job.
• L137 (image): a cache warm's log after a first production deploy, every page 200, with its time to first byte.

content/6.deployment/2.scaled-mode.md (3)

• L14 (diagram): two diagrams side by side. Left, the default: one php pod holding its own cache and Mercure hub. Right, scaled mode: two or three php pods behind the API Service, all reading and writing one Redis cache, publishing to on
• L155 (image): a node drain in scaled mode: two php pods on two nodes, the drain evicting one, the PDB refusing to evict the second until the replacement is ready.
• L191 (image): a scaled deploy's log, showing the warm finishing and then the line Scaled mode: the API cache is shared in Redis.; beside it, the GitHub run summary with the red "API cache not shared" annotation from a failed check.

content/6.deployment/3.migrations-and-backups.md (2)

• L60 (image): the migrations plan production job's log, with the pending migrations, their SQL and the closing "migration(s) pending" line.
• L260 (image): a production job log from a maintenance window: maintenance on, the backup path, the migrations, the rollout, the flush and warm, and "Maintenance mode is off."

content/6.deployment/5.cloudflare.md (4)

• L24 (image): Cloudflare's SSL/TLS overview with the encryption mode set to Full (strict).
• L125 (image): the rate limiting rule editor with a path rule for /_api, counted per IP over 10 seconds.
• L228 (image): the Cache Rules page with the eligible rule for page HTML, showing the expression, the Edge TTL set to "Use cache-control header if present, bypass cache if not" and the Browser TTL set to "Respect origin".
• L408 (image): the new zone's DNS records page with every record set to DNS only, next to SSL/TLS → Edge Certificates showing the Universal certificate not yet active.

content/6.deployment/5.origin-protection.md (1)

• L10 (image): a request flow through Caddy: tracking parameters stripped, then the query allowlist, then the Souin cache, with the rate limit counting only misses, and ingress-nginx's optional outer limit in front.

content/6.deployment/6.load-testing.md (1)

• L45 (image): a terminal showing a smoke run against https://localhost, from the start banner to the summary.

content/6.deployment/6.performance-audit.md (1)

• L62 (image): Screenshot: the summary of a GitHub Performance audit run, showing the per-page table (page, device, score, LCP, FCP, TBT, CLS, Speed Index, weight, with ✓/✗/⚠ budget marks) and the "Performance audit" warning annota

content/6.deployment/6.reading-lighthouse-scores.md (1)

• L23 (image): a Lighthouse mobile report for a CWA page, with the metrics section expanded and the JSON viewer open on audits.metrics.details.items[0], highlighting the observed and estimated FCP side by side.

content/6.deployment/7.browser-tests.md (1)

• L37 (image): the Playwright HTML report from a passing browser tests job, with the list of tests.

content/6.deployment/7.faster-functional-tests.md (1)

• L97 (image): Image placeholder: a bar chart of the four reset strategies in ms per scenario, with the truncate-mode purger standing out.