nuxt-content-assets 0.10.0 → 0.10.2

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.0"
+  "version": "0.10.2"
 }

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(":", "/");
@@ -28,7 +37,7 @@ const defaults = {
   // inject image size into the rendered html
   imageSize: "attrs",
   // treat these extensions as content
-  contentExtensions: "mdx? csv ya?ml json",
+  contentExtensions: "md csv ya?ml json",
   // output debug messages
   debug: false
 };
@@ -42,26 +51,26 @@ 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 !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}:
@@ -137,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;
@@ -144,7 +157,10 @@ function makeStorage(source, key = "") {
     case "fs":
       storage.mount(key, fsDriver({
         ...options,
-        ignore: ["[^:]+?\\.md"]
+        ignore: [
+          "[^:]+?\\.md",
+          "_dir\\.yml"
+        ]
       }));
       break;
     case "github":
@@ -159,7 +175,7 @@ function makeStorage(source, key = "") {
 }
 function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(key2)) {
+    if (isAssetId(key2)) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -205,7 +221,7 @@ function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.filter(isAsset);
+    return keys.filter(isAssetId);
   }
   async function init() {
     const keys = await getKeys();
@@ -225,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));
@@ -417,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/options.mjs

@@ -3,7 +3,7 @@ export const defaults = {
   // inject image size into the rendered html
   imageSize: "attrs",
   // treat these extensions as content
-  contentExtensions: "mdx? csv ya?ml json",
+  contentExtensions: "md csv ya?ml json",
   // output debug messages
   debug: false
 };

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,30 +14,70 @@ 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
+  content: 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
+  props: 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 noContent = tags.content.includes(tag);
+        if (noContent) {
+          return SKIP;
+        }
+        const noProps = tags.props.includes(tag);
+        if (noProps) {
+          return CONTINUE;
+        }
+        if (!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) {
+            updated.push(`page: ${tag}[${prop}] to "${srcAttr}"`);
             node.props[prop] = srcAttr;
             if (width && height) {
               node.props.width = width;
@@ -52,6 +92,10 @@ const plugin = async (nitro) => {
           }
         }
       });
+      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;
@@ -10,7 +24,10 @@ export function makeStorage(source, key = "") {
     case "fs":
       storage.mount(key, fsDriver({
         ...options,
-        ignore: ["[^:]+?\\.md"]
+        ignore: [
+          "[^:]+?\\.md",
+          "_dir\\.yml"
+        ]
       }));
       break;
     case "github":
@@ -25,7 +42,7 @@ export function makeStorage(source, key = "") {
 }
 export function makeSourceManager(key, source, publicPath, callback) {
   async function onWatch(event, key2) {
-    if (isAsset(key2)) {
+    if (isAssetId(key2)) {
       const path = event === "update" ? await copyItem(key2) : removeItem(key2);
       if (callback) {
         callback(event, path);
@@ -71,7 +88,7 @@ export function makeSourceManager(key, source, publicPath, callback) {
   }
   async function getKeys() {
     const keys = await storage.getKeys();
-    return keys.filter(isAsset);
+    return keys.filter(isAssetId);
   }
   async function init() {
     const keys = await getKeys();

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 !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.0",
+  "version": "0.10.2",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",