nuxt-content-assets 1.2.1 → 1.3.0

package/README.md

@@ -203,6 +203,35 @@ The component will receive the size information as a query string which you can
 
 See demo component [here](demo/components/content/ContentImage.vue).
 
+### Nuxt Image compatibility
+
+Nuxt Content Assets works with [Nuxt Image](https://v1.image.nuxtjs.org/) with just a little configuration.
+
+First, configure Nuxt Image to use Nuxt Content Asset's public folder:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  image: {
+    dir: '.nuxt/content-assets/public'
+  }
+}
+```
+
+Then, create a `ProseImg` component like so:
+
+```vue
+<!-- components/content/ProseImg.vue -->
+<template>
+  <nuxt-img />
+</template>
+```
+
+Any images rendered by Nuxt Content will now use Nuxt Image.
+
+> For a per-image solution, check the [override](demo/components/content/NuxtImg.ts) in the demo folder.
+
+
 ## Configuration
 
 The module has the following options:

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "1.2.1"
+  "version": "1.3.0"
 }

package/dist/module.mjs

@@ -536,7 +536,7 @@ const module = defineNuxtModule({
       const ignores = makeIgnores(contentExtensions);
       nuxt.options.content?.ignores.push(ignores);
     }
-    const imageFlags = matchTokens(options.imageSize);
+    const imageSizes = matchTokens(options.imageSize);
     const sources = Array.from(nuxt.options._layers).map((layer) => layer.config?.content?.sources).reduce((output, sources2) => {
       if (sources2) {
         Object.assign(output, sources2);
@@ -558,7 +558,7 @@ const module = defineNuxtModule({
       let width;
       let height;
       if (event === "update") {
-        const oldAsset = isImage(absTrg) && imageFlags.length ? assets.getAsset(absTrg) : null;
+        const oldAsset = isImage(absTrg) && imageSizes.length ? assets.getAsset(absTrg) : null;
         const newAsset = assets.setAsset(absTrg);
         width = newAsset.width;
         height = newAsset.height;
@@ -603,7 +603,7 @@ const module = defineNuxtModule({
     const makeVar = (name, value) => `export const ${name} = ${JSON.stringify(value)};`;
     const virtualConfig = [
       makeVar("publicPath", publicPath),
-      makeVar("imageFlags", imageFlags),
+      makeVar("imageSizes", imageSizes),
       makeVar("debug", options.debug)
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {

package/dist/runtime/content/plugin.mjs

@@ -1,12 +1,12 @@
 import { buildQuery, buildStyle, isValidAsset, list, parseQuery, removeQuery, walkBody, walkMeta } from "../utils/index.mjs";
 import { makeAssetsManager } from "../assets/public.mjs";
-import { debug, imageFlags, publicPath } from "#nuxt-content-assets";
-function processMeta(content, imageFlags2 = [], updated = []) {
+import { debug, imageSizes, publicPath } from "#nuxt-content-assets";
+function processMeta(content, imageSizes2 = [], updated = []) {
   walkMeta(content, (value, parent, key) => {
     if (isValidAsset(value)) {
       const { srcAttr, width, height } = resolveAsset(content, removeQuery(value), true);
       if (srcAttr) {
-        const query = width && height && (imageFlags2.includes("src") || imageFlags2.includes("url")) ? `width=${width}&height=${height}` : "";
+        const query = width && height && (imageSizes2.includes("src") || imageSizes2.includes("url")) ? `width=${width}&height=${height}` : "";
         const srcUrl = query ? buildQuery(srcAttr, parseQuery(value), query) : srcAttr;
         parent[key] = srcUrl;
         updated.push(`meta: ${key} to "${srcUrl}"`);
@@ -14,7 +14,7 @@ function processMeta(content, imageFlags2 = [], updated = []) {
     }
   });
 }
-function processBody(content, imageFlags2 = [], updated = []) {
+function processBody(content, imageSizes2 = [], updated = []) {
   walkBody(content, function(node) {
     const { tag, props } = node;
     for (const [prop, value] of Object.entries(props)) {
@@ -24,13 +24,13 @@ function processBody(content, imageFlags2 = [], updated = []) {
       const { srcAttr, width, height } = resolveAsset(content, value, true);
       if (srcAttr) {
         node.props[prop] = srcAttr;
-        if (node.tag === "img") {
+        if (node.tag === "img" || node.tag === "nuxt-img") {
           if (width && height) {
-            if (imageFlags2.includes("attrs")) {
-              node.props.width ||= width;
-              node.props.height ||= height;
+            if (imageSizes2.includes("attrs")) {
+              node.props.width = width;
+              node.props.height = height;
             }
-            if (imageFlags2.includes("style")) {
+            if (imageSizes2.includes("style")) {
               const ratio = `${width}/${height}`;
               if (typeof node.props.style === "string") {
                 node.props.style = buildStyle(node.props.style, `aspect-ratio: ${ratio}`);
@@ -53,8 +53,8 @@ const plugin = async (nitro) => {
   nitro.hooks.hook("content:file:afterParse", function(content) {
     if (content._extension === "md") {
       const updated = [];
-      processMeta(content, imageFlags, updated);
-      processBody(content, imageFlags, updated);
+      processMeta(content, imageSizes, updated);
+      processBody(content, imageSizes, updated);
       if (debug && updated.length) {
         list(`Processed "/${content._file}"`, updated);
         console.log();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",