Annotation demo

A web application showcasing annotations in different categories in a simulated Mirador 3 environment.

The app is written in TypeScript using React and Material UI to keep the interface as close as possible to Mirador.

Vite is used as development server and build tool.

Installing

Node.js is required to build or develop the app.

Install the dependencies:

npm install

Developing

Start a development server:

npm run dev

Fast refresh is disabled for now because of this bug in Vite.

Building

Build a production version of the app:

npm run build

The build output can be found in dist.

dist/index.html is an example of a page with the app embedded. The app will mount a div with id="annotation-demo" and needs the linked .css and .js files as seen there.

You can preview the built app with npm run preview. This should not be used to serve the app in production.

Structure

• public contains static assets like the images of the Liber Floridus used in the demo.
• src contains the sourcecode of the
• src/main.tsx is the entrypoint of the React app.
• src/config.ts contains the available categories, their initial state and icon.
• src/annotations.json contains the annotations using the Web Annotation Data Model with an added category key that maps to the id key found in the categories in src/config.ts
• src/pages.json contains a simplified subset of an IIIF-manifest. The body.src in here maps to the files in public. The page id is used as target by the annotations in src/annotations.json.