v1.2.6

Works

Every manifest discovered in your configured IIIF collections becomes a static page at /works/<slug>.html. Slugs are generated from the manifest label; when duplicates appear we append a short hash to keep routes unique.

Page structure

  1. Hero + Viewer — <Viewer> renders the IIIF manifest via Clover. It hydrates in the browser but exposes a placeholder server-side so SSR stays safe.
  2. Metadata — The manifest label, summary, metadata, and requiredStatement are rendered as description lists. Metadata labels that match entries in canopy.yml → metadata gain facet links to /search pre-filtered by that label/value.
  3. References — <References /> shows Markdown pages that cite the work via the referencedManifests front matter field. This creates a two-way link between essays and works automatically.
  4. Related sliders — <RelatedItems /> renders per-facet sliders driven by the metadata labels in your configuration. On work pages it matches the manifest’s metadata first, so each slider shows a relevant value.

Customising the layout

Edit content/works/_layout.mdx to change headings, rearrange sections, or slot in new components. The layout receives the manifest via props.manifest, so you can read normalized Presentation 3 data and pass it into your own UI.

content/works/_layout.mdx
---layout: works--- <section className="space-y-10">  <header>    <h1>{props.manifest.label?.none?.[0]}</h1>    <p>{props.manifest.summary?.none?.[0]}</p>  </header>   <Viewer iiifContent={props.manifest.id} />   <section>    <h2>Metadata</h2>    <Metadata manifest={props.manifest} />  </section>   <section>    <h2>Contextual references</h2>    <References emptyLabel="Essays will appear here when they cite this work." />  </section>   <RelatedItems top={3} /></section>

<Metadata /> is the default component shipped in the starter; replace it or wrap it if you need a custom presentation (e.g., grouping fields, hiding empty entries, or translating labels). Any UI you import from @canopy-iiif/app/ui/server is SSR-safe.

Viewer options

<Viewer> accepts the same props described in the Viewer component docs. Common tweaks include options={{ showDownload: true }} or background adjustments. Avoid disabling pan/zoom controls unless there is a clear user need.

Required statements and rights

Required statements and attribution fields from the manifest appear in the metadata block by default. If your institution needs to surface additional license or rights links, extend the layout and append custom sections after <Metadata />.

Troubleshooting

  • Missing pages — confirm that the manifest is reachable from one of the configured collections and that the build log lists it under “Writing work pages”.
  • Broken viewer — run npm run dev and inspect the browser console; hydration errors usually point to missing React globals. The starter injects them in site/scripts/react-globals.js, so ensure that script loads on custom layouts.
  • Metadata facets not linking — make sure the label is listed verbatim (case-sensitive) under the metadata array in canopy.yml.