nuxt-content-assets 0.5.1 → 0.5.3

package/README.md

@@ -1,12 +1,16 @@
 # Nuxt Content Assets
 
-> Enable locally-located assets in Nuxt Content
-
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
+> Enable locally-located assets in Nuxt Content
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/davestewart/nuxt-content-assets/main/demo/content/splash.png" alt="Nuxt Content Assets logo">
+</p>
+
 ## Overview
 
 Nuxt Content Assets enables locally-located assets in your [Nuxt Content](https://content.nuxtjs.org/) folder:
@@ -53,7 +57,7 @@ To run the demo online, go to:
 
 You can browse the demo files in:
 
-- .https://github.com/davestewart/nuxt-content-assets/tree/main/demo
+- https://github.com/davestewart/nuxt-content-assets/tree/main/demo
 
 To run the demo locally, clone the application and from the root, run:
 
@@ -74,7 +78,7 @@ Configure `nuxt.config.ts`:
 ```js
 export default defineNuxtConfig({
   modules: [
-    'nuxt-content-relative-assets', // make sure to add before content!
+    'nuxt-content-assets', // make sure to add before content!
     '@nuxt/content',
   ]
 })
@@ -111,21 +115,28 @@ See the [configuration](#output) section for more options.
 
 ### Images
 
-The module [optionally](#image-attributes) writes `width` and `height` attributes to the generated HTML:
+The module can [optionally](#image-attributes) write `width`, `height` and `aspect-ratio` information to generated `<img>` tags:
 
 ```html
-<img src="..." width="640" height="480">
+<img src="..." width="640" height="480" style="aspect-ratio:640/480">
 ```
 
-This locks the aspect ratio of the image preventing content jumps.
+This can prevent content jumps on page load. If you add `attributes` only, include the following CSS in your app:
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
 
-If you use custom [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can even grab these values using the Vue `$attrs` property:
+If you use custom [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can use these values in your own markup:
 
 ```vue
 <template>
-  <div class="image">
-    <img :src="$attrs.src" :style="`aspect-ratio:${$attrs.width}/${$attrs.height}`" />
-  </div>
+  <span class="image">
+    <img :src="$attrs.src" :style="$attrs.style" />
+  </span>
 </template>
 
 <script>
@@ -154,8 +165,8 @@ export default defineNuxtConfig({
     // completely replace supported extensions
     extensions: 'png jpg',
     
-    // add image width and height
-    imageAttrs: true,
+    // use aspect-ratio rather than attributes
+    imageSize: 'ratio',
     
     // print debug messages to the console
     debug: true,
@@ -168,7 +179,7 @@ export default defineNuxtConfig({
 The output path can be customised using a template string:
 
 ```
-assets/img/content/[path]/[name][extname]
+assets/content/[name]-[hash].[ext]
 ```
 
 The first part of the path should be public root-relative folder:
@@ -177,7 +188,7 @@ The first part of the path should be public root-relative folder:
 assets/img/content
 ```
 
-The optional second part of the path indicates specific placement of each image: 
+The optional second part of the path indicates the relative location of each image: 
 
 | Token       | Description                                | Example            |
 |-------------|--------------------------------------------|--------------------|
@@ -196,15 +207,15 @@ For example:
 | `assets/img/[name]-[hash].[ext]`     | `assets/img/featured-9M00N4l9A0.jpg`               |
 | `content/[hash].[ext]`               | `content/9M00N4l9A0.jpg`                           |
 
-Note that the module defaults to all files in a single folder:
+Note that the module defaults to:
 
 ```
-/assets/content/[name]-[hash].[ext]
+/assets/content/[folder]/[file]
 ```
 
 ### Extensions
 
-You can add or replace supported extensions if you need to:
+You can add (or replace) supported extensions if you need to:
 
 To add extensions, use `additionalExtensions`:
 
@@ -214,26 +225,36 @@ To add extensions, use `additionalExtensions`:
 }
 ```
 
-To completely replace supported extensions, use `extensions`:
+To replace extensions, use `extensions`:
 
 ```ts
 {
-	extensions: 'png jpg' // serve png and jpg files only
+  extensions: 'png jpg' // serve png and jpg files only
 }
 ```
 
 ### Image attributes
 
-The module automatically adds `width` and `height` attributes to images.
+You can add image size hints to the generated images.
 
-Opt out of this by passing `false`:
+To add `style` aspect-ratio:
 
 ```ts
 {
-  imageAttrs: false
+  imageSize: 'style'
 }
 ```
 
+To add `width` and `height` attributes:
+
+```ts
+{
+  imageSize: 'attrs'
+}
+```
+
+You can even add both if you need to.
+
 ## Development
 
 Should you wish to develop the project, the scripts are:

package/dist/module.d.ts

@@ -4,7 +4,7 @@ interface ModuleOptions {
     output?: string;
     additionalExtensions?: string;
     extensions?: string;
-    imageAttrs?: boolean;
+    imageSize?: string;
     debug?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,5 +1,8 @@
 {
-  "name": "content-assets",
+  "name": "nuxt-content-assets",
   "configKey": "content-assets",
-  "version": "0.5.1"
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.5.3"
 }

package/dist/module.mjs

@@ -6,8 +6,37 @@ import * as Path from 'path';
 import Path__default from 'path';
 import { hash } from 'ohash';
 
+function getSources(sources) {
+  return Object.keys(sources).reduce((output, key) => {
+    const source = sources[key];
+    if (source) {
+      const { driver, base } = source;
+      if (driver === "fs") {
+        output[key] = base;
+      }
+    }
+    return output;
+  }, {});
+}
+
+const defaults = {
+  assetsDir: "assets/content",
+  assetsPattern: "[folder]/[file]"
+};
+const imageExtensions = matchWords("png jpg jpeg gif svg webp ico");
+const mediaExtensions = matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd");
+const fileExtensions = matchWords("pdf doc docx xls xlsx ppt pptx odp key");
+const extensions = [
+  ...imageExtensions,
+  ...mediaExtensions,
+  ...fileExtensions
+];
+
+const moduleName = "nuxt-content-assets";
+const moduleKey = "content-assets";
+
 function log(...data) {
-  console.info(`[${name}]`, ...data);
+  console.info(`[${moduleKey}]`, ...data);
 }
 
 function matchWords(value) {
@@ -39,48 +68,25 @@ const replacers = {
   hash: (src) => hash({ src })
 };
 
-const name = "content-assets";
-const defaults = {
-  assetsDir: "assets/content",
-  assetsPattern: "[name]-[hash].[ext]"
-};
-const imageExtensions = matchWords("png jpg jpeg gif svg webp ico");
-const mediaExtensions = matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd");
-const fileExtensions = matchWords("pdf doc docx xls xlsx ppt pptx odp key");
-const extensions = [
-  ...imageExtensions,
-  ...mediaExtensions,
-  ...fileExtensions
-];
-
-function getSources(sources) {
-  return Object.keys(sources).reduce((output, key) => {
-    const source = sources[key];
-    if (source) {
-      const { driver, base } = source;
-      if (driver === "fs") {
-        output[key] = base;
-      }
-    }
-    return output;
-  }, {});
-}
-
 const resolve = createResolver(import.meta.url).resolve;
 const module = defineNuxtModule({
   meta: {
-    name
+    name: moduleName,
+    configKey: moduleKey,
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
   },
   defaults: {
     output: `${defaults.assetsDir}/${defaults.assetsPattern}`,
     extensions: "",
     additionalExtensions: "",
-    imageAttrs: true,
+    imageSize: "",
     debug: false
   },
   setup(options, nuxt) {
     var _a;
-    const pluginPath = resolve("./runtime/server") + "/plugins/plugin";
+    const pluginPath = resolve("./runtime/plugin");
     const buildPath = nuxt.options.buildDir;
     const cachePath = Path.resolve(buildPath, "content-assets");
     if (options.debug) {
@@ -116,16 +122,22 @@ const module = defineNuxtModule({
     function getAssetConfig(pattern, src, dir) {
       let width = void 0;
       let height = void 0;
-      if (options.imageAttrs && isImage(src)) {
+      let ratio = "";
+      if (options.imageSize && isImage(src)) {
         const size = getImageSize(src);
-        width = size.width;
-        height = size.height;
+        if (options.imageSize.includes("style")) {
+          ratio = `${size.width}/${size.height}`;
+        }
+        if (options.imageSize.includes("attrs")) {
+          width = size.width;
+          height = size.height;
+        }
       }
       const id = Path.join(Path.basename(dir), Path.relative(dir, src)).replaceAll("/", ":");
       const file = interpolatePattern(pattern, src, dir);
       const trg = Path.join(cachePath, assetsDir, file);
       const rel = Path.join("/", assetsDir, file);
-      return { id, file, trg, rel, width, height };
+      return { id, file, trg, rel, width, height, ratio };
     }
     const publicFolder = Path.join(cachePath, assetsDir);
     const sourceFolders = Object.values(sources);
@@ -159,15 +171,15 @@ ${paths.join("\n")}
       `export const assets = ${JSON.stringify(assets)}`,
       `export const sources = ${JSON.stringify(sources)}`
     ].join("\n");
-    nuxt.options.alias[`#${name}`] = addTemplate({
-      filename: `${name}.mjs`,
+    nuxt.options.alias[`#${moduleName}`] = addTemplate({
+      filename: `${moduleName}.mjs`,
       getContents: () => virtualConfig
     }).dst;
     nuxt.hook("nitro:config", async (config) => {
       config.plugins || (config.plugins = []);
       config.plugins.push(pluginPath);
       config.virtual || (config.virtual = {});
-      config.virtual[`#${name}`] = virtualConfig;
+      config.virtual[`#${moduleName}`] = virtualConfig;
       config.publicAssets || (config.publicAssets = []);
       config.publicAssets.push({
         dir: cachePath

package/dist/runtime/options.d.ts

@@ -0,0 +1,9 @@
+export declare const defaults: {
+    assetsDir: string;
+    assetsPattern: string;
+};
+export declare const imageExtensions: RegExpMatchArray | [];
+export declare const mediaExtensions: RegExpMatchArray | [];
+export declare const fileExtensions: RegExpMatchArray | [];
+export declare const extensions: string[];
+export declare const tags: string[];

package/dist/runtime/options.mjs

@@ -0,0 +1,14 @@
+import { matchWords } from "./utils/assets.mjs";
+export const defaults = {
+  assetsDir: "assets/content",
+  assetsPattern: "[folder]/[file]"
+};
+export const imageExtensions = matchWords("png jpg jpeg gif svg webp ico");
+export const mediaExtensions = matchWords("mp3 m4a wav mp4 mov webm ogg avi flv avchd");
+export const fileExtensions = matchWords("pdf doc docx xls xlsx ppt pptx odp key");
+export const extensions = [
+  ...imageExtensions,
+  ...mediaExtensions,
+  ...fileExtensions
+];
+export const tags = ["img", "video", "audio", "source", "embed", "iframe", "a"];

package/dist/runtime/{server/plugins/plugin.mjs → plugin.mjs}

@@ -1,8 +1,8 @@
 import Path from "path";
 import { visit } from "unist-util-visit";
-import { assets, sources } from "#content-assets";
-import { tags } from "../../../config";
-import { isValidAsset, walk } from "../../../utils";
+import { isValidAsset, walk } from "./utils/index.mjs";
+import { tags } from "./options.mjs";
+import { assets, sources } from "#nuxt-content-assets";
 function getDocPath(id) {
   const parts = id.split(":");
   const key = parts.shift();
@@ -29,7 +29,7 @@ export default defineNitroPlugin(async (nitroApp) => {
       }, filter);
       visit(file.body, (n) => tags.includes(n.tag), (node) => {
         if (node.props.src) {
-          const { rel, width, height } = getAsset(absDoc, node.props.src);
+          const { rel, width, height, ratio } = getAsset(absDoc, node.props.src);
           if (rel) {
             node.props.src = rel;
           }
@@ -37,6 +37,9 @@ export default defineNitroPlugin(async (nitroApp) => {
             node.props.width = width;
             node.props.height = height;
           }
+          if (ratio) {
+            node.props.style = `aspect-ratio:${ratio}`;
+          }
         } else if (node.tag === "a") {
           if (node.props.href) {
             const { rel } = getAsset(absDoc, node.props.href);

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

@@ -0,0 +1,33 @@
+/**
+ * Get matched words from a string
+ */
+export declare function matchWords(value: string): RegExpMatchArray | [];
+/**
+ * Test path to be relative
+ */
+export declare function isRelative(path: string): boolean;
+/**
+ * Test path for image extension
+ */
+export declare function isImage(path: string): boolean;
+/**
+ * Test path for asset extension
+ */
+export declare function isAsset(path: string): boolean;
+/**
+ * Test if value is a valid asset
+ */
+export declare function isValidAsset(value?: string): boolean;
+/**
+ * Interpolate assets path pattern
+ *
+ * @param pattern   A path pattern with tokens
+ * @param src       The absolute path to a src asset
+ * @param dir       The absolute path to its containing folder
+ * @param warn      An optional flag to warn for unknown tokens
+ */
+export declare function interpolatePattern(pattern: string, src: string, dir: string, warn?: boolean): any;
+/**
+ * Hash of replacer functions
+ */
+export declare const replacers: Record<string, Function>;

package/dist/runtime/utils/assets.mjs

@@ -0,0 +1,42 @@
+import Path from "path";
+import { hash as ohash } from "ohash";
+import { extensions, imageExtensions } from "../options.mjs";
+import { log } from "./debug.mjs";
+export function matchWords(value) {
+  return value.match(/\w+/g) || [];
+}
+export function isRelative(path) {
+  return !(path.startsWith("http") || Path.isAbsolute(path));
+}
+export function isImage(path) {
+  const ext = Path.extname(path).substring(1);
+  return imageExtensions.includes(ext);
+}
+export function isAsset(path) {
+  const ext = Path.extname(path).substring(1);
+  return extensions.includes(ext);
+}
+export function isValidAsset(value) {
+  return typeof value === "string" && isAsset(value) && isRelative(value);
+}
+export function interpolatePattern(pattern, src, dir, warn = 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, dir);
+    }
+    if (warn) {
+      log(`Unknown output token ${match}`, true);
+    }
+    return match;
+  }));
+}
+export const replacers = {
+  folder: (src, dir) => Path.dirname(src.replace(dir, "")),
+  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) => ohash({ src })
+};

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

@@ -0,0 +1,7 @@
+import type { MountOptions } from '@nuxt/content';
+/**
+ * Get content source folders
+ *
+ * @param sources
+ */
+export declare function getSources(sources: Record<string, MountOptions>): Record<string, string>;

package/dist/runtime/utils/content.mjs

@@ -0,0 +1,12 @@
+export function getSources(sources) {
+  return Object.keys(sources).reduce((output, key) => {
+    const source = sources[key];
+    if (source) {
+      const { driver, base } = source;
+      if (driver === "fs") {
+        output[key] = base;
+      }
+    }
+    return output;
+  }, {});
+}

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

@@ -0,0 +1,2 @@
+export declare function log(...data: any[]): void;
+export declare function warn(...data: any[]): void;

package/dist/runtime/utils/debug.mjs

@@ -0,0 +1,7 @@
+import { moduleKey } from "../../config";
+export function log(...data) {
+  console.info(`[${moduleKey}]`, ...data);
+}
+export function warn(...data) {
+  console.warn(`[${moduleKey}]`, ...data);
+}

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

@@ -0,0 +1,4 @@
+export * from './content';
+export * from './object';
+export * from './assets';
+export * from './debug';

package/dist/runtime/utils/index.mjs

@@ -0,0 +1,4 @@
+export * from "./content.mjs";
+export * from "./object.mjs";
+export * from "./assets.mjs";
+export * from "./debug.mjs";

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

@@ -0,0 +1,10 @@
+export type Callback = (value: any, parent?: any, key?: string | number) => void;
+export type Filter = (value: any, key?: string | number) => boolean | void;
+/**
+ * Walk an object structure
+ *
+ * @param node
+ * @param callback
+ * @param filter
+ */
+export declare function walk(node: any, callback: Callback, filter?: Filter): void;

package/dist/runtime/utils/object.mjs

@@ -0,0 +1,22 @@
+export function walk(node, callback, filter) {
+  function visit(node2, callback2, parent, key) {
+    if (filter) {
+      const result = filter(node2, key);
+      if (result === false) {
+        return;
+      }
+    }
+    if (Array.isArray(node2)) {
+      node2.forEach((value, index) => {
+        visit(value, callback2, node2, index);
+      });
+    } else if (typeof node2 === "object" && node2 !== null) {
+      Object.keys(node2).forEach((key2) => {
+        visit(node2[key2], callback2, node2, key2);
+      });
+    } else {
+      callback2(node2, parent, key);
+    }
+  }
+  visit(node, callback);
+}

package/package.json

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