nuxt-content-assets 1.1.0 → 1.2.0

package/README.md

@@ -65,17 +65,22 @@ Developer experience:
 
 ## Demo
 
-To view the demo locally, run:
+To clone and run the demo locally:
 
-```
+```bash
+git clone https://github.com/davestewart/nuxt-content-assets.git
+cd nuxt-content-assets
+npm install
 npm run dev
 ```
 
-To view the demo online, visit:
+Then open the demo in your browser at <a href="http://localhost:3000" target="_blank">localhost:3000</a>.
+
+To run the demo online, visit:
 
 - https://stackblitz.com/github/davestewart/nuxt-content-assets?file=demo%2Fapp.vue
 
-You can browse the demo files in:
+To browse the demo folder:
 
 - https://github.com/davestewart/nuxt-content-assets/tree/main/demo
 
@@ -162,11 +167,11 @@ The module is [preconfigured](#image-size) to pass image size hints (by default
 <img src="/image.jpg" width="640" height="480">
 ```
 
-Passing image sizes prevents content jumps on page load.
+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 use `imageSize: 'attrs'` to [hook into these values](demo/components/temp/ProseImg.vue) via Vue's `$attrs` property:
+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:
 
 ```vue
 <template>
@@ -184,13 +189,13 @@ export default {
 
 #### Frontmatter
 
-If you pass [frontmatter](demo/content/advanced/gallery.md) to [custom components](demo/components/content/ContentImage.vue) configure `imageSize` as `'src'` to encode the size in `src`:
+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`:
 
 ```
 :image-content{:src="image"}
 ```
 
-The component will receive the updated path which you can parse and implement as you see fit.
+The component will receive the size information as a query string which you can extract and apply:
 
 ```html
 <img class="image-content" src="/image.jpg?width=640&height=480">
@@ -200,7 +205,7 @@ See demo component [here](demo/components/content/ContentImage.vue).
 
 ## Configuration
 
-The module can be configured in your Nuxt configuration file:
+The module has the following options:
 
 ```ts
 // nuxt.config.ts
@@ -230,13 +235,14 @@ 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      |
-| `src`   | Adds `?width=...&height=...` to `src` attribute (frontmatter only) |
+| 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                                     |
 
-Note: if you add *only* `attrs` include the following CSS in your app:
+Note: if you add *only* `attrs`, include the following CSS in your app:
 
 ```css
 img {
@@ -245,10 +251,10 @@ img {
 }
 ```
 
-To disable, pass `false`.
-
 ### Content extensions
 
+> Generally, you shouldn't need to touch this setting
+
 This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
 
 ```
@@ -257,8 +263,6 @@ md csv ya?ml json
 
 This way, you can use any **other** file type as an asset, without needing to explicitly configure extensions.
 
-Generally, you shouldn't need to touch this setting.
-
 ### Debug
 
 If you want to see what the module does as it runs, set `debug` to true:
@@ -279,6 +283,8 @@ If they do, then the attribute or property is rewritten with the absolute path.
 
 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.
 
+In development, file watching propagates asset changes to the public folder, updates related cached content, and notifies the browser via web sockets to refresh any loaded images. 
+
 ## Development
 
 Should you wish to develop the project, the scripts are:

package/dist/module.d.ts

@@ -1,8 +1,26 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    /**
+     * Image size hints
+     *
+     * @example 'attrs style url'
+     * @default 'style'
+     */
     imageSize?: string | string[] | false;
-    contentExtensions: string | string[];
+    /**
+     * List of content extensions; anything else as an asset
+     *
+     * @example 'md'
+     * @default 'md csv ya?ml json'
+     */
+    contentExtensions?: string | string[];
+    /**
+     * Display debug messages
+     *
+     * @example true
+     * @default false
+     */
     debug?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,8 +1,9 @@
 {
-  "name": "nuxt-content-assets",
-  "configKey": "contentAssets",
+  "moduleName": "nuxt-content-assets",
+  "moduleKey": "contentAssets",
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "1.1.0"
+  "name": "nuxt-content-assets",
+  "version": "1.2.0"
 }