Overview

As the title suggests, this article describes how to add plugins such as mirador-image-tools to Mirador 3 and bundle them into a single JS file for distribution.

Due to my limited knowledge of JavaScript, there may be some inaccuracies. I would appreciate it if you could point out any mistakes.

Goal

The goal is to create an application like the one at the following URL by writing an HTML file as shown below. It uses Mirador 3 with the mirador-image-tools plugin enabled.

https://nakamura196.github.io/mirador-integration-alt/

The key point is the line marked with  in the source code above. By loading a single JS file, you can use both Mirador 3 and the mirador-image-tools plugin.

Also note that Mirador and miradorImageToolsPlugin are accessed through a variable called integration. There is room for improvement on this point in the future.

Below, I will explain how to use and create this JS file.

Usage

Using the Pre-built Version

As with the HTML file described above, you can use it by referencing the following JS file URL.

https://nakamura196.github.io/mirador-integration-alt/dist/main.js

Building and Using

I created the following GitHub repository.

https://github.com/nakamura196/mirador-integration-alt

This repository was created based on the official repository.

First, clone the repository.

Next, install the required libraries.

Then, run webpack as follows.

A file called main.js will be created in the dist folder (it should already exist when you clone the repository).

Customization

The following file uses Mirador and the mirador-image-tools plugin. You can customize it by adding other plugins here.

https://github.com/nakamura196/mirador-integration-alt/blob/main/src/index.js

Summary

I described how to add plugins such as mirador-image-tools to Mirador 3 and bundle them into a single JS file for distribution. There may be some inaccuracies, but I hope you find this helpful.

Overview#

Goal#

Usage#

Using the Pre-built Version#

Building and Using#

Customization#

Summary#