nuxt-content-assets 0.10.3 → 1.0.0

package/README.md

@@ -45,6 +45,21 @@ Almost as much as being in the sea!
 
 At build time the module [collates and serves](#how-it-works) assets and content together.
 
+### Features
+
+User experience:
+
+- co-locate assets with content files
+- write relative paths to see preview in editor
+
+Developer experience:
+
+- works for tags and custom components
+- works in markdown and frontmatter
+- file watching and live reload
+- image size injection
+- zero config
+
 ## Demo
 
 To view the demo locally, run:
@@ -88,7 +103,7 @@ Run the dev server or build and local assets should now be served alongside mark
 
 Use relative paths anywhere within your documents:
 
-```mdx
+```md
 Images
 ![image](image.jpg)
 
@@ -104,7 +119,7 @@ HTML
 
 Relative paths can be defined in frontmatter – as long as they are the only value:
 
-```mdx
+```md
 ---
 title: Portfolio
 images:
@@ -176,10 +191,10 @@ export default defineNuxtConfig({
     imageSize: 'style',
     
     // treat these extensions as content
-    contentExtensions: 'mdx? csv ya?ml json',
+    contentExtensions: 'md csv ya?ml json',
     
     // output debug messages
-    debug: true,
+    debug: false,
   }
 })
 ```
@@ -196,10 +211,10 @@ 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                   |
 | `url`   | Adds a `?width=...&height=...` query string to image paths in frontmatter |
 
 Note: if you add `attrs` only, include the following CSS in your app:
@@ -216,7 +231,7 @@ img {
 This setting tells Nuxt Content to ignore anything that is **not** one of these file extensions:
 
 ```
-mdx? csv ya?ml json
+md csv ya?ml json
 ```
 
 This way, you can use any **other** file type as an asset, without needing to explicitly configure extensions.

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.10.3"
+  "version": "1.0.0"
 }

package/dist/module.mjs

@@ -35,7 +35,7 @@ function deKey(path) {
 
 const defaults = {
   // inject image size into the rendered html
-  imageSize: "attrs",
+  imageSize: "style",
   // treat these extensions as content
   contentExtensions: "md csv ya?ml json",
   // output debug messages
@@ -124,15 +124,15 @@ function getAssetSizes(srcAbs, hints) {
   if (hints.length && isImage(srcAbs)) {
     try {
       const size = getImageSize(srcAbs);
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
       if (hints.includes("attrs")) {
         width = size.width;
         height = size.height;
       }
+      if (hints.includes("style")) {
+        ratio = `${size.width}/${size.height}`;
+      }
       if (hints.includes("url")) {
-        query = `?width=${width}&height=${height}`;
+        query = `?width=${size.width}&height=${size.height}`;
       }
     } catch (err) {
       warn(`could not read image "${srcAbs}`);
@@ -319,8 +319,10 @@ async function setupSocketServer(channel, handler) {
       });
       nuxt._socketServer = server;
       server.on("upgrade", ws.serve);
+      const wsUrl = url.replace("http", "ws");
+      log(`Websocket listening on "${wsUrl}"`);
       nitro.options.runtimeConfig.public.sockets = {
-        wsUrl: url.replace("http", "ws")
+        wsUrl
       };
       nitro.hooks.hook("close", async () => {
         await ws.close();

package/dist/runtime/options.mjs

@@ -1,7 +1,7 @@
 import { matchTokens } from "./utils/string.mjs";
 export const defaults = {
   // inject image size into the rendered html
-  imageSize: "attrs",
+  imageSize: "style",
   // treat these extensions as content
   contentExtensions: "md csv ya?ml json",
   // output debug messages

package/dist/runtime/services/assets.mjs

@@ -19,15 +19,15 @@ export function getAssetSizes(srcAbs, hints) {
   if (hints.length && isImage(srcAbs)) {
     try {
       const size = getImageSize(srcAbs);
-      if (hints.includes("style")) {
-        ratio = `${size.width}/${size.height}`;
-      }
       if (hints.includes("attrs")) {
         width = size.width;
         height = size.height;
       }
+      if (hints.includes("style")) {
+        ratio = `${size.width}/${size.height}`;
+      }
       if (hints.includes("url")) {
-        query = `?width=${width}&height=${height}`;
+        query = `?width=${size.width}&height=${size.height}`;
       }
     } catch (err) {
       warn(`could not read image "${srcAbs}`);

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

@@ -1,5 +1,6 @@
 import { Callback } from '../../types';
 export declare function createWebSocket(): {
+    connect: (retry?: boolean) => void;
     send: (data: any) => void;
     addHandler(callback: Callback): void;
 } | null;

package/dist/runtime/sockets/factory.mjs

@@ -46,10 +46,17 @@ export function createWebSocket() {
       ws.send(JSON.stringify(data));
     }
   };
+  let retries = 0;
+  const url = useRuntimeConfig().public.sockets?.wsUrl;
   const connect = (retry = false) => {
     if (retry) {
-      logger.log("WS reconnecting..");
-      setTimeout(connect, 1e3);
+      retries++;
+      if (retries < 5) {
+        logger.log("Reconnecting...");
+        setTimeout(connect, 1e3);
+      } else {
+        logger.warn("Giving up!");
+      }
       return;
     }
     if (ws) {
@@ -59,10 +66,9 @@ export function createWebSocket() {
       }
       ws = void 0;
     }
-    const url = useRuntimeConfig().public.sockets?.wsUrl;
     if (url) {
       const wsUrl = `${url}ws`;
-      logger.log(`Running on ${wsUrl}`);
+      logger.log(`WS connect to ${wsUrl}`);
       ws = new WebSocket(wsUrl);
       ws.onopen = onOpen;
       ws.onmessage = onMessage;
@@ -74,6 +80,7 @@ export function createWebSocket() {
     connect();
   }
   return {
+    connect,
     send,
     addHandler(callback) {
       if (typeof callback === "function") {

package/package.json

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