nuxt-content-assets 1.1.1 → 1.2.1

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

@@ -0,0 +1,41 @@
+import { ParsedContent, AssetConfig } from '../../types';
+/**
+ * Manages the public assets
+ */
+export declare function makeAssetsManager(publicPath: string): {
+    setAsset: (path: string) => AssetConfig;
+    getAsset: (path: string) => AssetConfig | undefined;
+    removeAsset: (path: string) => AssetConfig | undefined;
+    resolveAsset: (content: ParsedContent, relAsset: string, registerContent?: boolean) => AssetConfig;
+};
+/**
+ * Hash of replacer functions
+ */
+export declare const replacers: Record<string, (src: string) => string>;
+/**
+ * Interpolate assets path pattern
+ *
+ * @param pattern   A path pattern with tokens
+ * @param src       The relative path to a src asset
+ * @param warn      An optional flag to warn for unknown tokens
+ */
+export declare function interpolatePattern(pattern: string, src: string, warn?: boolean): string;
+/**
+ * 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
+ */
+export declare function getAssetPaths(srcDir: string, srcAbs: string): {
+    srcRel: string;
+    srcAttr: string;
+};
+/**
+ * Get asset image sizes
+ *
+ * @param srcAbs    The absolute path to the asset itself
+ */
+export declare function getAssetSize(srcAbs: string): {
+    width?: number;
+    height?: number;
+};

package/dist/runtime/assets/public.mjs

@@ -0,0 +1,111 @@
+import * as Path from "path";
+import getImageSize from "image-size";
+import debounce from "debounce";
+import { hash } from "ohash";
+import { makeSourceStorage } from "./source.mjs";
+import { isImage, warn, log } from "../utils/index.mjs";
+export function makeAssetsManager(publicPath) {
+  const indexKey = "assets.json";
+  const storage = makeSourceStorage(Path.join(publicPath, ".."));
+  storage.watch(async (event, key) => {
+    if (event === "update" && key === indexKey) {
+      await load();
+    }
+  });
+  const assets = {};
+  async function load() {
+    const data = await storage.getItem(indexKey);
+    Object.assign(assets, data || {});
+  }
+  const save = debounce(function() {
+    storage.setItem(indexKey, assets);
+  }, 50);
+  function resolveAsset(content, relAsset, registerContent = false) {
+    const srcDir = Path.dirname(content._file);
+    const srcAsset = Path.join(srcDir, relAsset);
+    const asset = assets[srcAsset];
+    if (asset && registerContent) {
+      const { _id } = content;
+      if (!asset.content.includes(_id)) {
+        asset.content.push(_id);
+        save();
+      }
+    }
+    return asset || {};
+  }
+  function setAsset(path) {
+    const { srcRel, srcAttr } = getAssetPaths(publicPath, path);
+    const { width, height } = getAssetSize(path);
+    const oldAsset = assets[srcRel];
+    const newAsset = {
+      srcAttr,
+      content: oldAsset?.content || [],
+      width,
+      height
+    };
+    assets[srcRel] = newAsset;
+    save();
+    return newAsset;
+  }
+  function getAsset(path) {
+    const { srcRel } = getAssetPaths(publicPath, path);
+    return srcRel ? { ...assets[srcRel] } : void 0;
+  }
+  function removeAsset(path) {
+    const { srcRel } = getAssetPaths(publicPath, path);
+    const asset = assets[srcRel];
+    if (asset) {
+      delete assets[srcRel];
+      save();
+    }
+    return asset;
+  }
+  void load();
+  return {
+    setAsset,
+    getAsset,
+    removeAsset,
+    resolveAsset
+  };
+}
+export const replacers = {
+  key: (src) => Path.dirname(src).split("/").filter((e) => e).shift() || "",
+  path: (src) => Path.dirname(src),
+  folder: (src) => Path.dirname(src).replace(/[^/]+\//, ""),
+  file: (src) => Path.basename(src),
+  name: (src) => Path.basename(src, Path.extname(src)),
+  extname: (src) => Path.extname(src),
+  ext: (src) => Path.extname(src).substring(1),
+  hash: (src) => hash({ src })
+};
+export function interpolatePattern(pattern, src, warn2 = false) {
+  return Path.join(pattern.replace(/\[\w+]/g, (match) => {
+    const name = match.substring(1, match.length - 1);
+    const fn = replacers[name];
+    if (fn) {
+      return fn(src);
+    }
+    if (warn2) {
+      log(`Unknown output token ${match}`, true);
+    }
+    return match;
+  }));
+}
+export function getAssetPaths(srcDir, srcAbs) {
+  const srcRel = Path.relative(srcDir, srcAbs);
+  const srcAttr = "/" + srcRel;
+  return {
+    srcRel,
+    srcAttr
+  };
+}
+export function getAssetSize(srcAbs) {
+  if (isImage(srcAbs)) {
+    try {
+      return getImageSize(srcAbs);
+    } catch (err) {
+      warn(`could not read image "${srcAbs}`);
+    }
+  }
+  return {};
+}

package/dist/runtime/{services/sources.d.ts → assets/source.d.ts}

@@ -1,9 +1,9 @@
-import { WatchEvent, Storage } from 'unstorage';
 import { MountOptions } from '@nuxt/content';
+import { WatchEvent, Storage } from 'unstorage';
 /**
- * Make a Storage instance
+ * Make a Storage instance that monitors assets from a single source
  */
-export declare function makeStorage(source: MountOptions | string, key?: string): Storage;
+export declare function makeSourceStorage(source: MountOptions | string, key?: string): Storage;
 export interface SourceManager {
     storage: Storage;
     init: () => Promise<string[]>;
@@ -12,7 +12,7 @@ export interface SourceManager {
 /**
  * Make a SourceManager instance
  *
- * Each Source Manager is responsible for mirroring source files to the public folder
+ * Each Source Manager is responsible for watching and mirroring source assets to the public assets folder
  *
  * @param key
  * @param source

package/dist/runtime/{services/sources.mjs → assets/source.mjs}

@@ -1,23 +1,13 @@
 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,
-  isExcluded
-} from "../utils/index.mjs";
+import { createStorage } from "unstorage";
+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 = "") {
+export function makeSourceStorage(source, key = "") {
   const storage = createStorage();
   const options = typeof source === "string" ? { driver: "fs", base: source } : source;
   switch (options.driver) {
@@ -99,7 +89,7 @@ export function makeSourceManager(key, source, publicPath, callback) {
     }
     return paths;
   }
-  const storage = makeStorage(source, key);
+  const storage = makeSourceStorage(source, key);
   storage.watch(onWatch);
   return {
     storage,

package/dist/runtime/content/parsed.d.ts

@@ -0,0 +1,5 @@
+import type { AssetConfig, ParsedContent } from '../../types';
+/**
+ * Rewrite cached content with updated image sizes
+ */
+export declare function rewriteContent(path: string, asset: AssetConfig): ParsedContent;

package/dist/runtime/content/parsed.mjs

@@ -0,0 +1,32 @@
+import { walkBody, walkMeta, buildQuery, readFile, writeFile } from "../utils/index.mjs";
+export function rewriteContent(path, asset) {
+  const { parsed } = readFile(path, true);
+  const { srcAttr, width, height } = asset;
+  walkMeta(parsed, (value, parent, key) => {
+    if (value.startsWith(srcAttr)) {
+      parent[key] = parent[key].replace(/width=\d+&height=\d+/, `width=${width}&height=${height}`);
+    }
+  });
+  walkBody(parsed, function(node) {
+    const { tag, props } = node;
+    if (tag === "img" && props?.src?.startsWith(srcAttr)) {
+      props.src = buildQuery(srcAttr, `time=${Date.now()}`);
+      if (props.width) {
+        props.width = width;
+      }
+      if (props.height) {
+        props.height = height;
+      }
+      if (props.style) {
+        const ratio = `${width}/${height}`;
+        if (typeof props.style === "string") {
+          props.style = props.style.replace(/aspect-ratio: \d+\/\d+/, `aspect-ratio: ${ratio}`);
+        } else if (props.style.aspectRatio) {
+          props.style.aspectRatio = ratio;
+        }
+      }
+    }
+  });
+  writeFile(path, { module: true, parsed });
+  return parsed;
+}

package/dist/runtime/content/plugin.mjs

@@ -0,0 +1,65 @@
+import { buildQuery, buildStyle, isValidAsset, list, parseQuery, removeQuery, walkBody, walkMeta } from "../utils/index.mjs";
+import { makeAssetsManager } from "../assets/public.mjs";
+import { debug, imageFlags, publicPath } from "#nuxt-content-assets";
+function processMeta(content, imageFlags2 = [], updated = []) {
+  walkMeta(content, (value, parent, key) => {
+    if (isValidAsset(value)) {
+      const { srcAttr, width, height } = resolveAsset(content, removeQuery(value), true);
+      if (srcAttr) {
+        const query = width && height && (imageFlags2.includes("src") || imageFlags2.includes("url")) ? `width=${width}&height=${height}` : "";
+        const srcUrl = query ? buildQuery(srcAttr, parseQuery(value), query) : srcAttr;
+        parent[key] = srcUrl;
+        updated.push(`meta: ${key} to "${srcUrl}"`);
+      }
+    }
+  });
+}
+function processBody(content, imageFlags2 = [], updated = []) {
+  walkBody(content, function(node) {
+    const { tag, props } = node;
+    for (const [prop, value] of Object.entries(props)) {
+      if (typeof value !== "string") {
+        return;
+      }
+      const { srcAttr, width, height } = resolveAsset(content, value, true);
+      if (srcAttr) {
+        node.props[prop] = srcAttr;
+        if (node.tag === "img") {
+          if (width && height) {
+            if (imageFlags2.includes("attrs")) {
+              node.props.width ||= width;
+              node.props.height ||= height;
+            }
+            if (imageFlags2.includes("style")) {
+              const ratio = `${width}/${height}`;
+              if (typeof node.props.style === "string") {
+                node.props.style = buildStyle(node.props.style, `aspect-ratio: ${ratio}`);
+              } else {
+                node.props.style ||= {};
+                node.props.style.aspectRatio = ratio;
+              }
+            }
+          }
+        } else if (node.tag === "a") {
+          node.props.target ||= "_blank";
+        }
+        updated.push(`page: ${tag}[${prop}] to "${srcAttr}"`);
+      }
+    }
+  });
+}
+const { resolveAsset } = makeAssetsManager(publicPath);
+const plugin = async (nitro) => {
+  nitro.hooks.hook("content:file:afterParse", function(content) {
+    if (content._extension === "md") {
+      const updated = [];
+      processMeta(content, imageFlags, updated);
+      processBody(content, imageFlags, updated);
+      if (debug && updated.length) {
+        list(`Processed "/${content._file}"`, updated);
+        console.log();
+      }
+    }
+  });
+};
+export default plugin;

package/dist/runtime/sockets/factory.d.ts

@@ -1,5 +1,9 @@
 import { Callback } from '../../types';
-export declare function createWebSocket(): {
+export interface Logger {
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+}
+export declare function createWebSocket(url: string, logger?: Logger): {
     connect: (retry?: boolean) => void;
     send: (data: any) => void;
     addHandler(callback: Callback): void;

package/dist/runtime/sockets/factory.mjs

@@ -1,13 +1,7 @@
-import { useRuntimeConfig } from "#app";
-const plugin = "[Content Assets]";
-const logger = {
-  // eslint-disable-next-line no-console
-  log: (...args) => console.log(plugin, ...args),
-  // eslint-disable-next-line no-console
-  warn: (...args) => console.warn(plugin, ...args)
-};
 let ws;
-export function createWebSocket() {
+function log(...args) {
+}
+export function createWebSocket(url, logger = { log, warn: log }) {
   if (!window.WebSocket) {
     logger.warn("Your browser does not support WebSocket");
     return null;
@@ -47,7 +41,6 @@ export function createWebSocket() {
     }
   };
   let retries = 0;
-  const url = useRuntimeConfig().public.sockets?.wsUrl;
   const connect = (retry = false) => {
     if (retry) {
       retries++;

package/dist/runtime/sockets/plugin.d.ts

@@ -1,2 +1,5 @@
+/**
+ * Client-side plugin to support asset live-reload
+ */
 declare const _default: any;
 export default _default;

package/dist/runtime/sockets/plugin.mjs

@@ -1,17 +1,40 @@
-import { defineNuxtPlugin } from "#imports";
-import { useSockets } from "./composable.mjs";
+import { defineNuxtPlugin, refreshNuxtData, useRuntimeConfig } from "#imports";
 export default defineNuxtPlugin(async () => {
   if (process.client) {
-    const sockets = await useSockets("content-assets");
-    if (sockets) {
-      sockets.addHandler(({ data }) => {
-        const { event, src } = data;
-        if (src) {
+    const url = useRuntimeConfig().public.sockets?.wsUrl;
+    const socket = await import("./setup").then(({ setupSocketClient }) => {
+      return setupSocketClient(url, "content-assets");
+    });
+    if (socket) {
+      socket.addHandler(({ data }) => {
+        const { event, src, width, height } = data;
+        if (event === "refresh") {
+          refreshNuxtData();
+        } else if (src) {
           const isUpdate = event === "update";
           document.querySelectorAll(`:is(img, video, source, embed, iframe):where([src^="${src}"])`).forEach((el) => {
             el.style.opacity = isUpdate ? "1" : "0.2";
             if (isUpdate) {
-              el.setAttribute("src", `${src}?${(/* @__PURE__ */ new Date()).getTime()}`);
+              const query = el.getAttribute("src").split("?")[1];
+              const params = new URLSearchParams(query);
+              params.set("time", String(Date.now()));
+              if (width && height) {
+                el.addEventListener("load", function onLoad() {
+                  if (el.width && el.height) {
+                    el.setAttribute("width", width);
+                    el.setAttribute("height", height);
+                  }
+                  if (el.style.aspectRatio) {
+                    el.style.aspectRatio = `${width} / ${height}`;
+                  }
+                  if (params.get("width")) {
+                    params.set("width", width);
+                    params.set("height", height);
+                  }
+                  el.removeEventListener("load", onLoad);
+                });
+              }
+              el.setAttribute("src", `${src}?${params.toString()}`);
             }
           });
         }

package/dist/runtime/sockets/setup.d.ts

@@ -1,2 +1,2 @@
 import { Callback, SocketInstance } from '../../types';
-export declare function setupSocketClient(channel: string, callback?: Callback): SocketInstance | null;
+export declare function setupSocketClient(url: string, channel: string, callback?: Callback): SocketInstance | null;

package/dist/runtime/sockets/setup.mjs

@@ -1,6 +1,19 @@
 import { createWebSocket } from "./factory.mjs";
-const client = createWebSocket();
-export function setupSocketClient(channel, callback) {
+let client;
+const plugin = "[Content Assets]";
+const logger = {
+  // eslint-disable-next-line no-console
+  log: (...args) => console.log(plugin, ...args),
+  // eslint-disable-next-line no-console
+  warn: (...args) => console.warn(plugin, ...args)
+};
+export function setupSocketClient(url, channel, callback) {
+  if (!client) {
+    client = createWebSocket(url, logger);
+    if (client === null) {
+      return null;
+    }
+  }
   const instance = {
     addHandler(callback2) {
       if (client && typeof callback2 === "function") {

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

@@ -0,0 +1,11 @@
+/**
+ * Common extensions
+ */
+export declare const extensions: {
+    image: string[];
+    media: string[];
+};
+/**
+ * Create a Nuxt Content ignore string
+ */
+export declare function makeIgnores(extensions: string | string[]): string;

package/dist/runtime/utils/config.mjs

@@ -0,0 +1,12 @@
+import { matchTokens } from "./string.mjs";
+export const extensions = {
+  // 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 makeIgnores(extensions2) {
+  const matched = matchTokens(extensions2);
+  const ignored = matched.join("|");
+  return `[^:]+\\.(?!(${ignored})$)`;
+}

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

@@ -0,0 +1,16 @@
+import { ParsedContent } from '../../types';
+import { WalkCallback } from './object';
+/**
+ * Walk parsed content meta, only processing relevant properties
+ *
+ * @param content
+ * @param callback
+ */
+export declare function walkMeta(content: ParsedContent, callback: WalkCallback): void;
+/**
+ * Walk parsed content body, only visiting relevant tags
+ *
+ * @param content
+ * @param callback
+ */
+export declare function walkBody(content: ParsedContent, callback: (node: any) => void): void;

package/dist/runtime/utils/content.mjs

@@ -0,0 +1,43 @@
+import { CONTINUE, SKIP, visit } from "unist-util-visit";
+import { walk } from "./object.mjs";
+import { matchTokens } from "./string.mjs";
+export function walkMeta(content, callback) {
+  walk(content, callback, (value, key) => !(String(key).startsWith("_") || key === "body"));
+}
+export function walkBody(content, callback) {
+  visit(content.body, (node) => node.type === "element", (node) => {
+    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;
+    }
+    callback(node);
+  });
+}
+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"
+};

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

@@ -1,4 +1,6 @@
 export * from './path';
+export * from './content';
+export * from './config';
 export * from './debug';
 export * from './build';
 export * from './fs';

package/dist/runtime/utils/index.mjs

@@ -1,4 +1,6 @@
 export * from "./path.mjs";
+export * from "./content.mjs";
+export * from "./config.mjs";
 export * from "./debug.mjs";
 export * from "./build.mjs";
 export * from "./fs.mjs";

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

@@ -1,5 +1,8 @@
-export type Callback = (value: any, parent?: any, key?: string | number) => void;
-export type Filter = (value: any, key?: string | number) => boolean | void;
+export type Walkable = {
+    [key: string | number]: any;
+};
+export type WalkFilter = (value: any, key?: string | number) => boolean | void;
+export type WalkCallback = (value: any, parent: Walkable, key: string | number) => void;
 /**
  * Walk an object structure
  *
@@ -7,4 +10,5 @@ export type Filter = (value: any, key?: string | number) => boolean | void;
  * @param callback
  * @param filter
  */
-export declare function walk(node: any, callback: Callback, filter?: Filter): void;
+export declare function walk(node: any, callback: WalkCallback, filter?: WalkFilter): void;
+export declare function isObject(data: any): any;

package/dist/runtime/utils/object.mjs

@@ -10,7 +10,7 @@ export function walk(node, callback, filter) {
       node2.forEach((value, index) => {
         visit(value, callback2, node2, index);
       });
-    } else if (typeof node2 === "object" && node2 !== null) {
+    } else if (isObject(node2)) {
       Object.keys(node2).forEach((key2) => {
         visit(node2[key2], callback2, node2, key2);
       });
@@ -18,5 +18,8 @@ export function walk(node, callback, filter) {
       callback2(node2, parent, key);
     }
   }
-  visit(node, callback);
+  visit(node, callback, { node }, "node");
+}
+export function isObject(data) {
+  return data && typeof data === "object" && !Array.isArray(data);
 }

package/dist/runtime/utils/path.mjs

@@ -1,5 +1,5 @@
 import Path from "path";
-import { extensions } from "../options.mjs";
+import { extensions } from "./config.mjs";
 export function parseQuery(path) {
   const matches = path.match(/\?.+$/);
   return matches ? matches[0] : "";

package/dist/types.d.ts

@@ -1,10 +1,6 @@
 
-import { ModuleOptions } from './module'
+import {  } from './module'
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['contentAssets']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['contentAssets']?: ModuleOptions }
-}
 
 
-export { ModuleOptions, default } from './module'
+export { default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -41,17 +41,15 @@
     "ws": "^8.13.0"
   },
   "peerDependencies": {
-    "@nuxt/content": "latest"
+    "@nuxt/content": ">=2.6 || <3.0.0"
   },
   "devDependencies": {
-    "@nuxt/content": "latest",
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.3.2",
     "@nuxt/test-utils": "^3.3.2",
     "@types/debounce": "^1.2.1",
     "@types/ws": "^8.5.4",
-    "changelogen": "^0.5.1",
     "eslint": "^8.36.0",
     "nuxt": "^3.3.2",
     "vitest": "^0.29.7"

package/dist/runtime/config.d.ts

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

package/dist/runtime/config.mjs

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

package/dist/runtime/options.d.ts

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