nuxt-content-assets 1.3.7 → 1.4.0

package/README.md

@@ -8,7 +8,7 @@
 > 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">
+  <img src="https://raw.githubusercontent.com/davestewart/nuxt-content-assets/main/playground/content/splash.png" alt="Nuxt Content Assets logo">
 </p>
 
 ## Overview
@@ -63,26 +63,28 @@ Developer experience:
 - image size injection
 - zero config
 
-## Demo
+## Playground
 
-To clone and run the demo locally:
+To test the module before installing, you can try out the Nuxt Content Assets playground.  
+
+To clone and run locally:
 
 ```bash
 git clone https://github.com/davestewart/nuxt-content-assets.git
 cd nuxt-content-assets
-npm install && npm install --prefix ./demo
+npm install && npm install --prefix ./playground
 npm run dev
 ```
 
-Then open the demo in your browser at <a href="http://localhost:3000" target="_blank">localhost:3000</a>.
+Then open the playground in your browser at <a href="http://localhost:3000" target="_blank">localhost:3000</a>.
 
-To run the demo online, visit:
+To run the playground online, visit:
 
-- https://stackblitz.com/github/davestewart/nuxt-content-assets?file=demo%2Fapp.vue
+- https://stackblitz.com/github/davestewart/nuxt-content-assets?file=playground%2Fapp.vue
 
-To browse the demo folder:
+To browse the playground folder:
 
-- https://github.com/davestewart/nuxt-content-assets/tree/main/demo
+- https://github.com/davestewart/nuxt-content-assets/tree/main/playground
 
 ## Setup
 
@@ -143,7 +145,7 @@ These values can then be passed to components:
 :image-gallery{:data="images"}
 ```
 
-See the Demo for [markup](demo/content/advanced/gallery.md) and [component](demo/components/content/ContentGallery.vue) examples.
+See the playground for [markup](playground/content/advanced/gallery.md) and [component](playground/components/content/ContentGallery.vue) examples.
 
 ### Live reload
 
@@ -171,7 +173,7 @@ Keeping this on prevents content jumps as your page loads.
 
 #### Prose components
 
-If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can [hook into](demo/components/temp/ProseImg.vue) image size hints via the `$attrs` property:
+If you use [ProseImg](https://content.nuxtjs.org/api/components/prose) components, you can [hook into](playground/components/temp/ProseImg.vue) image size hints via the `$attrs` property:
 
 ```vue
 <template>
@@ -189,7 +191,7 @@ export default {
 
 #### Frontmatter
 
-If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) set `imageSize` to `'src'` to encode values in `src`:
+If you pass [frontmatter](playground/content/advanced/gallery.md) to [custom components](playground/components/content/ContentImage.vue) set `imageSize` to `'src'` to encode values in `src`:
 
 ```
 :image-content{:src="image"}
@@ -201,24 +203,32 @@ The component will receive the size information as a query string which you can
 <img class="image-content" src="/image.jpg?width=640&height=480">
 ```
 
-See demo component [here](demo/components/content/ContentImage.vue).
-
-### Nuxt Image compatibility
+See playground component [here](playground/components/content/ContentImage.vue).
 
-Nuxt Content Assets works with [Nuxt Image](https://image.nuxtjs.org/) with just a little configuration.
+### Nuxt Image
 
-First, configure Nuxt Image to use Nuxt Content Asset's public folder:
+Nuxt Content Assets works with [Nuxt Image](https://image.nuxtjs.org/) with just a little configuration:
 
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  image: {
-    dir: '.nuxt/content-assets/public'
-  }
+  modules: [
+    // Nuxt Image should be placed before Nuxt Content Assets
+    '@nuxt/image',
+    'nuxt-content-assets',
+    '@nuxt/content',
+  ],
+
+  extends: [
+    // add Nuxt Content Assets build folder as a Nuxt Layer (since v1.4.0)
+    '.nuxt/content-assets',
+  ],
 }
 ```
 
-Then, create a `ProseImg` component like so:
+> Note that the new Layers setup enables Nuxt Image to load images from both the project's `public` folder and from `content`.
+
+To serve all images as Nuxt Image images, create a `ProseImg` component like so:
 
 ```vue
 <!-- components/content/ProseImg.vue -->
@@ -227,9 +237,7 @@ Then, create a `ProseImg` component like so:
 </template>
 ```
 
-Any images rendered by Nuxt Content will now use Nuxt Image.
-
-> For a per-image solution, check the [override](demo/components/content/NuxtImg.ts) in the demo folder.
+See the playground folder for both the [global](playground/components/temp/ProseImg.vue) and a [per image](playground/components/content/NuxtImg.ts) solution.
 
 
 ## Configuration
@@ -264,12 +272,12 @@ 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      |
+| Switch    | What it does                                                       |
+|-----------|--------------------------------------------------------------------|
+| `'style'` | Adds `style="aspect-ratio:..."` to any `<img>` tag                 |
+| `'attrs'` | Adds `width` and `height` attributes to any `<img>` tag            |
 | `'src'`   | Adds `?width=...&height=...` to `src` attribute (frontmatter only) |
-| `false`   | Disable image size hints                                     |
+| `false`   | Disable image size hints                                           |
 
 Note: if you add *only* `attrs`, include the following CSS in your app:
 
@@ -318,16 +326,16 @@ In development, file watching propagates asset changes to the public folder, upd
 
 Should you wish to develop the project, the scripts are:
 
-Develop the module (running a demo which uses the live module code):
+Develop the module (running the playground which uses the live module code):
 
 ```bash
 # install dependencies
 npm install
 
-# generate demo type stubs (for the first time)
+# generate playground type stubs (for the first time)
 npm run dev:prepare
 
-# develop (runs the demo app)
+# develop (runs the playground app)
 npm run dev
 
 # run eslint
@@ -338,27 +346,27 @@ npm run test
 npm run test:watch
 ```
 
-Build and check the demo (simulating users' final build choices):
+Build and check the playground (simulating users' final build choices):
 
 ```bash
-# generate the demo
+# generate the playground
 npm run dev:generate
 
-# build the demo
+# build the playground
 npm run dev:build
 
-# serve the built demo
-npm run dev:serve
+# serve the generated / built playground
+npm run dev:preview
 ```
 
 Make a new release (so users can install the module):
 
 ```bash
-# release new version
-npm run release
-
 # dry run the release
 npm run release:dry
+
+# release new version
+npm run release
 ```
 
 Make sure to edit changelog and update `package.json` version before releasing!
@@ -375,7 +383,7 @@ This created the module code from the starter template found here:
 
 - https://github.com/nuxt/starter/tree/module
 
-Both [Nuxi](https://github.com/nuxt/cli) and the module's dependencies and scripts are updated fairly regularly, so from time to time this module will / does need to be updated to keep in sync. So far, this has meant just updating the dependencies and scripts, which are found in the starter template code mentioned above.
+Both [Nuxi](https://github.com/nuxt/cli) and the module's dependencies and scripts are updated fairly regularly, so from time to time this module may need to be updated to keep in sync. So far, this has meant just updating the dependencies and scripts, which are found in the starter template code mentioned above.
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-content-assets/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "1.3.5"
+  "version": "1.4.0"
 }

package/dist/module.mjs

@@ -1,7 +1,5 @@
-import * as Fs from 'fs';
-import Fs__default from 'fs';
-import * as Path from 'crosspath';
-import Path__default from 'crosspath';
+import Fs from 'fs';
+import Path from 'crosspath';
 import { useNuxt, createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
 import { visit, SKIP, CONTINUE } from 'unist-util-visit';
 import { listen } from 'listhen';
@@ -53,7 +51,7 @@ function isExcluded(path) {
   return path.split("/").some((segment) => segment.startsWith(".") || segment.startsWith("_"));
 }
 function isImage(path) {
-  const ext = Path__default.extname(path).substring(1);
+  const ext = Path.extname(path).substring(1);
   return extensions.image.includes(ext);
 }
 function isArticle(path) {
@@ -155,33 +153,33 @@ function buildQuery(...expr) {
 }
 
 function readFile(path, asJson = false) {
-  const text = Fs__default.readFileSync(path, { encoding: "utf8" });
+  const text = Fs.readFileSync(path, { encoding: "utf8" });
   return asJson ? JSON.parse(text) : text;
 }
 function writeFile(path, data) {
   const text = typeof data === "object" ? JSON.stringify(data, null, "  ") : String(data);
-  createFolder(Path__default.dirname(path));
-  Fs__default.writeFileSync(path, text, { encoding: "utf8" });
+  createFolder(Path.dirname(path));
+  Fs.writeFileSync(path, text, { encoding: "utf8" });
 }
 async function writeBlob(path, data) {
   const buffer = Buffer.from(await data.arrayBuffer());
-  createFolder(Path__default.dirname(path));
-  Fs__default.writeFileSync(path, buffer);
+  createFolder(Path.dirname(path));
+  Fs.writeFileSync(path, buffer);
 }
 function copyFile(src, trg) {
-  createFolder(Path__default.dirname(trg));
-  Fs__default.copyFileSync(src, trg);
+  createFolder(Path.dirname(trg));
+  Fs.copyFileSync(src, trg);
 }
 function removeFile(src) {
-  Fs__default.rmSync(src);
+  Fs.rmSync(src);
 }
 function createFolder(path) {
-  Fs__default.mkdirSync(path, { recursive: true });
+  Fs.mkdirSync(path, { recursive: true });
 }
 function removeFolder(path) {
-  const isDownstream = path.startsWith(Path__default.resolve());
+  const isDownstream = path.startsWith(Path.resolve());
   if (isDownstream) {
-    Fs__default.rmSync(path, { recursive: true, force: true });
+    Fs.rmSync(path, { recursive: true, force: true });
   }
 }
 
@@ -331,13 +329,13 @@ function makeSourceManager(key, source, publicPath, callback) {
     return toPath(key2).replace(/\w+/, "").replace(source.prefix || "", "");
   }
   function getAbsSrc(key2) {
-    return Path__default.join(source.base, getRelSrc(key2));
+    return Path.join(source.base, getRelSrc(key2));
   }
   function getRelTrg(key2) {
-    return Path__default.join(source.prefix || "", toPath(deKey(key2)));
+    return Path.join(source.prefix || "", toPath(deKey(key2)));
   }
   function getAbsTrg(key2) {
-    return Path__default.join(publicPath, getRelTrg(key2));
+    return Path.join(publicPath, getRelTrg(key2));
   }
   function removeItem(key2) {
     const absTrg = getAbsTrg(key2);
@@ -378,17 +376,22 @@ function makeSourceManager(key, source, publicPath, callback) {
     return paths;
   }
   const storage = makeSourceStorage(source, key);
-  storage.watch(onWatch);
+  void storage.watch(onWatch);
+  async function dispose() {
+    await storage.unwatch();
+    await storage.dispose();
+  }
   return {
     storage,
     init,
-    keys: getKeys
+    keys: getKeys,
+    dispose
   };
 }
 
 function makeAssetsManager(publicPath, shouldWatch = true) {
   const indexKey = "assets.json";
-  const storage = makeSourceStorage(Path__default.join(publicPath, ".."));
+  const storage = makeSourceStorage(Path.join(publicPath, ".."));
   if (shouldWatch) {
     void storage.watch(async (event, key) => {
       if (event === "update" && key === indexKey) {
@@ -405,8 +408,8 @@ function makeAssetsManager(publicPath, shouldWatch = true) {
     void storage.setItem(indexKey, assets);
   }, 50);
   function resolveAsset(content, relAsset, registerContent = false) {
-    const srcDir = Path__default.dirname(content._file);
-    const srcAsset = Path__default.join(srcDir, relAsset);
+    const srcDir = Path.dirname(content._file);
+    const srcAsset = Path.join(srcDir, relAsset);
     const asset = assets[srcAsset];
     if (asset && registerContent) {
       const { _id } = content;
@@ -457,7 +460,7 @@ function makeAssetsManager(publicPath, shouldWatch = true) {
   };
 }
 function getAssetPaths(srcDir, srcAbs) {
-  const srcRel = Path__default.relative(srcDir, srcAbs);
+  const srcRel = Path.relative(srcDir, srcAbs);
   const srcAttr = "/" + srcRel;
   return {
     srcRel,
@@ -527,11 +530,15 @@ const module = defineNuxtModule({
     const assetsPath = Path.join(buildPath, "content-assets");
     const publicPath = Path.join(assetsPath, "public");
     const contentPath = Path.join(buildPath, "content-cache/parsed");
-    if (options.debug) {
+    const isDev = !!nuxt.options.dev;
+    const isDebug = !!options.debug;
+    if (isDebug) {
       log("Removing cache folders...");
     }
     removeFolder(Path.join(buildPath, "content-cache"));
     removeFolder(assetsPath);
+    createFolder(`${assetsPath}/public`);
+    writeFile(`${assetsPath}/nuxt.config.ts`, "export default {}");
     const { contentExtensions } = options;
     if (contentExtensions) {
       nuxt.options.content ||= {};
@@ -557,8 +564,7 @@ const module = defineNuxtModule({
         };
       }
     }
-    const assets = makeAssetsManager(publicPath, nuxt.options.dev);
-    nuxt.hooks.hook("close", () => assets.dispose());
+    const assets = makeAssetsManager(publicPath, isDev);
     function onAssetChange(event, absTrg) {
       let src = "";
       let width;
@@ -588,35 +594,35 @@ const module = defineNuxtModule({
       }
     }
     addPlugin(resolve("./runtime/sockets/plugin"));
-    const socket = nuxt.options.dev ? await setupSocketServer("content-assets") : null;
+    const socket = isDev ? await setupSocketServer("content-assets") : null;
     const managers = {};
     for (const [key, source] of Object.entries(sources)) {
-      if (options.debug) {
+      if (isDebug) {
         log(`Creating source "${key}"`);
       }
       managers[key] = makeSourceManager(key, source, publicPath, onAssetChange);
     }
-    nuxt.hook("close", async () => {
-      for (const key in managers) {
-        await managers[key].storage.unwatch();
-        await managers[key].storage.dispose();
-      }
-    });
     nuxt.hook("build:before", async function() {
       for (const [key, manager] of Object.entries(managers)) {
         const paths = await manager.init();
         paths.forEach((path) => assets.setAsset(path));
-        if (options.debug) {
+        if (isDebug) {
           list(`Copied "${key}" assets`, paths.map((path) => Path.relative(publicPath, path)));
         }
       }
     });
+    nuxt.hook("close", async () => {
+      await assets.dispose();
+      for (const key in managers) {
+        await managers[key].dispose();
+      }
+    });
     const pluginPath = resolve("./runtime/content/plugin");
     const makeVar = (name, value) => `export const ${name} = ${JSON.stringify(value)};`;
     const virtualConfig = [
       makeVar("publicPath", publicPath),
       makeVar("imageSizes", imageSizes),
-      makeVar("debug", options.debug)
+      makeVar("debug", isDebug)
     ].join("\n");
     nuxt.hook("nitro:config", async (config) => {
       config.plugins ||= [];

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

@@ -8,6 +8,7 @@ export interface SourceManager {
     storage: Storage;
     init: () => Promise<string[]>;
     keys: () => Promise<string[]>;
+    dispose: () => Promise<void>;
 }
 /**
  * Make a SourceManager instance

package/dist/runtime/assets/source.mjs

@@ -90,10 +90,15 @@ export function makeSourceManager(key, source, publicPath, callback) {
     return paths;
   }
   const storage = makeSourceStorage(source, key);
-  storage.watch(onWatch);
+  void storage.watch(onWatch);
+  async function dispose() {
+    await storage.unwatch();
+    await storage.dispose();
+  }
   return {
     storage,
     init,
-    keys: getKeys
+    keys: getKeys,
+    dispose
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-content-assets",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Enable locally-located assets in Nuxt Content",
   "repository": "davestewart/nuxt-content-assets",
   "license": "MIT",
@@ -18,13 +18,13 @@
     "dist"
   ],
   "scripts": {
-    "dev": "nuxi dev demo",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare demo",
-    "dev:generate": "nuxi generate demo",
-    "dev:build": "nuxi build demo",
-    "dev:serve": "npx serve demo/dist",
-    "release": "npm run lint && npm run test && nuxt-module-build build && changelogen --release && npm publish && git push --follow-tags",
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev:generate": "nuxi generate playground",
+    "dev:build": "nuxi build playground",
+    "dev:preview": "nuxi preview playground",
     "release:dry": "npm run lint && npm run test && nuxt-module-build build && npm publish --dry-run",
+    "release": "npm run lint && npm run test && nuxt-module-build build && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch"
@@ -60,4 +60,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}