@duffcloudservices/cms 0.5.1 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffcloudservices/cms",
-  "version": "0.5.1",
+  "version": "0.7.1",
   "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
   "type": "module",
   "exports": {
@@ -16,6 +16,10 @@
       "types": "./dist/editor/editorBridge.d.ts",
       "import": "./dist/editor/editorBridge.js"
     },
+    "./seo": {
+      "types": "./dist/seo/index.d.ts",
+      "import": "./dist/seo/index.js"
+    },
     "./components": {
       "import": "./src/components/PreviewRibbon.vue"
     },
@@ -57,6 +61,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/markdown-it": "^14.1.0",
     "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vue/test-utils": "^2.4.0",
     "markdown-it": "^14.0.0",
     "tsup": "^8.0.0",
@@ -78,11 +83,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/duffn/dcs"
+    "url": "https://github.com/NateDuff/dcs"
   },
   "homepage": "https://portal.duffcloudservices.com",
   "bugs": {
-    "url": "https://github.com/duffn/dcs/issues"
+    "url": "https://github.com/NateDuff/dcs/issues"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/components/ManagedImage.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ManagedImage from './ManagedImage.vue'
+
+/**
+ * A CDN URL whose UUID/extension triggers responsive variant resolution
+ * (so a `<picture>` with `<source>` renders by default).
+ */
+const ORIGINAL = 'https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg'
+
+describe('ManagedImage self-healing fallback', () => {
+  it('renders a <picture> with <source> for a CDN image by default', () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageKey: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+      },
+    })
+
+    expect(wrapper.find('picture').exists()).toBe(true)
+    expect(wrapper.find('source').exists()).toBe(true)
+    // Default <img> src points at a generated variant, not the original.
+    expect(wrapper.find('img').attributes('src')).toContain('abc-123-md.webp')
+  })
+
+  it('swaps to the original and removes <source> when the variant errors', async () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageKey: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+      },
+    })
+
+    // Sanity: starts as a <picture> with variant <source>.
+    expect(wrapper.find('picture').exists()).toBe(true)
+    expect(wrapper.find('source').exists()).toBe(true)
+
+    // The 404'd fit-variant fires `error`.
+    await wrapper.find('img').trigger('error')
+
+    // The <picture>/<source> branch must drop out — a <picture> does NOT
+    // re-resolve after a <source> 404s, so the variant set has to be removed.
+    expect(wrapper.find('picture').exists()).toBe(false)
+    expect(wrapper.find('source').exists()).toBe(false)
+
+    // A plain <img> now renders the ORIGINAL url.
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe(ORIGINAL)
+    // The original is still exposed for the visual editor.
+    expect(img.attributes('data-dcs-image-url')).toBe(ORIGINAL)
+  })
+
+  it('renders a plain <img> at the original when `original` is set (no variants)', () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageKey: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+        original: true,
+      },
+    })
+
+    expect(wrapper.find('picture').exists()).toBe(false)
+    expect(wrapper.find('img').attributes('src')).toBe(ORIGINAL)
+  })
+})

package/src/components/ManagedImage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import { useResponsiveImage } from '../composables/useResponsiveImage'
 import { useTextContent } from '../composables/useTextContent'
 import type { ImageContext } from '@duffcloudservices/cms-core'
@@ -42,9 +42,25 @@ const image = useResponsiveImage({
   original: () => props.original,
 })
 
+// Self-heal: a fit-variant (`-md`/`-lg`) may legitimately be absent when the
+// source is smaller than the target dimension (see internal/imaging variants.go,
+// which skips variants by DIMENSION). When the rendered variant 404s, fall back
+// to the ORIGINAL url and drop the `<picture>`/`<source>` branch — a `<picture>`
+// does NOT re-resolve after a `<source>` 404s, so the variant set must be removed,
+// not just the `<img>` src swapped.
+const failed = ref(false)
+function onVariantError() {
+  if (!failed.value) {
+    failed.value = true
+  }
+}
+
 const imgAttrs = computed(() => ({
   ...image.imgProps,
   ...attrs,
+  // When a variant has failed, render the original (also exposed as
+  // data-dcs-image-url for the visual editor) instead of the 404'd variant.
+  ...(failed.value ? { src: imageSrc.value } : {}),
   'data-dcs-image-key': props.imageKey,
   'data-dcs-image-url': imageSrc.value,
   'data-dcs-image-alt': imageAlt.value,
@@ -52,7 +68,7 @@ const imgAttrs = computed(() => ({
 </script>
 
 <template>
-  <picture v-if="image.hasVariants && !original">
+  <picture v-if="image.hasVariants && !original && !failed">
     <source
       v-for="source in image.sources"
       :key="source.type"
@@ -60,7 +76,7 @@ const imgAttrs = computed(() => ({
       :type="source.type"
       :sizes="source.sizes"
     />
-    <img v-bind="imgAttrs" />
+    <img v-bind="imgAttrs" @error="onVariantError" />
   </picture>
   <img v-else v-bind="imgAttrs" />
 </template>

package/src/components/ResponsiveImage.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ResponsiveImage from './ResponsiveImage.vue'
+
+const ORIGINAL = 'https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg'
+
+describe('ResponsiveImage self-healing fallback', () => {
+  it('renders a <picture> with <source> for a CDN image by default', () => {
+    const wrapper = mount(ResponsiveImage, {
+      props: { src: ORIGINAL, alt: 'Hero', context: 'hero' },
+    })
+
+    expect(wrapper.find('picture').exists()).toBe(true)
+    expect(wrapper.find('source').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toContain('abc-123-md.webp')
+  })
+
+  it('swaps to props.src and removes <source> when the variant errors', async () => {
+    const wrapper = mount(ResponsiveImage, {
+      props: { src: ORIGINAL, alt: 'Hero', context: 'hero', class: 'object-cover' },
+    })
+
+    expect(wrapper.find('picture').exists()).toBe(true)
+    expect(wrapper.find('source').exists()).toBe(true)
+
+    await wrapper.find('img').trigger('error')
+
+    // <picture>/<source> must be neutralized so the original can display.
+    expect(wrapper.find('picture').exists()).toBe(false)
+    expect(wrapper.find('source').exists()).toBe(false)
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe(ORIGINAL)
+    // The class binding survives the fallback render.
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('renders a plain <img> at props.src when `original` is set', () => {
+    const wrapper = mount(ResponsiveImage, {
+      props: { src: ORIGINAL, alt: 'Hero', context: 'hero', original: true },
+    })
+
+    expect(wrapper.find('picture').exists()).toBe(false)
+    expect(wrapper.find('img').attributes('src')).toBe(ORIGINAL)
+  })
+})

package/src/components/ResponsiveImage.vue

@@ -13,7 +13,7 @@
  * />
  * ```
  */
-import { computed, useAttrs } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import { useResponsiveImage } from '../composables/useResponsiveImage'
 import type { ImageContext } from '@duffcloudservices/cms-core'
 
@@ -42,15 +42,27 @@ const image = useResponsiveImage({
   original: () => props.original,
 })
 
+// Self-heal: when the rendered fit-variant (`-md`/`-lg`) 404s — legitimately
+// absent for sources smaller than the target dimension — fall back to the
+// ORIGINAL `props.src` and drop the `<picture>`/`<source>` branch. A `<picture>`
+// does NOT re-resolve after a `<source>` 404s, so the variant set must be removed.
+const failed = ref(false)
+function onVariantError() {
+  if (!failed.value) {
+    failed.value = true
+  }
+}
+
 const attrs = useAttrs()
 const imgAttrs = computed(() => ({
   ...image.imgProps,
   ...attrs,
+  ...(failed.value ? { src: props.src } : {}),
 }))
 </script>
 
 <template>
-  <picture v-if="image.hasVariants && !original">
+  <picture v-if="image.hasVariants && !original && !failed">
     <source
       v-for="source in image.sources"
       :key="source.type"
@@ -58,7 +70,7 @@ const imgAttrs = computed(() => ({
       :type="source.type"
       :sizes="source.sizes"
     />
-    <img v-bind="imgAttrs" :class="props.class" />
+    <img v-bind="imgAttrs" :class="props.class" @error="onVariantError" />
   </picture>
   <img v-else v-bind="imgAttrs" :class="props.class" />
 </template>