@duffcloudservices/cms 0.1.7 → 0.2.0

package/package.json

@@ -1,77 +1,82 @@
-{
-  "name": "@duffcloudservices/cms",
-  "version": "0.1.7",
-  "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./plugins": {
-      "types": "./dist/plugins/index.d.ts",
-      "import": "./dist/plugins/index.js"
-    },
-    "./editor": {
-      "types": "./dist/editor/editorBridge.d.ts",
-      "import": "./dist/editor/editorBridge.js"
-    },
-    "./components": {
-      "import": "./src/components/PreviewRibbon.vue"
-    }
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/components"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts",
-    "prepublishOnly": "pnpm run build"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.0",
-    "@unhead/vue": "^1.9.0"
-  },
-  "dependencies": {
-    "js-yaml": "^4.1.0"
-  },
-  "devDependencies": {
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.0",
-    "@vue/test-utils": "^2.4.0",
-    "tsup": "^8.0.0",
-    "typescript": "~5.6.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.3",
-    "vue": "^3.5.16",
-    "@unhead/vue": "^2.0.5"
-  },
-  "keywords": [
-    "vue",
-    "vitepress",
-    "cms",
-    "dcs",
-    "composables",
-    "duff-cloud-services"
-  ],
-  "author": "Duff Cloud Services",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/duffn/dcs"
-  },
-  "homepage": "https://portal.duffcloudservices.com",
-  "bugs": {
-    "url": "https://github.com/duffn/dcs/issues"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}
+{
+  "name": "@duffcloudservices/cms",
+  "version": "0.2.0",
+  "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "import": "./dist/plugins/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/editorBridge.d.ts",
+      "import": "./dist/editor/editorBridge.js"
+    },
+    "./components": {
+      "import": "./src/components/PreviewRibbon.vue"
+    },
+    "./responsive-image": {
+      "import": "./src/components/ResponsiveImage.vue"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "@unhead/vue": "^1.9.0"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "@duffcloudservices/cms-core": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it": "^14.1.0",
+    "@types/node": "^20.11.0",
+    "@vue/test-utils": "^2.4.0",
+    "markdown-it": "^14.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "~5.6.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.3",
+    "vue": "^3.5.16",
+    "@unhead/vue": "^2.0.5"
+  },
+  "keywords": [
+    "vue",
+    "vitepress",
+    "cms",
+    "dcs",
+    "composables",
+    "duff-cloud-services"
+  ],
+  "author": "Duff Cloud Services",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/duffn/dcs"
+  },
+  "homepage": "https://portal.duffcloudservices.com",
+  "bugs": {
+    "url": "https://github.com/duffn/dcs/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts"
+  }
+}

package/src/components/PreviewRibbon.vue

@@ -132,6 +132,13 @@ const STI = 4
 /** The preview domain where the ribbon should be displayed */
 const PREVIEW_DOMAIN = 'preview.duffcloudservices.com'
 
+/**
+ * Query string parameter that suppresses the preview ribbon.
+ * Used by GitHub Actions snapshot capture so screenshots don't include the ribbon overlay.
+ * Example: https://preview.duffcloudservices.com/kept/?dcs-hide-ribbon
+ */
+const HIDE_RIBBON_PARAM = 'dcs-hide-ribbon'
+
 /** localStorage key for persisting which corner the ribbon is docked to */
 const STORAGE_KEY = 'dcs-preview-ribbon-side'
 
@@ -156,6 +163,10 @@ function shouldShow(): boolean {
     return false
   }
 
+  // Allow suppression via query parameter (for automated screenshot capture)
+  const params = new URLSearchParams(globalThis.location.search)
+  if (params.has(HIDE_RIBBON_PARAM)) return false
+
   return true
 }
 

package/src/components/ResponsiveImage.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Convenience component that renders a responsive `<picture>` element for
+ * DCS CDN-hosted images. For non-CDN images it falls back to a plain `<img>`.
+ *
+ * @example
+ * ```vue
+ * <ResponsiveImage
+ *   src="https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg"
+ *   alt="Hero banner"
+ *   context="hero"
+ *   class="w-full h-full object-cover"
+ * />
+ * ```
+ */
+import { useResponsiveImage } from '../composables/useResponsiveImage'
+import type { ImageContext } from '@duffcloudservices/cms-core'
+
+const props = defineProps<{
+  /** Image source URL (original CDN URL or local path). */
+  src: string
+  /** Alt text for accessibility. */
+  alt: string
+  /** Sizing context — determines which variants to include. */
+  context?: ImageContext
+  /** CSS class(es) applied to the `<img>` element. */
+  class?: string
+  /** Optional `sizes` attribute override. */
+  sizes?: string
+  /** Skip responsive variants and use the original URL only. */
+  original?: boolean
+}>()
+
+const image = useResponsiveImage({
+  src: () => props.src,
+  alt: () => props.alt,
+  context: () => props.context ?? 'content',
+  sizes: () => props.sizes,
+  original: () => props.original,
+})
+</script>
+
+<template>
+  <picture v-if="image.hasVariants && !original">
+    <source
+      v-for="source in image.sources"
+      :key="source.type"
+      :srcset="source.srcset"
+      :type="source.type"
+      :sizes="source.sizes"
+    />
+    <img v-bind="image.imgProps" :class="props.class" />
+  </picture>
+  <img v-else v-bind="image.imgProps" :class="props.class" />
+</template>