Working proof · built for this proposal · Astro 5 + TypeScript

Donor Component Reuse, Without the Leaks

A two package Astro monorepo built to demonstrate the exact discipline this project demands: a donor component library powering a second brokerage site with its own brand, metadata, analytics and CMS models, and an automated gate proving that zero donor branding or configuration reaches the built output. Every result below is from real runs, reproducible from the repository.

Prepared by Yinka Aderibigbe.

01Architecture: the isolation boundary is a package boundary

astro-reuse-proof/
├── packages/donor-ui          the "existing production site" component family
│   ├── Hero.astro             all content by props, all color through CSS custom properties
│   ├── ReviewList.astro       static first, accessible, no DOM cloned slides
│   ├── PropertyCard.astro
│   ├── tokens.css             DONOR brand tokens   ← never imported by the new site
│   └── donor-site-config.ts   donor GA4 id, Turnstile key, site name ← never imported
└── apps/harborline            the new site (fictional brand, created for this demo)
    ├── src/styles/tokens.css  the ONLY brand tokens in the build
    ├── src/layouts/Layout     own metadata, canonical, GA4 id, favicon
    ├── src/content + data     cities collection, professionals, reviews, featured
    ├── public/admin/config.yml  Decap models mirroring the brief's profile fields
    ├── src/server/leadValidation.ts  honeypot, min submit timing, dedupe, formats
    └── tests/reuse.test.mjs   the automated gates below

Donor components carry zero embedded brand: content arrives by props, color by custom properties. The donor package still ships its own tokens and config, exactly like a real donor repository would, and the consumer simply never imports them. The gate then proves the negative.

02The automated gates all passing

$ node tests/reuse.test.mjs
PASS  donor leakage gate: 0 occurrences of 5 donor markers across 11 built files
PASS  JSON-LD valid on index.html (@type RealEstateAgent)
PASS  JSON-LD valid on professionals/amara-okafor/index.html (@type Person)
PASS  robots.txt and llms.txt shipped
PASS  review content appears exactly once (no DOM cloning)
PASS  lead validation: honeypot, min submit timing, format, duplicate replay all enforced

ALL GATES PASS

The leakage gate scans every built HTML, CSS, JS and text file for the donor brand name, donor GA4 id, donor Turnstile key, donor brand hex and donor font. It fails the build on a single occurrence. The same pattern extends to any marker list a real donor repository needs.

03Lighthouse, in the brief's own acceptance format

The QA loop, demonstrated on itself. The first audit run scored accessibility 95 desktop and 89 mobile and flagged two defects: insufficient contrast on the accent color and a console error from a missing favicon. Both were fixed in the consumer layer only, by darkening the Harborline accent token and adding the site favicon; the donor package was not touched. The re run produced the table above. That catch, fix in the right layer, re verify cycle is the working method, not a story about it.

04The result on screen

Open the live demo site to browse it directly; screenshots below for the record.

05Also in the repository

Decap CMS models mirroring the brief's professional profile fields (portrait, contact, biography with word guidance, specialties, areas, languages, credentials, individually toggled social links) plus cities, source verified reviews and featured properties with active flags and display order. A reusable city page template driven by a content collection. A typed server side lead validation pipeline covering honeypot, minimum submit timing, format checks and duplicate replay, unit tested, with Turnstile server verification and the owner webhook documented at the endpoint boundary. robots.txt and llms.txt shipped in the build.

Built August 31, 2026. Every gate result and Lighthouse figure above comes from real, repeatable runs against the built output, and the first audit run's findings and their fixes are recorded exactly as they happened. Harborline Realty is a fictional brand created for this demonstration. Repository available for the audit stage.