DEV-16535: Add is-land to quire figures, quire-figure.webc regression fixes

packages/11ty/.eleventy.js

@@ -205,7 +205,12 @@ module.exports = function(eleventyConfig) {
    */
   if (process.env.ELEVENTY_ENV === 'production') eleventyConfig.addPassthroughCopy(publicDir)
   eleventyConfig.addPassthroughCopy(`${inputDir}/_assets`)
-  eleventyConfig.addPassthroughCopy({ '_includes/web-components': '_assets/javascript' })
+  eleventyConfig.addPassthroughCopy({ '_includes/web-components': '_assets/javascript/' })
+
+  /**
+   * Manually copy `is-land` module into client package
+   */
+  eleventyConfig.addPassthroughCopy({ 'node_modules/@11ty/is-land/is-land.js': '_assets/javascript/is-land.js' })
 
   /**
    * Watch the following additional files for changes and rerun server

packages/11ty/_components/figure-image.webc

@@ -3,13 +3,13 @@
     Nota bene: `webc:is` does not support dynamic values (see 11ty/webc#143);
     use webc conditional statements and call the `attributes` function multiple times rather than using a fancier pattern of implementation.
   --->
-  <canvas-panel webc:if="isCanvas(id)" @attributes="attributes(id, image_dir).canvasPanel"></canvas-panel>
-  <image-service webc:elseif="isImageService(id)" @attributes="attributes(id, image_dir).imageService"></image-service>
-  <image-sequence webc:elseif="isSequence(id)" @attributes="attributes(id, image_dir).imageSequence"></image-sequence>
-  <image-tag webc:else @attributes="attributes(id, image_dir).imageTag"></image-tag>
+  <canvas-panel webc:if="isCanvas(id, is_static)" @attributes="attributes(id, image_dir, is_static, preset).canvasPanel"></canvas-panel>
+  <image-service webc:elseif="isImageService(id, is_static)" @attributes="attributes(id, image_dir, is_static, preset).imageService"></image-service>
+  <image-sequence webc:elseif="isSequence(id, is_static)" @attributes="attributes(id, image_dir, is_static, preset).imageSequence"></image-sequence>
+  <image-tag webc:else @attributes="attributes(id, image_dir, is_static, preset).imageTag"></image-tag>
 </template>
 <script webc:setup>
-const attributes = (id, image_dir) => {
+const attributes = (id, image_dir, is_static, preset_override) => {
   const {
     alt,
     canvasId,
@@ -22,6 +22,7 @@ const attributes = (id, image_dir) => {
     region,
     src,
     startCanvas,
+    staticInlineFigureImage,
     textEnabled,
     textSelectionEnabled,
     virtualSizes,
@@ -34,7 +35,7 @@ const attributes = (id, image_dir) => {
       height,
       'iiif-content': iiifContent,
       'manifest-id': manifestId,
-      preset,
+      preset: preset_override || preset,
       region,
       'virtual-sizes': virtualSizes,
       width
@@ -43,7 +44,7 @@ const attributes = (id, image_dir) => {
       id,
       'manifest-id': manifestId,
       margin,
-      preset,
+      preset: preset_override || preset,
       'start-canvas': startCanvas,
       'text-enabled': textEnabled,
       'text-selection-enabled': textSelectionEnabled
@@ -54,12 +55,13 @@ const attributes = (id, image_dir) => {
     imageTag: {
       alt,
       image_dir,
-      src
+      src: is_static && !src ? staticInlineFigureImage : src
     }
   }
 }
 
-const isCanvas = (id) => this.getFigure(id).isCanvas
-const isImageService = (id) => this.getFigure(id).isImageService
-const isSequence = (id) => this.getFigure(id).isSequence
+const shouldRenderCanvas = (id, is_static) => this.getFigure(id).annotations || !is_static
+const isCanvas = (id, is_static) => shouldRenderCanvas(id, is_static) && this.getFigure(id).isCanvas
+const isImageService = (id, is_static) => shouldRenderCanvas(id, is_static) && this.getFigure(id).isImageService
+const isSequence = (id, is_static) => shouldRenderCanvas(id, is_static) && this.getFigure(id).isSequence
 </script>

packages/11ty/_components/image-tag.webc

@@ -1,6 +1,6 @@
 <img :alt="alt" class="q-figure__image" :src="getSrc(src, image_dir)" />
 <script webc:setup>
 const getSrc = async (src, imageDir) => {
-  return src.startsWith('http') ? src : [imageDir, src].join('/')
+  return src.startsWith('http') || src.startsWith('/') ? src : [imageDir, src].join('/')
 }
 </script>

packages/11ty/_components/quire-figure.webc

@@ -1,14 +1,17 @@
-<figure :id="slugify(id)" :class="getClasses(classes, id)">
-  <template webc:nokeep @html="component(id, image_dir)"></template>
-  <template webc:nokeep @html="getCaption(id)"></template>
-</figure>
+<is-land on:visible>
+  <figure :id="slugify(id)" :class="getClasses(classes, id)">
+    <template webc:nokeep @html="component(id, image_dir, is_static, preset)"></template>
+    <template webc:nokeep @html="getAnnotations(id)"></template><template webc:nokeep @html="getCaption(id)"></template>
+  </figure>
+</is-land>
 <script webc:setup>
-const component = async (id, imageDir) => {
+const component = async (id, imageDir, isStatic, preset) => {
   const figure = this.getFigure(id)
   const { mediaType } = figure
-  const { figureAudio, figureImageWebc, figureTable, figureVideo } = this
+  const { figureAudio, figureImageWebc, figureModalLink, figureTable, figureVideo } = this
   if (mediaType === 'image') {
-    return await figureImageWebc.call(this, id, imageDir)
+    const imageElement = await figureImageWebc.call(this, id, imageDir, isStatic, preset)
+    return figureModalLink({ content: imageElement, id })
   }
   const mediaTypeToComponentMap = {
     soundcloud: figureAudio,
@@ -17,7 +20,12 @@ const component = async (id, imageDir) => {
     vimeo: figureVideo,
     youtube: figureVideo
   }
-  return await mediaTypeToComponentMap[mediaType](figure)
+  const mediaElement = await mediaTypeToComponentMap[mediaType](figure)
+  return figureModalLink({ content: mediaElement, id })
+}
+const getAnnotations = (id) => {
+  const figure = this.getFigure(id)
+  return this.annotationsUI({ figure })
 }
 
 const getCaption = (id) => {

packages/11ty/_includes/components/figure/caption.js

@@ -12,17 +12,12 @@ const { oneLine } = require('~lib/common-tags')
 module.exports = function(eleventyConfig) {
   const markdownify = eleventyConfig.getFilter('markdownify')
   const figureMediaEmbedUrl = eleventyConfig.getFilter('figureMediaEmbedUrl')
-  return function({ caption, credit, content='', mediaId, mediaType}) {
-    const { sourceUrl } = figureMediaEmbedUrl({ mediaId, mediaType })
-    const mediaSourceLink = sourceUrl
-      ? `<span class="q-figure__caption-embed-link"><a href="${sourceUrl}"><em>${sourceUrl}</em></a></span>`
-      : ''
+  return function({ caption='', credit='', content='' }) {
     return oneLine`
       <figcaption class="q-figure__caption">
-        ${mediaSourceLink}
         ${markdownify(content)}
-        <span class="q-figure__caption-content">${markdownify(caption || '')}</span>
-        <span class="q-figure__credit">${markdownify(credit || '')}</span>
+        <span class="q-figure__caption-content">${markdownify(caption)}</span>
+        <span class="q-figure__credit">${markdownify(credit)}</span>
       </figcaption>
     `
   }

packages/11ty/_includes/components/figure/table/html.js

@@ -12,7 +12,7 @@ module.exports = function(eleventyConfig) {
   const tableElement = eleventyConfig.getFilter('figureTableElement')
   const markdownify = eleventyConfig.getFilter('markdownify')
 
-  return async function({ id, src }) {
+  return async function({ caption='', id, src }) {
     const table = await tableElement({ src })
     const title = markdownify(caption)
 
@@ -21,9 +21,7 @@ module.exports = function(eleventyConfig) {
         class="q-figure__modal-link"
         href="#${id}"
         title="${title}"
-      >
-        ${table}
-      </a>
+      >${table}</a>
     `
   }
 }

packages/11ty/_includes/components/figure/video/print.js

@@ -14,11 +14,18 @@ const logger = chalkFactory('Figure Video')
  */
 module.exports = function(eleventyConfig) {
   const { imageDir } = eleventyConfig.globalData.config.figures
+  const figureMediaEmbedUrl = eleventyConfig.getFilter('figureMediaEmbedUrl')
 
   return function({
     aspect_ratio: aspectRatio,
+    mediaId,
+    mediaType,
     poster=''
   }) {
+    const { sourceUrl } = figureMediaEmbedUrl({ mediaId, mediaType })
+    const mediaSourceLink = sourceUrl
+      ? `<span class="q-figure__caption-embed-link"><a href="${sourceUrl}"><em>${sourceUrl}</em></a></span>`
+      : ''
     if (!poster) {
       logger.warn(`Figure '${id}' does not have a 'poster' property. Print media will not render a fallback image for id: ${id}`)
     }
@@ -30,6 +37,7 @@ module.exports = function(eleventyConfig) {
     return html`
       <div class="q-figure__media-wrapper--${ aspectRatio || 'widescreen' }">
         <img src="${posterSrc}" />
+        ${mediaSourceLink}
       </div>
     `
   }

packages/11ty/_includes/components/head.js

@@ -58,6 +58,8 @@ module.exports = function(eleventyConfig) {
         <link rel="canonical" href="${canonicalURL}">
         <link rel="version-history" href="${publication.repositoryUrl}">
 
+        <script type="module" src="/_assets/javascript/is-land.js"></script>
+
         <script src="https://cdn.jsdelivr.net/npm/@digirati/canvas-panel-web-components@1.0.56" type="module"></script>
         <script src="https://cdn.jsdelivr.net/npm/@iiif/vault-helpers@latest/dist/index.umd.js"></script>
 

packages/11ty/_layouts/base.11ty.js

@@ -13,7 +13,14 @@ module.exports = async function(data) {
   const id = this.slugify(url) || path.parse(inputPath).name
   const pageId = `page-${id}`
   const figures = pageData.page.figures
-  const figuresJSON = figures ? JSON.stringify(figures) : '{}'
+  /**
+   * This is currently throwing an error about circular references in figure data
+   * Removing until we need quire-data written to page
+   *
+   * TODO: add `quire-data` when refactoring lightbox and modal to use webc + is-land
+   */
+  // const figuresJSON = figures ? JSON.stringify(figures) : '{}'
+  const figuresJSON = '{}';
 
   return html`
     <!doctype html>

packages/11ty/_plugins/components/index.js

@@ -28,5 +28,5 @@ module.exports = function(eleventyConfig, collections, options) {
   /**
    * Note: WebC attribute names must be all lowercase or snake_case
    */
-  addWebcShortcode('figureImageWebc', 'figure-image', ['id', 'image_dir'])
+  addWebcShortcode('figureImageWebc', 'figure-image', ['id', 'image_dir', 'is_static', 'preset'])
 }

packages/11ty/_plugins/components/shortcodeFactory.js

@@ -30,7 +30,7 @@ module.exports = function(eleventyConfig, collections) {
      * @param  {String}  tagName          A template tag name for the component
      * @param  {String}  webcElementName  A webc component tag name
      */
-    addWebcShortcode: function(tagName, componentName, attributeNames) {
+    addWebcShortcode: function(tagName, componentName, attributeNames=[]) {
       eleventyConfig.addShortcode(tagName, async function(...args) {
         const renderTemplate = eleventyConfig.getFilter('renderTemplate')
         const renderedAttributes = attributeNames.map((name, index) => `${name}="${args[index]}"`).join(' ')

packages/11ty/_plugins/shortcodes/contributors.js

@@ -36,7 +36,7 @@ module.exports = function (eleventyConfig) {
 
     const formats = ['bio', 'initials', 'name', 'name-title', 'name-title-block', 'string']
 
-    if (!formats.includes(format)) {
+    if (format && !formats.includes(format)) {
       logger.error(
         `Unrecognized contributors shortcode format "${format}". Supported format values are: ${formats.join(', ')}`
       )

packages/11ty/_plugins/shortcodes/figure.js

@@ -39,6 +39,12 @@ module.exports = function (eleventyConfig) {
     this.page.figures ||= []
     this.page.figures.push(figure)
 
-    return await quireFigure.call(this, classes, id, imageDir)
+    /**
+     * Render static versions of IIIF images inline
+     */
+    const isStatic = true
+    const preset = 'responsive'
+
+    return await quireFigure.call(this, classes, id, imageDir, isStatic, preset)
   }
 }

packages/11ty/_plugins/shortcodes/figureGroup.js

@@ -33,7 +33,7 @@ module.exports = function (eleventyConfig, { page }) {
     //   logger.warn(`NoMediaType: One of the figures passed to the q-figures shortcode is missing the 'media_type' attribute. Figures in 'figures.yaml' must be have a 'media_type' attribute with a value of either  "vimeo" or "youtube"`)
     // }
 
-    const classes = ['column', 'q-figure--group__item', `quire-grid--${columns}`]
+    const classes = ['column', 'q-figure--group__item']
     const rows = Math.ceil(ids.length / columns)
     let figureTags = []
     for (let i=0; i < rows; ++i) {
@@ -42,7 +42,7 @@ module.exports = function (eleventyConfig, { page }) {
       for (let id of ids.slice(startIndex, columns + startIndex)) {
         row += await figure(eleventyConfig, { page }).bind(this)(id, classes)
       }
-      figureTags.push(`<div class="q-figure--group__row columns">${row}</div>`)
+      figureTags.push(`<div class="q-figure--group__row columns quire-grid--${columns}">${row}</div>`)
     }
 
     return oneLine`

packages/11ty/_plugins/shortcodes/index.js

@@ -27,5 +27,5 @@ module.exports = function(eleventyConfig, collections, options) {
   /**
    * Note: WebC attribute names must be all lowercase or snake_case
    */
-  addWebcShortcode('quireFigure', 'quire-figure', ['classes', 'id', 'image_dir'])
+  addWebcShortcode('quireFigure', 'quire-figure', ['classes', 'id', 'image_dir', 'is_static', 'preset'])
 }

packages/11ty/package.json

@@ -59,7 +59,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
     "@11ty/eleventy-plugin-vite": "^4.0.0",
     "@11ty/eleventy-plugin-webc": "^0.11.1",
-    "@11ty/is-land": "^3.0.1",
+    "@11ty/is-land": "^3.0.2",
     "@iiif/parser": "^1.1.2",
     "@iiif/vault": "^0.9.22",
     "ajv": "^8.12.0",