nuxt-content-assets 1.1.0 → 1.1.1

package/README.md

@@ -65,17 +65,22 @@ Developer experience:
 
 ## Demo
 
-To view the demo locally, run:
+To clone and run the demo locally:
 
-```
+```bash
+git clone https://github.com/davestewart/nuxt-content-assets.git
+cd nuxt-content-assets
+npm install
 npm run dev
 ```
 
-To view the demo online, visit:
+Then open the demo in your browser at <a href="http://localhost:3000" target="_blank">localhost:3000</a>.
+
+To run the demo online, visit:
 
 - https://stackblitz.com/github/davestewart/nuxt-content-assets?file=demo%2Fapp.vue
 
-You can browse the demo files in:
+To browse the demo folder:
 
 - https://github.com/davestewart/nuxt-content-assets/tree/main/demo
 
@@ -162,11 +167,11 @@ The module is [preconfigured](#image-size) to pass image size hints (by default
 <img src="/image.jpg" width="640" height="480">
 ```
 
-Passing image sizes prevents content jumps on page load.
+Keeping this on prevents content jumps as your page loads.
 
 #### Prose components
 
-If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can use `imageSize: 'attrs'` to [hook into these values](demo/components/temp/ProseImg.vue) via Vue's `$attrs` property:
+If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can [hook into](demo/components/temp/ProseImg.vue) image size hints via the `$attrs` property:
 
 ```vue
 <template>
@@ -184,13 +189,13 @@ export default {
 
 #### Frontmatter
 
-If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) configure `imageSize` as `'src'` to encode the size in `src`:
+If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) set `imageSize` to `'src'` to encode values in `src`:
 
 ```
 :image-content{:src="image"}
 ```
 
-The component will receive the updated path which you can parse and implement as you see fit.
+The component will receive the size information as a query string which you can extract and apply:
 
 ```html
 <img class="image-content" src="/image.jpg?width=640&height=480">
@@ -200,7 +205,7 @@ See demo component [here](demo/components/content/ContentImage.vue).
 
 ## Configuration
 
-The module can be configured in your Nuxt configuration file:
+The module has the following options:
 
 ```ts
 // nuxt.config.ts
@@ -230,13 +235,14 @@ You can add one or more image size hints to the generated images:
 
 Pick from the following switches:
 
-| Switch  | What it does                                                 |
-| ------- | ------------------------------------------------------------ |
-| `style` | Adds `style="aspect-ratio:..."` to any `<img>` tag           |
-| `attrs` | Adds `width` and `height` attributes to any `<img>` tag      |
-| `src`   | Adds `?width=...&height=...` to `src` attribute (frontmatter only) |
+| Switch    | What it does                                                 |
+| --------- | ------------------------------------------------------------ |
+| `'style'` | Adds `style="aspect-ratio:..."` to any `<img>` tag           |
+| `'attrs'` | Adds `width` and `height` attributes to any `<img>` tag      |
+| `'src'`   | Adds `?width=...&height=...` to `src` attribute (frontmatter only) |
+| `false`   | Disable image size hints                                     |
 
-Note: if you add *only* `attrs` include the following CSS in your app:
+Note: if you add *only* `attrs`, include the following CSS in your app:
 
 ```css
 img {
@@ -245,10 +251,10 @@ img {
 }
 ```
 
-To disable, pass `false`.
-
 ### Content extensions
 
+> Generally, you shouldn't need to touch this setting
+
 This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
 
 ```
@@ -257,8 +263,6 @@ md csv ya?ml json
 
 This way, you can use any **other** file type as an asset, without needing to explicitly configure extensions.
 
-Generally, you shouldn't need to touch this setting.
-
 ### Debug
 
 If you want to see what the module does as it runs, set `debug` to true:

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "1.1.0"
+  "version": "1.1.1"
 }

package/dist/module.mjs

@@ -119,34 +119,15 @@ function getAssetPaths(srcDir, srcAbs) {
     srcAttr
   };
 }
-function getAssetSizes(srcAbs, hints) {
-  let width = void 0;
-  let height = void 0;
-  let ratio = void 0;
-  let query = void 0;
-  if (hints.length && isImage(srcAbs)) {
+function getAssetSizes(srcAbs) {
+  if (isImage(srcAbs)) {
     try {
-      const size = getImageSize(srcAbs);
-      if (hints.includes("attrs")) {
-        width = size.width;
-        height = size.height;
-      }
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
-      if (hints.includes("src") || hints.includes("url")) {
-        query = `width=${size.width}&height=${size.height}`;
-      }
+      return getImageSize(srcAbs);
     } catch (err) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  return {
-    width,
-    height,
-    ratio,
-    query
-  };
+  return {};
 }
 
 function isAssetId(id) {
@@ -395,14 +376,11 @@ const module = defineNuxtModule({
     }
     function updateAsset(src) {
       const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
-      const { width, height, ratio, query } = getAssetSizes(src, imageFlags);
+      const { width, height } = getAssetSizes(src);
       assets[srcRel] = {
-        srcRel,
         srcAttr,
         width,
-        height,
-        ratio,
-        query
+        height
       };
       saveAssets();
       return srcAttr;
@@ -444,6 +422,7 @@ const module = defineNuxtModule({
     const makeVar = (name, value) => `export const ${name} = ${JSON.stringify(value)};`;
     const virtualConfig = [
       makeVar("cachePath", cachePath),
+      makeVar("imageFlags", imageFlags),
       makeVar("debug", options.debug)
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {

package/dist/runtime/plugin.mjs

@@ -12,7 +12,7 @@ import {
   buildQuery,
   parseQuery
 } from "./utils/index.mjs";
-import { debug, cachePath } from "#nuxt-content-assets";
+import { cachePath, imageFlags, debug } from "#nuxt-content-assets";
 import { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
   assets = await storage.getItem("assets.json");
@@ -62,8 +62,9 @@ const plugin = async (nitro) => {
       const filter = (value, key) => !(String(key).startsWith("_") || key === "body");
       walk(file, (value, parent, key) => {
         if (isValidAsset(value)) {
-          const { srcAttr, query } = getAsset(removeQuery(value));
+          const { srcAttr, width, height } = getAsset(removeQuery(value));
           if (srcAttr) {
+            const query = width && height && (imageFlags.includes("src") || imageFlags.includes("url")) ? `width=${width}&height=${height}` : "";
             const srcUrl = query ? buildQuery(srcAttr, parseQuery(value), query) : srcAttr;
             parent[key] = srcUrl;
             updated.push(`meta: ${key} to "${srcUrl}"`);
@@ -84,24 +85,26 @@ const plugin = async (nitro) => {
           if (typeof value !== "string") {
             return;
           }
-          const { srcAttr, width, height, ratio } = getAsset(value);
+          const { srcAttr, width, height } = getAsset(value);
           if (srcAttr) {
             node.props[prop] = srcAttr;
             if (node.tag === "img") {
               if (width && height) {
-                node.props.width ||= width;
-                node.props.height ||= height;
-              }
-              if (ratio) {
-                if (typeof node.props.style === "string") {
-                  node.props.style = buildStyle(node.props.style, `aspect-ratio: ${ratio}`);
-                } else {
-                  node.props.style ||= {};
-                  node.props.style.aspectRatio = ratio;
+                if (imageFlags.includes("attrs")) {
+                  node.props.width ||= width;
+                  node.props.height ||= height;
+                }
+                if (imageFlags.includes("style")) {
+                  const ratio = `${width}/${height}`;
+                  if (typeof node.props.style === "string") {
+                    node.props.style = buildStyle(node.props.style, `aspect-ratio: ${ratio}`);
+                  } else {
+                    node.props.style ||= {};
+                    node.props.style.aspectRatio = ratio;
+                  }
                 }
               }
-            }
-            if (node.tag === "a") {
+            } else if (node.tag === "a") {
               node.props.target ||= "_blank";
             }
             updated.push(`page: ${tag}[${prop}] to "${srcAttr}"`);

package/dist/runtime/services/assets.d.ts

@@ -1,11 +1,7 @@
 export type AssetConfig = {
-    id?: string;
-    srcRel: string;
     srcAttr: string;
     width?: number;
     height?: number;
-    ratio?: string;
-    query?: string;
 };
 /**
  * Parse asset paths from absolute path
@@ -22,11 +18,8 @@ export declare function getAssetPaths(srcDir: string, srcAbs: string): {
  * Get asset image sizes
  *
  * @param srcAbs    The absolute path to the asset itself
- * @param hints     A list of named image size hints, one of 'attrs', 'style', or 'src'
  */
-export declare function getAssetSizes(srcAbs: string, hints: string[]): {
-    width: number | undefined;
-    height: number | undefined;
-    ratio: string | undefined;
-    query: string | undefined;
+export declare function getAssetSizes(srcAbs: string): {
+    width?: number;
+    height?: number;
 };

package/dist/runtime/services/assets.mjs

@@ -11,32 +11,13 @@ export function getAssetPaths(srcDir, srcAbs) {
     srcAttr
   };
 }
-export function getAssetSizes(srcAbs, hints) {
-  let width = void 0;
-  let height = void 0;
-  let ratio = void 0;
-  let query = void 0;
-  if (hints.length && isImage(srcAbs)) {
+export function getAssetSizes(srcAbs) {
+  if (isImage(srcAbs)) {
     try {
-      const size = getImageSize(srcAbs);
-      if (hints.includes("attrs")) {
-        width = size.width;
-        height = size.height;
-      }
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
-      if (hints.includes("src") || hints.includes("url")) {
-        query = `width=${size.width}&height=${size.height}`;
-      }
+      return getImageSize(srcAbs);
     } catch (err) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  return {
-    width,
-    height,
-    ratio,
-    query
-  };
+  return {};
 }

package/package.json

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