Merge pull request #3 from 0gust1/feat/add_more_config_options

Feat/add more config options

Author: lzinga

README.md

@@ -1,15 +1,18 @@
 # mdsvex-enhanced-images
 [![NPM Downloads](https://img.shields.io/npm/dt/%40lzinga%2Fmdsvex-enhanced-images)](https://www.npmjs.com/package/@lzinga/mdsvex-enhanced-images)
 
-Allows you to use relative urls to images from the markdown file while also using the enhanced:img library from @sveltejs/enhanced-img.
+Allows you to: 
+- use relative urls to images from the markdown file while also using the enhanced:img library from @sveltejs/enhanced-img.
+- add css classes and extra attributes to images in markdown
+- add imagetools directives to images in markdown
 
-Thanks to https://github.com/mattjennings/mdsvex-relative-images as I used it as a base for this. It could probably be a lot more dynamic and allow custom configurations, but for now. This is all I needed. If you have a recommended change please do a pull request.
+Thanks to https://github.com/mattjennings/mdsvex-relative-images for the inspiration.
 
+## Usage
 
-# Usage
 Install the package
 ```
-npm i @lzinga/mdsvex-enhanced-images
+npm install --save-dev mdsvex-enhanced-images
 ```
 
 Configure the package in your mdsvex config.
@@ -22,7 +25,24 @@ const config = {
 	preprocess: [
 		mdsvex({
 			extensions: ['.md'],
-			remarkPlugins: [enhancedImage]
+			remarkPlugins: [[
+				enhancedImage,
+				{
+					// Optional: attributes to add to **all** `img` tags
+					attributes: {
+						fetchpriority: "auto", // browser's default
+						loading: "eager", // browser's default
+						decoding: "auto", // browser's default
+						class: "test-decoration test-shadow" // add classes to all images
+					},
+					// Optional: imagetools directives to add to **all** `img` tags
+					// see https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#format
+					imagetoolsDirectives:{
+						tint: "rgba(10,33,127)",
+						blur: 10,
+					}
+				}
+			]]
 		})
 	],
 	kit: {
@@ -44,7 +64,22 @@ Now you can add images like
 ![Image no space, lib folder](../lib/images/img.png)
 ```
 
+You can also individually add css classes and extra attribute to images:
+
+```markdown
+### Image with css classes:
+![Image no space, lib folder](../lib/images/img.png?class=my-class1;my-class2)
+
+### Image with more attributes (here, loading=lazy):
+![Image no space, lib folder](../lib/images/img.png?loading=lazy)
+
+### Image with imagetools directives
+
+![Image no space, lib folder](../lib/images/img.png?rotate=90)
+```
+
 and in the page the images get replaced with the component like so.
+
 ```html
 <enhanced:img src={importedImage} alt="Image With Space Local Folder"></enhanced:img>
 ```

index.js

@@ -1,29 +1,43 @@
-import { visit } from 'unist-util-visit';
+import { visit } from "unist-util-visit";
+import { processAttributesAndConfig } from "./utils.js";
 
 const RE_SCRIPT_START =
   /<script(?:\s+?[a-zA-z]+(=(?:["']){0,1}[a-zA-Z0-9]+(?:["']){0,1}){0,1})*\s*?>/;
 const RE_SRC = /src\s*=\s*"(.+?)"/;
 
-export default function enhancedImage() {  
+export default function enhancedImage(options = {}) {
   return function transformer(tree) {
     let scripts = "";
-    visit(tree, 'image', (node) => {
-      if(node.url.startsWith("."))
-      {
+    visit(tree, "image", (node) => {
+      if (node.url.startsWith(".")) {
+        // Process the attributes and config
+        const {
+          combinedClassesAttrStr,
+          combinedAttributesStr,
+          combinedDirectivesUrlParams,
+        } = processAttributesAndConfig(node.url, options);
+
+        // Now, clean possible search params from the node.url
+        // They've been processed and are now in the result of processAttributesAndConfig call
+        node.url = node.url.split("?")[0];
+
         // Generate a unique identifier for the import
         const importName = `_img${Math.random().toString(36).substr(2, 9)}`;
 
         // Create the import statement
-        const importStatement = `import ${importName} from '${decodeURIComponent(node.url)}?enhanced';\n`;
-        scripts += `${importStatement}`
+        const importStatement = `import ${importName} from '${decodeURIComponent(
+          node.url
+        )}?enhanced${combinedDirectivesUrlParams}';\n`;
+        scripts += `${importStatement}`;
 
         // Create the image component
-        const imageComponent = `<enhanced:img src={${importName}} alt="${node.alt || ''}"></enhanced:img>`;
-        
+        const imageComponent = `<enhanced:img src={${importName}} alt="${
+          node.alt ?? ""
+        }" ${combinedClassesAttrStr} ${combinedAttributesStr}></enhanced:img>`;
+
         // Replace the node with the import and component
-        node.type = 'html';
+        node.type = "html";
         node.value = imageComponent;
-
       }
     });
 
@@ -42,9 +56,6 @@ export default function enhancedImage() {
         type: "html",
         value: `<script>\n${scripts}</script>`,
       });
-    } 
-
-
-
-  }
-}
+    }
+  };
+}