Skip to Content

Homepage

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

The web pages about the resource, as a list of links.

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

API reference

Reads homepage from the Root’s resource and renders a ul: a link to each page, 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 homepage: the resource’s, or the Canvas the reader is on.
value{ id, label, format }[]—Pages to show instead of the Root’s, as IIIF gives them.
classNamestring—Added to clover-homepage.

<clover-homepage>

The homepage: the resource's own web page, 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)—Homepages, 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: Homepages, instead of the root's.

Examples

Several pages

A resource can have more than one homepage, and each is a link. This film’s are on Wikimedia Commons and in the National Archives Catalog.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <Clover.Homepage />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <clover-homepage></clover-homepage>
</clover-root>

Outside a Root

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

<Clover.Homepage
  value={[
    {
      id: "https://catalog.archives.gov/id/23769",
      type: "Text",
      label: { en: ["National Archives Catalog"] },
      format: "text/html",
    },
  ]}
/>
<clover-homepage
  value='[{"id":"https://catalog.archives.gov/id/23769","type":"Text","label":{"en":["National Archives Catalog"]},"format":"text/html"}]'></clover-homepage>

Previous versions

Clover 3.x › Homepage

  • A list, a link for each page, rather than one link.
  • homepage is value: inside a Root<clover-root>, leave it out.
  • Each link is an a, named by its label: no as or children.