@samvera/bloom-iiif

:construction: Under Development :construction:

Bloom is still in alpha development. We do not recommend incorporating this into projects yet. You can test it out locally with your IIIF collections.

Bloom IIIF

A slider component rendered from a IIIF Collection

---

Documentation

• Collection Anatomy
• Development

---

Collection Anatomy

Bloom accepts both Presentation API 2.x and Presentation API 3.0 Collections.

See Example Collection

Header

Text

The top-level label and summary (if existing) data is mapped to a Header sub-component

"label": {
  "none": ["Commedia dell'Arte: The Masks of Antonio Fava"]
}

"summary": {
  "none": [
    "The Commedia dell'Arte, the famous improvisational theatre style born in Renaissance Italy, remains a major influence in today's theatre. Antonio Fava is an actor, comedian, author, director, musician, mask maker and Internationally renowned Maestro of Commedia dell'Arte."
  ]
}

Link

The top-level hompage represents the href attribute wrapping an HTML <a> element on the Header label

"homepage": [
  {
    "id": "https://dc.library.northwestern.edu/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd",
    "type": "Text",
    "label": { "none": ["Commedia dell'Arte: The Masks of Antonio Fava"] },
    "format": "text/html"
  }
]

Items

The items array is mapped to the slider/carousel with each item render an HTML <figure>

"items": [
  {
    "id": "https://iiif.stack.rdc.library.northwestern.edu/public/72/98/fd/ce/-a/dc/1-/45/01/-9/e1/4-/9e/8b/d9/85/e1/49-manifest.json",
    "type": "Manifest",
    "label": { "none": ["Pantalone classico"] },
    "summary": { "none": ["Image"] },
    "thumbnail": [
      {
        "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/200,/0/default.jpg",
        "type": "Image",
        "format": "image/jpeg",
        "service": [
          {
            "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
            "profile": "http://iiif.io/api/image/2/level2.json",
            "type": "ImageService2"
          }
        ],
        "width": 200,
        "height": 200
      }
    ],
    "homepage": [
      {
        "id": "https://dc.library.northwestern.edu/items/7298fdce-adc1-4501-9e14-9e8bd985e149",
        "type": "Text",
        "label": { "none": ["Pantalone classico"] },
        "format": "text/html"
      }
    ]
  }
]

Text

For each item, the label and summary (if existing) data are mapped to a <figcaption>

"label": { "none": ["Pantalone classico"] },

"summary": { "none": ["Image"] },

Image

For each item, the thumbnail is rendered as an <img /> element within the <figure>

"thumbnail": [
  {
    "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/200,/0/default.jpg",
    "type": "Image",
    "format": "image/jpeg",
    "service": [
      {
        "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
        "profile": "http://iiif.io/api/image/2/level2.json",
        "type": "ImageService2"
      }
    ],
    "width": 200,
    "height": 200
  }
],

Link

The hompage for each item represents the href attribute of the HTML <a> element wrapping <figure>

"homepage": [
  {
    "id": "https://dc.library.northwestern.edu/items/7298fdce-adc1-4501-9e14-9e8bd985e149",
    "type": "Text",
    "label": { "none": ["Pantalone classico"] },
    "format": "text/html"
  }
]

---

Development

Bloom IIIF is built with:

• TypeScript
• ESBuild
• Vault
• Stitches

Environment

This will open up a local dev server with live reloading.

npm install
npm run dev

Build

This will build and package the component

npm run build

Notes

ESBuild compiles TypeScript to JavaScript, but does not do type checking. To view type checking errors (in addtion to what your IDE will be complaining about), run:

tsc

License

This project is available under the MIT License.