nuxt-content-assets 1.0.0 → 1.1.1

package/README.md

@@ -47,32 +47,40 @@ At build time the module [collates and serves](#how-it-works) assets and content
 
 ### Features
 
+Built on top of [Nuxt Content](https://github.com/nuxt/content/) and compatible with any Nuxt Content project or theme, including [Docus](https://github.com/nuxt-themes/docus).
+
 User experience:
 
 - co-locate assets with content files
-- write relative paths to see preview in editor
+- reference assets using relative paths
+- supports any format (image, video, doc)
 
 Developer experience:
 
-- works for tags and custom components
+- works with tags and custom components
 - works in markdown and frontmatter
-- file watching and live reload
+- file watching and asset live-reload
 - image size injection
 - zero config
 
 ## 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
 
@@ -147,17 +155,23 @@ If you edit an image, video, embed or iframe source, the content will update imm
 
 ### Image sizing
 
-You can [configure](#image-size) the module to add image size attributes to generated `<img>` tags:
+#### HTML
+
+The module is [preconfigured](#image-size) to pass image size hints (by default `style`) to generated `<img>` tags:
 
 ```html
-<img src="/image.jpg"
-     style="aspect-ratio:640/480"
-     width="640"
-     height="480"
->
+<!-- imageSize: 'style' -->
+<img src="/image.jpg" style="aspect-ratio:640/480">
+
+<!-- imageSize: 'attrs' -->
+<img src="/image.jpg" width="640" height="480">
 ```
 
-If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can [hook into these values](demo/components/temp/ProseImg.vue) via the `$attrs` property:
+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 [hook into](demo/components/temp/ProseImg.vue) image size hints via the `$attrs` property:
 
 ```vue
 <template>
@@ -173,15 +187,25 @@ export default {
 </script>
 ```
 
-If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) set the `'url'` configuration option to encode size in the URL:
+#### Frontmatter
 
+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"}
 ```
-:image-gallery={:data="images"}
+
+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">
 ```
 
+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
@@ -205,19 +229,20 @@ You can add one or more image size hints to the generated images:
 
 ```ts
 {
-  imageSize: 'attrs url'
+  imageSize: 'style attrs src'
 }
 ```
 
 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                   |
-| `url`   | Adds a `?width=...&height=...` query string to image paths in frontmatter |
+| 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 `attrs` only, include the following CSS in your app:
+Note: if you add *only* `attrs`, include the following CSS in your app:
 
 ```css
 img {
@@ -228,6 +253,8 @@ img {
 
 ### 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:
 
 ```
@@ -236,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.d.ts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
-    imageSize?: string | string[];
+    imageSize?: string | string[] | false;
     contentExtensions: string | string[];
     debug?: boolean;
 }

package/dist/module.json

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

package/dist/module.mjs

@@ -51,6 +51,9 @@ function getIgnores(extensions2) {
   return `^((?!(${matchTokens(extensions2).join("|")})).)*$`;
 }
 
+function removeQuery(path) {
+  return path.replace(/\?.*$/, "");
+}
 function isExcluded(path) {
   return path.split("/").some((segment) => segment.startsWith(".") || segment.startsWith("_"));
 }
@@ -59,7 +62,7 @@ function isImage(path) {
   return extensions.image.includes(ext);
 }
 function isArticle(path) {
-  return path.endsWith(".md");
+  return removeQuery(path).endsWith(".md");
 }
 function isAsset(path) {
   return !isArticle(path);
@@ -116,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("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) {
@@ -392,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;
@@ -441,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

@@ -1,7 +1,18 @@
 import Path from "path";
 import { visit, SKIP, CONTINUE } from "unist-util-visit";
-import { deKey, isValidAsset, list, matchTokens, toPath, walk } from "./utils/index.mjs";
-import { debug, cachePath } from "#nuxt-content-assets";
+import {
+  buildStyle,
+  deKey,
+  isValidAsset,
+  list,
+  matchTokens,
+  toPath,
+  walk,
+  removeQuery,
+  buildQuery,
+  parseQuery
+} from "./utils/index.mjs";
+import { cachePath, imageFlags, debug } from "#nuxt-content-assets";
 import { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
   assets = await storage.getItem("assets.json");
@@ -51,10 +62,12 @@ 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(value);
+          const { srcAttr, width, height } = getAsset(removeQuery(value));
           if (srcAttr) {
-            parent[key] = srcAttr + (query || "");
-            updated.push(`meta: ${key} to "${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}"`);
           }
         }
       }, filter);
@@ -72,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 += `; 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, i.e. 'style', 'attrs', etc
  */
-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("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/dist/runtime/utils/build.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Build a style string by passing multiple independent expressions
+ */
+export declare function buildStyle(...expr: string[]): string;
+/**
+ * Build a query string by passing multiple independent expressions
+ */
+export declare function buildQuery(...expr: string[]): string;

package/dist/runtime/utils/build.mjs

@@ -0,0 +1,12 @@
+export function buildStyle(...expr) {
+  return expr.map((expr2) => expr2.replace(/^[; ]+|[; ]+$/g, "")).filter((s) => s).join(";").replace(/\s*;\s*/g, "; ") + ";";
+}
+export function buildQuery(...expr) {
+  const output = expr.map((expr2) => expr2.replace(/^[?&]+|&+$/g, "")).filter((s) => s);
+  if (output.length) {
+    const [first, ...rest] = output;
+    const isParam = (expr2) => /^[^?]+=[^=]+$/.test(expr2);
+    return !isParam(first) ? rest.length > 0 ? first + (first.includes("?") ? "&" : "?") + rest.join("&") : first : "?" + output.join("&");
+  }
+  return "";
+}

package/dist/runtime/utils/index.d.ts

@@ -1,5 +1,6 @@
-export * from './assert';
+export * from './path';
 export * from './debug';
+export * from './build';
 export * from './fs';
 export * from './string';
 export * from './object';

package/dist/runtime/utils/index.mjs

@@ -1,5 +1,6 @@
-export * from "./assert.mjs";
+export * from "./path.mjs";
 export * from "./debug.mjs";
+export * from "./build.mjs";
 export * from "./fs.mjs";
 export * from "./string.mjs";
 export * from "./object.mjs";

package/dist/runtime/utils/{assert.d.ts → path.d.ts}

@@ -1,3 +1,11 @@
+/**
+ * Parses the query string from a path
+ */
+export declare function parseQuery(path: string): string;
+/**
+ * Removes the query string from a path
+ */
+export declare function removeQuery(path: string): string;
 /**
  * Test path to be relative
  */

package/dist/runtime/utils/{assert.mjs → path.mjs}

@@ -1,5 +1,12 @@
 import Path from "path";
 import { extensions } from "../options.mjs";
+export function parseQuery(path) {
+  const matches = path.match(/\?.+$/);
+  return matches ? matches[0] : "";
+}
+export function removeQuery(path) {
+  return path.replace(/\?.*$/, "");
+}
 export function isRelative(path) {
   return !(path.startsWith("http") || Path.isAbsolute(path));
 }
@@ -11,7 +18,7 @@ export function isImage(path) {
   return extensions.image.includes(ext);
 }
 export function isArticle(path) {
-  return path.endsWith(".md");
+  return removeQuery(path).endsWith(".md");
 }
 export function isAsset(path) {
   return !isArticle(path);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -33,7 +33,6 @@
   "dependencies": {
     "@nuxt/kit": "^3.3.2",
     "debounce": "^1.2.1",
-    "glob": "^9.3.2",
     "image-size": "^1.0.2",
     "listhen": "^1.0.4",
     "ohash": "^1.0.0",