Skip to Content

Metadata

<Clover.Metadata /><clover-metadata>1 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

The resource’s metadata, or the current Canvas’s, as a list of labels and values.

<Clover.Root iiifContent={url}>
  <Clover.Metadata
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(, minmax(0, 1fr))",
    }}
  />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-metadata
    style="display: grid; grid-template-columns: repeat(, minmax(0, 1fr))">
  </clover-metadata>
</clover-root>

API reference

Reads metadata from the Root’s resource and renders a description list, each label a dt and each value a dd. A value may be IIIF’s HTML. It renders nothing while there is no metadata. Its other props go to the dl.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose metadata: the resource’s, or the Canvas the reader is on.
value{ label, value }[]—Pairs to show instead of the Root’s. Outside a Root, the ones.
renderValue(item) => ReactNode—A value of your own; Clover’s where it returns undefined.
classNamestring—Added to clover-metadata.

<clover-metadata>

The metadata, as a description list of labels and their values.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Metadata, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
.valueArray<{ label: Record<string, string[]>; value: Record<string, string[]> }> | null—As a property: Metadata, instead of the root's.
.renderValue((item: { label: Record<string, string[]>; value: Record<string, string[]> }) => Node | string | null | undefined) | null—Your own drawing of a value: a node or text to show in its place, or undefined for Clover's. A new node each time.

Examples

Columns

Lay the pairs out with your CSS. Each is a div around its dt and dd, its label as data-label (date, alternate-title) for your selectors.

<Clover.Metadata
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(14rem, 1fr))",
  }}
/>
<clover-metadata
  style="
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  "></clover-metadata>

Pairs of your own

Give it value to show pairs you hold, in a Root<clover-root> or on its own.

<Clover.Metadata
  value={[
    { label: { none: ["Date"] }, value: { none: ["1896"] } },
    {
      label: { none: ["Publisher"] },
      value: { none: ["The White Sewing Machine Co."] },
    },
  ]}
/>
<clover-metadata
  value='[{"label":{"none":["Date"]},"value":{"none":["1896"]}},{"label":{"none":["Publisher"]},"value":{"none":["The White Sewing Machine Co."]}}]'></clover-metadata>

Values of your own

renderValue.renderValue is called with each pair: return what its dd holds, or undefined for Clover’s. Here each subject links to a search. A value you render carries no lang, so mark one in another language yourself.

import { Fragment } from "react";
 
function renderValue(item) {
  if (item.label.none?.[0] !== "Subject") return undefined;
  return (item.value.none ?? []).map((subject, index) => (
    <Fragment key={subject}>
      {index > 0 && ", "}
      <a href={`/search?subject=${encodeURIComponent(subject)}`}>{subject}</a>
    </Fragment>
  ));
}
 
<Clover.Metadata renderValue={renderValue} />;
<clover-metadata></clover-metadata>
 
<script type="module">
  document.querySelector("clover-metadata").renderValue = (item) => {
    if (item.label.none?.[0] !== "Subject") return undefined;
    const subjects = document.createDocumentFragment();
    (item.value.none ?? []).forEach((subject, index) => {
      if (index > 0) subjects.append(", ");
      const link = document.createElement("a");
      link.href = `/search?subject=${encodeURIComponent(subject)}`;
      link.textContent = subject;
      subjects.append(link);
    });
    return subjects;
  };
</script>

Previous versions

Clover 3.x › Metadata

  • metadata is now value; inside a Root<clover-root>, leave it out.
  • customValueContent is renderValue.renderValue.
  • A language’s values are joined with commas: no customValueDelimiter.
  • 3.x’s lang is the Root’s language.