nuxt-content-assets 0.9.0-beta → 0.10.1

package/README.md

@@ -40,10 +40,10 @@ I loved being in the mountains.
 
 Almost as much as being in the sea!
 
-<video src="media/seaside.mp4"></video>
+:video{src="media/seaside.mp4"}
 ```
 
-The module [processes assets](#how-it-works) and serves them together with your content, adding features such as [image sizing](#image-sizing) and [live-reload](#live-reload).  
+At build time the module [collates and serves](#how-it-works) assets and content together.
 
 ## Demo
 
@@ -82,8 +82,6 @@ export default defineNuxtConfig({
 
 Run the dev server or build and local assets should now be served alongside markdown content.
 
-See the [How it works](#how-it-works) section for more information.
-
 ## Usage
 
 ### Overview
@@ -91,15 +89,24 @@ See the [How it works](#how-it-works) section for more information.
 Use relative paths anywhere within your documents:
 
 ```mdx
+Images
 ![image](image.jpg)
-<video src="media/video.mp4" />
+
+Links
+[link](docs/article.txt)
+
+Elements / components
+:video{src="media/video.mp4"}
+
+HTML
+<iframe src="media/example.html" />
 ```
 
 Relative paths can be defined in frontmatter – as long as they are the only value:
 
 ```mdx
 ---
-title: Portfolio Item 1
+title: Portfolio
 images:
   - assets/image-1.jpg
   - assets/image-2.jpg
@@ -110,27 +117,32 @@ images:
 These values can then be passed to components:
 
 ```markdown
-::ImageGallery{:data="images"}
-::
+:image-gallery{:data="images"}
 ```
 
-See the Demo for [markup](demo/content/recipes/index.md) and [Demo](demo/components/content/ImageGallery.vue) examples.
+See the Demo for [markup](demo/content/advanced/gallery.md) and [component](demo/components/content/ContentGallery.vue) examples.
 
 ### Live reload
 
-From version `0.9.0-alpha` assets are watched and live-reloaded!
+In development, the module watches for asset additions, moves and deletes, and will update the browser live.
 
-Any additions, moves or deletes, or modifications to image content will be updated in the browser automatically.
+If you delete an asset, it will be greyed out in the browser until you replace the file or modify the path to it.
+
+If you edit an image, video, embed or iframe source, the content will update immediately, which is useful if you're looking to get that design just right!
 
 ### Image sizing
 
-The module can prevent content jumps by optionally writing image size information to generated `<img>` tags:
+You can [configure](#image-size) the module to add image size attributes to generated `<img>` tags:
 
 ```html
-<img src="/image.jpg?width=640&height=480" width="640" height="480" style="aspect-ratio:640/480">
+<img src="/image.jpg"
+     style="aspect-ratio:640/480"
+     width="640"
+     height="480"
+>
 ```
 
-If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can hook into these values via the `$attrs` property:
+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:
 
 ```vue
 <template>
@@ -146,51 +158,32 @@ export default {
 </script>
 ```
 
-For more information see the [configuration](#image-size) section and [Demo](demo/components/temp/ProseImg.vue) for an example.
-
-## How it works
-
-Nuxt Content Assets works by serving a _copy_ of your assets using [Nitro](https://nitro.unjs.io/guide/assets#custom-server-assets).
-
-When Nuxt builds, the following happens:
-
-- content sources are scanned for valid assets
-- found assets are copied to a temporary build folder
-- any relative asset paths are rewritten as absolute
-- metadata such as image size is written to a lookup file
-- finally, Nitro serves the folder for public access
-
-Note that in the rewriting phase, only specific tags and attributes are targeted :
+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:
 
-```html
-<a href="...">
-<img src="...">
-<video src="...">
-<audio src="...">
-<source src="...">
-<embed src="...">
-<iframe src="...">
+```
+:image-gallery={:data="images"}
 ```
 
 ## Configuration
 
-You can configure the module like so:
+The module can be configured in your Nuxt configuration file:
 
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  'content-assets': {    
-    // use aspect-ratio rather than attributes
+  contentAssets: {    
+    // inject image sizes into the rendered html
     imageSize: 'style',
     
-    // print debug messages to the console
+    // treat these extensions as content
+    contentExtensions: 'mdx? csv ya?ml json',
+    
+    // output debug messages
     debug: true,
   }
 })
 ```
 
-Note that from version `0.9.0-alpha` the `output` location is no longer configurable; images are copied relative to their original locations. 
-
 ### Image size
 
 You can add one or more image size hints to the generated images:
@@ -203,11 +196,11 @@ 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                      |
-| `url`   | Adds the `?width=...&height=...` query string to image frontmatter variables |
+| 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 |
 
 Note: if you add `attrs` only, include the following CSS in your app:
 
@@ -218,6 +211,18 @@ img {
 }
 ```
 
+### Content extensions
+
+This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
+
+```
+mdx? 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:
@@ -228,6 +233,16 @@ If you want to see what the module does as it runs, set `debug` to true:
 }
 ```
 
+## How it works
+
+When Nuxt builds, the module scans all content sources for assets, copies them to an accessible public assets folder, and indexes path and image metadata.
+
+After Nuxt Content has run the parsed content is traversed, and both element attributes and frontmatter properties are checked to see if they resolve to the indexed asset paths.
+
+If they do, then the attribute or property is rewritten with the absolute path. If the asset is an image, then the element or path is optionally updated with size attributes or size query string.
+
+Finally, Nitro serves the site, and any requests made to the transformed asset paths should be picked up and the *copied* asset served by the browser.
+
 ## Development
 
 Should you wish to develop the project, the scripts are:

package/dist/module.d.ts

@@ -1,8 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
-    output?: string;
-    imageSize?: string;
+    imageSize?: string | string[];
+    contentExtensions: string | string[];
     debug?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-content-assets",
-  "configKey": "content-assets",
+  "configKey": "contentAssets",
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.9.0-beta"
+  "version": "0.10.1"
 }

package/dist/module.mjs

@@ -7,12 +7,15 @@ import getImageSize from 'image-size';
 import { createStorage } from 'unstorage';
 import githubDriver from 'unstorage/drivers/github';
 import fsDriver from 'unstorage/drivers/fs';
-import { hash } from 'ohash';
+import 'ohash';
 import { listen } from 'listhen';
 import { WebSocketServer, WebSocket } from 'ws';
 
-function matchWords(value) {
-  return typeof value === "string" ? value.match(/\w+/g) || [] : [];
+function matchTokens(value) {
+  const tokens = typeof value === "string" ? value.match(/[^\s,|]+/g) || [] : Array.isArray(value) ? value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+    return [...output, ...matchTokens(input)];
+  }, []) : [];
+  return Array.from(new Set(tokens));
 }
 function toPath(key) {
   return key.replaceAll(":", "/");
@@ -21,29 +24,40 @@ function deKey(path) {
   return path.replace(/^[^:]+:/, "");
 }
 
-const defaults$1 = {
-  assetsDir: "/assets/",
-  assetsPattern: "[path]/[file]"
+const defaults = {
+  // inject image size into the rendered html
+  imageSize: "attrs",
+  // treat these extensions as content
+  contentExtensions: "md csv ya?ml json",
+  // output debug messages
+  debug: false
 };
 const extensions = {
-  image: matchWords("png jpg jpeg gif svg webp ico"),
-  media: matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
+  // used to get image size
+  image: matchTokens("png jpg jpeg gif svg webp ico"),
+  // unused for now
+  media: matchTokens("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
 };
+function getIgnores(extensions2) {
+  return `^((?!(${matchTokens(extensions2).join("|")})).)*$`;
+}
 
+function isExcluded(path) {
+  return path.split("/").some((segment) => segment.startsWith(".") || segment.startsWith("_"));
+}
 function isImage(path) {
   const ext = Path__default.extname(path).substring(1);
   return extensions.image.includes(ext);
 }
 function isArticle(path) {
-  return /\.mdx?$/.test(path);
+  return path.endsWith(".md");
 }
 function isAsset(path) {
-  const ext = Path__default.extname(path);
-  return !!ext && ext !== ".DS_Store" && !isArticle(path);
+  return !isExcluded(path) && !isArticle(path);
 }
 
 const moduleName = "nuxt-content-assets";
-const moduleKey = "content-assets";
+const moduleKey = "contentAssets";
 
 function log(...data) {
   console.info(`[${moduleKey}]`, ...data);
@@ -85,7 +99,17 @@ function removeFolder(path) {
   }
 }
 
-function getAssetConfig(srcDir, srcAbs, pattern, hints) {
+function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
+  const id = srcRel.replaceAll("/", ":");
+  return {
+    id,
+    srcRel,
+    srcAttr
+  };
+}
+function getAssetSizes(srcAbs, hints) {
   let width = void 0;
   let height = void 0;
   let ratio = void 0;
@@ -107,10 +131,12 @@ function getAssetConfig(srcDir, srcAbs, pattern, hints) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  const srcRel = Path.relative(srcDir, srcAbs);
-  const srcAttr = "/" + srcRel;
-  const id = srcRel.replaceAll("/", ":");
-  return { id, srcRel, srcAttr, width, height, ratio, query };
+  return {
+    width,
+    height,
+    ratio,
+    query
+  };
 }
 
 function makeStorage(source, key = "") {
@@ -120,7 +146,10 @@ function makeStorage(source, key = "") {
     case "fs":
       storage.mount(key, fsDriver({
         ...options,
-        ignore: ["[^:]+?\\.md"]
+        ignore: [
+          "[^:]+?\\.md",
+          "_dir\\.yml"
+        ]
       }));
       break;
     case "github":
@@ -135,7 +164,7 @@ function makeStorage(source, key = "") {
 }
 function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(key2)) {
+    if (isAsset(toPath(key2))) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -181,7 +210,7 @@ function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.filter(isAsset);
+    return keys.map(toPath).filter(isAsset);
   }
   async function init() {
     const keys = await getKeys();
@@ -201,30 +230,6 @@ function makeSourceManager(key, source, publicPath, callback) {
   };
 }
 
-const replacers = {
-  key: (src) => Path__default.dirname(src).split("/").filter((e) => e).shift() || "",
-  path: (src) => Path__default.dirname(src),
-  folder: (src) => Path__default.dirname(src).replace(/[^/]+\//, ""),
-  file: (src) => Path__default.basename(src),
-  name: (src) => Path__default.basename(src, Path__default.extname(src)),
-  extname: (src) => Path__default.extname(src),
-  ext: (src) => Path__default.extname(src).substring(1),
-  hash: (src) => hash({ src })
-};
-function interpolatePattern(pattern, src, warn = false) {
-  return Path__default.join(pattern.replace(/\[\w+]/g, (match) => {
-    const name = match.substring(1, match.length - 1);
-    const fn = replacers[name];
-    if (fn) {
-      return fn(src);
-    }
-    if (warn) {
-      log(`Unknown output token ${match}`, true);
-    }
-    return match;
-  }));
-}
-
 function createWebSocket() {
   const wss = new WebSocketServer({ noServer: true });
   const serve = (req, socket = req.socket, head = "") => wss.handleUpgrade(req, socket, head, (client) => wss.emit("connection", client, req));
@@ -288,19 +293,16 @@ function makeChannelBroker(ws2) {
 }
 const ws = createWebSocket();
 const broker = makeChannelBroker(ws);
-const defaults = {
-  port: {
-    port: 4001,
-    portRange: [4001, 4040]
-  },
-  hostname: "localhost",
-  showURL: false
-};
 async function setupSocketServer(channel, handler) {
   const nuxt = useNuxt();
   nuxt.hook("nitro:init", async (nitro) => {
     if (!nuxt._socketServer) {
-      const { server, url } = await listen(() => "Nuxt Sockets", defaults);
+      const defaults = nuxt.options.runtimeConfig.content.watch.ws;
+      const { server, url } = await listen(() => "Nuxt Content Assets", {
+        port: defaults.port.port + 1,
+        hostname: defaults.hostname,
+        showURL: false
+      });
       nuxt._socketServer = server;
       server.on("upgrade", ws.serve);
       nitro.options.runtimeConfig.public.sockets = {
@@ -337,11 +339,7 @@ const module = defineNuxtModule({
       nuxt: "^3.0.0"
     }
   },
-  defaults: {
-    output: `${defaults$1.assetsDir}/${defaults$1.assetsPattern}`,
-    imageSize: "",
-    debug: false
-  },
+  defaults,
   async setup(options, nuxt) {
     var _a, _b;
     const pluginPath = resolve("./runtime/plugin");
@@ -358,17 +356,14 @@ const module = defineNuxtModule({
     if (nuxt.options.content) {
       (_b = nuxt.options.content).ignores || (_b.ignores = []);
     }
-    nuxt.options.content?.ignores.push("^((?!(mdx?|json|ya?ml|csv)).)*$");
-    const output = options.output || defaults$1.assetsDir;
-    const matches = output.match(/([^[]+)(.*)?/);
-    const assetsPattern = (matches ? matches[2] : "") || defaults$1.assetsPattern;
-    interpolatePattern(assetsPattern, "", true);
-    const imageFlags = matchWords(options.imageSize);
-    const sources = nuxt.options._layers.map((layer) => layer.config?.content?.sources).reduce((output2, sources2) => {
+    const ignores = getIgnores(options.contentExtensions);
+    nuxt.options.content?.ignores.push(ignores);
+    const imageFlags = matchTokens(options.imageSize);
+    const sources = nuxt.options._layers.map((layer) => layer.config?.content?.sources).reduce((output, sources2) => {
       if (sources2) {
-        Object.assign(output2, sources2);
+        Object.assign(output, sources2);
       }
-      return output2;
+      return output;
     }, {});
     if (Object.keys(sources).length === 0 || !sources.content) {
       const content = nuxt.options.srcDir + "/content";
@@ -379,23 +374,9 @@ const module = defineNuxtModule({
         };
       }
     }
-    addPlugin(resolve("./runtime/sockets/plugin"));
-    const socket = nuxt.options.dev ? await setupSocketServer("content-assets") : null;
-    function removeAsset(src) {
-      const srcRel = Path.relative(publicPath, src);
-      delete assets[srcRel];
-      saveAssets();
-      return "/" + srcRel;
-    }
     function updateAsset(src) {
-      const {
-        srcRel,
-        srcAttr,
-        width,
-        height,
-        ratio,
-        query
-      } = getAssetConfig(publicPath, src, assetsPattern, imageFlags);
+      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
+      const { width, height, ratio, query } = getAssetSizes(src, imageFlags);
       assets[srcRel] = {
         srcRel,
         srcAttr,
@@ -407,22 +388,30 @@ const module = defineNuxtModule({
       saveAssets();
       return srcAttr;
     }
-    function watchAsset(event, absTrg) {
-      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
-      if (socket) {
-        socket.send({ event, src });
-      }
+    function removeAsset(src) {
+      const { srcRel, srcAttr } = getAssetPaths(publicPath, src);
+      delete assets[srcRel];
+      saveAssets();
+      return srcAttr;
     }
     const saveAssets = debounce(() => {
       writeFile(indexPath, assets);
     }, 50);
     const assets = {};
+    function onAssetChange(event, absTrg) {
+      const src = event === "update" ? updateAsset(absTrg) : removeAsset(absTrg);
+      if (socket) {
+        socket.send({ event, src });
+      }
+    }
+    addPlugin(resolve("./runtime/sockets/plugin"));
+    const socket = nuxt.options.dev ? await setupSocketServer("content-assets") : null;
     const managers = {};
     for (const [key, source] of Object.entries(sources)) {
       if (options.debug) {
         log(`Creating source "${key}"`);
       }
-      managers[key] = makeSourceManager(key, source, publicPath, watchAsset);
+      managers[key] = makeSourceManager(key, source, publicPath, onAssetChange);
     }
     nuxt.hook("build:before", async function() {
       for (const [key, manager] of Object.entries(managers)) {
@@ -434,7 +423,6 @@ const module = defineNuxtModule({
       }
     });
     const virtualConfig = [
-      // `export const assets = ${JSON.stringify(assets, null, '  ')}`,
       `export const cachePath = '${cachePath}'`
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {

package/dist/runtime/config.d.ts

@@ -1,2 +1,2 @@
 export declare const moduleName = "nuxt-content-assets";
-export declare const moduleKey = "content-assets";
+export declare const moduleKey = "contentAssets";

package/dist/runtime/config.mjs

@@ -1,2 +1,2 @@
 export const moduleName = "nuxt-content-assets";
-export const moduleKey = "content-assets";
+export const moduleKey = "contentAssets";

package/dist/runtime/options.d.ts

@@ -1,9 +1,10 @@
 export declare const defaults: {
-    assetsDir: string;
-    assetsPattern: string;
+    imageSize: string;
+    contentExtensions: string;
+    debug: boolean;
 };
-export declare const tags: string[];
 export declare const extensions: {
     image: string[];
     media: string[];
 };
+export declare function getIgnores(extensions: string | string[]): string;

package/dist/runtime/options.mjs

@@ -1,10 +1,18 @@
-import { matchWords } from "./utils/string.mjs";
+import { matchTokens } from "./utils/string.mjs";
 export const defaults = {
-  assetsDir: "/assets/",
-  assetsPattern: "[path]/[file]"
+  // inject image size into the rendered html
+  imageSize: "attrs",
+  // treat these extensions as content
+  contentExtensions: "md csv ya?ml json",
+  // output debug messages
+  debug: false
 };
-export const tags = ["img", "video", "audio", "source", "embed", "iframe", "a"];
 export const extensions = {
-  image: matchWords("png jpg jpeg gif svg webp ico"),
-  media: matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
+  // used to get image size
+  image: matchTokens("png jpg jpeg gif svg webp ico"),
+  // unused for now
+  media: matchTokens("mp3 m4a wav mp4 mov webm ogg avi flv avchd")
 };
+export function getIgnores(extensions2) {
+  return `^((?!(${matchTokens(extensions2).join("|")})).)*$`;
+}

package/dist/runtime/plugin.mjs

@@ -1,7 +1,6 @@
 import Path from "path";
 import { visit } from "unist-util-visit";
 import { deKey, isValidAsset, toPath, walk } from "./utils/index.mjs";
-import { tags } from "./options.mjs";
 import { cachePath } from "#nuxt-content-assets";
 import { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
@@ -32,11 +31,14 @@ const plugin = async (nitro) => {
           }
         }
       }, filter);
-      visit(file.body, (n) => tags.includes(n.tag), (node) => {
-        if (node.props.src) {
-          const { srcAttr, width, height, ratio } = getAsset(srcDoc, node.props.src);
+      visit(file.body, (node) => node.type === "element", (node) => {
+        for (const [prop, value] of Object.entries(node.props)) {
+          if (typeof value !== "string") {
+            return;
+          }
+          const { srcAttr, width, height, ratio } = getAsset(srcDoc, value);
           if (srcAttr) {
-            node.props.src = srcAttr;
+            node.props[prop] = srcAttr;
             if (width && height) {
               node.props.width = width;
               node.props.height = height;
@@ -44,12 +46,7 @@ const plugin = async (nitro) => {
             if (ratio) {
               node.props.style = `aspect-ratio:${ratio}`;
             }
-          }
-        } else if (node.tag === "a") {
-          if (node.props.href) {
-            const { srcAttr } = getAsset(srcDoc, node.props.href);
-            if (srcAttr) {
-              node.props.href = srcAttr;
+            if (node.tag === "a" && !node.props.target) {
               node.props.target = "_blank";
             }
           }

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

@@ -8,11 +8,25 @@ export type AssetConfig = {
     query?: string;
 };
 /**
- * Get config for asset
+ * Parse asset paths from absolute path
  *
  * @param srcDir    The absolute path to the asset's source folder
  * @param srcAbs    The absolute path to the asset itself
- * @param pattern   The user-defined pattern to create the public src attribute
+ */
+export declare function getAssetPaths(srcDir: string, srcAbs: string): {
+    id: any;
+    srcRel: string;
+    srcAttr: 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 getAssetConfig(srcDir: string, srcAbs: string, pattern: string, hints: string[]): AssetConfig;
+export declare function getAssetSizes(srcAbs: string, hints: string[]): {
+    width: number | undefined;
+    height: number | undefined;
+    ratio: string | undefined;
+    query: string | undefined;
+};

package/dist/runtime/services/assets.mjs

@@ -1,7 +1,17 @@
 import * as Path from "path";
 import getImageSize from "image-size";
 import { isImage, warn } from "../utils/index.mjs";
-export function getAssetConfig(srcDir, srcAbs, pattern, hints) {
+export function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
+  const id = srcRel.replaceAll("/", ":");
+  return {
+    id,
+    srcRel,
+    srcAttr
+  };
+}
+export function getAssetSizes(srcAbs, hints) {
   let width = void 0;
   let height = void 0;
   let ratio = void 0;
@@ -23,8 +33,10 @@ export function getAssetConfig(srcDir, srcAbs, pattern, hints) {
       warn(`could not read image "${srcAbs}`);
     }
   }
-  const srcRel = Path.relative(srcDir, srcAbs);
-  const srcAttr = "/" + srcRel;
-  const id = srcRel.replaceAll("/", ":");
-  return { id, srcRel, srcAttr, width, height, ratio, query };
+  return {
+    width,
+    height,
+    ratio,
+    query
+  };
 }

package/dist/runtime/services/sources.mjs

@@ -10,7 +10,10 @@ export function makeStorage(source, key = "") {
     case "fs":
       storage.mount(key, fsDriver({
         ...options,
-        ignore: ["[^:]+?\\.md"]
+        ignore: [
+          "[^:]+?\\.md",
+          "_dir\\.yml"
+        ]
       }));
       break;
     case "github":
@@ -25,7 +28,7 @@ export function makeStorage(source, key = "") {
 }
 export function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(key2)) {
+    if (isAsset(toPath(key2))) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -71,7 +74,7 @@ export function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.filter(isAsset);
+    return keys.map(toPath).filter(isAsset);
   }
   async function init() {
     const keys = await getKeys();

package/dist/runtime/sockets/factory.mjs

@@ -39,11 +39,7 @@ export function createWebSocket() {
       logger.warn("Error parsing message:", message.data);
       return;
     }
-    handlers.forEach((handler) => {
-      if (typeof handler === "function") {
-        handler(data);
-      }
-    });
+    handlers.forEach((handler) => handler(data));
   };
   const send = (data) => {
     if (ws) {
@@ -80,7 +76,9 @@ export function createWebSocket() {
   return {
     send,
     addHandler(callback) {
-      handlers.push(callback);
+      if (typeof callback === "function") {
+        handlers.push(callback);
+      }
     }
   };
 }

package/dist/runtime/sockets/plugin.mjs

@@ -8,11 +8,10 @@ export default defineNuxtPlugin(async () => {
         const { event, src } = data;
         if (src) {
           const isUpdate = event === "update";
-          document.querySelectorAll(`img[src^="${src}"]`).forEach((el) => {
-            const img = el;
-            img.style.opacity = isUpdate ? "1" : "0.2";
+          document.querySelectorAll(`:is(img, video, source, embed, iframe):where([src^="${src}"])`).forEach((el) => {
+            el.style.opacity = isUpdate ? "1" : "0.2";
             if (isUpdate) {
-              img.setAttribute("src", `${src}?${(/* @__PURE__ */ new Date()).getTime()}`);
+              el.setAttribute("src", `${src}?${(/* @__PURE__ */ new Date()).getTime()}`);
             }
           });
         }

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

@@ -3,15 +3,20 @@
  */
 export declare function isRelative(path: string): boolean;
 /**
- * Test path or id for image extension
+ * Test if path is excluded (_partial or .ignored)
+ * @param path
+ */
+export declare function isExcluded(path: string): boolean;
+/**
+ * Test path for image extension
  */
 export declare function isImage(path: string): boolean;
 /**
- * Test path or id is markdown
+ * Test path is markdown
  */
 export declare function isArticle(path: string): boolean;
 /**
- * Test path or id is asset
+ * Test path is asset
  */
 export declare function isAsset(path: string): boolean;
 /**

package/dist/runtime/utils/assert.mjs

@@ -3,16 +3,18 @@ import { extensions } from "../options.mjs";
 export function isRelative(path) {
   return !(path.startsWith("http") || Path.isAbsolute(path));
 }
+export function isExcluded(path) {
+  return path.split("/").some((segment) => segment.startsWith(".") || segment.startsWith("_"));
+}
 export function isImage(path) {
   const ext = Path.extname(path).substring(1);
   return extensions.image.includes(ext);
 }
 export function isArticle(path) {
-  return /\.mdx?$/.test(path);
+  return path.endsWith(".md");
 }
 export function isAsset(path) {
-  const ext = Path.extname(path);
-  return !!ext && ext !== ".DS_Store" && !isArticle(path);
+  return !isExcluded(path) && !isArticle(path);
 }
 export function isValidAsset(value) {
   return typeof value === "string" && isAsset(value) && isRelative(value);

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

@@ -1,7 +1,9 @@
 /**
- * Get matched words from a string
+ * Get matched tokens (words, expressions) from a string or an array of possible strings
+ *
+ * Tokens may be separated by space, comma or pipe
  */
-export declare function matchWords(value?: string): string[];
+export declare function matchTokens(value?: string | unknown[]): string[];
 export declare function toPath(key: string): string;
 export declare function toKey(path: string): any;
 export declare function deKey(path: string): string;

package/dist/runtime/utils/string.mjs

@@ -1,5 +1,8 @@
-export function matchWords(value) {
-  return typeof value === "string" ? value.match(/\w+/g) || [] : [];
+export function matchTokens(value) {
+  const tokens = typeof value === "string" ? value.match(/[^\s,|]+/g) || [] : Array.isArray(value) ? value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+    return [...output, ...matchTokens(input)];
+  }, []) : [];
+  return Array.from(new Set(tokens));
 }
 export function toPath(key) {
   return key.replaceAll(":", "/");

package/dist/types.d.ts

@@ -2,8 +2,8 @@
 import { ModuleOptions } from './module'
 
 declare module '@nuxt/schema' {
-  interface NuxtConfig { ['content-assets']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['content-assets']?: ModuleOptions }
+  interface NuxtConfig { ['contentAssets']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['contentAssets']?: ModuleOptions }
 }
 
 

package/package.json

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