nuxt-content-assets 0.10.3 → 1.1.0

package/README.md

@@ -45,6 +45,24 @@ Almost as much as being in the sea!
 
 At build time the module [collates and serves](#how-it-works) assets and content together.
 
+### 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
+- reference assets using relative paths
+- supports any format (image, video, doc)
+
+Developer experience:
+
+- works with tags and custom components
+- works in markdown and frontmatter
+- file watching and asset live-reload
+- image size injection
+- zero config
+
 ## Demo
 
 To view the demo locally, run:
@@ -88,7 +106,7 @@ Run the dev server or build and local assets should now be served alongside mark
 
 Use relative paths anywhere within your documents:
 
-```mdx
+```md
 Images
 ![image](image.jpg)
 
@@ -104,7 +122,7 @@ HTML
 
 Relative paths can be defined in frontmatter – as long as they are the only value:
 
-```mdx
+```md
 ---
 title: Portfolio
 images:
@@ -132,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>
@@ -158,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:
@@ -176,10 +210,10 @@ export default defineNuxtConfig({
     imageSize: 'style',
     
     // treat these extensions as content
-    contentExtensions: 'mdx? csv ya?ml json',
+    contentExtensions: 'md csv ya?ml json',
     
     // output debug messages
-    debug: true,
+    debug: false,
   }
 })
 ```
@@ -190,7 +224,7 @@ You can add one or more image size hints to the generated images:
 
 ```ts
 {
-  imageSize: 'attrs url'
+  imageSize: 'style attrs src'
 }
 ```
 
@@ -200,9 +234,9 @@ Pick from the following switches:
 | ------- | ------------------------------------------------------------ |
 | `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 |
+| `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 {
@@ -211,12 +245,14 @@ img {
 }
 ```
 
+To disable, pass `false`.
+
 ### Content extensions
 
 This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
 
 ```
-mdx? csv ya?ml json
+md csv ya?ml json
 ```
 
 This way, you can use any **other** file type as an asset, without needing to explicitly configure 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": "0.10.3"
+  "version": "1.1.0"
 }

package/dist/module.mjs

@@ -35,7 +35,7 @@ function deKey(path) {
 
 const defaults = {
   // inject image size into the rendered html
-  imageSize: "attrs",
+  imageSize: "style",
   // treat these extensions as content
   contentExtensions: "md csv ya?ml json",
   // output debug messages
@@ -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);
@@ -124,15 +127,15 @@ function getAssetSizes(srcAbs, hints) {
   if (hints.length && isImage(srcAbs)) {
     try {
       const size = getImageSize(srcAbs);
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
       if (hints.includes("attrs")) {
         width = size.width;
         height = size.height;
       }
-      if (hints.includes("url")) {
-        query = `?width=${width}&height=${height}`;
+      if (hints.includes("style")) {
+        ratio = `${size.width}/${size.height}`;
+      }
+      if (hints.includes("src") || hints.includes("url")) {
+        query = `width=${size.width}&height=${size.height}`;
       }
     } catch (err) {
       warn(`could not read image "${srcAbs}`);
@@ -319,8 +322,10 @@ async function setupSocketServer(channel, handler) {
       });
       nuxt._socketServer = server;
       server.on("upgrade", ws.serve);
+      const wsUrl = url.replace("http", "ws");
+      log(`Websocket listening on "${wsUrl}"`);
       nitro.options.runtimeConfig.public.sockets = {
-        wsUrl: url.replace("http", "ws")
+        wsUrl
       };
       nitro.hooks.hook("close", async () => {
         await ws.close();

package/dist/runtime/options.mjs

@@ -1,7 +1,7 @@
 import { matchTokens } from "./utils/string.mjs";
 export const defaults = {
   // inject image size into the rendered html
-  imageSize: "attrs",
+  imageSize: "style",
   // treat these extensions as content
   contentExtensions: "md csv ya?ml json",
   // output debug messages

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

@@ -19,15 +19,15 @@ export function getAssetSizes(srcAbs, hints) {
   if (hints.length && isImage(srcAbs)) {
     try {
       const size = getImageSize(srcAbs);
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
       if (hints.includes("attrs")) {
         width = size.width;
         height = size.height;
       }
-      if (hints.includes("url")) {
-        query = `?width=${width}&height=${height}`;
+      if (hints.includes("style")) {
+        ratio = `${size.width}/${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/sockets/factory.d.ts

@@ -1,5 +1,6 @@
 import { Callback } from '../../types';
 export declare function createWebSocket(): {
+    connect: (retry?: boolean) => void;
     send: (data: any) => void;
     addHandler(callback: Callback): void;
 } | null;

package/dist/runtime/sockets/factory.mjs

@@ -46,10 +46,17 @@ export function createWebSocket() {
       ws.send(JSON.stringify(data));
     }
   };
+  let retries = 0;
+  const url = useRuntimeConfig().public.sockets?.wsUrl;
   const connect = (retry = false) => {
     if (retry) {
-      logger.log("WS reconnecting..");
-      setTimeout(connect, 1e3);
+      retries++;
+      if (retries < 5) {
+        logger.log("Reconnecting...");
+        setTimeout(connect, 1e3);
+      } else {
+        logger.warn("Giving up!");
+      }
       return;
     }
     if (ws) {
@@ -59,10 +66,9 @@ export function createWebSocket() {
       }
       ws = void 0;
     }
-    const url = useRuntimeConfig().public.sockets?.wsUrl;
     if (url) {
       const wsUrl = `${url}ws`;
-      logger.log(`Running on ${wsUrl}`);
+      logger.log(`WS connect to ${wsUrl}`);
       ws = new WebSocket(wsUrl);
       ws.onopen = onOpen;
       ws.onmessage = onMessage;
@@ -74,6 +80,7 @@ export function createWebSocket() {
     connect();
   }
   return {
+    connect,
     send,
     addHandler(callback) {
       if (typeof callback === "function") {

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": "0.10.3",
+  "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",