Standards
Documents / Printable Material pattern
Print-ready documents (adoption certificate, medical record, and any other org document), plus the /documents index that lists them — not embedded in a page like other patterns.
Documents Index
The `/documents` landing page — grouped links out to every printable document on the site.
Open live exampleCertificate of Adoption
A dedicated, ready-to-print certificate — required on every animal-rescue site per governance.
Open live examplePet Medical Record
A dedicated, ready-to-print medical record — required on every animal-rescue site per governance.
Open live exampleStandard
- Every site must have a `/documents` index (`DocumentsIndexSection`, or a site-local page using the same `.doc-page` markup) plus, at minimum, a Certificate of Adoption and a Pet Medical Record — required on every animal-rescue site per governance, even if empty groups are shown for document types not yet available.
- `AdoptionCertificateSection` and `PetMedicalRecordSection` are dedicated, purpose-built components — use them instead of hand-rolling a document layout for these two required document types.
- For any other printable document (foster agreement, volunteer agreement, educational guide, etc.), use `DocumentLayout` as a generic wrapper (`title`, `orgName`, `logoSrc`, `children`) rather than duplicating the print page shell — no live example above, since it renders whatever content a site passes as children, but the component exists and follows the same conventions as the two dedicated ones.
- All of these components render a self-contained, full-viewport `.doc-body`/`.doc-page` layout with its own `@page` print-size rule — like the Kennel & Display Tools, these are not meant to be embedded inside a normal page layout, and their routes are mounted outside the shared `SiteLayout`/`AppShell` wrapper so no site header or footer prints alongside the document.
- Every config comes from one shared `PrintableDocConfig` shape (`printable-doc-config.ts`): `orgName`, `orgTagline`, `logoSrc`, `adoptUrl`, `fosterUrl`, `contact`, optional `donation`, optional `social`. Build one config per site and reuse it across every document page — never duplicate org details per document.
- `src/styles/documents.css` holds the shared print-optimized styling; sites override its CSS variables (`--doc-primary`, `--doc-accent`, etc.) for brand colors, never the layout rules themselves.
- For a document that also needs to become an e-signature import template (e.g. uploaded to JotForm so it can overlay its own signature/date/address widgets), pass `mode="digital"` to `DocumentLayout` instead of duplicating the layout — it adds a `doc-page--digital` class that (1) removes the printed guide-lines and the `.field-open` block's border, since a ruled line or box is clutter under an imported widget, not a helpful guide — reserve blank space only; (2) relaxes `page-break-inside` at the section/clause level so the document can flow past the print version's page cap, while still pinning every individual field (`.field-row`, `.field-open`, `.clause-initials`) to `break-inside: avoid` so no field is ever split across a page boundary. Keep the e-sign vendor's name out of any user-facing label (link text, page title) — it's an implementation detail for this governance note, not something staff need to see when picking a document from the index.
- A document offered in both print and digital form should link both from one `/documents` index row, not two separate rows: the primary link goes to the print version, and each digital counterpart appears as a small `.doc-index-variant` pill (e.g. "E-Sign Version") inline next to it, wired via the item's optional `variants: { label, to }[]`.
- Document routes must be excluded from prerender/sitemap discovery via the `/documents` prefix in `PRERENDER_EXCLUDE_PREFIXES`/`SITEMAP_EXCLUDE_PREFIXES` on a real site (this template's own `/tools/*` documents examples are excluded the same way its other `/tools/*` routes are, for the same self-contained-page reason).
- When a print document's content changes, refresh its public PDF with `npm run gen:document-pdf -- <slug>` (`tools/gen-document-pdf.mjs`, requires the dev/preview server already running) instead of a manual browser Print-to-PDF — it renders the print-mode `/documents/<slug>` route (never a `-digital` variant) via a local Chrome/Chromium/Brave/Edge install's headless `--print-to-pdf` and writes straight to `public/documents/<slug>.pdf`, the exact file the Resources page (`src/pages/Resources.tsx`) links for download.
- Components: `template/src/components/patterns/DocumentsIndexSection.tsx`, `AdoptionCertificateSection.tsx`, `PetMedicalRecordSection.tsx`, `DocumentLayout.tsx`, `printable-doc-config.ts`
Template