Skip to Content

SeeAlso

<Clover.SeeAlso /><clover-see-also>0.6 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

Descriptions of the resource meant for machines, such as its record as JSON, as a list of links.

<Clover.Root iiifContent={url}>
  <Clover.SeeAlso />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-see-also></clover-see-also>
</clover-root>

API reference

Reads seeAlso from the Root’s resource and renders a ul: a link to each description, named by its label or else its address, with its format after it. It renders nothing while there is none, and its other props go to the ul.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose seeAlso: the resource’s, or the Canvas the reader is on.
value{ id, label, format }[]—Descriptions to show instead of the Root’s, as IIIF gives them.
classNamestring—Added to clover-see-also.

<clover-see-also>

See also: machine-readable descriptions elsewhere, as a list of links.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Descriptions, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
.valuestring | Array<{ id: string; label?: Record<string, string[]>; format?: string }> | null—As a property: Descriptions, instead of the root's.

Examples

Outside a Root

Give it value, the descriptions as IIIF gives them, and it needs no Root<clover-root>.

<Clover.SeeAlso
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/46dc28d1-9d59-4160-a511-72418f70cffc",
      type: "Dataset",
      label: {
        none: ["Northwestern University Libraries Digital Collections API"],
      },
      format: "application/json",
    },
  ]}
/>
<clover-see-also
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/works/46dc28d1-9d59-4160-a511-72418f70cffc","type":"Dataset","label":{"none":["Northwestern University Libraries Digital Collections API"]},"format":"application/json"}]'></clover-see-also>

Without a label

A description without a label is named by its address. Its address wraps, with nowhere else to break, rather than pushing the page sideways.

<Clover.SeeAlso
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/24157482-0c2c-4907-8d25-7905adc3cfd9",
      type: "Dataset",
      format: "application/json",
    },
  ]}
/>
<clover-see-also
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/works/24157482-0c2c-4907-8d25-7905adc3cfd9","type":"Dataset","format":"application/json"}]'></clover-see-also>

Previous versions

Clover 3.x › SeeAlso

  • seeAlso is value: inside a Root<clover-root>, leave it out.
  • Always a ul: no as.
  • 3.x’s lang is the Root’s language.