Overview
As a learning exercise for Headless CMS, I attempted to generate IIIF manifests from information registered in a CMS.
Here are the results. (That said, the server-side processing details are not visible from the app below.)
https://iiif-headless-cms.vercel.app/
This article serves as a memorandum of the above effort.
Contentful
I created a Content model called iiif as shown below. For associating image data (url, width, height), both the “JSON object” and “Reference” fields seemed usable, but I chose “Reference” here and created a separate Content model called image to manage image data information.
The API that converts and returns data in IIIF manifest format was created using Nuxt 3.
I was able to connect easily by using the following library.
https://www.npmjs.com/package/contentful
microCMS
I created a similar schema in microCMS as well.
I created a custom field to store image data as shown below.
By adding this custom field to the iiif schema in a repeatable format, I was able to store image-related information as shown below.
The exported schema data is as follows.
The processing to convert to IIIF manifest format is as follows.
https://github.com/nakamura196/iiif-headless-cms/blob/main/server/api/iiif/microcms/[id]/manifest.ts
The code is slightly different from Contentful, but I was also able to connect easily using the following library.
https://www.npmjs.com/package/microcms-js-sdk
Summary
This time I tried using two Headless CMS services. Although I only used them at a basic level, I found them very easy to use.
I thought it could also be useful to create a digital archive system like Omeka using a frontend framework + Headless CMS.
Regarding the app introduced at the beginning, since server-side program execution was required, it was implemented using Nuxt 3’s SSR. For hosting, I used Vercel, but since it was my first time, I was a bit confused about build settings and enabling CORS, so I plan to introduce the configuration methods in a separate article.