add clover iiif viewer with patched @iiif/vault

[alexandergknoll]

@garrettdashnelson

I was able to get Clover working by patching the upstream version of @iiif/vault using patch-package. It's frankly a bit of a dirty hack that assumes the requesting URL is always correct and ignores the id / @id attributes on the manifest. I'm not sure if you foresee any issues with that, but it does seem to work in my testing.

[netlify]

✅ Deploy Preview for argo-astro-dev ready!

Name	Link
🔨 Latest commit	2aa7adc
🔍 Latest deploy log	https://app.netlify.com/sites/argo-astro-dev/deploys/659e999af9625d000829f170
😎 Deploy Preview	https://deploy-preview-28--argo-astro-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[garrettdashnelson]

This is awesome. I am perfectly comfortable with using this patch, and it seems like it will be pretty straightforward to drop the patch dependency if and when we resolve the underlying issue with @iiif/vault and @samvera/clover-iiif.

One tiny request before I merge this in: Can you set the enclosing element for the IIIF viewer to have a default larger height, to avoid the layout shift that occurs when the viewer loads and populates?

[alexandergknoll]

@garrettdashnelson no problem! Added that change and a few minor style tweaks:

• Centered and increased text size for "Loading" message
• Added rounded corners to the main map paint container for style consistency with the rest of the site

[garrettdashnelson]

💯💯 looks amazing.

[mathewjordan]

@garrettdashnelson @alexandergknoll Hey all. I'm one of the developers of Clover at Northwestern. This looks fantastic and we're excited to see Clover adopted here. Is the issue in Clover or Vault's fetching of the IIIF resource?

[mathewjordan]

I see this is related to samvera-labs/clover-iiif#141 submitted a few months back. I'll try to recapture the thread there. Any additional insight from your end would be welcomed of course!

One note on the Clover implementation as well. The default OpenSeadragon canvas can annoyingly capture the cursor of the user when scrolling a page. To get around this, you can disable the default scrollToZoom behavior of OpenSeadragon by with the openSeadragon option:

<Viewer
  iiifContent={props.manifest}
  options={{
    openSeadragon: {
      gestureSettingsMouse: {
        scrollToZoom: false,
      }
    }
  }}
/>