feat(images): nuxt content transformer to add image metadata

Author: luksak

components/AttributeResponsiveImage.vue

@@ -7,6 +7,8 @@
     data-sizes="auto"
     :alt="alt"
     class="lazyload"
+    :width
+    :height
   >
 </template>
 
@@ -16,6 +18,8 @@ interface Props {
   alt: string
   sizes?: string
   loading?: string
+  width?: number
+  height?: number
   aspectRatio?: string | boolean
   parentFit?: string | boolean
 }

nuxt.config.ts

@@ -17,6 +17,13 @@ export default defineNuxtConfig({
     name: 'nuxt-attribute-content',
   },
   devtools: { enabled: true },
+  content: {
+    build: {
+      transformers: [
+        '#layers/nuxt-attribute-content/transformers/imageDimensions',
+      ],
+    },
+  },
   runtimeConfig: {
     public: {
       mapbox: {

package.json

@@ -47,6 +47,7 @@
     "@nuxtjs/leaflet": "^1",
     "better-sqlite3": "^12.4.1",
     "happy-dom": "^18.0.1",
+    "image-meta": "^0.2.2",
     "markdown-it": "^14.1.0",
     "nuxt-ipx-cache": "1.0.6",
     "nuxt-lazyimages": "^0.2.1",

pnpm-lock.yaml

@@ -0,0 +1,40 @@
+import { defineTransformer, type TransformedContent } from '@nuxt/content'
+import { resolvePath } from '@nuxt/kit'
+import { readFile } from 'node:fs/promises'
+import { imageMeta, type ImageMeta } from 'image-meta'
+
+interface ImageItem {
+  src: string
+  metadata?: ImageMeta
+}
+
+export default defineTransformer({
+  name: 'imageDimensions',
+  extensions: ['.yml'],
+  transform: async function (content: TransformedContent) {
+    await setImageDimensions(content)
+    return content
+  },
+})
+
+const setImageDimensions = async (data: Record<string, unknown>) => {
+  for (const property in data) {
+    let item = data[property]
+    if (item instanceof Object) {
+      item = await setImageDimensions(item as Record<string, unknown>)
+    }
+    if (item && item instanceof Object && 'src' in item) {
+      const imageItem = item as ImageItem
+      try {
+        const filePath = await resolvePath(`public${imageItem.src}`)
+        const imageData = await readFile(filePath)
+        imageItem.metadata = imageMeta(imageData)
+      }
+      catch {
+        throw new Error(`Failed to parse image: ${imageItem.src}`)
+      }
+    }
+    data[property] = item
+  }
+  return data
+}