nuxt-content-assets 0.10.1 → 0.10.3

package/README.md

@@ -237,9 +237,9 @@ If you want to see what the module does as it runs, set `debug` to true:
 
 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.
+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.
+If they do, then the attribute or property is rewritten with the absolute path. If the asset is an image, then the element or metadata is optionally updated with size attributes or a 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.
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.10.1"
+  "version": "0.10.3"
 }

package/dist/module.mjs

@@ -12,10 +12,19 @@ import { listen } from 'listhen';
 import { WebSocketServer, WebSocket } from 'ws';
 
 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));
+  let tokens = [];
+  if (typeof value === "string") {
+    tokens = value.match(/[^\s,|]+/g) || [];
+  } else if (Array.isArray(value)) {
+    tokens = value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+      return [...output, ...matchTokens(input)];
+    }, []);
+  } else if (!!value && typeof value === "object") {
+    tokens = Object.values(value).reduce((output, value2) => {
+      return [...output, ...matchTokens(value2)];
+    }, []);
+  }
+  return tokens.length ? Array.from(new Set(tokens)) : tokens;
 }
 function toPath(key) {
   return key.replaceAll(":", "/");
@@ -53,17 +62,15 @@ function isArticle(path) {
   return path.endsWith(".md");
 }
 function isAsset(path) {
-  return !isExcluded(path) && !isArticle(path);
+  return !isArticle(path);
 }
 
-const moduleName = "nuxt-content-assets";
-const moduleKey = "contentAssets";
-
+const label = "[content-assets]";
 function log(...data) {
-  console.info(`[${moduleKey}]`, ...data);
+  console.info(label, ...data);
 }
 function warn(...data) {
-  console.warn(`[${moduleKey}]`, ...data);
+  console.warn(label, ...data);
 }
 function list(message, items) {
   log(`${message}:
@@ -139,6 +146,10 @@ function getAssetSizes(srcAbs, hints) {
   };
 }
 
+function isAssetId(id) {
+  const path = toPath(id);
+  return !isExcluded(path) && isAsset(path);
+}
 function makeStorage(source, key = "") {
   const storage = createStorage();
   const options = typeof source === "string" ? { driver: "fs", base: source } : source;
@@ -164,7 +175,7 @@ function makeStorage(source, key = "") {
 }
 function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(toPath(key2))) {
+    if (isAssetId(key2)) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -210,7 +221,7 @@ function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.map(toPath).filter(isAsset);
+    return keys.filter(isAssetId);
   }
   async function init() {
     const keys = await getKeys();
@@ -230,6 +241,9 @@ function makeSourceManager(key, source, publicPath, callback) {
   };
 }
 
+const moduleName = "nuxt-content-assets";
+const moduleKey = "contentAssets";
+
 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));
@@ -422,8 +436,10 @@ const module = defineNuxtModule({
         }
       }
     });
+    const makeVar = (name, value) => `export const ${name} = ${JSON.stringify(value)};`;
     const virtualConfig = [
-      `export const cachePath = '${cachePath}'`
+      makeVar("cachePath", cachePath),
+      makeVar("debug", options.debug)
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {
       config.plugins || (config.plugins = []);

package/dist/runtime/plugin.mjs

@@ -1,7 +1,7 @@
 import Path from "path";
-import { visit } from "unist-util-visit";
-import { deKey, isValidAsset, toPath, walk } from "./utils/index.mjs";
-import { cachePath } from "#nuxt-content-assets";
+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 { makeStorage } from "./services/index.mjs";
 async function updateAssets() {
   assets = await storage.getItem("assets.json");
@@ -14,44 +14,92 @@ storage.watch(async (event, key) => {
 });
 let assets = {};
 void updateAssets();
-function getAsset(srcDoc, relAsset) {
-  const srcAsset = Path.join(Path.dirname(srcDoc), relAsset);
-  return assets[srcAsset] || {};
-}
+const tags = {
+  // unlikely to contain assets
+  exclude: matchTokens({
+    container: "pre code code-inline",
+    formatting: "acronym abbr address bdi bdo big center cite del dfn font ins kbd mark meter progress q rp rt ruby s samp small strike sub sup time tt u var wbr",
+    headers: "h1 h2 h3 h4 h5 h6",
+    controls: "input textarea button select optgroup option label legend datalist output",
+    media: "map area canvas svg",
+    other: "style script noscript template",
+    empty: "hr br"
+  }),
+  // may contain assets
+  include: matchTokens({
+    content: "main header footer section article aside details dialog summary data object nav blockquote div span p",
+    table: "table caption th tr td thead tbody tfoot col colgroup",
+    media: "figcaption figure picture",
+    form: "form fieldset",
+    list: "ul ol li dir dl dt dd",
+    formatting: "strong b em i"
+  }),
+  // assets
+  assets: "a img audio source track video embed"
+};
 const plugin = async (nitro) => {
   nitro.hooks.hook("content:file:afterParse", async (file) => {
-    if (file._id.endsWith(".md")) {
-      const srcDoc = toPath(deKey(file._id));
+    const { _id } = file;
+    if (_id.endsWith(".md")) {
+      const srcDoc = toPath(deKey(_id));
+      const srcDir = Path.dirname(srcDoc);
+      const updated = [];
+      const getAsset = (relAsset) => {
+        const srcAsset = Path.join(srcDir, relAsset);
+        return assets[srcAsset] || {};
+      };
       const filter = (value, key) => !(String(key).startsWith("_") || key === "body");
       walk(file, (value, parent, key) => {
         if (isValidAsset(value)) {
-          const { srcAttr, query } = getAsset(srcDoc, value);
+          const { srcAttr, query } = getAsset(value);
           if (srcAttr) {
             parent[key] = srcAttr + (query || "");
+            updated.push(`meta: ${key} to "${srcAttr}"`);
           }
         }
       }, filter);
       visit(file.body, (node) => node.type === "element", (node) => {
-        for (const [prop, value] of Object.entries(node.props)) {
+        const { tag, props } = node;
+        const excluded = tags.exclude.includes(tag);
+        if (excluded) {
+          return SKIP;
+        }
+        const included = tags.include.includes(tag);
+        if (included || !props) {
+          return CONTINUE;
+        }
+        for (const [prop, value] of Object.entries(props)) {
           if (typeof value !== "string") {
             return;
           }
-          const { srcAttr, width, height, ratio } = getAsset(srcDoc, value);
+          const { srcAttr, width, height, ratio } = getAsset(value);
           if (srcAttr) {
             node.props[prop] = srcAttr;
-            if (width && height) {
-              node.props.width = width;
-              node.props.height = height;
-            }
-            if (ratio) {
-              node.props.style = `aspect-ratio:${ratio}`;
+            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 (node.tag === "a" && !node.props.target) {
-              node.props.target = "_blank";
+            if (node.tag === "a") {
+              node.props.target ||= "_blank";
             }
+            updated.push(`page: ${tag}[${prop}] to "${srcAttr}"`);
           }
         }
       });
+      if (debug && updated.length) {
+        list(`Processed "/${srcDoc}"`, updated);
+        console.log();
+      }
     }
   });
 };

package/dist/runtime/services/sources.mjs

@@ -2,7 +2,21 @@ import * as Path from "path";
 import { createStorage } from "unstorage";
 import githubDriver from "unstorage/drivers/github";
 import fsDriver from "unstorage/drivers/fs";
-import { warn, isAsset, toPath, removeFile, copyFile, writeBlob, writeFile, deKey } from "../utils/index.mjs";
+import {
+  warn,
+  isAsset,
+  toPath,
+  removeFile,
+  copyFile,
+  writeBlob,
+  writeFile,
+  deKey,
+  isExcluded
+} from "../utils/index.mjs";
+function isAssetId(id) {
+  const path = toPath(id);
+  return !isExcluded(path) && isAsset(path);
+}
 export function makeStorage(source, key = "") {
   const storage = createStorage();
   const options = typeof source === "string" ? { driver: "fs", base: source } : source;
@@ -28,7 +42,7 @@ export function makeStorage(source, key = "") {
 }
 export function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(toPath(key2))) {
+    if (isAssetId(key2)) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -74,7 +88,7 @@ export function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.map(toPath).filter(isAsset);
+    return keys.filter(isAssetId);
   }
   async function init() {
     const keys = await getKeys();

package/dist/runtime/utils/assert.mjs

@@ -14,7 +14,7 @@ export function isArticle(path) {
   return path.endsWith(".md");
 }
 export function isAsset(path) {
-  return !isExcluded(path) && !isArticle(path);
+  return !isArticle(path);
 }
 export function isValidAsset(value) {
   return typeof value === "string" && isAsset(value) && isRelative(value);

package/dist/runtime/utils/debug.mjs

@@ -1,9 +1,9 @@
-import { moduleKey } from "../config.mjs";
+const label = "[content-assets]";
 export function log(...data) {
-  console.info(`[${moduleKey}]`, ...data);
+  console.info(label, ...data);
 }
 export function warn(...data) {
-  console.warn(`[${moduleKey}]`, ...data);
+  console.warn(label, ...data);
 }
 export function list(message, items) {
   log(`${message}:

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

@@ -3,7 +3,7 @@
  *
  * Tokens may be separated by space, comma or pipe
  */
-export declare function matchTokens(value?: string | unknown[]): string[];
+export declare function matchTokens(value: any): 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,8 +1,17 @@
 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));
+  let tokens = [];
+  if (typeof value === "string") {
+    tokens = value.match(/[^\s,|]+/g) || [];
+  } else if (Array.isArray(value)) {
+    tokens = value.filter((value2) => typeof value2 === "string").reduce((output, input) => {
+      return [...output, ...matchTokens(input)];
+    }, []);
+  } else if (!!value && typeof value === "object") {
+    tokens = Object.values(value).reduce((output, value2) => {
+      return [...output, ...matchTokens(value2)];
+    }, []);
+  }
+  return tokens.length ? Array.from(new Set(tokens)) : tokens;
 }
 export function toPath(key) {
   return key.replaceAll(":", "/");

package/package.json

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