nuxt-content-assets 1.0.0 → 1.1.0

package/README.md

@@ -47,16 +47,19 @@ 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
 
@@ -147,17 +150,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:
+Passing image sizes prevents content jumps on page load.
+
+#### 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:
 
 ```vue
 <template>
@@ -173,12 +182,22 @@ 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) configure `imageSize` as `'src'` to encode the size in `src`:
 
 ```
-:image-gallery={:data="images"}
+:image-content{:src="image"}
 ```
 
+The component will receive the updated path which you can parse and implement as you see fit.
+
+```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:
@@ -205,19 +224,19 @@ 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) |
 
-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 {
@@ -226,6 +245,8 @@ img {
 }
 ```
 
+To disable, pass `false`.
+
 ### Content extensions
 
 This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:

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.0"
 }

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);
@@ -131,8 +134,8 @@ function getAssetSizes(srcAbs, hints) {
       if (hints.includes("style")) {
         ratio = `${size.width}/${size.height}`;
       }
-      if (hints.includes("url")) {
-        query = `?width=${size.width}&height=${size.height}`;
+      if (hints.includes("src") || hints.includes("url")) {
+        query = `width=${size.width}&height=${size.height}`;
       }
     } catch (err) {
       warn(`could not read image "${srcAbs}`);

package/dist/runtime/plugin.mjs

@@ -1,6 +1,17 @@
 import Path from "path";
 import { visit, SKIP, CONTINUE } from "unist-util-visit";
-import { deKey, isValidAsset, list, matchTokens, toPath, walk } from "./utils/index.mjs";
+import {
+  buildStyle,
+  deKey,
+  isValidAsset,
+  list,
+  matchTokens,
+  toPath,
+  walk,
+  removeQuery,
+  buildQuery,
+  parseQuery
+} from "./utils/index.mjs";
 import { debug, cachePath } from "#nuxt-content-assets";
 import { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
@@ -51,10 +62,11 @@ 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, query } = getAsset(removeQuery(value));
           if (srcAttr) {
-            parent[key] = srcAttr + (query || "");
-            updated.push(`meta: ${key} to "${srcAttr}"`);
+            const srcUrl = query ? buildQuery(srcAttr, parseQuery(value), query) : srcAttr;
+            parent[key] = srcUrl;
+            updated.push(`meta: ${key} to "${srcUrl}"`);
           }
         }
       }, filter);
@@ -82,7 +94,7 @@ const plugin = async (nitro) => {
               }
               if (ratio) {
                 if (typeof node.props.style === "string") {
-                  node.props.style += `; aspect-ratio: ${ratio};`;
+                  node.props.style = buildStyle(node.props.style, `aspect-ratio: ${ratio}`);
                 } else {
                   node.props.style ||= {};
                   node.props.style.aspectRatio = ratio;

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

@@ -22,7 +22,7 @@ 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
+ * @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;

package/dist/runtime/services/assets.mjs

@@ -26,8 +26,8 @@ export function getAssetSizes(srcAbs, hints) {
       if (hints.includes("style")) {
         ratio = `${size.width}/${size.height}`;
       }
-      if (hints.includes("url")) {
-        query = `?width=${size.width}&height=${size.height}`;
+      if (hints.includes("src") || hints.includes("url")) {
+        query = `width=${size.width}&height=${size.height}`;
       }
     } catch (err) {
       warn(`could not read image "${srcAbs}`);

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.0",
   "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",