eleventy-plugin-mirador

11ty plugin for embedding a Mirador IIIF viewer app.

Developed as part of the Islandty project.

Getting started

This is a plugin for Eleventy which instantiates a Mirador viewer for the given manifest.

Setup

Add the plugin to your Eleventy project:

npm install eleventy-plugin-mirador

Then add it to your Eleventy config file:

const embedMirador = require("eleventy-plugin-mirador");

module.exports = function(eleventyConfig) {
    ...
    eleventyConfig.addPlugin(embedMirador);
    ...

};

To embed a Mirador viewer onto any Markdown page, use the shortcode mirador and supply an id string and manifest URL as parameters

Markdown example:

Here is Mirador with an example IIIF manifest from Harvard:

{% mirador "my-mirador","https://mps.lib.harvard.edu/iiif/2/URN-3:FHCL.HOUGH:12007389" %}

Rendered result

Demo

To run the demo locally:

git clone https://github.com/alxp/eleventy-plugin-mirador.git
cd eleventy-plugin-mirador
npm install
npm run demo

This builds a minimal Eleventy site and serves it at http://localhost:8080, with a Mirador viewer embedded using the same IIIF manifest shown in the Markdown example above.

Advanced usage

Configurations

The following optional configurations can be used to alter the behaviour of this plugin. To change the configuration, set the target config object when adding the plugin in your eleventy config:

eleventyConfig.addPlugin(embedMirador, {
  miradorAppUrl: "https://unpkg.com/mirador@latest/dist/mirador.min.js",
  canvasIdPattern: "{manifestUrl}/canvas/{canvasIndex}",
  window: {
    sideBarPanel: 'info',
  },
  windows: [
    {
      thumbnailNavigationPosition: "far-bottom"
    }
  ]
});

The window and windows keys get passed directly to the Mirador instantiation JavaScript function. Currently this plugin assumes only a single manifest is loaded in a given instance.

To see the available configuration options you can go to https://github.com/ProjectMirador/mirador/blob/main/src/config/settings.js.

• miradorAppUrl — Where the browser will load the Mirador app from. Defaults to the official Mirador unpkg CDN URL.

• canvasIdPattern — A string pattern for constructing canvas IDs from the ?page=N query parameter. {manifestUrl} and {canvasIndex} are replaced at runtime. Defaults to "{manifestUrl}/canvas/{canvasIndex}", which matches the convention used by biiif and many other IIIF manifest generators.

Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

License

Maintainer

Alexander O'Neill - https://github.com/alxp / https://alxp.ca