UI componentry for IIIF Collections
Bloom is still in alpha development. It is not recommend adding this into production projects yet.
Install the component from your command line using npm install
,
npm install @samvera/bloom-iiif
OR if you prefer Yarn, use yarn add
.
yarn add @samvera/bloom-iiif
Add the BloomIIIF component to your jsx
or tsx
code.
import BloomIIIF from "@samvera/bloom-iiif";
Minimal usage providing the <BloomIIIF/>
component with an external manifest.
const collectionId = `https://raw.githubusercontent.com/samvera-labs/bloom-iiif/main/public/fixtures/iiif/collection/masks-of-antonio-fava.json`;
return <BloomIIIF collectionId={collectionId} />;
Bloom accepts both Presentation API 2.x and Presentation API 3.0 Collections.
The top-level Collection 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."
]
}
The top-level Collection homepage 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"
}
]
The items array is mapped to the slider/carousel with each item rendering as 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"
}
]
}
]
For each item, the label and summary (if existing) data are mapped to a <figcaption>
"label": { "none": ["Pantalone classico"] }
"summary": { "none": ["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
}
]
The homepage 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"
}
]
Bloom IIIF is built with:
This will open up a local dev server with live reloading.
npm install
npm run dev
This will build and package the component
npm run build
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
This project is available under the MIT License.