Primitives

A part for each IIIF descriptive property, to place anywhere in a layout or use on its own.


<Clover.Root iiifContent={url}>
  <Clover.Thumbnail size={160} alt="" />
  <Clover.Label as="h2" />
  <Clover.Summary />
  <Clover.Rights />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-thumbnail size="160" alt=""></clover-thumbnail>
  <clover-label as="h2"></clover-label>
  <clover-summary></clover-summary>
  <clover-rights></clover-rights>
</clover-root>

The parts

Inside a Root<clover-root>, each reads its property from the resource, or with of="canvas" from the Canvas the reader is on, wherever it sits in your markup. Give it a value (a label, for Label<clover-label>), and it shows that instead, in a Root<clover-root> or on its own. With nothing to show, it renders nothing.

Label<clover-label>: label, as text.
Thumbnail<clover-thumbnail>: thumbnail, as an image named by its label.
Summary<clover-summary>: summary, cut short with Read more.
Metadata<clover-metadata>: metadata, as a list of labels and values.
RequiredStatement<clover-required-statement>: requiredStatement, the text that must be shown with the resource.
Rights<clover-rights>: rights, as a link to the license or rights statement.
Homepage<clover-homepage>: homepage, the resource’s own web page.
SeeAlso<clover-see-also>: seeAlso, descriptions of it elsewhere.
Rendering<clover-rendering>: rendering, other formats of it, such as a PDF.
PartOf<clover-part-of>: partOf, the Collections it belongs to.
Id<clover-id>: id, as a link to its IIIF JSON.
Provider<clover-provider>: provider, who provided it, each with its logo and its name, linked to its homepage. A compound part: the parts in it read that provider.
Logo<clover-logo>: a provider’s logo, named by the provider.
Value<clover-value>: any IIIF language map you hold, read by its format.

The Panel’s About section shows several of them together.

Languages

Text is read in the Root’s language, else the page’s <html lang>, else the browser’s languages: the closest language the value has (fr for a reader in fr-CA), else its none, else the first it has. A language’s several values are joined with commas.

Each element carries the language its text is in as lang, so assistive technology reads it in that language. Text in none carries no lang, and takes the page’s.

HTML

IIIF allows a little HTML in its values. A value is HTML when it runs from a first < to a last >, as IIIF’s rule has it; any other value is shown as written, its line breaks kept.

Summary<clover-summary>, the values of Metadata<clover-metadata> and RequiredStatement<clover-required-statement>, and Value<clover-value> show HTML. Label<clover-label>, a link’s label and a thumbnail’s alt are plain text.
HTML is limited to what the Presentation API allows: a, b, br, i, img, p, small, span, sub and sup, with links to http:, https: and mailto: only. lang and dir are kept, so a value can mark a phrase in another language.
The sanitizer, DOMPurify (about 9 kB gzip), loads only when a value carries markup. Until it arrives, the value shows as plain text.
In Summary<clover-summary>, Metadata<clover-metadata> and RequiredStatement<clover-required-statement>, links are underlined, and long unbroken text wraps.